d

2023-05-22 19:47:15 +03:00
parent a8031b790a
commit 7f4e8bd09e
1 changed files with 35 additions and 12 deletions
--- a/web/memory.html
+++ b/web/memory.html
@@ -5,6 +5,30 @@
  </head>
  <body>
  </body>
+  <script>
+    function memorySide() {
+      return 50
+    }
+
+    function memorySpace() {
+      return 20
+    }
+
+    function memoryGap() {
+      return memorySide() + memorySpace()
+    }
+
+    function memoryItemPositions(M) {
+      var pos = [];
+      for (var i = 0; i < M.itemsCount; i++) {
+        let row = Math.floor(i / 4)
+        let x = memoryGap() + (i - row * 4) * memoryGap()
+        let y = memoryGap() + row * memoryGap()
+        pos.push([x, y])
+      }
+      return pos
+    }
+  </script>
  <script>
    var items = []

@@ -17,18 +41,17 @@
    }

    // SectionGrid.
-    let side = Number(50)
-    let space = Number(20)
-    let gap = Number(side + space)
-    for (var id in items) {
-      var item = items[id]
-      let row = Math.floor(id / 4)
-      let x = gap + (id - row * 4) * gap
-      let y = gap + row * gap
-      item.style.left = `${x}px`
-      item.style.top = `${y}px`
-      item.style.width = `${side}px`
-      item.style.height = `${side}px`
+    var M = {
+      itemsCount: items.length
+    };
+    let positions = memoryItemPositions(M);
+    for (var id in positions) {
+      var p = positions[id]
+      var item = items[id];
+      item.style.left = `${p[0]}px`
+      item.style.top = `${p[1]}px`
+      item.style.width = `${memorySide()}px`
+      item.style.height = `${memorySide()}px`
      item.style.position = "absolute"
      item.style.background = "blue"
    }