Merge branch 'solution'

bd7298b6 · Will Billingsley · 61211b52 · 29fae6cf · bd7298b6 · bd7298b6
Commit bd7298b6 authored 6 years ago by Will Billingsley
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html>
  <title>Conway's Game of Life</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

+  <div class="container">
    <h1>Conway's Game of Life</h1>
-  <div id="game" style="font-family: monospace; cursor: pointer;">
-  </div>
+    <svg xmlns="http://www.w3.org/2000/svg" id="game" width="640" height="400"></svg>
    <div>
-      <button onclick="javascript: { gameOfLife.stepGame(); render(); }">Step</button>
+        <button class="btn btn-primary" onclick="javascript: { gameOfLife.stepGame(); render(); }">Step</button>
+    </div>
  </div>
-

  <script src="gameOfLife.js"></script>
  <script src="render.js"></script>
@@ -17,4 +18,6 @@
    render()
  </script>

+  <link rel="stylesheet" href="style.css" />
+
 </html>
\ No newline at end of file
--- a/render.js
+++ b/render.js
@@ -2,21 +2,29 @@

 function render() {

+    let xmlns = "http://www.w3.org/2000/svg"
+
+    let cellSize = 20
+
    let gameDiv = document.getElementById("game")
    gameDiv.innerHTML = ""

    for (let y = 0; y < gameOfLife.getH(); y++) {
-        let row = document.createElement("div")
+        let row = document.createElementNS(xmlns, "g")
        row.setAttribute("class", "gamerow")
        gameDiv.appendChild(row)

        for (let x = 0; x < gameOfLife.getW(); x++) {
-            let t = document.createElement("span")
+            
+            let t = document.createElementNS(xmlns, "rect")
+            t.setAttribute("x", x * cellSize)
+            t.setAttribute("y", y * cellSize)
+            t.setAttribute("width", cellSize)
+            t.setAttribute("height", cellSize)
+            t.classList.add("cell")

            if (gameOfLife.isAlive(x, y)) {
-                t.innerHTML = "#"
-            } else {
-                t.innerHTML = "."
+                t.classList.add("alive")
            }

            let handler = function(evt) {

--- a/style.css
+++ b/style.css
+.cell {
+  fill: #ddd;
+  stroke: #444;
+  cursor: pointer;
+}
+.cell:hover {
+  fill: #c4c4c4;
+}
+.cell.alive {
+  fill: #88f;
+}
+.cell.alive:hover {
+  fill: #5555ff;
+}
+
+/*# sourceMappingURL=style.css.map */
--- a/style.css.map
+++ b/style.css.map
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAIA;EACE,MAJY;EAKZ,QAJa;EAKb;;AAEA;EACE;;AAGF;EACE,MAdY;;AAgBd;EACE","file":"style.css"}
\ No newline at end of file
--- a/style.scss
+++ b/style.scss
+$primary-color: #88f;
+$empty-color: #ddd;
+$border-color: #444;
+
+.cell {
+  fill: $empty-color;
+  stroke: $border-color;
+  cursor: pointer;
+
+  &:hover {
+    fill: darken($empty-color, 10%);  
+  }
+
+  &.alive {
+    fill: $primary-color;
+  }
+  &.alive:hover {
+    fill: darken($primary-color, 10%);
+  }
+}
+