Merge branch 'master' into reddit
1
.gitignore
vendored
|
@ -12,3 +12,4 @@ allCharacters.txt
|
|||
combined.js
|
||||
*.DS_Store
|
||||
.vscode/
|
||||
_img/place/
|
|
@ -648,16 +648,101 @@ #exportOverlay {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
#bottomBar {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 370px;
|
||||
width: 90px;
|
||||
display: flex;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.listHidden #zoomControls {
|
||||
left: 10px;
|
||||
div:not(.listHidden) > #bottomBar {
|
||||
left: 370px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
div:not(.listHidden) > #bottomBar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.listHidden #author {
|
||||
flex: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#bottomBar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#timeControls {
|
||||
min-width: calc(100vw - 390px) !important;
|
||||
}
|
||||
|
||||
#author {
|
||||
flex: 1;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
#timeControls {
|
||||
flex: 1;
|
||||
background-color: #555;
|
||||
border: 1px #000 solid;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#timeControls input {
|
||||
height: 100%;
|
||||
background: #555;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 10px;
|
||||
height: 25px;
|
||||
background: #d3d3d3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
appearance: none;
|
||||
width: 10px;
|
||||
height: 25px;
|
||||
background: #d3d3d3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#author {
|
||||
background-color: #555;
|
||||
border: 1px #000 solid;
|
||||
padding: 3px;
|
||||
font-size: 12px;
|
||||
z-index: 1100;
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#author p {
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
width: 90px;
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
|
@ -715,8 +800,8 @@ @media (max-width: 500px) {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
div:not(.listHidden) > #zoomControls {
|
||||
display: none;
|
||||
div:not(.listHidden) > #bottomBar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div:not(.listHidden) > button#hideListButton {
|
||||
|
@ -736,18 +821,6 @@ @media (max-width: 500px) {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
div:not(.listHidden) > #author {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#author {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
#entriesListContainer > nav > a#drawLink {
|
||||
display: none;
|
||||
|
@ -947,18 +1020,6 @@ #entriesList .object {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
#author {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background-color: #555;
|
||||
border: 1px #000 solid;
|
||||
padding: 3px;
|
||||
font-size: 12px;
|
||||
z-index: 1100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#aboutContainer {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
|
|
Before Width: | Height: | Size: 182 KiB |
Before Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 4 MiB |
Before Width: | Height: | Size: 4.1 MiB |
Before Width: | Height: | Size: 1 MiB |
Before Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 457 KiB |
BIN
web/_img/place/1648822500.png
Normal file
After Width: | Height: | Size: 513 KiB |
BIN
web/_img/place/1648847036.png
Normal file
After Width: | Height: | Size: 441 KiB |
BIN
web/_img/place/1648870452.png
Normal file
After Width: | Height: | Size: 563 KiB |
BIN
web/_img/place/1648893666.png
Normal file
After Width: | Height: | Size: 523 KiB |
BIN
web/_img/place/1648917500.png
Normal file
After Width: | Height: | Size: 506 KiB |
BIN
web/_img/place/1648942113.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
web/_img/place/1648956234.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1648968061.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1648979987.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1648992274.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1649012915.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
web/_img/place/1649037182.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
BIN
web/_img/place/1649060793.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
BIN
web/_img/place/1649084741.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
Before Width: | Height: | Size: 953 KiB After Width: | Height: | Size: 953 KiB |
|
@ -92,6 +92,8 @@ async function init(){
|
|||
// a must be equal to b
|
||||
return 0;
|
||||
});
|
||||
//TEMP FOR TIME TRAVEL
|
||||
atlasBackup = atlas;
|
||||
|
||||
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
|
112
web/_js/time.js
Normal file
|
@ -0,0 +1,112 @@
|
|||
const timeConfig = [
|
||||
{
|
||||
timestamp: 1648822500,
|
||||
url: "/_img/place/1648822500.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648847036,
|
||||
url: "/_img/place/1648847036.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648870452,
|
||||
url: "/_img/place/1648870452.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648893666,
|
||||
url: "/_img/place/1648893666.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648917500,
|
||||
url: "/_img/place/1648917500.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648942113,
|
||||
url: "/_img/place/1648942113.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648956234,
|
||||
url: "/_img/place/1648956234.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648968061,
|
||||
url: "/_img/place/1648968061.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1648979987,
|
||||
url: "/_img/place/1648979987.png",
|
||||
image: null
|
||||
},
|
||||
|
||||
{
|
||||
timestamp: 1648992274,
|
||||
url: "/_img/place/1648992274.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1649012915,
|
||||
url: "/_img/place/1649012915.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1649037182,
|
||||
url: "/_img/place/1649037182.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1649060793,
|
||||
url: "/_img/place/1649060793.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1649084741,
|
||||
url: "/_img/place/1649084741.png",
|
||||
image: null
|
||||
},
|
||||
{
|
||||
timestamp: 1649113199,
|
||||
url: "/_img/place/final.png",
|
||||
image: null,
|
||||
showAtlas: true,
|
||||
},
|
||||
];
|
||||
|
||||
let slider = document.getElementById("timeControlsSlider");
|
||||
let image = document.getElementById("image");
|
||||
|
||||
let timeCallback = (a) => {};
|
||||
let atlasBackup = [];
|
||||
|
||||
// SETUP
|
||||
slider.max = timeConfig.length;
|
||||
slider.value = timeConfig.length;
|
||||
updateTime(timeConfig.length)
|
||||
|
||||
slider.oninput = (event) => {
|
||||
updateTime(parseInt(event.target.value))
|
||||
};
|
||||
|
||||
async function updateTime(index) {
|
||||
let configObject = timeConfig[index-1];
|
||||
if (!configObject.image) {
|
||||
console.log("fetching");
|
||||
let fetchResult = await fetch(configObject.url);
|
||||
let imageBlob = await fetchResult.blob();
|
||||
configObject.image = URL.createObjectURL(imageBlob);
|
||||
}
|
||||
image.src = configObject.image;
|
||||
// TEMP ATLAS ONLY ON LAST TIMESTAMP
|
||||
if (configObject.showAtlas) {
|
||||
atlas = atlasBackup
|
||||
} else {
|
||||
atlas = []
|
||||
}
|
||||
timeCallback(atlas)
|
||||
}
|
|
@ -155,6 +155,11 @@ function initView(){
|
|||
|
||||
buildObjectsList(null, null);
|
||||
|
||||
timeCallback = (tempAtlas) => {
|
||||
renderBackground(tempAtlas);
|
||||
render();
|
||||
}
|
||||
|
||||
// parse linked atlas entry id from link hash
|
||||
/*if (window.location.hash.substring(3)){
|
||||
zoom = 4;
|
||||
|
@ -388,6 +393,7 @@ function initView(){
|
|||
return (
|
||||
value.name.toLowerCase().indexOf(filter) !== -1
|
||||
|| value.description.toLowerCase().indexOf(filter) !== -1
|
||||
|| value.subreddit && value.subreddit.toLowerCase().indexOf(filter) !== -1
|
||||
);
|
||||
});
|
||||
document.getElementById("atlasSize").innerHTML = "Found "+sortedAtlas.length+" entries.";
|
||||
|
|
|
@ -99,7 +99,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<canvas id="linesCanvas"></canvas>
|
||||
<div id="innerContainer">
|
||||
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
|
||||
<img id="image" src="./_img/place-indexed-final-place.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
||||
|
||||
<img id="image" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -138,7 +139,19 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
|
||||
<button id="hideListButton"></button>
|
||||
|
||||
<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="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">
|
||||
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
|
||||
</div>
|
||||
<div id="author">
|
||||
<p>Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. This site is 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" href="./">< Back to the Atlas</a>
|
||||
|
@ -222,10 +235,8 @@ <h2>Donation Links</h2>
|
|||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="author">
|
||||
Code forked by <a href="https://place-atlas.stefanocoding.me/" target="_blank" rel="author">Stefano Haagmans</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="./_js/time.js?version=1.0.3"></script>
|
||||
<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
|
||||
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
|
||||
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>
|
||||
|
|