Funorb- Hook up dynamic gamelist page with sort

services/m=funorb/data.json

@@ -6,7 +6,9 @@
     "forum": "https://forum.2009scape.org/viewtopic.php?t=383-age-of-war",
     "description": "Battle of the ages!",
     "warn": "Warning: This game is very LOUD",
-    "id": "ageofwar"
+    "id": "ageofwar",
+    "genres": ["sport", "strategy"],
+    "multiplayer": false
   },
   "bloonstd1": {
     "name": "Bloons TD 1",
@@ -14,7 +16,9 @@
     "swf": "./swfs/bloonstd1.swf",
     "description": "Use monkeys to stop the balloons from escaping!",
     "forum": "https://forum.2009scape.org/viewtopic.php?t=384-bloons-tower-defense-1",
-    "id": "bloonstd1"
+    "id": "bloonstd1",
+    "genres": ["puzzle", "strategy"],
+    "multiplayer": false
   },
   "bloonstd2": {
     "name": "Bloons TD 2",
@@ -22,7 +26,9 @@
     "swf": "./swfs/bloonstd2.swf",
     "description": "Use monkeys to stop the balloons from escaping, version 2!",
     "forum": "https://forum.2009scape.org/viewtopic.php?t=391-bloons-tower-defense-2",
-    "id": "bloonstd2"
+    "id": "bloonstd2",
+    "genres": ["puzzle", "strategy"],
+    "multiplayer": false
   },
   "bloonstd3": {
     "name": "Bloons TD 3",
@@ -30,7 +36,9 @@
     "swf": "./swfs/bloonstd3.swf",
     "description": "Use monkeys to stop the balloons from escaping, version 3!",
     "forum": "https://forum.2009scape.org/viewtopic.php?t=436-bloons-tower-defense-3",
-    "id": "bloonstd3"
+    "id": "bloonstd3",
+    "genres": ["puzzle", "strategy"],
+    "multiplayer": false
   },
   "flashsonic": {
     "name": "Flash Sonic",
@@ -38,7 +46,9 @@
     "swf": "./swfs/flashsonic.swf",
     "description": "Run through the levels as Sonic the Hedgehog!",
     "forum": "https://forum.2009scape.org/viewtopic.php?t=385-flash-sonic",
-    "id": "flashsonic"
+    "id": "flashsonic",
+    "genres": ["action"],
+    "multiplayer": false
   },
   "learntofly2": {
     "name": "Learn to Fly 2",
@@ -46,7 +56,9 @@
     "swf": "./swfs/learntofly2.swf",
     "description": "Help a poor penguin learn to fly!",
     "forum": "https://forum.2009scape.org/viewtopic.php?t=437-learn-to-fly-2",
-    "id": "learntofly2"
+    "id": "learntofly2",
+    "genres": ["sport"],
+    "multiplayer": false
   },
   "worldshardestgame": {
     "name": "World's Hardest Game",
@@ -54,6 +66,8 @@
     "swf": "./swfs/worldshardestgame.swf",
     "description": "A game that's actually hard!",
     "forum": "https://forum.2009scape.org/viewtopic.php?t=386-world-s-hardest-game",
-    "id": "worldshardestgame"
+    "id": "worldshardestgame",
+    "genres": ["puzzle"],
+    "multiplayer": false
   }
 }

services/m=funorb/gamelist.html

@@ -106,144 +106,36 @@
   <script type="text/javascript">
     var current_game;
 
-    function genre(id_in, next_sibling_id_in) {
-      this.id = id_in;
-      this.next_sibling_id = next_sibling_id_in;
-    }
-
-    // Build these arrays on load. (NB: The loops are ws loops)
-
-    multi = [
-      0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1,
-      1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1,
-    ];
-    single = [
-      1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,
-      1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0,
-    ];
-    genres = [
-      [new genre(1, 2)],
-      [new genre(5, 6)],
-      [new genre(5, 6)],
-      [new genre(5, 6)],
-      [new genre(1, 2)],
-      [new genre(1, 2)],
-      [new genre(5, 6)],
-      [new genre(3, 4)],
-      [new genre(2, 3)],
-      [new genre(2, 3)],
-      [new genre(3, 4)],
-      [new genre(5, 6)],
-      [new genre(1, 2)],
-      [new genre(2, 3)],
-      [new genre(2, 3)],
-      [new genre(4, 5)],
-      [new genre(3, 4)],
-      [new genre(4, 5)],
-      [new genre(2, 3)],
-      [new genre(1, 2)],
-      [new genre(2, 3)],
-      [new genre(5, 6)],
-      [new genre(2, 3)],
-      [new genre(4, 5)],
-      [new genre(5, 6)],
-      [new genre(3, 4)],
-      [new genre(3, 4)],
-      [new genre(5, 6)],
-      [new genre(3, 4)],
-      [new genre(1, 2)],
-      [new genre(5, 6)],
-      [new genre(5, 6)],
-      [new genre(2, 3)],
-      [new genre(2, 3)],
-      [new genre(1, 2)],
-      [new genre(1, 2)],
-      [new genre(1, 2)],
-      [new genre(2, 3)],
-      [new genre(1, 2)],
-      [new genre(5, 6)],
-      [new genre(1, 2)],
-      [new genre(1, 2)],
-      [new genre(5, 6)],
-      [new genre(5, 6)],
-    ];
-
-    // Genre name -> ID lookup table to convert the values of the drop downs when JS is on
-
-    var genre_table = {
-      action: 1,
-
-      puzzle: 2,
-
-      shooter: 3,
-
-      sport: 4,
-
-      strategy: 5,
-
-      mmo: 6,
-
-      other: 7,
-
-      0: 0,
-    };
-
-    //Filter values: (id, next_sibling_id) pair for the filter genre and an array of pairs for all other genres (indexed by id):
-    var filter_genre = new genre(0, 8);
-
-    var all_genres = new Array(7 * 2);
-
-    all_genres[1] = new genre(1, 2);
-
-    all_genres[2] = new genre(2, 3);
-
-    all_genres[3] = new genre(3, 4);
-
-    all_genres[4] = new genre(4, 5);
-
-    all_genres[5] = new genre(5, 6);
-
-    all_genres[6] = new genre(6, 7);
-
-    all_genres[7] = new genre(7, 8);
-
-    /* massively limited - only works for elements with a single class */
     function getElementsByClass(tagName, tagClass) {
-      var allelems = document.getElementsByTagName(tagName);
+      // get all elements of type tagName with class tagClass
-      var elems = new Array(0);
+      var elements = document.getElementsByTagName(tagName);
-      for (i = 0; i < allelems.length; i++) {
+      var returnElements = [];
-        if (allelems[i].className == tagClass) {
+      for (var i = 0; i < elements.length; i++) {
-          elems.push(allelems[i]);
+        if (elements[i].classList.contains(tagClass)) {
+          returnElements.push(elements[i]);
         }
       }
-      return elems;
+      return returnElements;
     }
 
     function updateFilters() {
       var gameboxes = getElementsByClass("div", "gamelistentry");
       var playerMode = document.getElementById("playerBox").value;
-      var genreMode = genre_table[document.getElementById("genreBox").value];
+      var genreMode = document.getElementById("genreBox").value;
       var nogames = true;
       for (i = 0; i < gameboxes.length; i++) {
         if (
-          (playerMode == 1 && !single[i]) ||
+          (playerMode == 1 && !gameboxes[i].classList.contains("singleplayer")) ||
-          (playerMode == 2 && !multi[i])
+          (playerMode == 2 && !gameboxes[i].classList.contains("multiplayer"))
         ) {
           gameboxes[i].style.display = "none";
-        } else if (genreMode == 0) {
+        } else if (genreMode == 0) { 
+          // no genre selected
           gameboxes[i].style.display = "inline";
           nogames = false;
         } else {
-          var display = false;
+          // check if gameboxes[i].classList.contains(genreMode)
-          for (j = 0; j < genres[i].length; j++) {
+          if (gameboxes[i].classList.contains(genreMode)) {
-            if (
-              genres[i][j].id >= all_genres[genreMode].id &&
-              genres[i][j].id < all_genres[genreMode].next_sibling_id
-            ) {
-              display = true;
-            }
-          }
-          if (display) {
             gameboxes[i].style.display = "inline";
             nogames = false;
           } else {
@@ -450,6 +342,20 @@
                                         gameListEntry.classList.add(
                                           "gamelistentry"
                                         );
+                                        for (genre in gameData.genres) {
+                                          gameListEntry.classList.add(
+                                            gameData.genres[genre]
+                                          );
+                                        }
+                                        if (gameData.multiplayer) {
+                                          gameListEntry.classList.add(
+                                            "multiplayer"
+                                          );
+                                        } else {
+                                          gameListEntry.classList.add(
+                                            "singleplayer"
+                                          );
+                                        }
                                         const gameImage = document.createElement(
                                           "div"
                                         );