game-of-death

commit

18d79f54ece184f01e0f7555da32bbeb944764f4

parent

492395e6e65e4c803d9842c82b20373512f786f1

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2025-01-16 05:50

leverage browser history

Diffstat

3 files changed, 33 insertions, 18 deletions

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

@@ -145,19 +145,26 @@ on('click', '.js-export', function(state) {
  145   145 });
  146   146 
  147   147 on('click', '.js-quit', function(state) {
  148    -1     state.game = null;
   -1   148     history.back();
  149   149 });
  150   150 
  151    -1 on('click', '.js-menu-sandbox', function(state) {
  152    -1     state.game = createGame({
  153    -1         board: logic.setupBoard(),
  154    -1     });
  155    -1     state.game.sandbox = true;
  156    -1 });
   -1   151 const onNavigate = function() {
   -1   152     var path = location.hash.substr(2).split('/');
   -1   153     if (path[0] === 'sandbox') {
   -1   154         state.game = createGame({
   -1   155             board: logic.setupBoard(),
   -1   156         });
   -1   157         state.game.sandbox = true;
   -1   158     } else if (path[0] === 'scenario') {
   -1   159         const i = parseInt(path[1], 10);
   -1   160         state.game = createGame(scenarios[i]);
   -1   161     } else {
   -1   162         state.game = null;
   -1   163     }
   -1   164     render();
   -1   165 };
  157   166 
  158    -1 on('click', '.js-menu-scenario', function(state) {
  159    -1     const i = parseInt(this.dataset.scenario, 10);
  160    -1     state.game = createGame(scenarios[i]);
  161    -1 });
   -1   167 window.addEventListener('hashchange', onNavigate);
  162   168 
  163   169 init(document.body);
   -1   170 onNavigate();

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

@@ -73,10 +73,10 @@ const renderControls = function(state) {
   73    73 const renderMenu = function(state) {
   74    74     return h('div', {'class': 'menu'}, [
   75    75         h('img', {'class': 'logo', 'src': 'logo.jpg', 'alt': 'Game of Death'}),
   76    -1         h('button', {'class': 'js-menu-sandbox'}, 'Start sandbox game')
   -1    76         h('a', {'class': 'btn', 'href': '#!sandbox'}, 'Start sandbox game')
   77    77     ].concat(scenarios.map((scenario, i) => h(
   78    -1         'button',
   79    -1         {'class': 'js-menu-scenario', 'data-scenario': i},
   -1    78         'a',
   -1    79         {'class': 'btn', 'href': `#!scenario/${i}`},
   80    80         `Start scenario: ${scenario.title}`,
   81    81     ))));
   82    82 };

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

@@ -36,7 +36,8 @@ body {
   36    36 }
   37    37 
   38    38 input,
   39    -1 button {
   -1    39 button,
   -1    40 .btn {
   40    41     -webkit-appearance: none;
   41    42     padding: 0.3em 0.75em;
   42    43     line-height: 1.6;
@@ -51,13 +52,19 @@ button {
   51    52 
   52    53 input:focus,
   53    54 button:not(:disabled):hover,
   54    -1 button:not(:disabled):focus {
   -1    55 button:not(:disabled):focus,
   -1    56 .btn:hover,
   -1    57 .btn:focus {
   55    58     background-color: var(--fg);
   56    59     color: var(--bg);
   57    60 }
   58    61 
   59    -1 button {
   -1    62 button,
   -1    63 .btn {
   60    64     cursor: pointer;
   -1    65     text-align: center;
   -1    66     text-decoration: none;
   -1    67     font: inherit;
   61    68 }
   62    69 
   63    70 :disabled {
@@ -99,7 +106,8 @@ input[type=range]:focus::-webkit-slider-thumb {
   99   106     margin: 10vh auto;
  100   107 }
  101   108 
  102    -1 .menu button {
   -1   109 .menu button,
   -1   110 .menu .btn {
  103   111     display: block;
  104   112     width: 100%;
  105   113     margin-bottom: 0.5em;