game-of-death

commit

91dd89b1359a601e3cf06ae3ce070e09f2de50b9

parent

70e889069060c15d964d97b31423b837d7ef0caf

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2019-10-20 10:54

add basic menu

Diffstat

3 files changed, 42 insertions, 13 deletions

diff --git a/src/index.js b/src/index.js

@@ -6,15 +6,7 @@ const constants = require('./constants.js');
    6     6 let state, tree;
    7     7 
    8     8 const init = function(wrapper) {
    9    -1     state = {
   10    -1         game: {
   11    -1             board: logic.setupBoard(),
   12    -1             currentPlayer: 1,
   13    -1             playing: false,
   14    -1             steps: 0,
   15    -1             sandbox: true,
   16    -1         },
   17    -1     };
   -1     9     state = {};
   18    10     tree = template(state);
   19    11     const element = vdom.mount(tree);
   20    12     wrapper.append(element);
@@ -97,4 +89,18 @@ on('click', '.js-export', function(state) {
   97    89     download.remove();
   98    90 });
   99    91 
   -1    92 on('click', '.js-quit', function(state) {
   -1    93     state.game = null;
   -1    94 });
   -1    95 
   -1    96 on('click', '.js-menu-sandbox', function(state) {
   -1    97     state.game = {
   -1    98         board: logic.setupBoard(),
   -1    99         currentPlayer: 1,
   -1   100         playing: false,
   -1   101         steps: 0,
   -1   102         sandbox: true,
   -1   103     }
   -1   104 });
   -1   105 
  100   106 init(document.body);

diff --git a/src/template.js b/src/template.js

@@ -24,19 +24,31 @@ const renderControls = function(state) {
   24    24             h('button', {'class': 'js-play'}, state.game.playing ? 'Pause' : 'Play'),
   25    25             h('button', {'class': 'js-current-player fg-' + state.game.currentPlayer}, 'Current Player'),
   26    26             h('button', {'class': 'js-export'}, 'Export'),
   -1    27             h('button', {'class': 'js-quit'}, 'Quit'),
   27    28         ]);
   28    29     } else {
   29    30         return h('div', {'class': 'board-controls'}, [
   30    31             h('input', {type: 'hidden', value: 50, name: 'speed'}),
   31    32             h('input', {type: 'hidden', value: 1, name: 'steps'}),
   32    33             h('button', {'class': 'js-play'}, state.game.playing ? 'Pause' : 'Play'),
   -1    34             h('button', {'class': 'js-quit'}, 'Quit'),
   33    35         ]);
   34    36     }
   35    37 };
   36    38 
   37    -1 module.exports = function(state) {
   38    -1     return h('div', {}, [
   39    -1         renderControls(state),
   40    -1         renderBoard(state),
   -1    39 const renderMenu = function(state) {
   -1    40     return h('div', {'class': 'menu'}, [
   -1    41         h('button', {'class': 'js-menu-sandbox'}, 'Start sandbox game'),
   41    42     ]);
   42    43 };
   -1    44 
   -1    45 module.exports = function(state) {
   -1    46     if (state.game) {
   -1    47         return h('div', {}, [
   -1    48             renderControls(state),
   -1    49             renderBoard(state),
   -1    50         ]);
   -1    51     } else {
   -1    52         return renderMenu(state);
   -1    53     }
   -1    54 };

diff --git a/style.css b/style.css

@@ -4,6 +4,17 @@ body {
    4     4     padding: 0.5em;
    5     5 }
    6     6 
   -1     7 .menu {
   -1     8     max-width: 15em;
   -1     9     margin: 10vh auto;
   -1    10 }
   -1    11 
   -1    12 .menu button {
   -1    13     display: block;
   -1    14     width: 100%;
   -1    15     margin-bottom: 0.5em;
   -1    16 }
   -1    17 
    7    18 .board-row {
    8    19     display: flex;
    9    20 }