Added tags to each story

satiate.css

@@ -61,6 +61,14 @@ a:hover {
   color: #eee;
 }
 
+#tags-header {
+  font-size: 36px;
+}
+
+.tag {
+  font-size: 24px;
+}
+
 .modal {
   position: fixed;
   z-index: 1;

satiate.html

@@ -35,6 +35,8 @@
         </select>
       </div>
       <button id="start-button">Start</button>
+      <div id="tags-header">Tags</div>
+      <div id="tags"></div>
     </div>
     <div class="hidden-scene" id="game">
       <div id="info-area">

satiate.js

@@ -114,6 +114,21 @@ function initStart() {
     options[story.id] = story;
   })
 
+  select.addEventListener("change", event => {
+    const holder = document.querySelector("#tags");
+
+    holder.innerHTML = "";
+
+    const tags = stories.filter(s => s.id == [event.target.value])[0].tags;
+
+    tags.forEach(tag => {
+      const div = document.createElement("div");
+      div.textContent = tag;
+      div.classList.add("tag");
+      holder.appendChild(div);
+    })
+  });
+
   const start = document.querySelector("#start-button");
 
   start.addEventListener("click", (event) => {

stories/demo.js

@@ -1,6 +1,9 @@
 stories.push({
   "id": "demo",
   "name": "Tech Demo",
+  "tags": [
+    "Memes"
+  ],
   "intro": {
     "start": "Home",
     "setup": state => {

stories/fen-snack.js

@@ -1,6 +1,10 @@
 stories.push({
   id: "fen-snack",
   name: "Fen's Food",
+  tags: [
+    "Prey",
+    "Digestion"
+  ],
   sounds: [
     "sfx/digested-test.ogg",
     "loop/fen-stomach.ogg",