Some adjustments

- testing on a real small iPhone showed that the screen was too small to display any upgrades. Changed the ratio to 2:3 on mobile.
- since clipboard might be limited by privacy testing, and reading from clipboard does not work in Firefox, changed export/import to show a window with a textbox instead.
- since the default zoom seemed to crop out the parent node, adjusted zoom option values.

css/main.css

@@ -8,6 +8,7 @@ body.dark {
     --color-upgrade-hovered: hsla(264, 16%, 57%, 1);
     --color-info: #3E6990FF;
     --color-settings-background: #213a50;
+    --color-modal-container: #00000060;
 }
 
 * {
@@ -85,9 +86,12 @@ button:disabled {
     z-index: 11;
     background-color: var(--color-info);
 }
+#settings-toggle:hover {
+    filter: brightness(1.3);
+}
 #settings-toggle img {
-    width: 32px;
-    height: 32px;
+    width: 2em;
+    height: 2em;
 }
 #settings-container {
     position: absolute;
@@ -101,7 +105,7 @@ button:disabled {
 .settings-title {
     display: block;
     text-align: left;
-    font-size: x-large;
+    font-size: 2em;
 }
 .settings {
     display: flex;
@@ -116,4 +120,20 @@ button:disabled {
 button.settings {
     width: 100%;
     justify-content: center;
+}
+.button-row {
+    display: flex;
+    align-items: row;
+}
+.button-row > * {
+    flex-basis: 0;
+    flex-grow: 1;
+    margin-left: .25em;
+    margin-right: .25em;
+}
+.button-row > *:first-child {
+    margin-left: 0;
+}
+.button-row > *:last-child {
+    margin-right: 0;
 }

css/mobile.css

@@ -15,7 +15,7 @@
 
     .main-container {
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
+        grid-template-rows: 2fr 3fr;
     }
 
     #layer_info .upgrade::before {

css/modal.css

@@ -0,0 +1,64 @@
+.modal-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 20;
+    padding: 3em;
+    background: var(--color-modal-container);
+    display: grid;
+}
+.modal {
+    background: var(--color-settings-background);
+    border-radius: 1em;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.modal > * {
+    margin-top: .25em;
+    margin-bottom: .25em;
+}
+.modal > *:first-child {
+    margin-top: 0;
+}
+.modal > *:last-child {
+    margin-bottom: 0;
+}
+.modal > textarea {
+    flex-grow: 1;
+    align-self: stretch;
+
+    user-select: text;
+    -ms-user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+
+    background-color: var(--color-background);
+
+    resize: none;
+
+    border: 0;
+
+    text-align: start;
+    font-size: 0.65em;
+}
+.modal-close {
+    position: absolute;
+    right: 3em;
+    top: 3em;
+    width: 2.4em;
+    height: 2.4em;
+    background-color: var(--color-info);
+    border-radius: 1em;
+    padding: 0;
+}
+.modal-close:hover {
+    background-color: var(--color-info);
+    filter: brightness(1.3);
+}
+.modal-close > p {
+    font-size: 1.5em;
+}

css/text.css

@@ -15,5 +15,4 @@
     font-size: 0.8em;
     margin-top: 1em;
     text-align: left;
-    line-height: 2em;
 }

index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="css/text.css">
         <link rel="stylesheet" href="css/layer.css">
         <link rel="stylesheet" href="css/tree.css">
+        <link rel="stylesheet" href="css/modal.css">
         <link rel="stylesheet" href="css/mobile.css">
         <script src="js/break_eternity.min.js" defer></script>
         <script src="js/panzoom.min.js" defer></script>
@@ -35,8 +36,10 @@
                 <span class="settings">Focus zoom modifier:<input type="range" min="-3" max="3" value="0" class="slider" id="zoomModifier"></span>
                 <span class="settings">Animations:<button id="animations-toggle">Enabled</button></span>
                 <span class="settings">Focus layer on:<button id="singleclick-toggle">Double Click</button></span>
-                <button id="export" class="settings">Export to clipboard</button>
-                <button id="import" class="settings">Import from clipboard</button>
+                <span class='button-row'>
+                    <button id="export" class="settings" onclick="openModal('export_modal'); document.getElementById('export_save').value = btoa(JSON.stringify(player.save()))">Export</button>
+                    <button id="import" class="settings" onclick="openModal('import_modal'); document.getElementById('import_save').value = ''">Import</button>
+                </span>
             </span>
             <div class="main-container">
                 <div id="tree-container">
@@ -64,6 +67,27 @@
             <span class="credits">
                 Want a game with human-generated layers? Check out <a href="http://semenar.ru/matter-dim-test" target="_blank">Matter Dimensions</a> by Semenar or <a href="https://thepaperpilot.org/gamedevtree" target="_blank">Game Dev Tree</a> by thepaperpilot.
             </span>
+            <div class="modal-container" id="export_modal" style="display: none">
+                <div class="modal">
+                    <p>The following textbox contains your save:</p>
+                    <textarea id="export_save" readonly></textarea>
+                    <button onclick="exportToClipboard()">Copy to clipboard</button>
+                </div>
+                <button class="modal-close" onclick="closeModal()">
+                    <p>&times;</p>
+                </button>
+            </div>
+            <div class="modal-container" id="import_modal" style="display: none">
+                <div class="modal">
+                    <p>Paste your save in the following textbox:</p>
+                    <textarea id="import_save"></textarea>
+                    <button onclick="importFromClipboard()">Paste from clipboard</button>
+                    <button onclick="importSave()">Import</button>
+                </div>
+                <button class="modal-close" onclick="closeModal()">
+                    <p>&times;</p>
+                </button>
+            </div>
         </div>
     </body>
 </html>

js/classes/layer.js

@@ -36,6 +36,10 @@ class Layer {
 
             this.depth = parent_layer.depth + 1;
 
+            this.coord = 2 * parent_layer.coord;
+            if (!this.is_ngminus) this.coord += 1;
+            this.coord = this.coord % (2 ** 32);
+
             if (this.is_ngminus) this.color = mixColors(parent_layer.color, [72, 159, 181]);
             else this.color = mixColors(parent_layer.color, [214, 40, 40]);
         }
@@ -45,6 +49,7 @@ class Layer {
             this.name = "Original";
             this.points_name = "";
             this.depth = 0;
+            this.coord = 0;
             this.color = [19, 138, 54];
         }
 
@@ -398,6 +403,7 @@ class Layer {
         this.name = data[6];
         this.points_name = data[7];
         this.depth = data[8];
+        this.coord = 0;
         this.color = data[9];
 
         this.upgrades = {};
@@ -412,6 +418,10 @@ class Layer {
         if (this.parent_layer != undefined) {
             if (this.is_ngminus) this.parent_layer.child_left = this;
             else this.parent_layer.child_right = this;
+
+            this.coord = 2 * this.parent_layer.coord;
+            if (!this.is_ngminus) this.coord += 1;
+            this.coord = this.coord % (2 ** 32);
         }
 
         this.nodeEl.style.backgroundColor = formAsRGB(this.color);

js/classes/player.js

@@ -4,7 +4,7 @@ class Player {
         // Explicitly don't reset settings in the reset() function
         this.animations = true;
         this.singleclick = false;
-        this.zoomModifier = 1;
+        this.zoomModifier = 0.5;
     }
 
     reset() {
@@ -49,11 +49,12 @@ class Player {
         this.current_layer = this.layers[data[2]];
         this.animations = data.length > 3 ? data[3] : true;
         this.singleclick = data.length > 4 ? data[4] : false;
-        this.zoomModifier = data.length > 5 ? data[5] : 1;
+        this.zoomModifier = data.length > 5 ? data[5] : 0.5;
         document.getElementById("animations-toggle").innerText = this.animations ? "Enabled" : "Disabled";
         document.getElementById("singleclick-toggle").innerText = this.singleclick ? "Single Click" : "Double Click";
-        document.getElementById("zoomModifier").value =
-            Object.entries(zoomOptions).find(([key, value]) => value === this.zoomModifier)[0];
+        if (Object.entries(zoomOptions).find(([key, value]) => value === this.zoomModifier) !== undefined)
+            document.getElementById("zoomModifier").value =
+                Object.entries(zoomOptions).find(([key, value]) => value === this.zoomModifier)[0];
 
         requestAnimationFrame(() => {
             this.current_layer.selectLayer(true, true);

js/helpers.js

@@ -49,4 +49,14 @@ function properPrecision(number, digits) {
 
 function choose(list) {
     return list[Math.min(Math.floor(Math.random() * list.length), list.length - 1)];
+}
+
+function openModal(id) {
+    closeModal();
+    document.getElementById(id).style.display = "";
+}
+function closeModal() {
+    for (let element of document.getElementsByClassName('modal-container')) {
+        element.style.display = "none";
+    }
 }

js/main.js

@@ -28,12 +28,12 @@ window.addEventListener("resize", () => player.current_layer.selectLayer(true, t
 
 var settingsContainer = document.getElementById("settings-container");
 var zoomOptions = {
-    "-3": .25,
-    "-2": .333,
-    "-1": .5,
-    "0": 1,
-    "1": 2,
-    "2": 3,
+    "-3": .15,
+    "-2": .2,
+    "-1": .3,
+    "0": .5,
+    "1": 1,
+    "2": 2,
     "3": 4
 }
 document.getElementById("zoomModifier").addEventListener("input", e => {
@@ -51,8 +51,8 @@ document.getElementById("singleclick-toggle").addEventListener("click", () => {
     player.singleclick = !player.singleclick;
     document.getElementById("singleclick-toggle").innerText = player.singleclick ? "Single Click" : "Double Click";
 });
-document.getElementById("export").addEventListener("click", export_save);
-document.getElementById("import").addEventListener("click", import_save);
+//document.getElementById("export").addEventListener("click", export_save);
+//document.getElementById("import").addEventListener("click", import_save);
 
 document.addEventListener('keydown', e => {
     if ((e.code === 'KeyW' || e.code === 'ArrowUp') && player.current_layer.parent_layer !== undefined) {

js/saveload.js

@@ -14,10 +14,32 @@ function hard_reset() {
     player.current_layer.selectLayer();
 }
 
+// those two are not used
 async function import_save() {
-	player.load(JSON.parse(atob(await navigator.clipboard.readText())));
+    player.load(JSON.parse(atob(await navigator.clipboard.readText())));
 }
 
 function export_save() {
 	navigator.clipboard.writeText(btoa(JSON.stringify(player.save())));
+}
+
+//
+
+function exportToClipboard() {
+    navigator.clipboard.writeText(document.getElementById('export_save').value);
+}
+
+function importFromClipboard() {
+    navigator.clipboard.readText().then(clipText => document.getElementById('import_save').value = clipText);
+}
+
+function importSave() {
+    let backup = player.save();
+    try {
+        player.load(JSON.parse(atob(document.getElementById('import_save').value)));
+        closeModal();
+    }
+    catch (e) {
+        player.load(backup);
+    }
 }