Fix storing scenario in local storage

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:31 -07:00
parent 2458e1a308
commit f53358216c
4 changed files with 21 additions and 17 deletions

View File

@ -227,13 +227,10 @@
<label>
Load scenario:
<select>
<!-- <option value="scenario-side_show">BattleTroops Scenario 1: Side Show</option>
<option value="scenario-dragon_hunting">BattleTroops Scenario 2: Dragon Hunting</option>
<option value="scenario-race_against_time">BattleTroops Scenario 3: Race Against Time</option>
<option value="map4">Test</option>
<option value="contour-lines">Contour Lines</option>
<option value="pendle">Pendle</option>
<option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option> -->
<option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option>
</select>
</label>
</p>

View File

@ -3,7 +3,7 @@ import * as gameboard from './modules/gameboard.js';
import * as recordSheet from './modules/record_sheet.js';
import * as mapSelectDialog from './modules/map_select_dialog.js';
import { Observable } from './modules/observable.js';
import sideShow from './assets/images/scenario-side_show.svg';
import { scenarios } from './modules/scenarios.js';
globalThis.svgns = 'http://www.w3.org/2000/svg';
@ -13,8 +13,7 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
// fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
fileName = localStorage.getItem('map') || 'scenario-side_show',
// map = `assets/images/${fileName}.svg`,
map = sideShow,
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
fileInputEl = document.querySelector('input[type="file"]'),
dice = document.querySelectorAll('.die'),

View File

@ -6,17 +6,17 @@ export function init() {
selectEl = mapDialog.querySelector('select'),
confirmBtn = mapDialog.querySelector('#confirm-btn');
Object.keys(scenarios).forEach(scenario => {
Object.keys(scenarios).reverse().forEach(scenario => {
const option = document.createElement('option');
option.setAttribute('value', scenario);
option.textContent = scenarios[scenario];
selectEl.appendChild(option);
option.textContent = scenarios[scenario].title;
selectEl.prepend(option);
});
return {
selectCurrentOptionOnPageLoad() {
mapDialog.querySelectorAll('option').forEach(option =>
option.value === localStorage.getItem('map') && (option.selected = true)
mapDialog.querySelectorAll('option').forEach((option, index) =>
option.selected = option.value === localStorage.getItem('map') || index === 0
);
return this;
@ -43,8 +43,7 @@ export function init() {
e.preventDefault();
localStorage.removeItem('pan-zoom');
localStorage.setItem('map', selectEl.value);
// loadFn(`assets/images/${selectEl.value}.svg`);
loadFn(selectEl.value);
loadFn(scenarios[selectEl.value]?.hashed || `assets/images/${selectEl.value}.svg`);
mapDialog.close();
});
}

View File

@ -3,7 +3,16 @@ import dragonHunting from './assets/images/scenario-dragon_hunting.svg';
import raceAgainstTime from './assets/images/scenario-race_against_time.svg';
export const scenarios = {
[sideShow]: 'BattleTroops Scenario 1: Side Show',
[dragonHunting]: 'BattleTroops Scenario 2: Dragon Hunting',
[raceAgainstTime]: 'BattleTroops Scenario 3: Race Against Time',
'scenario-side_show': {
hashed: sideShow,
title: 'BattleTroops Scenario 1: Side Show',
},
'scenario-dragon_hunting': {
hashed: dragonHunting,
title: 'BattleTroops Scenario 2: Dragon Hunting',
},
'scenario-race_against_time': {
hashed: raceAgainstTime,
title: 'BattleTroops Scenario 3: Race Against Time',
},
}