Shrink board; Randomize nums; Refine css

andHW · Feb 1, 2024 · b0767d8 · b0767d8
1 parent 605f2e2
commit b0767d8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/main.css b/main.css
@@ -19,11 +19,14 @@ body {
 
 #screen {
     display: grid;
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(7, 1fr);
     transform: rotate(-45deg);
 }
 
 .square {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 60px;
     height: 60px;
     background-color: white;
@@ -52,12 +55,7 @@ body {
     color: cyan;
     opacity: 0.6;
     text-shadow: 0 0 2px #000;
-    transform: rotate(45deg);
     font-size: 1.5em;
-    /* TODO: Need a better way to center the text... */
-    text-align: center;
-    position: relative;
-    bottom: 25px;
-    right: 18px;
-    user-select: none;
+    position: absolute;
+    transform: rotate(45deg) translateY(100%);
 }
diff --git a/main.js b/main.js
@@ -1,7 +1,15 @@
+const N = 7 * 7;
+let nums = Array.from({ length: N }, (_, i) => i + 1);
+for (let i = 0; i < N; i++) {
+    let j = Math.floor(Math.random() * N);
+    [nums[i], nums[j]] = [nums[j], nums[i]];
+}
+
+
 document.addEventListener("DOMContentLoaded", function () {
     let screen = document.getElementById("screen");
 
-    for (let i = 0; i < 64; i++) {
+    for (let i = 0; i < 7 * 7; i++) {
         let squareDiv = document.createElement("div");
         squareDiv.classList.add("square");
 
@@ -10,7 +18,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
         let textDiv = document.createElement("div");
         textDiv.classList.add("text");
-        textDiv.textContent = i;
+        textDiv.textContent = nums[i];
 
         squareDiv.appendChild(picDiv);
         squareDiv.appendChild(textDiv);