m4xx1m/dv-community-map
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save settings between sessions

Browse Source 
Saves settings to cookies
This commit is contained in:
Pyro Nicampt committed 2025-06-12 22:40:03 -05:00
1 parent 4500e426fe
commit c0ffc43ae6
2 files changed
+143 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+8 -7
View File
@@ -27,7 +27,7 @@
</div>
<div id="zoomLevelDisplay"></div>
<div id="cursorCoordDisplay"></div>
Map v0.6.3 alpha
Map v0.6.4 alpha
<br>
Updated for Game Build 99.5
<br>
@@ -41,6 +41,12 @@
</div>
<div id="legend">
<div id="legendContents">
<div class="panel">
<a href="https://github.com/PyroNicampt/DV-Community-Map">Source</a> &#8226;
<a href="https://github.com/PyroNicampt/DV-Community-Map/issues">Issue Tracker</a> &#8226;
<a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a> &#8226;
<a href="https://wiki.derailvalley.com/wiki/Main_Page">Official Manual</a>
</div>
<div class="panel">
Welcome to the WIP community map of <a href="https://www.derailvalley.com/" style="white-space:nowrap;">Derail Valley</a>, a resource for documenting and displaying all tracks and points of interest.
<p>
@@ -62,14 +68,9 @@
</div>
<div id="settingsPanel" class="panel">
<h3>Map Settings</h3>
<div class="quiet" style="margin: 0 0 5px 0;font-size: 10px;">(Page uses local-only cookies to keep settings)</div>
<hr>
</div>
<div class="panel">
<a href="https://github.com/PyroNicampt/DV-Community-Map">Source</a> &#8226;
<a href="https://github.com/PyroNicampt/DV-Community-Map/issues">Issue Tracker</a> &#8226;
<a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a> &#8226;
<a href="https://wiki.derailvalley.com/wiki/Main_Page">Official Manual</a>
</div>
</div>
<button id="legendButton" class="panel orange"><svg style="transform:rotate(180deg) translateY(0px)" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></button>
</div>
legend.js
+135 -9
View File
@@ -5,10 +5,22 @@ import * as Config from './config.js';
import { Color } from './js/colorlib.js';
import * as MapData from './js/mapdata.js';
const settingsVersion = 1;
let settingEntries = [
{
label: 'Reset All',
id: 'button_resetSettings',
func: () =>{
for(let entry of settingEntries){
resetSettingEntry(entry);
}
}
},
{
label: 'Color Mode',
id: 'dropdown_trackColor',
saveState: true,
options: [
'None',
'Grade',
@@ -26,6 +38,7 @@ let settingEntries = [
{
label: 'Signage',
id: 'toggle_signage',
saveState: true,
state: true,
func: state =>{
MapData.layers.signage = state;
@@ -35,6 +48,7 @@ let settingEntries = [
{
label: 'Speed Signage',
id: 'toggle_speedSigns',
saveState: true,
state: true,
func: state =>{
MapData.layers.speedSigns = state;
@@ -44,6 +58,7 @@ let settingEntries = [
{
label: 'Grade Arrows',
id: 'toggle_gradeSigns',
saveState: true,
state: true,
func: state =>{
MapData.layers.gradeArrows = state;
@@ -53,6 +68,7 @@ let settingEntries = [
{
label: 'Yard Signage',
id: 'toggle_yardSigns',
saveState: true,
state: true,
func: state =>{
MapData.layers.yardSigns = state;
@@ -62,6 +78,7 @@ let settingEntries = [
{
label: 'Junctions',
id: 'toggle_junctions',
saveState: true,
state: true,
func: state =>{
MapData.layers.junctions = state;
@@ -73,6 +90,7 @@ let settingEntries = [
{
label: 'Points of Interest',
id: 'toggle_poi',
saveState: true,
state: true,
func: state => {
MapData.layers.poi = state;
@@ -82,6 +100,7 @@ let settingEntries = [
{
label: 'Stations',
id: 'toggle_stations',
saveState: true,
state: true,
func: state =>{
MapData.layers.stations = state;
@@ -91,6 +110,7 @@ let settingEntries = [
{
label: 'Services',
id: 'toggle_services',
saveState: true,
state: true,
func: state =>{
MapData.layers.services = state;
@@ -100,6 +120,7 @@ let settingEntries = [
{
label: 'Landmarks',
id: 'toggle_landmarks',
saveState: true,
state: true,
func: state =>{
MapData.layers.landmarks = state;
@@ -109,6 +130,7 @@ let settingEntries = [
{
label: 'Demonstrator Spawns',
id: 'dropdown_demonstrators',
saveState: true,
options: [
'None',
'Hint',
@@ -126,6 +148,7 @@ let settingEntries = [
{
label: 'Grade Arrow Direction',
id: 'dropdown_gradeArrowDirection',
saveState: true,
options: [
'Uphill',
'Downhill',
@@ -139,6 +162,7 @@ let settingEntries = [
{
label: 'Terrain',
id: 'dropdown_terrain',
saveState: true,
options: [
'None',
'Simple',
@@ -146,6 +170,7 @@ let settingEntries = [
],
state: 'None',
func: state =>{
console.log(state);
let mapTerrain = document.getElementById('mapTerrain');
if(state == 'None'){
MapData.layers.terrain = false;
@@ -171,6 +196,7 @@ let settingEntries = [
label: 'Location Host',
id: 'field_locationHost',
state: 'localhost:9090',
saveState: true,
button: 'Wait',
func: state =>{
let button = document.getElementById('field_locationHost').nextSibling;
@@ -191,6 +217,7 @@ let settingEntries = [
label: 'Location Update Rate (seconds)',
id: 'dropdown_locationFrequency',
tooltip: 'Lower update intervals may cause poor performance',
saveState: true,
state: '0.2',
options: [
'0.05',
@@ -214,9 +241,17 @@ const legendKey = document.getElementById('legendKey');
export function initialize(){
const settingsPanel = document.getElementById('settingsPanel');
const oldSettingVersion = loadSetting('version');
for(let thisSetting of settingEntries){
addSettingEntry(thisSetting, settingsPanel);
if(oldSettingVersion != settingsVersion){
resetSetting(thisSetting.id);
addSettingEntry(thisSetting, settingsPanel);
resetSettingEntry(thisSetting);
}else{
addSettingEntry(thisSetting, settingsPanel);
}
}
saveSetting('version', settingsVersion);
const legend = document.getElementById('legend');
const legendContents = document.getElementById('legendContents');
const legendButton = document.getElementById('legendButton');
@@ -240,6 +275,8 @@ function addSettingEntry(thisSetting, parent, indent=0){
thisSetting.divContainer.appendChild(thisSetting.labelElement);
thisSetting.settingType = thisSetting.id.split('_')[0];
thisSetting.default = thisSetting.state;
if(thisSetting.saveState) thisSetting.state = loadSetting(thisSetting.id, thisSetting.state);
switch(thisSetting.settingType){
case 'toggle':
thisSetting.inputElement = document.createElement('input');
@@ -249,12 +286,14 @@ function addSettingEntry(thisSetting, parent, indent=0){
if(thisSetting.func){
thisSetting.inputElement.addEventListener('input', e =>{
thisSetting.func(e.target.checked);
if(thisSetting.saveState) saveSetting(thisSetting.id, e.target.checked);
if(thisSetting.children){
for(const child of thisSetting.children){
document.getElementById(child.id).parentElement.style.display = e.target.checked ? '' : 'none';
}
}
});
thisSetting.func(thisSetting.state);
}
break;
case 'dropdown':
@@ -274,7 +313,9 @@ function addSettingEntry(thisSetting, parent, indent=0){
if(thisSetting.func){
thisSetting.inputElement.addEventListener('change', e =>{
thisSetting.func(e.target.value);
})
if(thisSetting.saveState) saveSetting(thisSetting.id, e.target.value);
});
thisSetting.func(thisSetting.state);
}
break;
case 'slider':
@@ -286,7 +327,9 @@ function addSettingEntry(thisSetting, parent, indent=0){
if(thisSetting.func){
thisSetting.inputElement.addEventListener('input', e => {
thisSetting.func(e.target.value);
if(thisSetting.saveState) saveSetting(thisSetting.id, e.target.value);
});
thisSetting.func(thisSetting.state);
}
break;
case 'field':
@@ -300,9 +343,25 @@ function addSettingEntry(thisSetting, parent, indent=0){
if(thisSetting.func){
thisSetting.buttonElement.addEventListener('click', e => {
thisSetting.func(thisSetting.inputElement.value);
if(thisSetting.saveState) saveSetting(thisSetting.id, e.target.value);
});
}
}
if(thisSetting.saveState){
thisSetting.inputElement.addEventListener('input', e => {
saveSetting(thisSetting.id, e.target.value);
});
}
break;
case 'button':
thisSetting.inputElement = document.createElement('input');
thisSetting.inputElement.type = 'button';
thisSetting.inputElement.value = thisSetting.label;
if(thisSetting.func){
thisSetting.inputElement.addEventListener('click', e => {
thisSetting.func(0);
});
}
break;
case 'header':
break;
@@ -311,9 +370,11 @@ function addSettingEntry(thisSetting, parent, indent=0){
return;
}
parent.appendChild(thisSetting.divContainer);
thisSetting.labelElement.innerHTML = thisSetting.label;
thisSetting.labelElement.htmlFor = thisSetting.id;
if(thisSetting.tooltip) thisSetting.labelElement.title = thisSetting.tooltip;
if(thisSetting.settingType != 'button'){
thisSetting.labelElement.innerHTML = thisSetting.label;
thisSetting.labelElement.htmlFor = thisSetting.id;
if(thisSetting.tooltip) thisSetting.labelElement.title = thisSetting.tooltip;
}
if(thisSetting.settingType == 'field'){
thisSetting.buttonElement.style.margin = `0 0.5em 0 ${indent}em`;
@@ -326,10 +387,6 @@ function addSettingEntry(thisSetting, parent, indent=0){
thisSetting.divContainer.prepend(thisSetting.inputElement);
}
if(thisSetting.func){
thisSetting.func(thisSetting.state);
}
if(thisSetting.children){
for(let child of thisSetting.children){
addSettingEntry(child, parent, indent+1);
@@ -337,6 +394,75 @@ function addSettingEntry(thisSetting, parent, indent=0){
}
}
function resetSettingEntry(entry){
resetSetting(entry.id);
entry.state = entry.default;
switch(entry.settingType){
case 'toggle':
entry.inputElement.checked = entry.state;
if(entry.children){
for(const child of entry.children){
document.getElementById(child.id).parentElement.style.display = entry.state ? '' : 'none';
}
}
break;
case 'dropdown':
case 'slider':
case 'field':
entry.inputElement.value = entry.state;
break;
}
switch(entry.settingType){
case 'toggle':
case 'dropdown':
case 'slider':
if(entry.func) entry.func(entry.state);
}
if(entry.children){
for(const child of entry.children){
resetSettingEntry(child);
}
}
}
function saveSetting(name, value){
//console.log(`saving 'setting_${name}=${encodeURIComponent(value)};'`);
if(value == null){
resetSetting(name);
}else{
document.cookie = `setting_${name}=${encodeURIComponent(value)};max-age=5000000`;
}
}
function loadSetting(name, defaultValue){
const cookies = document.cookie.split(/\s*;\s*/);
for(let cookie of cookies){
if(cookie.startsWith('setting_'+name+'=')){
let result = cookie.split('=');
//console.log(`Loading setting_${name}=${decodeURIComponent(result[1])}`);
return autocast(decodeURIComponent(result[1]));
}
}
//console.log(`Loading default setting_${name}=${defaultValue}`);
return defaultValue;
}
function resetSetting(name){
document.cookie = `setting_${name}=;expires=${new Date(0).toUTCString()};`;
}
function autocast(value){
if(value == 'true' || value == 'True'){
return true;
}else if(value == 'false' || value == 'False'){
return false;
}else if(!isNaN(value)){
return Number(value);
}else{
return value;
}
}
let pageLoadUpdateDate = null;
async function setLastUpdateData(){
if(!window.location.host.includes('github')) return;