feat: add heavy weight spaceship

src/pages/index.astro

@@ -3,7 +3,10 @@ import { Title } from '../components/header';
 import '../styles/gol.css';
 ---
 
+<div id="title-and-gol">
 	<Title />
 	<div id="board" class="board"></div>
+</div>
+
 <button id="startButton">Start Game</button>
 <script src="../scripts/gol.js"></script>

src/scripts/gol.js

@@ -1,21 +1,31 @@
 const boardElement = document.getElementById('board');
-const boardSize = 20;
+const boardSize = 10;
 const grid = [];
 let intervalId;
 
+const cells = ['30', '20', '51', '01', '62', '63', '03', '64', '54', '44', '34', '24', '14']
+
+const heavyWeightSpaceshipCell = (x, y) => {
+    const coor = `${x}${y}`
+    return cells.includes(coor)
+}
+
 function initializeBoard() {
     for (let y = 0; y < boardSize; y++) {
         let row = [];
         for (let x = 0; x < boardSize; x++) {
             let cell = document.createElement('div');
             cell.classList.add('cell');
-            cell.addEventListener('click', () => {
-                cell.classList.toggle('alive');
-                grid[y][x] = grid[y][x] ? 0 : 1;
-            });
+            if (heavyWeightSpaceshipCell(x, y)) {
+                cell.classList.add('alive');
+                boardElement.appendChild(cell);
+                row.push(1)
+            } else {
                 boardElement.appendChild(cell);
                 row.push(0);
             }
+
+        }
         grid.push(row);
     }
 }
@@ -40,7 +50,7 @@ function computeNextGeneration() {
         cellElement.animate([
             { backgroundColor: change.state ? 'black' : 'white' }
         ], {
-            duration: 300,
+            duration: 50,
             fill: 'forwards'
         });
     });
@@ -51,20 +61,19 @@ function countAliveNeighbors(y, x) {
     for (let yOffset = -1; yOffset <= 1; yOffset++) {
         for (let xOffset = -1; xOffset <= 1; xOffset++) {
             if (yOffset === 0 && xOffset === 0) continue;
-            let newY = y + yOffset;
-            let newX = x + xOffset;
-            if (newY >= 0 && newY < boardSize && newX >= 0 && newX < boardSize) {
+            // Wrap around the edges
+            let newY = (y + yOffset + boardSize) % boardSize;
+            let newX = (x + xOffset + boardSize) % boardSize;
             count += grid[newY][newX];
         }
     }
-    }
     return count;
 }
 
 function startGame() {
     console.log('starting')
     if (intervalId) clearInterval(intervalId);
-    intervalId = setInterval(computeNextGeneration, 100);
+    intervalId = setInterval(computeNextGeneration, 500);
 }
 
 const startButton = document.getElementById('startButton')

src/styles/gol.css

@@ -1,13 +1,20 @@
 .board {
     display: grid;
-    grid-template-columns: repeat(20, 20px);
-    grid-gap: 1px;
+    grid-template-columns: repeat(10, 5px);
+    row-gap: 1px;
+    column-gap: 1px;
 }
 .cell {
-    width: 20px;
-    height: 20px;
+    width: 5px;
+    height: 5px;
     background-color: white;
 }
 .alive {
     background-color: black;
 }
+
+#title-and-gol {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}