mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-11-18 07:54:12 +01:00
287 lines
17 KiB
HTML
287 lines
17 KiB
HTML
<!--
|
|
========================================================================
|
|
The 2022 /r/place Atlas
|
|
|
|
An Atlas of Reddit's 2022 /r/place, with information to each
|
|
artwork of the canvas provided by the community.
|
|
|
|
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
|
|
Copyright (c) 2022 r/placeAtlas2 contributors
|
|
|
|
Licensed under the GNU Affero General Public License Version 3
|
|
https://place-atlas.stefanocoding.me/license.txt
|
|
========================================================================
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>The 2022 /r/place Atlas</title>
|
|
<meta name="description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
|
|
<meta name="author" content="Roland Rytz (2022 by Stefano#7366)">
|
|
<meta name="application-name" content="The /r/place Atlas 2022">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<meta property="og:title" content="The 2022 /r/place Atlas">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://place-atlas.stefanocoding.me/">
|
|
<meta property="og:image" content="https://place-atlas.stefanocoding.me/_img/logo.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image:width" content="512">
|
|
<meta property="og:image:height" content="512">
|
|
<meta property="og:image:alt" content="The /r/place Atlas logo">
|
|
<meta property="og:description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
|
|
|
|
<!-- <meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss"/> -->
|
|
|
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no"> <!-- user-scalable=no -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="color-scheme" content="dark">
|
|
|
|
<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
|
|
<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
|
|
<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
|
|
|
|
<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
|
|
<link rel="manifest" href="./manifest.webmanifest">
|
|
|
|
<script type="text/javascript" src="./_js/favicon.js" defer></script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "The 2022 /r/place Atlas",
|
|
"url": "http://place-atlas.stefanocoding.me/",
|
|
"author": {
|
|
"@type": "Person",
|
|
"@id": "#Codixer",
|
|
"name": "Stefano Haagmans",
|
|
"email": "stefano@stefanocoding.me",
|
|
"url": "https://stefanocoding.me/",
|
|
"sameAs": "https://stefanocoding.me/",
|
|
"familyName": "Haagmans",
|
|
"givenName": "Stefano",
|
|
"alternateName": "Codixer",
|
|
"gender": "Male",
|
|
"nationality": "Netherlands"
|
|
},
|
|
"copyrightHolder": { "@id": "#RolandRytz" },
|
|
"copyrightYear": 2017,
|
|
"license": "https://place-atlas.stefanocoding.me/license.txt",
|
|
"inLanguage": "English",
|
|
"isAccessibleForFree": true,
|
|
"keywords": "reddit, /r/place",
|
|
"thumbnailUrl": "http://place-atlas.stefanocoding.me/_img/logo.png",
|
|
"logo": "http://place-atlas.stefanocoding.me/_img/logo.png",
|
|
"description": "An interactive map of Reddit's /r/place, with information to each artwork of the canvas. Originally created by Roland Rytz (2022 by Stefano#7366)..",
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<header>
|
|
<a href="./">
|
|
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
|
|
<!-- If you wonder why I shrink the image in html,
|
|
it's because this is the image that will be used
|
|
by reddit and the like as the thumbnail for the site.
|
|
The original is only 5.9kB, which wouldn't get much
|
|
smaller by reducing the actualy size. -->
|
|
<h1 id="title">The 2022 /r/place Atlas</h1>
|
|
</a>
|
|
|
|
</header>
|
|
|
|
<div id="container">
|
|
<div id="loading">
|
|
<div id="loadingContent">
|
|
<div></div><br>
|
|
<span> Hang on...</span>
|
|
<noscript>
|
|
<p>Sorry, you need JavaScript to view the Atlas.</p>
|
|
<p>All JavaScript on this site is licensed under either the MIT or AGPL license.</p>
|
|
<p><a href="https://github.com/placeAtlas/atlas">See the source on GitHub</a></p>
|
|
</noscript>
|
|
</div>
|
|
</div>
|
|
<canvas id="linesCanvas"></canvas>
|
|
<div id="innerContainer">
|
|
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
|
|
|
|
<img id="image" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
|
</div>
|
|
</div>
|
|
|
|
<div id="entriesListContainer">
|
|
<nav id="entriesListNav">
|
|
<a id="aboutLink" href="./about.html" class="button">About</a>
|
|
<a id="drawLink" href="./index.html?mode=draw" class="button">Draw</a>
|
|
<div class="dropdown button" id="viewModes">
|
|
<span>Modes</span>
|
|
<span class="buffer"></span>
|
|
<div class="dropdown-content">
|
|
<a href="./">Normal</a>
|
|
<a href="./?mode=explore">Explore</a>
|
|
<a href="./?mode=overlap">Overlap</a>
|
|
<a href="./?mode=diff" class="show-only-on-dev">With Diff</a>
|
|
<a href="./?mode=diffonly" class="show-only-on-dev">Diff Only</a>
|
|
</div>
|
|
</div>
|
|
<a title="Discord" href="https://discord.gg/pJkm23b2nA" class="button small" id="entriesListDiscord">
|
|
<img class="Discord" alt="Discord Logo" src="./_img/discord.svg">
|
|
</a>
|
|
<button title="Donate!" id="entriesListDonate" class="small">
|
|
<img alt="Donate" src="data:image/svg+xml;utf8,%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20width%3D%2263.97776%22%0A%20%20%20height%3D%2263.985764%22%0A%20%20%20id%3D%22svg2%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20/%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata7%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C/dc%3Atitle%3E%0A%20%20%20%20%20%20%3C/cc%3AWork%3E%0A%20%20%20%20%3C/rdf%3ARDF%3E%0A%20%20%3C/metadata%3E%0A%20%20%3Cg%0A%20%20%20%20%20transform%3D%22translate%28-239.44047%2C-363.22698%29%22%0A%20%20%20%20%20id%3D%22layer1%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20290.96332%2C384.19885%20c%20-0.59424%2C-6.27896%20-6.01049%2C-8.39164%20-12.8518%2C-9.00126%20l%200.0128%2C-8.70824%20-5.30062%2C-0.007%20-0.0123%2C8.47872%20c%20-1.39346%2C-0.002%20-2.81788%2C0.0235%20-4.23308%2C0.0496%20l%200.0135%2C-8.53485%20-5.29778%2C-0.008%20-0.0149%2C8.70575%20c%20-1.14765%2C0.0217%20-2.27469%2C0.0414%20-3.3736%2C0.0405%20l%20-5.3e-4%2C-0.0271%20-7.31086%2C-0.0134%20-0.007%2C5.66124%20c%200%2C0%203.91442%2C-0.0688%203.84925%2C0.003%202.14703%2C0.004%202.84397%2C1.25133%203.04562%2C2.32724%20l%20-0.0143%2C9.92049%20c%200.14815%2C0.001%200.34143%2C0.008%200.56022%2C0.0378%20-0.17659%2C-3e-5%20-0.36561%2C-0.002%20-0.55995%2C-1.2e-4%20l%20-0.022%2C13.89765%20c%20-0.0952%2C0.67556%20-0.49402%2C1.75232%20-1.99407%2C1.75269%200.0678%2C0.0602%20-3.85316%2C-0.007%20-3.85316%2C-0.007%20l%20-1.06259%2C6.32874%206.89801%2C0.01%20c%201.28367%2C0.003%202.54669%2C0.0271%203.78665%2C0.0368%20l%20-0.0109%2C8.80736%205.29494%2C0.009%200.0128%2C-8.71427%20c%201.45379%2C0.0322%202.86073%2C0.0459%204.23429%2C0.0466%20l%20-0.0152%2C8.67412%205.30061%2C0.007%200.0147%2C-8.79173%20c%208.91219%2C-0.49805%2015.1527%2C-2.73385%2015.93965%2C-11.10113%200.63533%2C-6.73752%20-2.53%2C-9.74895%20-7.5868%2C-10.97123%203.07554%2C-1.56033%205.00104%2C-4.31475%204.55848%2C-8.90928%20z%20m%20-7.44387%2C18.82121%20c%20-0.007%2C6.58182%20-11.27551%2C5.81643%20-14.86789%2C5.81449%20l%200.0187%2C-11.66923%20c%203.59343%2C0.006%2014.85983%2C-1.01023%2014.84919%2C5.85474%20z%20m%20-2.44078%2C-16.46738%20c%20-0.0106%2C5.98811%20-9.40836%2C5.27536%20-12.40064%2C5.27116%20l%200.016%2C-10.58348%20c%202.99229%2C0.004%2012.39322%2C-0.93337%2012.38461%2C5.31232%20z%22%0A%20%20%20%20%20%20%20id%3D%22path3010%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffffff%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E">
|
|
</button>
|
|
</nav>
|
|
<div id="entriesListControls">
|
|
<input autofocus id="searchList" type="text" placeholder="Search...">
|
|
<span id="atlasSize"></span>
|
|
<div id="sortContainer"><label>Sort:</label>
|
|
<select id="sort">
|
|
<option value="shuffle">Random</option>
|
|
<option value="relevant" id="relevantOption" disabled>Relevant</option>
|
|
<option value="alphaAsc">↓ Alphabetical</option>
|
|
<option value="alphaDesc">↑ Alphabetical</option>
|
|
<option value="newest">Newest</option>
|
|
<option value="oldest">Oldest</option>
|
|
<option value="area">Area</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="entriesList">
|
|
|
|
</div>
|
|
</div>
|
|
<div id="entriesListBackground"></div>
|
|
|
|
<button id="hideListButton" aria-label:="Show List Button"></button>
|
|
|
|
<div id="coordsWrapper" class="collapsed">
|
|
|
|
<div id="coords">
|
|
<p id="coords_p">0, 0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bottomBar">
|
|
<div id="zoomControls">
|
|
<button title="Zoom In" id="zoomInButton"></button>
|
|
<button title="Reset View" id="zoomResetButton"></button>
|
|
<button title="Zoom Out" id="zoomOutButton"></button>
|
|
</div>
|
|
<div id="timeControls">
|
|
<div id="timeControlsTooltip"><p>Time control slider</p></div>
|
|
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
|
|
</div>
|
|
<div id="author">
|
|
<p>Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="author">Place Atlas</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. Site powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="drawControlsContainer">
|
|
<a id="drawBackButton" class="button" href="./">< Back to the Atlas</a>
|
|
<div id="drawControls">
|
|
<div>
|
|
<button id="undoButton" disabled>Undo</button>
|
|
<button disabled id="redoButton">Redo</button>
|
|
</div>
|
|
<button disabled id="finishButton">Finish (Enter)</button>
|
|
<button id="resetButton">Reset</button>
|
|
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
|
|
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
|
|
</label>
|
|
<div id="objectInfo">
|
|
<label for="nameField">Name</label>
|
|
<input id="nameField" type="text" value="" placeholder="A short title">
|
|
<label for="descriptionField">Description</label>
|
|
<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
|
|
<label for="websiteField">Website</label>
|
|
<input id="websiteField" type="text" value="" placeholder="https://example.com">
|
|
<label for="subredditField">Subreddit</label>
|
|
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
|
<div id="infoButtons">
|
|
<button id="cancelButton">Cancel</button>
|
|
<button id="exportButton">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="hint">
|
|
<p>You can suggest new entries to the Atlas for art that isn't mapped yet.</p>
|
|
<p>Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this reddit post</a> for instructions.</p>
|
|
<p>Click anywhere on the image to start drawing a shape.
|
|
When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
|
|
<p>You can then add more information about your object.</p>
|
|
<div style="background-color:#7289DA; padding:20px">
|
|
<p><b>Need Help?</b></p>
|
|
<b>You can ask for help on <a href="https://discord.gg/pJkm23b2nA">our Discord server</a>!</b><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="hidden" id="closeObjectsListButton"></button>
|
|
<div id="objectsList">
|
|
</div>
|
|
|
|
<div id="exportOverlay" class="overlay">
|
|
<div id="exportWindow">
|
|
<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
|
|
<div style="display:flex; flex-direction:column;align-items:center">
|
|
<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
|
|
</div>
|
|
<hr style="border-bottom: solid black 1px"/>
|
|
<i>or...</i>
|
|
<p>Please copy the text below and submit it as a
|
|
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
|
|
<p>Don't forget to flair it with the "New Entry" tag.</p>
|
|
<p>We will then check it and add it to the atlas.</p>
|
|
<textarea cols="20" rows="5" id="exportString"></textarea>
|
|
<div style="display:flex; flex-direction:column;align-items:center">
|
|
<button id="exportCloseButton">Done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="donateOverlay" class="overlay">
|
|
<div id="donateWindow">
|
|
<h2>Donation Links</h2>
|
|
<p>Current 2022 Atlas Maintainers:</p>
|
|
<a class="button" target="_blank" href="https://paypal.me/placeAtlas/5">
|
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>
|
|
PayPal
|
|
</a>
|
|
<a class="button" target="_blank" href="https://www.patreon.com/placeAtlas">
|
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Patreon</title><path fill="white" d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z"/></svg>
|
|
Patreon
|
|
</a>
|
|
<a class="button" target="_blank" href="https://ko-fi.com/placeatlas">
|
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ko-fi</title><path fill="white" d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
|
|
Ko-Fi
|
|
</a>
|
|
<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
|
|
<a class="button" target="_blank" href="https://paypal.me/draemmli">
|
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>
|
|
PayPal
|
|
</a>
|
|
<br>
|
|
<button id="closeDonateButton">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="./_js/time.js"></script>
|
|
<script type="text/javascript" src="./_js/infoblock.js"></script>
|
|
<script type="text/javascript" src="./_js/pointInPolygon.js"></script>
|
|
<script type="text/javascript" src="./_js/atlas.js"></script>
|
|
<script type="text/javascript" src="./_js/view.js"></script>
|
|
<script type="text/javascript" src="./_js/overlap.js"></script>
|
|
<script type="text/javascript" src="./_js/draw.js"></script>
|
|
<script type="text/javascript" src="./_js/main.js"></script>
|
|
<!--
|
|
<script type="text/javascript" src="./_js/stats.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="./_js/minified.js"></script>
|
|
-->
|
|
</body>
|
|
</html>
|