dynamic rescalzing

css/core.css

@@ -2,7 +2,7 @@
 
 body {
     font-family: "Ubuntu Mono";
-    padding: 10px;
+    padding: 0px;
     margin: 0;
     background: rgb(21, 21, 22);
     color: white;
@@ -59,7 +59,7 @@ div#header-title {
 }
 
 #header {
-    padding: 0 8px;
+    padding: 8px 16px;
     margin-bottom: 32px;
 }
 #header {
@@ -76,6 +76,7 @@ div#header-title {
     transform: translateX(-50%);
     width: var(--canvasWidth);
     display: flex;
+    overflow-x: auto;
     justify-content: space-evenly;
 }
 

index.html

@@ -60,38 +60,37 @@
     </div>
 
 
+    <span class='info'>
+        N/A
+    </span>
     <div id="game">
-        <span class='info'>
-            N/A
-        </span>
         <canvas id='main' style=""></canvas>
         <canvas id='alt' style='display: none;'></canvas> <!-- why -->
 
-
-        <div class='menu2'>
-            <section>
-                <button onclick="handler.noTick = !handler.noTick">Pause/Play</button>
-                <button onclick="openMods()">Mods</button>
-                <button onclick="save()">Save</button>
-                <button onclick="load()">Load</button>
-                <!-- <button onclick="upload()">Upload (TODO)</button> - HEY! Please add this. Prompt() for title, I dunno. For a site like this, I feel like allowing anonymous posting is a good idea. -->
-                <label for="tile-radius">Radius:</label>
-                <input type="range" min="1" max="20" oninput="canvas.radius = Number(this.value);"
-                    onmousedown="canvas.forceShowTilePlacement = true; canvas.radius = Number(this.value)"
-                    onmouseup="canvas.forceShowTilePlacement = false" /> <!-- TODO: automatically change range value -->
-
-                <button onclick="clearEverything()">Clear</button>
-                <!-- TODO: add clear function (i do not know how to do that) -->
-            </section>
-        </div>
-
-        <div class='menu tab-bar'>
-        </div>
-
-        <div class='buttons'>
-        </div>
-
     </div>
+    <div class='menu2'>
+        <section>
+            <button onclick="handler.noTick = !handler.noTick">Pause/Play</button>
+            <button onclick="openMods()">Mods</button>
+            <button onclick="save()">Save</button>
+            <button onclick="load()">Load</button>
+            <!-- <button onclick="upload()">Upload (TODO)</button> - HEY! Please add this. Prompt() for title, I dunno. For a site like this, I feel like allowing anonymous posting is a good idea. -->
+            <label for="tile-radius">Radius:</label>
+            <input type="range" min="1" max="20" oninput="canvas.radius = Number(this.value);"
+                onmousedown="canvas.forceShowTilePlacement = true; canvas.radius = Number(this.value)"
+                onmouseup="canvas.forceShowTilePlacement = false" /> <!-- TODO: automatically change range value -->
+
+            <button onclick="clearEverything()">Clear</button>
+            <!-- TODO: add clear function (i do not know how to do that) -->
+        </section>
+    </div>
+
+    <div class='menu tab-bar'>
+    </div>
+
+    <div class='buttons'>
+    </div>
+
     <!-- Core code -->
     <script src="js/tile.js"></script>
     <script src="js/event.js"></script>

js/core.js

@@ -83,12 +83,6 @@ Canvas.prototype.resize = function () {
     this.elem.width = this.width;
     this.elem.height = this.height;
     
-    if(document.querySelector("#game") !== null)
-        document.querySelector("#game").setAttribute("style", `
-            width: ${this.width * this.upscale}px;
-            height: ${this.height * this.upscale}px;
-        `);
-    
     this.render();
 }
 
@@ -221,7 +215,7 @@ Canvas.prototype.click = function () {
     this.firstY = this.pageY;
 }
 
-var canvas = new Canvas(240, 135, 4);
+var canvas = new Canvas(Math.floor(window.innerWidth / 4.5), Math.floor(window.innerHeight / 6.5), 4);
 var handler = new TickHandler(canvas);
 
 setInterval(() => {

js/tile.js

@@ -81,7 +81,7 @@ TileManager.prototype.loadSet = function (namespace, tiles) {
     this.row2.appendChild(elem2);
 
     elem.onclick = function (e) {
-        document.querySelectorAll("#game .selected-group").forEach(function (e) { e.classList.remove("selected-group") })
+        document.querySelectorAll(".selected-group").forEach(function (e) { e.classList.remove("selected-group") })
         e.target.classList.add("selected-group");
         elem2.classList.add("selected-group");
     }