diff --git a/web/_css/style.css b/web/_css/style.css
index 5e4b73fb..e01c57cf 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -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;
@@ -1096,4 +1157,4 @@ h2#abouth2 {
#bitcoinNotice {
color: #AAA;
margin-top: 7px;
-}
\ No newline at end of file
+}
diff --git a/web/_img/place-indexed-2-3.png b/web/_img/place-indexed-2-3.png
deleted file mode 100644
index 41667a7b..00000000
Binary files a/web/_img/place-indexed-2-3.png and /dev/null differ
diff --git a/web/_img/place-indexed-3.png b/web/_img/place-indexed-3.png
deleted file mode 100644
index 33623fff..00000000
Binary files a/web/_img/place-indexed-3.png and /dev/null differ
diff --git a/web/_img/place-indexed-4.png b/web/_img/place-indexed-4.png
deleted file mode 100644
index c0a431f7..00000000
Binary files a/web/_img/place-indexed-4.png and /dev/null differ
diff --git a/web/_img/place-indexed-5.png b/web/_img/place-indexed-5.png
deleted file mode 100644
index 203b0bb5..00000000
Binary files a/web/_img/place-indexed-5.png and /dev/null differ
diff --git a/web/_img/place-indexed-seemingly-good.png b/web/_img/place-indexed-seemingly-good.png
deleted file mode 100644
index f70aa017..00000000
Binary files a/web/_img/place-indexed-seemingly-good.png and /dev/null differ
diff --git a/web/_img/place-indexed.png b/web/_img/place-indexed.png
deleted file mode 100644
index c11ff2e2..00000000
Binary files a/web/_img/place-indexed.png and /dev/null differ
diff --git a/web/_img/place-indexed.png.old b/web/_img/place-indexed.png.old
deleted file mode 100644
index b1511268..00000000
Binary files a/web/_img/place-indexed.png.old and /dev/null differ
diff --git a/web/_img/place.png b/web/_img/place.png
deleted file mode 100644
index c1731eae..00000000
Binary files a/web/_img/place.png and /dev/null differ
diff --git a/web/_img/place/1648822500.png b/web/_img/place/1648822500.png
new file mode 100644
index 00000000..e043bbc1
Binary files /dev/null and b/web/_img/place/1648822500.png differ
diff --git a/web/_img/place/1648847036.png b/web/_img/place/1648847036.png
new file mode 100644
index 00000000..f8eefd4b
Binary files /dev/null and b/web/_img/place/1648847036.png differ
diff --git a/web/_img/place/1648870452.png b/web/_img/place/1648870452.png
new file mode 100644
index 00000000..4f83f6ca
Binary files /dev/null and b/web/_img/place/1648870452.png differ
diff --git a/web/_img/place/1648893666.png b/web/_img/place/1648893666.png
new file mode 100644
index 00000000..465be2e7
Binary files /dev/null and b/web/_img/place/1648893666.png differ
diff --git a/web/_img/place/1648917500.png b/web/_img/place/1648917500.png
new file mode 100644
index 00000000..ec452fd7
Binary files /dev/null and b/web/_img/place/1648917500.png differ
diff --git a/web/_img/place/1648942113.png b/web/_img/place/1648942113.png
new file mode 100644
index 00000000..cced2f4c
Binary files /dev/null and b/web/_img/place/1648942113.png differ
diff --git a/web/_img/place/1648956234.png b/web/_img/place/1648956234.png
new file mode 100644
index 00000000..4a93e7d0
Binary files /dev/null and b/web/_img/place/1648956234.png differ
diff --git a/web/_img/place/1648968061.png b/web/_img/place/1648968061.png
new file mode 100644
index 00000000..31352393
Binary files /dev/null and b/web/_img/place/1648968061.png differ
diff --git a/web/_img/place/1648979987.png b/web/_img/place/1648979987.png
new file mode 100644
index 00000000..12d855e5
Binary files /dev/null and b/web/_img/place/1648979987.png differ
diff --git a/web/_img/place/1648992274.png b/web/_img/place/1648992274.png
new file mode 100644
index 00000000..ff533748
Binary files /dev/null and b/web/_img/place/1648992274.png differ
diff --git a/web/_img/place/1649012915.png b/web/_img/place/1649012915.png
new file mode 100644
index 00000000..26a9396c
Binary files /dev/null and b/web/_img/place/1649012915.png differ
diff --git a/web/_img/place/1649037182.png b/web/_img/place/1649037182.png
new file mode 100644
index 00000000..9fe0582d
Binary files /dev/null and b/web/_img/place/1649037182.png differ
diff --git a/web/_img/place/1649060793.png b/web/_img/place/1649060793.png
new file mode 100644
index 00000000..1df805cf
Binary files /dev/null and b/web/_img/place/1649060793.png differ
diff --git a/web/_img/place/1649084741.png b/web/_img/place/1649084741.png
new file mode 100644
index 00000000..78f4251a
Binary files /dev/null and b/web/_img/place/1649084741.png differ
diff --git a/web/_img/place-indexed-final-place.png b/web/_img/place/final.png
similarity index 100%
rename from web/_img/place-indexed-final-place.png
rename to web/_img/place/final.png
diff --git a/web/_js/main.js b/web/_js/main.js
index 15c4f628..f899c849 100644
--- a/web/_js/main.js
+++ b/web/_js/main.js
@@ -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);
diff --git a/web/_js/time.js b/web/_js/time.js
new file mode 100644
index 00000000..81a40295
--- /dev/null
+++ b/web/_js/time.js
@@ -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)
+}
\ No newline at end of file
diff --git a/web/_js/view.js b/web/_js/view.js
index 91344f2c..818831ad 100644
--- a/web/_js/view.js
+++ b/web/_js/view.js
@@ -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;
diff --git a/web/index.html b/web/index.html
index b1ea596e..eeb462f9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -99,7 +99,8 @@ The 2022 /r/place Atlas
-
+
+
![Canvas of /r/place in the state of when the experiment was concluded.]()
@@ -138,7 +139,19 @@ The 2022 /r/place Atlas
-
+
-
+