Skip to content

Commit

Permalink
Router & controller and view changes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Grunkhead
Grunkhead committed Apr 17, 2019
1 parent 4817405 commit b68efea
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 142 deletions.
Empty file added controllers/GameController.js
View file
Empty file.
5 changes: 3 additions & 2 deletions routes/MainRouter.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
const MainController = require('../controllers/MainController')
const MenuController = require('../controllers/MenuController')

let router = function (express) {

var mainRouter = express.Router()
mainRouter.get('/', MainController.index)
mainRouter.get('/howtoplay', MainController.howToPlay)

mainRouter.get('/', MenuController.index)
mainRouter.get('/:encodedGameTitle/instructions', MenuController.gameInstructions)

return mainRouter
}
Expand Down
144 changes: 4 additions & 140 deletions views/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
</head>

<body>

<!-- 2018 Copyrights - Dave Buitenhuis -->

<div class="first-menu">
Expand All @@ -37,148 +36,13 @@
</div>

<div id="linksContainer" class="thirth-menu">
<!-- Generated links will be placed in here -->
<a target="_blank" href="howtoplay?game=testgame"><span>Test Game</span></a><a target="_blank" href="howtoplay?game=battlefield"><span>Battlefield
4</span></a>
<a target="_blank" href=""><span>Sons of War</span></a><a target="_blank" href=""><span>Billy Bo</span></a>
<a target="_blank" href=""><span>Super Smash</span></a><a target="_blank" href=""><span>Sunbeam</span></a>
<a target="_blank" href=""><span>Window Smasher</span></a><a target="_blank" href=""><span>Bella</span></a>
<a target="_blank" href=""><span>Life of a Dog</span></a><a target="_blank" href=""><span>Repairman</span></a>
<a target="_blank" href=""><span>American Football</span></a><a target="_blank" href=""><span>FIFA 1985</span></a>
<a target="_blank" href=""><span>Skully</span></a><a target="_blank" href=""><span>Forest Run!</span></a>
<a target="_blank" href=""><span>Excalibur</span></a><a target="_blank" href=""><span>Medieval War</span></a>
{{#each games }}
<a target="_blank" href="{{ this.instruction_url }}"><span>{{ this.title }}</span></a>
{{/each }}
</div>

</body>

<script>
firstMenu = document.querySelector('.first-menu');
playerTypes = firstMenu.children;
secondMenu = document.querySelector('.second-menu');
gameTypes = secondMenu.children;
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];
var activeMenu = menuIndex[0];
var counter = 0;
var downCounterCache = 0;
var upCounterCache = 0;
function initSelector() {
activeMenu[counter].style.backgroundColor = 'cyan';
}
function cacheDownCounter() {
downCounterCache = counter;
if (counterCached('up')) {
swapCounter('up');
} else {
resetCounter();
}
}
function cacheUpCounter() {
upCounterCache = counter;
if (counterCached('down')) {
swapCounter('down');
} else {
resetCounter();
}
}
function swapCounter(direction) {
if (direction == 'up') { counter = upCounterCache; }
if (direction == 'down') { counter = downCounterCache; }
}
function counterCached(direction) {
if (direction == 'up' && upCounterCache < 0) {
return false;
}
if (direction == 'down' && downCounterCache < 0) {
return false;
}
return true
}
function resetCounter() {
counter = 0;
}
initSelector(playerTypes);
function unselectElement() {
activeMenu[counter].style.backgroundColor = '';
}
function selectPreviousElement() {
unselectElement();
counter--;
activeMenu[counter].style.backgroundColor = 'cyan';
}
function selectNextElement() {
unselectElement();
counter++
activeMenu[counter].style.backgroundColor = 'cyan';
}
function setActiveMenu() {
activeMenu = menuIndex[menuCounter]
}
function selectNextMenu() {
menuCounter++;
setActiveMenu();
initSelector();
}
function selectPreviousMenu() {
menuCounter--;
setActiveMenu();
initSelector();
}
// Listening to the browser which key is pressed.
document.onkeypress = function (evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
var charStr = String.fromCharCode(charCode);
if (charStr == 'd') {
selectNextElement();
}
if (charStr == 'a') {
selectPreviousElement();
}
if (charStr == 's') {
cacheUpCounter();
selectNextMenu();
}
if (charStr == 'w') {
cacheDownCounter();
selectPreviousMenu();
}
console.log('CachedCounterUP: ' + upCounterCache);
console.log('CachedCounterDOWN: ' + downCounterCache);
console.log('Current: ' + counter);
};
</script>
<script src="js/menu.js"></script>

</html>
110 changes: 110 additions & 0 deletions views/instructions.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Instructions</title>
<link rel="stylesheet" href="/css/instructions.css">
</head>

<body>
<div id="app">

<header>
<h1>How to play: <span>{{game.title}}</span></h1>
<p>{{game.description}}</p>
</header>
<main>
{{!-- <img src="button-layout.svg" alt="arcade box button layout"> --}}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1022 295.52">
<defs>
</defs>
<title>button-layout</title>
<path class="cls-1" d="M286.5,73.5a27,27,0,1,1,27-27A27,27,0,0,1,286.5,73.5Z" transform="translate(-6 -2.48)" />
<path d="M286.5,20A26.5,26.5,0,1,1,260,46.5,26.53,26.53,0,0,1,286.5,20m0-1A27.5,27.5,0,1,0,314,46.5,27.5,27.5,0,0,0,286.5,19Z"
transform="translate(-6 -2.48)" />
<path class="cls-2" d="M220.5,73.5a27,27,0,1,1,27-27A27,27,0,0,1,220.5,73.5Z" transform="translate(-6 -2.48)" />
<path d="M220.5,20A26.5,26.5,0,1,1,194,46.5,26.53,26.53,0,0,1,220.5,20m0-1A27.5,27.5,0,1,0,248,46.5,27.5,27.5,0,0,0,220.5,19Z"
transform="translate(-6 -2.48)" />
<path class="cls-3" d="M33.5,277.5a27,27,0,1,1,27-27A27,27,0,0,1,33.5,277.5Z" transform="translate(-6 -2.48)" />
<path d="M33.5,224A26.5,26.5,0,1,1,7,250.5,26.53,26.53,0,0,1,33.5,224m0-1A27.5,27.5,0,1,0,61,250.5,27.5,27.5,0,0,0,33.5,223Z"
transform="translate(-6 -2.48)" />
<path class="cls-4" d="M413.5,277.5a27,27,0,1,1,27-27A27,27,0,0,1,413.5,277.5Z" transform="translate(-6 -2.48)" />
<path d="M413.5,224A26.5,26.5,0,1,1,387,250.5,26.53,26.53,0,0,1,413.5,224m0-1A27.5,27.5,0,1,0,441,250.5,27.5,27.5,0,0,0,413.5,223Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M98.5,103.5a27,27,0,1,1,27-27A27,27,0,0,1,98.5,103.5Z" transform="translate(-6 -2.48)" />
<path d="M98.5,50A26.5,26.5,0,1,1,72,76.5,26.53,26.53,0,0,1,98.5,50m0-1A27.5,27.5,0,1,0,126,76.5,27.5,27.5,0,0,0,98.5,49Z"
transform="translate(-6 -2.48)" />
<path class="cls-2" d="M352.5,73.5a27,27,0,1,1,27-27A27,27,0,0,1,352.5,73.5Z" transform="translate(-6 -2.48)" />
<path d="M352.5,20A26.5,26.5,0,1,1,326,46.5,26.53,26.53,0,0,1,352.5,20m0-1A27.5,27.5,0,1,0,380,46.5,27.5,27.5,0,0,0,352.5,19Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M352.5,132.5a27,27,0,1,1,27-27A27,27,0,0,1,352.5,132.5Z" transform="translate(-6 -2.48)" />
<path d="M352.5,79A26.5,26.5,0,1,1,326,105.5,26.53,26.53,0,0,1,352.5,79m0-1A27.5,27.5,0,1,0,380,105.5,27.5,27.5,0,0,0,352.5,78Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M286.5,132.5a27,27,0,1,1,27-27A27,27,0,0,1,286.5,132.5Z" transform="translate(-6 -2.48)" />
<path d="M286.5,79A26.5,26.5,0,1,1,260,105.5,26.53,26.53,0,0,1,286.5,79m0-1A27.5,27.5,0,1,0,314,105.5,27.5,27.5,0,0,0,286.5,78Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M220.5,132.5a27,27,0,1,1,27-27A27,27,0,0,1,220.5,132.5Z" transform="translate(-6 -2.48)" />
<path d="M220.5,79A26.5,26.5,0,1,1,194,105.5,26.53,26.53,0,0,1,220.5,79m0-1A27.5,27.5,0,1,0,248,105.5,27.5,27.5,0,0,0,220.5,78Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M103.5,277.5a27,27,0,1,1,27-27A27,27,0,0,1,103.5,277.5Z" transform="translate(-6 -2.48)" />
<path d="M103.5,224A26.5,26.5,0,1,1,77,250.5,26.53,26.53,0,0,1,103.5,224m0-1A27.5,27.5,0,1,0,131,250.5,27.5,27.5,0,0,0,103.5,223Z"
transform="translate(-6 -2.48)" />
<path class="cls-4" d="M471.5,277.5a27,27,0,1,1,27-27A27,27,0,0,1,471.5,277.5Z" transform="translate(-6 -2.48)" />
<path d="M471.5,224A26.5,26.5,0,1,1,445,250.5,26.53,26.53,0,0,1,471.5,224m0-1A27.5,27.5,0,1,0,499,250.5,27.5,27.5,0,0,0,471.5,223Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M891.5,73.5a27,27,0,1,1,27-27A27,27,0,0,1,891.5,73.5Z" transform="translate(-6 -2.48)" />
<path d="M891.5,20A26.5,26.5,0,1,1,865,46.5,26.53,26.53,0,0,1,891.5,20m0-1A27.5,27.5,0,1,0,919,46.5,27.5,27.5,0,0,0,891.5,19Z"
transform="translate(-6 -2.48)" />
<path class="cls-2" d="M825.5,73.5a27,27,0,1,1,27-27A27,27,0,0,1,825.5,73.5Z" transform="translate(-6 -2.48)" />
<path d="M825.5,20A26.5,26.5,0,1,1,799,46.5,26.53,26.53,0,0,1,825.5,20m0-1A27.5,27.5,0,1,0,853,46.5,27.5,27.5,0,0,0,825.5,19Z"
transform="translate(-6 -2.48)" />
<path class="cls-3" d="M930.5,277.5a27,27,0,1,1,27-27A27,27,0,0,1,930.5,277.5Z" transform="translate(-6 -2.48)" />
<path d="M930.5,224A26.5,26.5,0,1,1,904,250.5,26.53,26.53,0,0,1,930.5,224m0-1A27.5,27.5,0,1,0,958,250.5,27.5,27.5,0,0,0,930.5,223Z"
transform="translate(-6 -2.48)" />
<path class="cls-2" d="M957.5,73.5a27,27,0,1,1,27-27A27,27,0,0,1,957.5,73.5Z" transform="translate(-6 -2.48)" />
<path d="M957.5,20A26.5,26.5,0,1,1,931,46.5,26.53,26.53,0,0,1,957.5,20m0-1A27.5,27.5,0,1,0,985,46.5,27.5,27.5,0,0,0,957.5,19Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M957.5,132.5a27,27,0,1,1,27-27A27,27,0,0,1,957.5,132.5Z" transform="translate(-6 -2.48)" />
<path d="M957.5,79A26.5,26.5,0,1,1,931,105.5,26.53,26.53,0,0,1,957.5,79m0-1A27.5,27.5,0,1,0,985,105.5,27.5,27.5,0,0,0,957.5,78Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M891.5,132.5a27,27,0,1,1,27-27A27,27,0,0,1,891.5,132.5Z" transform="translate(-6 -2.48)" />
<path d="M891.5,79A26.5,26.5,0,1,1,865,105.5,26.53,26.53,0,0,1,891.5,79m0-1A27.5,27.5,0,1,0,919,105.5,27.5,27.5,0,0,0,891.5,78Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M825.5,132.5a27,27,0,1,1,27-27A27,27,0,0,1,825.5,132.5Z" transform="translate(-6 -2.48)" />
<path d="M825.5,79A26.5,26.5,0,1,1,799,105.5,26.53,26.53,0,0,1,825.5,79m0-1A27.5,27.5,0,1,0,853,105.5,27.5,27.5,0,0,0,825.5,78Z"
transform="translate(-6 -2.48)" />
<path class="cls-1" d="M1000.5,277.5a27,27,0,1,1,27-27A27,27,0,0,1,1000.5,277.5Z" transform="translate(-6 -2.48)" />
<path d="M1000.5,224A26.5,26.5,0,1,1,974,250.5a26.53,26.53,0,0,1,26.5-26.5m0-1a27.5,27.5,0,1,0,27.5,27.5,27.5,27.5,0,0,0-27.5-27.5Z"
transform="translate(-6 -2.48)" /><text class="cls-5" transform="translate(201 151.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(266 151.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(332 151.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(332 10.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(266 10.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(201 10.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(32 75.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(78 116.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(79 37.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(125 75.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(13 289.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(84 289.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(394 289.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(452 289.04)">{{controls.buttons.p1-up}}</text>
<path class="cls-1" d="M712.5,99.5a27,27,0,1,1,27-27A27,27,0,0,1,712.5,99.5Z" transform="translate(-6 -2.48)" />
<path d="M712.5,46A26.5,26.5,0,1,1,686,72.5,26.53,26.53,0,0,1,712.5,46m0-1A27.5,27.5,0,1,0,740,72.5,27.5,27.5,0,0,0,712.5,45Z"
transform="translate(-6 -2.48)" /><text class="cls-5" transform="translate(646 71.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(692 112.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(693 33.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(739 71.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(806 10.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(872 10.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(939 10.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(806 143.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(869 143.04)">{{controls.buttons.p1-up}}</text><text class="cls-5" transform="translate(939 143.04)">{{controls.buttons.p1-up}}</text><text
class="cls-5" transform="translate(910 289.04)">{{controls.buttons.p1-up}}</text><text class="cls-5"
transform="translate(981 289.04)">{{controls.buttons.p1-up}}</text>
</svg>
</main>
</div>

</body>
<script>
</script>

</html>

0 comments on commit b68efea

Please sign in to comment.