GitMeGet.github.io/games.html at master · GitMeGet/GitMeGet.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <form onsubmit="return chooseGame(simple_flag.checked, num_players.value, category.value, btnType);" class="my-form">
        <label for="simple_flag">Simple to setup</label>
        <input id="simple_flag" type="checkbox" checked=true><br>
        <label for="num_players">Number of players</label>
        <input id="num_players" type="number" required><br>
        <label for="category">Category</label>
        <select id="category">
            <option value="ANY">ANY</option>
            <option value="BOARD GAMES">BOARD GAMES</option>
            <option value="CARD GAMES">CARD GAMES</option>
            <option value="DRAWING GAMES">DRAWING GAMES</option>
            <option value="INCREMENTAL GAMES">INCREMENTAL GAMES</option>
            <option value="PUZZLES">PUZZLES</option>
            <option value="ACTION">ACTION</option>
            <option value="SOCIAL">SOCIAL</option>
            <option value="SOLO GAMES">SOLO GAMES</option>
            <option value="WORD GAMES">WORD GAMES</option>
            <option value="GAME COLLECTION">GAME COLLECTION</option>
            <option value="KIDS GAMES">KIDS GAMES</option>
            <option value="POINT AND CLICK">POINT AND CLICK</option>
        </select>
        <input onclick="btnType=this.value;" type="submit" value="Random" />
        <input onclick="btnType=this.value;" type="submit" value="All" />
    </form>

    <br>
    <div id="Textbox"></div>
    <a href="#" id="URLbox"></a>

    <br><br>
    <table>
    <!-- here goes our data! -->
    </table>
</body>

<!-- Load JSON data -->
<script type="text/javascript" src="game_data.json"></script>

<script>
function randomInt(min, max) { // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function displayText(text) {
  var x = document.getElementById("Textbox");
  x.innerHTML = text;
}

function displayGame(game) {
  var x = document.getElementById("Textbox");
  x.innerHTML = game.name;
  var link = document.getElementById("URLbox");
  link.setAttribute("href", game.url);
  link.innerHTML = "Link";
}

function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
      let cell = row.insertCell();
      let text = document.createTextNode(element['name']);
      cell.appendChild(text);
      cell = row.insertCell();
      cell.innerHTML=  '<a href=' + element.url + '>Link</a>';

  }
}

function chooseGame(simple_flag, num_players, category, selection) {
    var filteredGames = data.filter(function (game) {
      return game.simple == simple_flag &&
             game.min_players <= num_players &&
             game.max_players >= num_players;
    });
    if (category !== "ANY"){
        filteredGames = data.filter(function (game) {
          return game.cat === category;
        });
    }

    if (filteredGames.length == 0) {
        displayText("Sorry, no games were found");
    } else {
        if (selection === "Random") {
            var randomGameIdx = randomInt(0, filteredGames.length);
            var chosenGame = filteredGames[randomGameIdx];
            displayGame(chosenGame);
            // TODO: hide table
        } else if (selection === "All") {
            let table = document.querySelector("table");
            // delete previous entries
            table.innerHTML = "";

            // only display name and url for each game
            var displayData = [];
            filteredGames.forEach(function (game, index) {
                var dict = {'name':game.name, url:game.url};
                displayData.push(dict);
            });
            generateTableHead(table, Object.keys(displayData[0]));
            generateTable(table, displayData);
            // TODO: hide textbox and url
        }
    }

    // prevent page from reloading
    return false;
}
</script>

</html>