import sideShow from './assets/images/scenario-side_show.svg';
import dragonHunting from './assets/images/scenario-dragon_hunting.svg';
// import raceAgainstTime from './assets/images/scenario-race_against_time.svg';
export function init() {
const showButton = document.getElementById('show-dialog'),
mapDialog = document.getElementById('map-dialog'),
selectEl = mapDialog.querySelector('select'),
confirmBtn = mapDialog.querySelector('#confirm-btn');
let option = document.createElement('option');
option.setAttribute('value', sideShow);
option.textContent = 'BattleTroops Scenario 1: Side Show';
selectEl.appendChild(option);
option = document.createElement('option');
option.setAttribute('value', dragonHunting);
option.textContent = 'BattleTroops Scenario 2: Dragon Hunting';
selectEl.appendChild(option);
return {
selectCurrentOptionOnPageLoad() {
mapDialog.querySelectorAll('option').forEach(option =>
option.value === localStorage.getItem('map') && (option.selected = true)
);
return this;
},
showOnClick() {
showButton.addEventListener('click', () => {
mapDialog.showModal();
});
return this;
},
updateValueOnSelection() {
selectEl.addEventListener('change', () => {
confirmBtn.value = selectEl.value;
});
return this;
},
changeMapOnConfirm(loadFn) {
confirmBtn.addEventListener('click', e => {
e.preventDefault();
localStorage.removeItem('pan-zoom');
localStorage.setItem('map', selectEl.value);
// loadFn(`assets/images/${selectEl.value}.svg`);
loadFn(selectEl.value);
mapDialog.close();
});
}
};
}
export const defaultMap = sideShow;