Started work on a Spawn Progress Tracker

game.html

@@ -16,6 +16,7 @@
       <a href="./game.html">Game</a>
       <a href="./rules.html">Rules</a>
       <a href="./questions.html">Questions</a>
+      <a href="./spawn.html">Spawn</a>
     </nav>
     <canvas id="myCanvas" width="640" height="480"
       style="border: 1px solid gray; width: 640px; height: 480px"></canvas>

index.html

@@ -12,6 +12,7 @@
       <a href="./game.html">Game</a>
       <a href="./rules.html">Rules</a>
       <a href="./questions.html">Questions</a>
+      <a href="./spawn.html">Spawn</a>
     </nav>
     <h1>The Civilization Screen</h1>
     <p>Welcome to the civilization screen.</p>

questions.html

@@ -15,6 +15,7 @@
       <a href="./game.html">Game</a>
       <a href="./rules.html">Rules</a>
       <a href="./questions.html">Questions</a>
+      <a href="./spawn.html">Spawn</a>
     </nav>
 
     <h1>Our Little Interview</h1>
@@ -27,7 +28,7 @@
         <li><a href="#how">The How Questions</a></li>
       </ul>
     </nav>
-    
+
     <h2 id="who">The Who Questions</h2>
     <p>
       Welcome to the server! It seems like you're interested

resources/spawn/buildings.json

@@ -0,0 +1,22 @@
+{
+  "buildings": {
+    "rule-house":{
+      "id": "rule-house",
+      "name": "Rule House",
+      "use": "This building is where the rule signs are located. The signs should be accessible to read and should be the most important part of the room.",
+      "designed": true,
+      "started": true,
+      "completed": true,
+      "populated": true
+    },
+    "marketplace":{
+      "id": "marketplace",
+      "name": "Marketplace",
+      "use": "Here players can gather around, buying, selling, and trading materials. There should be plenty of space for players to set up their own shops, stands and stores",
+      "designed": false,
+      "started": false,
+      "completed": false,
+      "populated": false
+    }
+  }
+}

resources/spawn/progress-table.js

@@ -0,0 +1,64 @@
+window.onload = function(){
+  function addRow(building){
+    $nameElement = $("<td></td>")
+    $nameElement.attr("id", building.id + "-progress.name")
+    $nameElement.append(building.name);
+
+    $useElement = $("<td></td>");
+    $useElement.attr("id", building.id + "-progress.use");
+    $useElement.append(building.use)
+
+    $designedElement = $("<td></td>");
+    $designedElement.attr("id", building.id + "-progress.designed");
+    $designedElement.addClass("checkboxCell");
+    $designedElement.append(
+        $("<input>")
+          .attr("type", "checkbox")
+          .attr("id", building.id + ".designed?")
+          .attr("checked", building.designed))f;
+
+    $startedElement = $("<td></td>");
+    $startedElement.attr("id", building.id + "-progress.stated");
+    $startedElement.addClass("checkboxCell");
+    $startedElement.append(
+        $("<input>")
+          .attr("type", "checkbox")
+          .attr("id", building.id + ".started?")
+          .attr("checked", building.started));
+
+    $completedElement = $("<td></td>");
+    $completedElement.attr("id", building.id + "-progress.completed");
+    $completedElement.addClass("checkboxCell");
+    $completedElement.append(
+      $("<input>")
+        .attr("type", "checkbox")
+        .attr("id", building.id + ".completed?")
+        .attr("checked", building.completed));
+
+    $populatedElement = $("<td></td>");
+    $populatedElement.attr("id", building.id + "-progress.populated");
+    $populatedElement.addClass("checkboxCell");
+    $populatedElement.append(
+      $("<input>")
+        .attr("type", "checkbox")
+        .attr("id", building.id + ".populated?")
+        .attr("checked", building.populated));
+
+
+    $outputRow = $("<tr></tr>");
+    $outputRow.attr("id", building.id + "-progress");
+    $outputRow.append($nameElement);
+    $outputRow.append($useElement);
+    $outputRow.append($designedElement);
+    $outputRow.append($startedElement);
+    $outputRow.append($completedElement);
+    $outputRow.append($populatedElement);
+    return $outputRow;
+  }
+  console.info("loading");
+  $.getJSON("./resources/spawn/buildings.json", "", function(file){
+    for(const buildingName in file.buildings){
+      $("#progress-table").append(addRow(file.buildings[buildingName]));
+    }
+  });
+}

resources/spawn/spawn.css

@@ -0,0 +1,18 @@
+#progress-table{
+  font-family: "Calibri";
+  margin: 10px;
+  align: center;
+}
+#progress-table th{
+  border-bottom: solid gray;
+  border-width: thin;
+}
+#progress-table td{
+  border-bottom: solid lightgray;
+  border-width: thin;
+  max-width: 500px;
+  padding: 5px;
+}
+#progress-table .checkboxCell {
+  text-align: center;
+}

rules.html

@@ -12,6 +12,7 @@
       <a href="./game.html">Game</a>
       <a href="./rules.html">Rules</a>
       <a href="./questions.html">Questions</a>
+      <a href="./spawn.html">Spawn</a>
     </nav>
 
     <h1>The Rules</h1>

sandbox.html

@@ -14,6 +14,7 @@
       <a href="./game.html">Game</a>
       <a href="./rules.html">Rules</a>
       <a href="./questions.html">Questions</a>
+      <a href="./spawn.html">Spawn</a>
     </nav>
 
     <h1>Developer's Sandbox</h1>

spawn.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Spawn Progress</title>
+    <script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
+    <script type="text/javascript" src="./resources/spawn/progress-table.js"></script>
+    <link rel="stylesheet" href="./resources/spawn/spawn.css">
+  </head>
+  <body>
+    <h1>Spawn Progress Tracker</h1>
+
+    <p style="color:red">NOTE: THIS TRACKER IS UNFINISHED AN WILL NOT SAVE DATA, USE AT OWN RISK</p>
+
+    <nav>
+      <a href="./index.html">Main</a>
+      <a href="./sandbox.html">Sandbox</a>
+      <a href="./game.html">Game</a>
+      <a href="./rules.html">Rules</a>
+      <a href="./questions.html">Questions</a>
+      <a href="./spawn.html">Spawn</a>
+    </nav>
+
+    <table id="progress-table">
+      <tr>
+        <th>Name</td>
+        <th>Use</td>
+        <th>Designed</td>
+        <th>Started</td>
+        <th>Completed</td>
+        <th>Populated</td>
+      </tr>
+    </table>
+  </body>
+</html>