Skip to content

Commit

Permalink
handling settings menu created
Browse files Browse the repository at this point in the history
it doesnt do anything
  • Loading branch information
Spentine committed Jun 16, 2024
1 parent ef91542 commit 2a6fbb1
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 3 deletions.
17 changes: 17 additions & 0 deletions init.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,23 @@ <h1 class="ui" id="UI-homepageTitle"> Spentris </h1>
</div>

<div class="ui page" id="handlingMenu">
<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-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 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">
<button class="ui Button1" id="UI-handlingMenu-back"> Back </button>
</div>

Expand Down
19 changes: 18 additions & 1 deletion main.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { GameRenderer } from "./render.js"
import { InputHandler } from "./input.js"

var settings = {
"ver": 1, // settings version for backwards compatibility
"version": 1, // settings version for backwards compatibility
"handling": { // handling is in ms

// "das": 100,
Expand Down Expand Up @@ -53,6 +53,22 @@ var settings = {
};
// console.log(JSON.stringify(settings));

var userSettings = {
"version": 1,
"inGame": {
"handling": {
"das": 120,
"arr": 33,
"sdf": 5,
"dcd": 0,

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

var keyMappings = {
"ArrowLeft": "left",
"ArrowRight": "right",
Expand Down Expand Up @@ -98,6 +114,7 @@ function DOMLoaded(event) {
const cRender = document.getElementById('render');
renderer.useCanvas(cRender);
renderer.useKeyMappings(keyMappings);
renderer.useUserSettings(userSettings);
renderer.getUiElements();
renderer.updateScene(scene);

Expand Down
111 changes: 111 additions & 0 deletions render.js
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,10 @@ class GameRenderer {
this.keyMappings = keyMappings;
}

useUserSettings(userSettings) {
this.userSettings = userSettings;
}

getUiElements() {
this.uiElem = {
"homeMenu": {
Expand Down Expand Up @@ -290,6 +294,23 @@ class GameRenderer {
},
"handlingMenu": {
"container": document.getElementById("handlingMenu"),
"DASText": document.getElementById("UI-DASText"),
"ARRText": document.getElementById("UI-ARRText"),
"SDFText": document.getElementById("UI-SDFText"),
"DCDText": document.getElementById("UI-DCDText"),

"MSGText": document.getElementById("UI-MSGText"),
"AREText": document.getElementById("UI-AREText"),
"LCAText": document.getElementById("UI-LCAText"),

"DASInput": document.getElementById("UI-DASInput"),
"ARRInput": document.getElementById("UI-ARRInput"),
"SDFInput": document.getElementById("UI-SDFInput"),
"DCDInput": document.getElementById("UI-DCDInput"),

"MSGInput": document.getElementById("UI-MSGInput"),
"AREInput": document.getElementById("UI-AREInput"),
"LCAInput": document.getElementById("UI-LCAInput"),
"back": document.getElementById("UI-handlingMenu-back"),
}
}
Expand All @@ -310,6 +331,11 @@ class GameRenderer {
}

renderScreen(renderData) {

if (!this.canvas) {
return null;
}

if (this.prevCanvasWidth != window.innerWidth || this.prevCanvasHeight != window.innerHeight) {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
Expand Down Expand Up @@ -347,6 +373,24 @@ class GameRenderer {

// clean this up later using dicts

const menus = [
"homeMenu",
"playMenu",
"gamemodesMenu",
"settingsMenu",
"keybindsMenu",
"handlingMenu",
];

for (let i=0; i<menus.length; i++) {
this.uiElem[menus[i]].container.style.display = "none";
}

if (menus.includes(scene)) {
this.uiElem[scene].container.style.display = "block";
}

/*
this.uiElem.homeMenu.container.style.display = "none";
this.uiElem.playMenu.container.style.display = "none";
this.uiElem.gamemodesMenu.container.style.display = "none";
Expand Down Expand Up @@ -378,6 +422,8 @@ class GameRenderer {
break;
}
*/
}

updateKeybindButtons() {
Expand Down Expand Up @@ -652,6 +698,8 @@ class GameRenderer {
const currentButton = buttons[buttonIndex];
const currentButtonElement = currentButton.button;

// use setBoundaries()

xPos += xSpread;
currentButtonElement.style.left = (xPos) + "px";
xPos += xWidth;
Expand All @@ -667,6 +715,69 @@ 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);

var largestWidth = 0;

for (let handlingIndex=0; handlingIndex < handlingKeys.length; handlingIndex++) {
const currentHandling = handlingKeys[handlingIndex];

const sideText = this.uiElem.handlingMenu[currentHandling + "Text"];
if (!sideText) { // if it doesn't exist for whatever reason
if (handlings[currentHandling] !== null) {
break;
}
} else {

const textBounds = sideText.getBoundingClientRect();
if (textBounds.width > largestWidth) {
largestWidth = textBounds.width;
}

}
}

for (let handlingIndex=0; handlingIndex < handlingKeys.length; handlingIndex++) {
const currentHandling = handlingKeys[handlingIndex];

const sideText = this.uiElem.handlingMenu[currentHandling + "Text"];
if (!sideText) { // if it doesn't exist for whatever reason
if (handlings[currentHandling] !== null) {
break;
}
} else {

const textBounds = sideText.getBoundingClientRect();

const xPos = largestWidth + this.uiScaling * 0.05;
const yPos = (0.05 * this.uiScaling) * (handlingIndex + 2)

sideText.style.left = (xPos - textBounds.width) + "px";
sideText.style.top = (yPos - 0.5 * textBounds.height) + "px";

const yHeight = 0.04 * this.uiScaling;

setBoundaries(this.uiElem.handlingMenu[currentHandling + "Input"], {
"x": xPos + this.uiScaling * 0.02,
"y": yPos - yHeight * 0.5,
"w": this.uiScaling * 0.17,
"h": yHeight,
});

}
}

setBoundaries(this.uiElem.handlingMenu.back, {
"x": (0.05 * this.uiScaling) * 0.1,
"y": (0.05 * this.uiScaling) * 0.1,
Expand Down
2 changes: 1 addition & 1 deletion stacker/stacker.js
Original file line number Diff line number Diff line change
Expand Up @@ -533,7 +533,7 @@ class Stacker {
/*
builds the block stacker game
*/
switch (settings.ver) {
switch (settings.version) {
case 1: // version 1 of settings

/*
Expand Down
24 changes: 23 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,12 @@ html, body {
}

.ui {
-webkit-appearance: none;
-moz-appearance: none;
z-index: auto;
position: fixed;
margin: 0;
font-family: sans-serif;
}

.page {
Expand Down Expand Up @@ -53,6 +56,25 @@ html, body {
cursor: not-allowed;
}

.keybindsText {
.ui.NumberInput1 {
background-color: #333333;
font-size: 30px;
color: #ffffff;
}

.ui.NumberInput1.unfinished {
background-color: #222222;
cursor: not-allowed;
}

.ui.keybindsText {
font-size: 30px;
}

.ui.handlingText {
font-size: 30px;
}

.ui.handlingText.unfinished {
color: #888888;
}

0 comments on commit 2a6fbb1

Please sign in to comment.