merge commit

app.js

@@ -9,15 +9,18 @@ const port = 8080
 
 app.set('view engine', 'hbs')
 
-app.use(bodyParser.json())    // to support JSON-encoded bodies
-app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
+// To support JSON-encoded bodies.
+app.use(bodyParser.json())
+
+// To support URL-encoded bodies.
+app.use(bodyParser.urlencoded({
     extended: true
 }))
 
 app.use(express.static('public'))
 app.use(express.static('games'))
 
-// use routes defined in routes file
+// Use routes defined in routes file.
 app.use('/', router)
 
 app.listen(port, () => console.log(`Arcade server listening on port ${port}!`))

controllers/MainController.js

@@ -1,39 +1,7 @@
 let request = require('request')
-let fs = require('fs');
-let http = require('http');
+// let fs = require('fs');
+// let http = require('http');
 
 let controller = {}
 
-/* index: function (req, res) {
-    res.render('index', {})
-},
-howToPlay: function (req, res) {
-
-    // get game title from url params
-    let gameTitle = req.param('game')
-    let response = res
-
-
-
-    // make get request to manifest.json
-    // Todo: make url less hardcoded
-    request('http://localhost:8080/' + gameTitle + '/manifest.json', { json: true }, (err, res, body) => {
-        let errors = ''
-
-        if (err) {
-            errors += err
-            return console.log(err)
-        }
-
-        let manifest = body
-
-        if (!typeof manifest == "object") {
-            errors += "Manifest is empty or not found"
-        }
-
-        // render template with data from manifest
-        response.render('buttons', { manifest, errors })
-    })
-}
-} */
 module.exports = controller

controllers/MenuController.js

@@ -1,6 +1,5 @@
 let request = require('request')
 let fs = require('fs');
-let http = require('http');
 
 let controller = {
 
@@ -14,17 +13,16 @@ let controller = {
 
     fetchManifest: async function (url) {
 
-        // create new promise to wait for
+        // Create new promise to wait for.
         let promise = new Promise((resolve, reject) => {
             request({
                 url: url + 'manifest.json',
                 json: true
             }, (error, response, body) => {
                 if (!error && response.statusCode === 200) {
 
-                    // resolve promise when we have result from our fetch
+                    // Resolve promise when we have result from our fetch.
                     resolve(body)
-
                 }
             })
         })
@@ -33,23 +31,22 @@ let controller = {
     },
 
     loadGames: function () {
-        return JSON.parse(fs.readFileSync('games.json'));
+        return JSON.parse(fs.readFileSync('data/games.json'));
     },
 
     index: function (req, res) {
 
         let games = controller.loadGames()
 
-        // Loop through games and add an instruction url 
+        // Loop through games and add an instruction url.
         games.forEach(game => {
             game.instruction_url = '/' + controller.encodeGameTitle(game.title) + "/instructions"
         })
 
-        // Render our template with our games array
+        // Render our template with our games array.
         res.render('index', {
             games: games
         })
-
     },
 
     gameInstructions: function (req, res) {
@@ -58,30 +55,30 @@ let controller = {
 
         controller.loadGames().some(game => {
 
-            // look if url game title is found in our game list
+            // Look if url game title is found in our game list.
             if (req.params.encodedGameTitle == controller.encodeGameTitle(game.title)) {
 
                 selectedGame = game
 
-                // Get the details from the manifest file in the game directory
+                // Get the details from the manifest file in the game directory.
                 controller.fetchManifest(game.url).then((manifest) => {
                     game.manifest = manifest
 
-                    // Render template with game details
+                    // Render template with game details.
                     res.render('instructions', { game: selectedGame })
                 })
 
-                // Break the loop, we have found our game
+                // Break the loop, we have found our game.
                 return true
             } else {
-                // Continue the loop
+                // Continue the loop.
                 return false
             }
         })
 
-        // Only used when game is not found
+        // Only used when game is not found.
         if (selectedGame == null) {
-            res.end("item not found")
+            res.end("Item not found")
         }
     }
 }

data/games.json

@@ -0,0 +1,10 @@
+[
+    {
+        "title": "Team 1",
+        "url": "https://grunkhead.github.io/testgame/"
+    },
+    {
+        "title": "Stoute eend",
+        "url": "https://grunkhead.github.io/Duckhunt/"
+    }
+]

public/css/instructions.css

@@ -3,11 +3,11 @@
     color: white;
     font-family: sans-serif;
 }
-body{
+body {
     margin: 0;
 }
 
-header{
+header {
     margin: 0;
     background: rgb(93, 138, 168);
     //box-shadow: 0px 2px 2px 0px black;

public/css/style.css

@@ -8,11 +8,11 @@ html, body {
   box-sizing: border-box;
 }
 
-header{
+header {
   padding: 30px 0px 10px 0px;
   text-align: center;
 }
-header h1{
+header h1 {
   font-size: 3em;
 
 }
@@ -22,11 +22,11 @@ header h1{
   border: 4px solid rgb(93, 138, 168);
 }
 
-.first-menu span{
+.first-menu span {
   padding: 30px;
 }
 
-.second-menu span{
+.second-menu span {
   padding: 10px;
 }
 
@@ -85,7 +85,7 @@ header h1{
   font-family: 'Press Start 2P', cursive;
 }
 
-.selection{
+.selection {
   border: 4px solid #FFF!important;
 }
 
@@ -101,8 +101,6 @@ header h1{
 animation: AnimationName 10s ease infinite;
 }
 
-
-
 @-webkit-keyframes AnimationName {
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}

public/js/menu.js

@@ -1,17 +1,20 @@
+// Get menu selectables of first menu.
 firstMenu = document.querySelector('.first-menu');
 playerTypes = firstMenu.children;
 
+// Get menu selectables of second menu.
 secondMenu = document.querySelector('.second-menu');
 gameTypes = secondMenu.children;
 
+// Get menu selectables of thirth menu.
 thirthMenu = document.querySelector('.thirth-menu');
 games = thirthMenu.children;
 
 // Used for changing the position of the selector between menu's and in-menu.
 var menuCounter = 0;
 var menuIndex = [playerTypes, gameTypes, games];
 
-// Generate for each menu a cache.
+// Generate a cache for each menu.
 var menuCache = menuIndex.map(x => {
     return 0;
 })
@@ -24,7 +27,6 @@ var upCounterCache = 0;
 
 function initSelector() {
     addColorToSelection(counter)
-    //activeMenu[counter].style.backgroundColor = 'cyan';
 }
 
 function cacheDownCounter() {
@@ -76,7 +78,6 @@ function resetCounter() {
 initSelector(playerTypes);
 
 function unselectElement() {
-    //activeMenu[counter].style.backgroundColor = '';
     removeColorFromSelection(counter)
 }
 
@@ -85,7 +86,6 @@ function selectPreviousElement() {
         unselectElement();
         counter--;
         addColorToSelection(counter)
-        //activeMenu[counter].style.backgroundColor = 'cyan';
     }
 }
 
@@ -94,7 +94,6 @@ function selectNextElement() {
         unselectElement();
         counter++
         addColorToSelection(counter)
-        //activeMenu[counter].style.backgroundColor = 'cyan';
     }
 }
 
@@ -125,18 +124,13 @@ function getSelectedGame() {
 }
 
 function addColorToSelection(selection){
-    //activeMenu[selection].style.backgroundColor = 'cyan';
     activeMenu[selection].classList.add("selection")
 }
 
 function removeColorFromSelection(selection){
-    //activeMenu[selection].style.backgroundColor = '';
     activeMenu[selection].classList.remove("selection")
 }
 
-
-
-
 // Listening to the browser which key is pressed.
 document.onkeypress = function (evt) {
     evt = evt || window.event;
@@ -165,14 +159,10 @@ document.onkeypress = function (evt) {
         }
     }
 
-    if (charStr == 'q') {
+    if (charStr == 'b') {
         if (menuCounter - 1 >= 0) {
             url = getSelectedGame().href
             window.location.href = url;
         }
     }
-
-    // console.log('CachedCounters: ' + menuCache);
-    // console.log('Current menuCounter: ' + menuCounter);
-    // console.log('Current counter: ' + counter);
 };

views/index.hbs

@@ -35,6 +35,7 @@
             Multiplayer
         </span>
     </div>
+
     <div class="second-menu">
         <span id="0">Action</span>
         <span id="1">Strategy</span>
@@ -52,7 +53,6 @@
         <a target="_blank" href="{{ this.instruction_url }}"><span>{{ this.title }}</span></a>
         {{/each }}
     </div>
-
 </body>
 
 <script src="js/menu.js"></script>

views/instructions.hbs

@@ -11,13 +11,14 @@
 </head>
 
 <body>
+
     <div id="app">
 
         <header>
             <h1>How to play: {{game.manifest.title}}</h1>
             <p>{{game.manifest.description}}</p>
         </header>
-        <main>
+        <main class="controls">
             <p>{{errors}}</p>
             {{!-- <img src="button-layout.svg" alt="arcade box button layout"> --}}
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"