Skip to content

Commit

Permalink
added saving and handling settings
Browse files Browse the repository at this point in the history 
it works too and it's beautiful 🤩
  • Loading branch information
@Spentine
Spentine committed Jun 16, 2024
1 parent 2a6fbb1 commit 53f24a4
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 42 deletions.
20 changes: 11 additions & 9 deletions init.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,21 +67,23 @@ <h1 class="ui" id="UI-homepageTitle"> Spentris </h1>
<p class="ui handlingText" id="UI-DASText"> DAS </p>
<p class="ui handlingText" id="UI-ARRText"> ARR </p>
<p class="ui handlingText" id="UI-SDFText"> SDF </p>
<p class="ui handlingText" id="UI-DCDText"> DCD </p>
<p class="ui handlingText unfinished" id="UI-DCDText"> DCD </p>

<p class="ui handlingText unfinished" id="UI-MSGText"> MSG </p>
<p class="ui handlingText" id="UI-MSGText"> MSG </p>
<p class="ui handlingText unfinished" id="UI-AREText"> ARE </p>
<p class="ui handlingText unfinished" id="UI-LCAText"> LCA </p>

<input class="ui NumberInput1" type="number" id="UI-DASInput" min="1" max="1000">
<input class="ui NumberInput1" type="number" id="UI-ARRInput" min="1" max="1000">
<input class="ui NumberInput1" type="number" id="UI-SDFInput" min="1" max="1000">
<input class="ui NumberInput1" type="number" id="UI-DCDInput" min="1" max="1000">
<input class="ui NumberInput1" type="text" id="UI-DASInput" min="1" max="1000">
<input class="ui NumberInput1" type="text" id="UI-ARRInput" min="0" max="1000">
<input class="ui NumberInput1" type="text" id="UI-SDFInput" min="0" max="Infinity">
<input class="ui NumberInput1 unfinished" readonly type="text" id="UI-DCDInput" min="1" max="1000">

<input class="ui NumberInput1 unfinished" type="number" id="UI-MSGInput" min="1" max="1000">
<input class="ui NumberInput1 unfinished" type="number" id="UI-AREInput" min="1" max="1000">
<input class="ui NumberInput1 unfinished" type="number" id="UI-LCAInput" min="1" max="1000">
<input class="ui NumberInput1" type="text" id="UI-MSGInput" min="0" max="1000">
<input class="ui NumberInput1 unfinished" readonly type="text" id="UI-AREInput" min="1" max="1000">
<input class="ui NumberInput1 unfinished" readonly type="text" id="UI-LCAInput" min="1" max="1000">
<button class="ui Button1" id="UI-handlingMenu-back"> Back </button>

<button class="ui Button1" id="UI-handlingMenu-reset"> Reset </button>
</div>

</body>
Expand Down
78 changes: 60 additions & 18 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ var userSettings = {
"handling": {
"das": 120,
"arr": 33,
"sdf": 5,
"sdf": 10,
"dcd": 0,

"msg": 0.001,
Expand All @@ -82,30 +82,47 @@ var keyMappings = {
"KeyR": "reset",
};

// handle localstorage
var blockStackerStorage = localStorage.getItem("blockStacker");

if (blockStackerStorage) {
function saveBlockStackerStorage() {
blockStackerStorage = {
"version": 1,
"userSettings": userSettings,
};

try {
blockStackerStorage = JSON.parse(blockStackerStorage);
} catch {
console.log("blockStackerStorage ERROR!");
console.log(blockStackerStorage);
}
const savedStorage = structuredClone(blockStackerStorage);

if (blockStackerStorage.keyMappingOverrides) {
console.log(blockStackerStorage.keyMappingOverrides);
keyMappings = blockStackerStorage.keyMappingOverrides;
// `Infinity` cannot be saved in JSON, so I subsitute it with -1.
if (savedStorage.userSettings.inGame.handling.sdf === Infinity) {
savedStorage.userSettings.inGame.handling.sdf = -1;
}
if (blockStackerStorage.settingOverrides) {
settings = blockStackerStorage.settingOverrides;

localStorage.setItem("blockStacker", JSON.stringify(savedStorage));
}

function loadBlockStackerStorage() {
blockStackerStorage = JSON.parse(localStorage.getItem("blockStacker"));

if (blockStackerStorage.userSettings.inGame.handling.sdf === -1) {
blockStackerStorage.userSettings.inGame.handling.sdf = Infinity;
}
} else {
}

// handle localstorage
var blockStackerStorage = undefined;

try {
loadBlockStackerStorage();
} catch {
console.log("Unable to read blockStackerStorage");
localStorage.setItem("blockStacker", "{}");
}

const game = new Stacker(settings);
if (blockStackerStorage.userSettings) {
userSettings = blockStackerStorage.userSettings;
}

saveBlockStackerStorage();

var game = null;
const inputHandler = new InputHandler(keyMappings);
const renderer = new GameRenderer();
var scene = "homeMenu";
Expand All @@ -117,6 +134,7 @@ function DOMLoaded(event) {
renderer.useUserSettings(userSettings);
renderer.getUiElements();
renderer.updateScene(scene);
renderer.saveBlockStackerStorage = saveBlockStackerStorage;

const UIStartElement = document.getElementById('UI-play');
UIStartElement.addEventListener("click", () => {
Expand Down Expand Up @@ -180,6 +198,7 @@ function DOMLoaded(event) {
UIHandlingElement.addEventListener("click", () => {
scene = "handlingMenu";
startGame();
renderer.updateHandlingInputs();
renderer.updateScene(scene);
});

Expand All @@ -188,13 +207,36 @@ function DOMLoaded(event) {
scene = "settingsMenu";
renderer.updateScene(scene);
});

const UIHandlingMenuResetElement = document.getElementById('UI-handlingMenu-reset');
UIHandlingMenuResetElement.addEventListener("click", () => {
userSettings.inGame.handling = {
"das": 120,
"arr": 33,
"sdf": 10,
"dcd": 0,

"msg": 0.001,
"are": 0,
"lca": 0,
};

saveBlockStackerStorage();
renderer.updateHandlingInputs();
});
}

var lastFrame;
var lastInputs;

function startGame() {

const playSettings = structuredClone(settings);

playSettings.handling = userSettings.inGame.handling;

game = new Stacker(playSettings);

lastFrame = Date.now();
lastInputs = inputHandler.getInputs();

Expand Down
67 changes: 52 additions & 15 deletions render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@ const inputsList = [
"reset",
];

const handlingList = {
"DAS": "das",
"ARR": "arr",
"SDF": "sdf",
"DCD": "dcd",
"": null,
"MSG": "msg",
"ARE": "are",
"LCA": "lca",
};

function loadSkin(skinName, skinPaths) {
const skin = {};

Expand Down Expand Up @@ -312,6 +323,7 @@ class GameRenderer {
"AREInput": document.getElementById("UI-AREInput"),
"LCAInput": document.getElementById("UI-LCAInput"),
"back": document.getElementById("UI-handlingMenu-back"),
"reset": document.getElementById("UI-handlingMenu-reset"),
}
}
}
Expand All @@ -323,6 +335,7 @@ class GameRenderer {
this.whRatio = 1;
this.uiScaling = 1;
this.persistentEffects = {};
this.saveBlockStackerStorage = function() {}
}

useCanvas(canvas) {
Expand All @@ -340,7 +353,7 @@ class GameRenderer {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.whRatio = this.canvas.width / this.canvas.height;
this.uiScaling = this.canvas.width;
this.uiScaling = Math.min(this.canvas.width, 1.5 * this.canvas.height);
}
this.prevCanvasWidth = this.canvas.width;
this.prevCanvasHeight = this.canvas.height;
Expand Down Expand Up @@ -472,6 +485,34 @@ class GameRenderer {
}
}

updateHandlingInputs() { // load handling values into ui

const handlingKeys = Object.keys(handlingList);

for (let handlingIndex=0; handlingIndex < handlingKeys.length; handlingIndex++) {
const inputElem = this.uiElem.handlingMenu[handlingKeys[handlingIndex] + "Input"]; // input element to display number
if (inputElem) {
const currentHandling = handlingList[handlingKeys[handlingIndex]];
inputElem.value = this.userSettings.inGame.handling[currentHandling]; // display correct number

inputElem.addEventListener("change", (e) => { // when value changed
if (isNaN(Number(inputElem.value))) {
inputElem.value = this.userSettings.inGame.handling[currentHandling];
} else if (Number(inputElem.value) < Number(inputElem.min)) {
inputElem.value = inputElem.min;
} else if (Number(inputElem.value) > Number(inputElem.max)) {
inputElem.value = inputElem.max;
} else {
this.userSettings.inGame.handling[currentHandling] = Number(inputElem.value); // save value
inputElem.value = Number(inputElem.value);
this.saveBlockStackerStorage();
}
});
}
}

}

renderUI(data) {
if (!this.uiElem) { // if it's not really loaded yet and nothing is there
return false;
Expand Down Expand Up @@ -715,18 +756,7 @@ class GameRenderer {

case "handlingMenu":

const handlings = {
"DAS": "das",
"ARR": "arr",
"SDF": "sdf",
"DCD": "dcd",
"": null,
"MSG": "msg",
"ARE": "are",
"LCA": "lca",
};

const handlingKeys = Object.keys(handlings);
const handlingKeys = Object.keys(handlingList);

var largestWidth = 0;

Expand All @@ -735,7 +765,7 @@ class GameRenderer {

const sideText = this.uiElem.handlingMenu[currentHandling + "Text"];
if (!sideText) { // if it doesn't exist for whatever reason
if (handlings[currentHandling] !== null) {
if (handlingList[currentHandling] !== null) {
break;
}
} else {
Expand All @@ -753,7 +783,7 @@ class GameRenderer {

const sideText = this.uiElem.handlingMenu[currentHandling + "Text"];
if (!sideText) { // if it doesn't exist for whatever reason
if (handlings[currentHandling] !== null) {
if (handlingList[currentHandling] !== null) {
break;
}
} else {
Expand Down Expand Up @@ -785,6 +815,13 @@ class GameRenderer {
"h": (0.05 * this.uiScaling) * 1,
});

setBoundaries(this.uiElem.handlingMenu.reset, {
"x": (0.05 * this.uiScaling) * 0.1,
"y": this.canvas.height - (0.05 * this.uiScaling) * 0.1 - (0.05 * this.uiScaling) * 1,
"w": (0.05 * this.uiScaling) * 2,
"h": (0.05 * this.uiScaling) * 1,
});

break;

case "test":
Expand Down

0 comments on commit 53f24a4

Please sign in to comment.