mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-21 16:13:55 +00:00
Options are now saved separately
This commit is contained in:
parent
22e12c06b5
commit
cd71349fd5
8 changed files with 69 additions and 47 deletions
|
@ -137,7 +137,7 @@ function loadVue() {
|
||||||
Vue.component('challenge', {
|
Vue.component('challenge', {
|
||||||
props: ['layer', 'data'],
|
props: ['layer', 'data'],
|
||||||
template: `
|
template: `
|
||||||
<div v-if="tmp[layer].challenges && tmp[layer].challenges[data]!== undefined && tmp[layer].challenges[data].unlocked && !(player.hideChallenges && maxedChallenge(layer, [data]) && !inChallenge(layer, [data]))"
|
<div v-if="tmp[layer].challenges && tmp[layer].challenges[data]!== undefined && tmp[layer].challenges[data].unlocked && !(options.hideChallenges && maxedChallenge(layer, [data]) && !inChallenge(layer, [data]))"
|
||||||
v-bind:class="['hChallenge', challengeStyle(layer, data), inChallenge(layer, data) ? 'resetNotify' : '']" v-bind:style="tmp[layer].challenges[data].style">
|
v-bind:class="['hChallenge', challengeStyle(layer, data), inChallenge(layer, data) ? 'resetNotify' : '']" v-bind:style="tmp[layer].challenges[data].style">
|
||||||
<br><h3 v-html="tmp[layer].challenges[data].name"></h3><br><br>
|
<br><h3 v-html="tmp[layer].challenges[data].name"></h3><br><br>
|
||||||
<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp[layer].color}" v-on:click="startChallenge(layer, data)">{{challengeButtonText(layer, data)}}</button><br><br>
|
<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp[layer].color}" v-on:click="startChallenge(layer, data)">{{challengeButtonText(layer, data)}}</button><br><br>
|
||||||
|
@ -558,6 +558,7 @@ function loadVue() {
|
||||||
data: {
|
data: {
|
||||||
player,
|
player,
|
||||||
tmp,
|
tmp,
|
||||||
|
options,
|
||||||
Decimal,
|
Decimal,
|
||||||
format,
|
format,
|
||||||
formatWhole,
|
formatWhole,
|
||||||
|
|
|
@ -224,7 +224,7 @@ function doReset(layer, force=false) {
|
||||||
if (row >= layers[layerResetting].row && (!force || layerResetting != layer)) completeChallenge(layerResetting)
|
if (row >= layers[layerResetting].row && (!force || layerResetting != layer)) completeChallenge(layerResetting)
|
||||||
}
|
}
|
||||||
|
|
||||||
prevOnReset = {...player} //Deep Copy
|
prevOnReset = {...player}
|
||||||
player.points = (row == 0 ? decimalZero : getStartPoints())
|
player.points = (row == 0 ? decimalZero : getStartPoints())
|
||||||
|
|
||||||
for (let x = row; x >= 0; x--) rowReset(x, layer)
|
for (let x = row; x >= 0; x--) rowReset(x, layer)
|
||||||
|
@ -336,7 +336,7 @@ function gameLoop(diff) {
|
||||||
if (isNaN(diff)) diff = 0
|
if (isNaN(diff)) diff = 0
|
||||||
if (gameEnded && !player.keepGoing) {
|
if (gameEnded && !player.keepGoing) {
|
||||||
diff = 0
|
diff = 0
|
||||||
player.tab = "gameEnded"
|
//player.tab = "gameEnded"
|
||||||
clearParticles()
|
clearParticles()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -52,7 +52,7 @@ function achievementStyle(layer, id){
|
||||||
function updateWidth() {
|
function updateWidth() {
|
||||||
let screenWidth = window.innerWidth
|
let screenWidth = window.innerWidth
|
||||||
let splitScreen = screenWidth >= 1024
|
let splitScreen = screenWidth >= 1024
|
||||||
if (player.forceOneTab) splitScreen = false
|
if (options.forceOneTab) splitScreen = false
|
||||||
if (player.navTab == "none") splitScreen = true
|
if (player.navTab == "none") splitScreen = true
|
||||||
tmp.other.screenWidth = screenWidth
|
tmp.other.screenWidth = screenWidth
|
||||||
tmp.other.screenHeight = window.innerHeight
|
tmp.other.screenHeight = window.innerHeight
|
||||||
|
|
|
@ -153,22 +153,22 @@ var systemComponents = {
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button class="opt" onclick="save()">Save</button></td>
|
<td><button class="opt" onclick="save()">Save</button></td>
|
||||||
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ player.autosave?"ON":"OFF" }}</button></td>
|
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ options.autosave?"ON":"OFF" }}</button></td>
|
||||||
<td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
|
<td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button class="opt" onclick="exportSave()">Export to clipboard</button></td>
|
<td><button class="opt" onclick="exportSave()">Export to clipboard</button></td>
|
||||||
<td><button class="opt" onclick="importSave()">Import</button></td>
|
<td><button class="opt" onclick="importSave()">Import</button></td>
|
||||||
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
|
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ options.offlineProd?"ON":"OFF" }}</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button class="opt" onclick="switchTheme()">Theme: {{ getThemeName() }}</button></td>
|
<td><button class="opt" onclick="switchTheme()">Theme: {{ getThemeName() }}</button></td>
|
||||||
<td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ MS_DISPLAYS[MS_SETTINGS.indexOf(player.msDisplay)]}}</button></td>
|
<td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ MS_DISPLAYS[MS_SETTINGS.indexOf(options.msDisplay)]}}</button></td>
|
||||||
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ player.hqTree?"ON":"OFF" }}</button></td>
|
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ options.hqTree?"ON":"OFF" }}</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ player.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
|
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ options.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
|
||||||
<td><button class="opt" onclick="toggleOpt('forceOneTab'); needsCanvasUpdate = true">Single-Tab Mode: {{ player.forceOneTab?"ALWAYS":"AUTO" }}</button></td>
|
<td><button class="opt" onclick="toggleOpt('forceOneTab'); needsCanvasUpdate = true">Single-Tab Mode: {{ options.forceOneTab?"ALWAYS":"AUTO" }}</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>`
|
</table>`
|
||||||
},
|
},
|
||||||
|
@ -187,10 +187,10 @@ var systemComponents = {
|
||||||
},
|
},
|
||||||
|
|
||||||
'node-mark': {
|
'node-mark': {
|
||||||
props: ['layer', 'data', 'offset', 'scale'],
|
props: {'layer': {}, data: {}, offset: {default: 0}, scale: {default: 1}},
|
||||||
template: `<div v-if='data'>
|
template: `<div v-if='data'>
|
||||||
<div v-if='data === true' class='star' v-bind:style='{position: "absolute", left: (offset-10) + "px", top: (offset-10) + "px", transform: "scale( " + scale + ", " + scale + ")"}'></div>
|
<div v-if='data === true' class='star' v-bind:style='{position: "absolute", left: (offset-10) + "px", top: (offset-10) + "px", transform: "scale( " + scale||1 + ", " + scale||1 + ")"}'></div>
|
||||||
<img v-else class='mark' v-bind:style='{position: "absolute", left: (offset-10) + "px", top: (offset-10) + "px", transform: "scale( " + scale + ", " + scale + ")"}' v-bind:src="data"></div>
|
<img v-else class='mark' v-bind:style='{position: "absolute", left: (offset-22) + "px", top: (offset-15) + "px", transform: "scale( " + scale||1 + ", " + scale||1 + ")"}' v-bind:src="data"></div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
|
@ -211,7 +211,7 @@ var systemComponents = {
|
||||||
|
|
||||||
'bg': {
|
'bg': {
|
||||||
props: ['layer'],
|
props: ['layer'],
|
||||||
template: `<div class ="bg" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]"></div>
|
template: `<div class ="bg" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]"></div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -233,13 +233,7 @@ function subtabResetNotify(layer, family, id) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function nodeShown(layer) {
|
function nodeShown(layer) {
|
||||||
if (layerShown(layer)) return true
|
return layerShown(layer)
|
||||||
switch (layer) {
|
|
||||||
case "idk":
|
|
||||||
return player.idk.unlocked
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function layerunlocked(layer) {
|
function layerunlocked(layer) {
|
||||||
|
@ -250,7 +244,6 @@ function layerunlocked(layer) {
|
||||||
function keepGoing() {
|
function keepGoing() {
|
||||||
player.keepGoing = true;
|
player.keepGoing = true;
|
||||||
needCanvasUpdate = true;
|
needCanvasUpdate = true;
|
||||||
showTab(player.lastSafeTab)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toNumber(x) {
|
function toNumber(x) {
|
||||||
|
|
|
@ -1,9 +1,26 @@
|
||||||
// ************ Options ************
|
// ************ Options ************
|
||||||
|
|
||||||
|
let options = {}
|
||||||
|
|
||||||
|
function getStartOptions() {
|
||||||
|
return {
|
||||||
|
autosave: true,
|
||||||
|
msDisplay: "always",
|
||||||
|
theme: null,
|
||||||
|
hqTree: false,
|
||||||
|
offlineProd: true,
|
||||||
|
hideChallenges: false,
|
||||||
|
showStory: true,
|
||||||
|
forceOneTab: false,
|
||||||
|
oldStyle: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function toggleOpt(name) {
|
function toggleOpt(name) {
|
||||||
if (name == "oldStyle" && styleCooldown > 0)
|
if (name == "oldStyle" && styleCooldown > 0)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
player[name] = !player[name];
|
options[name] = !options[name];
|
||||||
if (name == "hqTree")
|
if (name == "hqTree")
|
||||||
changeTreeQuality();
|
changeTreeQuality();
|
||||||
if (name == "oldStyle")
|
if (name == "oldStyle")
|
||||||
|
@ -13,11 +30,11 @@ var styleCooldown = 0;
|
||||||
function updateStyle() {
|
function updateStyle() {
|
||||||
styleCooldown = 1;
|
styleCooldown = 1;
|
||||||
let css = document.getElementById("styleStuff");
|
let css = document.getElementById("styleStuff");
|
||||||
css.href = player.oldStyle ? "oldStyle.css" : "style.css";
|
css.href = options.oldStyle ? "oldStyle.css" : "style.css";
|
||||||
needCanvasUpdate = true;
|
needCanvasUpdate = true;
|
||||||
}
|
}
|
||||||
function changeTreeQuality() {
|
function changeTreeQuality() {
|
||||||
var on = player.hqTree;
|
var on = options.hqTree;
|
||||||
document.body.style.setProperty('--hqProperty1', on ? "2px solid" : "4px solid");
|
document.body.style.setProperty('--hqProperty1', on ? "2px solid" : "4px solid");
|
||||||
document.body.style.setProperty('--hqProperty2a', on ? "-4px -4px 4px rgba(0, 0, 0, 0.25) inset" : "-4px -4px 4px rgba(0, 0, 0, 0) inset");
|
document.body.style.setProperty('--hqProperty2a', on ? "-4px -4px 4px rgba(0, 0, 0, 0.25) inset" : "-4px -4px 4px rgba(0, 0, 0, 0) inset");
|
||||||
document.body.style.setProperty('--hqProperty2b', on ? "0px 0px 20px var(--background)" : "");
|
document.body.style.setProperty('--hqProperty2b', on ? "0px 0px 20px var(--background)" : "");
|
||||||
|
@ -33,13 +50,13 @@ const MS_DISPLAYS = ["ALL", "LAST, AUTO, INCOMPLETE", "AUTOMATION, INCOMPLETE",
|
||||||
const MS_SETTINGS = ["always", "last", "automation", "incomplete", "never"];
|
const MS_SETTINGS = ["always", "last", "automation", "incomplete", "never"];
|
||||||
|
|
||||||
function adjustMSDisp() {
|
function adjustMSDisp() {
|
||||||
player.msDisplay = MS_SETTINGS[(MS_SETTINGS.indexOf(player.msDisplay) + 1) % 5];
|
options.msDisplay = MS_SETTINGS[(MS_SETTINGS.indexOf(options.msDisplay) + 1) % 5];
|
||||||
}
|
}
|
||||||
function milestoneShown(layer, id) {
|
function milestoneShown(layer, id) {
|
||||||
complete = player[layer].milestones.includes(id);
|
complete = player[layer].milestones.includes(id);
|
||||||
auto = layers[layer].milestones[id].toggles;
|
auto = layers[layer].milestones[id].toggles;
|
||||||
|
|
||||||
switch (player.msDisplay) {
|
switch (options.msDisplay) {
|
||||||
case "always":
|
case "always":
|
||||||
return true;
|
return true;
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -2,27 +2,22 @@
|
||||||
function save() {
|
function save() {
|
||||||
if (NaNalert) return
|
if (NaNalert) return
|
||||||
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(player)))));
|
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(player)))));
|
||||||
|
localStorage.setItem(modInfo.id+"_options", btoa(unescape(encodeURIComponent(JSON.stringify(options)))));
|
||||||
|
|
||||||
}
|
}
|
||||||
function startPlayerBase() {
|
function startPlayerBase() {
|
||||||
return {
|
return {
|
||||||
tab: layoutInfo.startTab,
|
tab: layoutInfo.startTab,
|
||||||
navTab: (layoutInfo.showTree ? layoutInfo.startNavTab : "none"),
|
navTab: (layoutInfo.showTree ? layoutInfo.startNavTab : "none"),
|
||||||
time: Date.now(),
|
time: Date.now(),
|
||||||
autosave: true,
|
|
||||||
notify: {},
|
notify: {},
|
||||||
msDisplay: "always",
|
|
||||||
theme: null,
|
|
||||||
hqTree: false,
|
|
||||||
offlineProd: true,
|
|
||||||
versionType: modInfo.id,
|
versionType: modInfo.id,
|
||||||
version: VERSION.num,
|
version: VERSION.num,
|
||||||
beta: VERSION.beta,
|
beta: VERSION.beta,
|
||||||
timePlayed: 0,
|
timePlayed: 0,
|
||||||
keepGoing: false,
|
keepGoing: false,
|
||||||
hasNaN: false,
|
hasNaN: false,
|
||||||
hideChallenges: false,
|
|
||||||
showStory: true,
|
|
||||||
forceOneTab: false,
|
|
||||||
points: modInfo.initialStartPoints,
|
points: modInfo.initialStartPoints,
|
||||||
subtabs: {},
|
subtabs: {},
|
||||||
lastSafeTab: (readData(layoutInfo.showTree) ? "none" : layoutInfo.startTab)
|
lastSafeTab: (readData(layoutInfo.showTree) ? "none" : layoutInfo.startTab)
|
||||||
|
@ -190,11 +185,16 @@ function fixData(defaultData, newData) {
|
||||||
}
|
}
|
||||||
function load() {
|
function load() {
|
||||||
let get = localStorage.getItem(modInfo.id);
|
let get = localStorage.getItem(modInfo.id);
|
||||||
if (get === null || get === undefined)
|
|
||||||
|
if (get === null || get === undefined) {
|
||||||
player = getStartPlayer();
|
player = getStartPlayer();
|
||||||
else
|
options = getStartOptions();
|
||||||
|
}
|
||||||
|
else {
|
||||||
player = Object.assign(getStartPlayer(), JSON.parse(decodeURIComponent(escape(atob(get)))));
|
player = Object.assign(getStartPlayer(), JSON.parse(decodeURIComponent(escape(atob(get)))));
|
||||||
fixSave();
|
fixSave();
|
||||||
|
loadOptions();
|
||||||
|
}
|
||||||
|
|
||||||
if (player.offlineProd) {
|
if (player.offlineProd) {
|
||||||
if (player.offTime === undefined)
|
if (player.offTime === undefined)
|
||||||
|
@ -214,6 +214,17 @@ function load() {
|
||||||
updateTabFormats()
|
updateTabFormats()
|
||||||
loadVue();
|
loadVue();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadOptions() {
|
||||||
|
let get2 = localStorage.getItem(modInfo.id+"_options");
|
||||||
|
if (get2)
|
||||||
|
options = Object.assign(getStartOptions(), JSON.parse(decodeURIComponent(escape(atob(get2)))));
|
||||||
|
else
|
||||||
|
options = getStartOptions()
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
function setupModInfo() {
|
function setupModInfo() {
|
||||||
modInfo.changelog = changelog;
|
modInfo.changelog = changelog;
|
||||||
modInfo.winText = winText ? winText : `Congratulations! You have reached the end and beaten this game, but for now...`;
|
modInfo.winText = winText ? winText : `Congratulations! You have reached the end and beaten this game, but for now...`;
|
||||||
|
@ -297,6 +308,6 @@ var saveInterval = setInterval(function () {
|
||||||
return;
|
return;
|
||||||
if (gameEnded && !player.keepGoing)
|
if (gameEnded && !player.keepGoing)
|
||||||
return;
|
return;
|
||||||
if (player.autosave)
|
if (options.autosave)
|
||||||
save();
|
save();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
|
@ -6,8 +6,8 @@ const theme_names = {
|
||||||
aqua: "Aqua"
|
aqua: "Aqua"
|
||||||
};
|
};
|
||||||
function changeTheme() {
|
function changeTheme() {
|
||||||
let aqua = player.theme == "aqua";
|
let aqua = options.theme == "aqua";
|
||||||
colors_theme = colors[player.theme || "default"];
|
colors_theme = colors[options.theme || "default"];
|
||||||
document.body.style.setProperty('--background', aqua ? "#001f3f" : "#0f0f0f");
|
document.body.style.setProperty('--background', aqua ? "#001f3f" : "#0f0f0f");
|
||||||
document.body.style.setProperty('--background_tooltip', aqua ? "rgba(0, 15, 31, 0.75)" : "rgba(0, 0, 0, 0.75)");
|
document.body.style.setProperty('--background_tooltip', aqua ? "rgba(0, 15, 31, 0.75)" : "rgba(0, 0, 0, 0.75)");
|
||||||
document.body.style.setProperty('--color', aqua ? "#bfdfff" : "#dfdfdf");
|
document.body.style.setProperty('--color', aqua ? "#bfdfff" : "#dfdfdf");
|
||||||
|
@ -15,15 +15,15 @@ function changeTheme() {
|
||||||
document.body.style.setProperty("--locked", aqua ? "#c4a7b3" : "#bf8f8f");
|
document.body.style.setProperty("--locked", aqua ? "#c4a7b3" : "#bf8f8f");
|
||||||
}
|
}
|
||||||
function getThemeName() {
|
function getThemeName() {
|
||||||
return player.theme ? theme_names[player.theme] : "Default";
|
return options.theme ? theme_names[options.theme] : "Default";
|
||||||
}
|
}
|
||||||
function switchTheme() {
|
function switchTheme() {
|
||||||
if (player.theme === null)
|
if (options.theme === null)
|
||||||
player.theme = themes[1];
|
options.theme = themes[1];
|
||||||
else {
|
else {
|
||||||
player.theme = themes[Object.keys(themes)[player.theme] + 1];
|
options.theme = themes[Object.keys(themes)[options.theme] + 1];
|
||||||
if (!player.theme)
|
if (!options.theme)
|
||||||
player.theme = null;
|
options.theme = null;
|
||||||
}
|
}
|
||||||
changeTheme();
|
changeTheme();
|
||||||
resizeCanvas();
|
resizeCanvas();
|
||||||
|
|
Loading…
Reference in a new issue