Solid progress on Game Settings
This commit is contained in:
parent
154ab88bda
commit
79170f8195
|
@ -18,12 +18,15 @@ window.addEventListener('load', () => {
|
||||||
|
|
||||||
// Update localStorage with three settings objects. Preserve original objects if present.
|
// Update localStorage with three settings objects. Preserve original objects if present.
|
||||||
for (let i=1; i<=3; i++) {
|
for (let i=1; i<=3; i++) {
|
||||||
const localSettings = localStorage.getItem(`gameSettings${i}`);
|
const localSettings = JSON.parse(localStorage.getItem(`gameSettings${i}`));
|
||||||
const updatedObj = localSettings ? Object.assign(sourceData, JSON.parse(localSettings)) : sourceData;
|
const updatedObj = localSettings ? Object.assign(sourceData, localSettings) : sourceData;
|
||||||
localStorage.setItem(`gameSettings${i}`, JSON.stringify(updatedObj));
|
localStorage.setItem(`gameSettings${i}`, JSON.stringify(updatedObj));
|
||||||
}
|
}
|
||||||
|
|
||||||
console.info(sourceData);
|
populateSettings();
|
||||||
|
document.getElementById('preset-number').addEventListener('change', populateSettings);
|
||||||
|
gameSettings.addEventListener('change', handleOptionChange);
|
||||||
|
gameSettings.addEventListener('keyup', handleOptionChange);
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
gameSettings.innerHTML = `
|
gameSettings.innerHTML = `
|
||||||
<h2>Something went wrong while loading your game settings page.</h2>
|
<h2>Something went wrong while loading your game settings page.</h2>
|
||||||
|
@ -32,3 +35,67 @@ window.addEventListener('load', () => {
|
||||||
`
|
`
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const handleOptionChange = (event) => {
|
||||||
|
if(!event.target.matches('.setting')) { return; }
|
||||||
|
const presetNumber = document.getElementById('preset-number').value;
|
||||||
|
const settings = JSON.parse(localStorage.getItem(`gameSettings${presetNumber}`))
|
||||||
|
const settingString = event.target.getAttribute('data-setting');
|
||||||
|
document.getElementById(settingString).innerText = event.target.value;
|
||||||
|
if(getSettingValue(settings, settingString) !== false){
|
||||||
|
const keys = settingString.split('.');
|
||||||
|
switch (keys.length) {
|
||||||
|
case 1:
|
||||||
|
settings[keys[0]] = event.target.value;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
settings[keys[0]][keys[1]] = event.target.value;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
settings[keys[0]][keys[1]][keys[2]] = event.target.value;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.warn(`Unknown setting string received: ${settingString}`)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the updated settings object bask to localStorage
|
||||||
|
localStorage.setItem(`gameSettings${presetNumber}`, JSON.stringify(settings));
|
||||||
|
}else{
|
||||||
|
console.warn(`Unknown setting string received: ${settingString}`)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const populateSettings = () => {
|
||||||
|
const presetNumber = document.getElementById('preset-number').value;
|
||||||
|
const settings = JSON.parse(localStorage.getItem(`gameSettings${presetNumber}`))
|
||||||
|
const settingsInputs = Array.from(document.querySelectorAll('.setting'));
|
||||||
|
settingsInputs.forEach((input) => {
|
||||||
|
const settingString = input.getAttribute('data-setting');
|
||||||
|
const settingValue = getSettingValue(settings, settingString);
|
||||||
|
console.info(`${settingString}: ${settingValue}`);
|
||||||
|
if(settingValue !== false){
|
||||||
|
input.value = settingValue;
|
||||||
|
document.getElementById(settingString).innerText = settingValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the value of the settings object, or false if the settings object does not exist
|
||||||
|
* @param settings
|
||||||
|
* @param keyString
|
||||||
|
* @returns {string} | bool
|
||||||
|
*/
|
||||||
|
const getSettingValue = (settings, keyString) => {
|
||||||
|
const keys = keyString.split('.');
|
||||||
|
let currentVal = settings;
|
||||||
|
keys.forEach((key) => {
|
||||||
|
if(typeof(key) === 'string' && currentVal.hasOwnProperty(key)){
|
||||||
|
currentVal = currentVal[key];
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return currentVal;
|
||||||
|
};
|
||||||
|
|
|
@ -145,18 +145,25 @@ item_functionality:
|
||||||
progression_balancing:
|
progression_balancing:
|
||||||
on: 1 # A system to reduce BK, as in times during which you can't do anything by moving your items into an earlier access sphere to make it likely you have stuff to do
|
on: 1 # A system to reduce BK, as in times during which you can't do anything by moving your items into an earlier access sphere to make it likely you have stuff to do
|
||||||
off: 0 # Turn this off if you don't mind a longer multiworld, or can glitch around missing items.
|
off: 0 # Turn this off if you don't mind a longer multiworld, or can glitch around missing items.
|
||||||
|
### Enemizer Section ###
|
||||||
boss_shuffle:
|
boss_shuffle:
|
||||||
none: 1 # Vanilla bosses
|
none: 1 # Vanilla bosses
|
||||||
simple: 0 # Existing bosses except Ganon and Agahnim are shuffled throughout dungeons
|
simple: 0 # Existing bosses except Ganon and Agahnim are shuffled throughout dungeons
|
||||||
full: 0 # 3 bosses can occur twice
|
full: 0 # 3 bosses can occur twice
|
||||||
random: 0 # Any boss can appear any amount of times
|
random: 0 # Any boss can appear any amount of times
|
||||||
singularity: 0 # Picks any boss that can appear anywhere and puts that boss into every arena
|
singularity: 0 # Picks a boss, tries to put it everywhere that works, if there's spaces remaining it picks a boss to fill those
|
||||||
duality: 0 # Picks a boss that can only appear in some places and a boss that can appear anywhere, then attempts to put both in that order in every arena
|
enemy_shuffle: # randomize enemy placement
|
||||||
enemy_shuffle:
|
on: 0
|
||||||
none: 1 # Vanilla enemy placement
|
off: 1
|
||||||
chaos: 0 # Enemies are randomized
|
killable_thieves: # make thieves killable.
|
||||||
random: 0 # Also shuffle bush enemies, random tile rooms, and random bush enemy spawn chance
|
on: 0 # usually turned on together with enemy_shuffle to make annoying thief placement more manageable
|
||||||
chaosthieves: 0 # Random + thieves may not be killable
|
off: 1
|
||||||
|
tile_shuffle: # randomize the tile layouts in flying tile rooms
|
||||||
|
on: 0
|
||||||
|
off: 1
|
||||||
|
bush_shuffle: # randomize the chance that bushes have enemies and the enemies under said bush
|
||||||
|
on: 0
|
||||||
|
off: 1
|
||||||
enemy_damage:
|
enemy_damage:
|
||||||
default: 1 # Vanilla enemy damage
|
default: 1 # Vanilla enemy damage
|
||||||
shuffled: 0 # Enemies deal 0 to 4 hearts and armor helps
|
shuffled: 0 # Enemies deal 0 to 4 hearts and armor helps
|
||||||
|
@ -169,6 +176,7 @@ enemy_health:
|
||||||
pot_shuffle:
|
pot_shuffle:
|
||||||
'on': 0 # Keys, items, and buttons hidden under pots in dungeons are shuffled with other pots in their supertile
|
'on': 0 # Keys, items, and buttons hidden under pots in dungeons are shuffled with other pots in their supertile
|
||||||
'off': 1 # Default pot item locations
|
'off': 1 # Default pot item locations
|
||||||
|
### End of Enemizer Section ###
|
||||||
beemizer: # Remove items from the global item pool and replace them with single bees and bee traps
|
beemizer: # Remove items from the global item pool and replace them with single bees and bee traps
|
||||||
0: 1 # No bee traps are placed
|
0: 1 # No bee traps are placed
|
||||||
1: 0 # 25% of the non-essential item pool is replaced with bee traps
|
1: 0 # 25% of the non-essential item pool is replaced with bee traps
|
||||||
|
|
|
@ -3,22 +3,39 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game-settings table{
|
#game-settings code{
|
||||||
|
background-color: #dbe1bc;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding-left: 0.25rem;
|
||||||
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game-settings table td.option-name{
|
#game-settings #instructions{
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game-settings table td.option-name label{
|
#game-settings #settings-wrapper{
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-settings table.option-set{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-settings table.option-set td.option-name{
|
||||||
|
width: 150px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game-settings table .option-value{
|
#game-settings table.option-set td.option-value{
|
||||||
|
line-height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game-settings table .option-value input{
|
#game-settings table.option-set td.option-value input[type=range]{
|
||||||
|
width: 90%;
|
||||||
|
min-width: 300px;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,7 +28,7 @@ button:hover, input[type=submit]:hover{
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #bbb288;
|
background-color: #bbb288;
|
||||||
padding: 0.5em 1.5rem 1.5rem;=
|
padding: 0.5em 1.5rem 1.5rem;
|
||||||
color: #282b28;
|
color: #282b28;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,17 +10,121 @@
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div id="game-settings" class="main-content">
|
<div id="game-settings" class="main-content">
|
||||||
<h3>Game Settings</h3>
|
<h3>Game Settings</h3>
|
||||||
<table>
|
<div id="instructions">
|
||||||
<tr>
|
This page is used to configure your game settings. You have three presets you can control, which
|
||||||
<td colspan="2">
|
you can access using the dropdown menu below. These settings will be usable when generating a
|
||||||
Set a description for this settings file. It will be included if you download a yaml file,
|
single player game, or you can export them to a <code>.yaml</code> file and use them in a multiworld.
|
||||||
but isn't particularly important otherwise.
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
<div id="settings-wrapper">
|
||||||
<tr>
|
Choose a preset and optionally assign it a nickname, which will be used as the file's description if
|
||||||
<td class="option-name"><label for="description">Description:</label></td>
|
you download it.
|
||||||
<td class="option-value"><input id="description" /></td>
|
<table class="option-set">
|
||||||
</tr>
|
<tbody>
|
||||||
</table>
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="preset-number">Preset Number:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<select id="preset-number">
|
||||||
|
<option value="1">Preset 1</option>
|
||||||
|
<option value="2">Preset 2</option>
|
||||||
|
<option value="3">Preset 3</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="description">Preset Name:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<input id="description" class="setting" data-setting="description" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
Choose a name you want to represent you in-game. This will appear when you send items
|
||||||
|
to other people in multiworld games.
|
||||||
|
<table class="option-set">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="name">Player Name:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<input id="name" maxlength="16" class="setting" data-setting="name" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
Glitches Required - Allows the generator to place required items in locations which require knowledge
|
||||||
|
of glitches.
|
||||||
|
<table class="option-set">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="glitches-required-none">None:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<input id="glitches-required-none"
|
||||||
|
data-setting="glitches_required.none"
|
||||||
|
class="setting"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
/>
|
||||||
|
<span id="glitches_required.none"></span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="glitches-required-minor">Minor Glitches:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<input id="glitches-required-minor"
|
||||||
|
data-setting="glitches_required.minor_glitches"
|
||||||
|
class="setting"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
/>
|
||||||
|
<span id="glitches_required.minor_glitches"></span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="glitches-required-overworld">Overworld Glitches:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<input id="glitches-required-overworld"
|
||||||
|
data-setting="glitches_required.overworld_glitches"
|
||||||
|
class="setting"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
/>
|
||||||
|
<span id="glitches_required.overworld_glitches"></span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="option-name">
|
||||||
|
<label for="glitches-required-no-logic">No Logic:</label>
|
||||||
|
</td>
|
||||||
|
<td class="option-value">
|
||||||
|
<input id="glitches-required-no-logic"
|
||||||
|
data-setting="glitches_required.no_logic"
|
||||||
|
class="setting"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
/>
|
||||||
|
<span id="glitches_required.no_logic"></span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue