diff --git a/assets/js/platformer3x/GameSet.js b/assets/js/platformer3x/GameSet.js index 941a8d42..965cff38 100644 --- a/assets/js/platformer3x/GameSet.js +++ b/assets/js/platformer3x/GameSet.js @@ -25,4 +25,4 @@ class GameSet { } - export default GameSet; \ No newline at end of file + export default GameSet; diff --git a/assets/js/platformer3x/GameSetterEnd.js b/assets/js/platformer3x/GameSetterEnd.js index 0c52db83..023bafca 100644 --- a/assets/js/platformer3x/GameSetterEnd.js +++ b/assets/js/platformer3x/GameSetterEnd.js @@ -22,4 +22,4 @@ const GameSetterEnd = { objects: objects }; -export default GameSetterEnd; \ No newline at end of file +export default GameSetterEnd; diff --git a/assets/js/platformer3x/GameSetterSkibidi.js b/assets/js/platformer3x/GameSetterSkibidi.js index d6884f20..6522f962 100644 --- a/assets/js/platformer3x/GameSetterSkibidi.js +++ b/assets/js/platformer3x/GameSetterSkibidi.js @@ -8,6 +8,7 @@ import Laser from './Laser.js'; import SkibidiToilet from './SkibidiToilet.js'; import PlayerSkibidi from './PlayerSkibidi.js'; import FinishLine from './FinishLine.js'; +import PlayerBaseOneD from './PlayerBaseOneD.js'; const assets = { obstacles: { @@ -176,24 +177,12 @@ const assets = { height: 140, scaleSize: 150, speedRatio: 0.7, - animationSpeed: 8, + animationSpeed: 4, ///animationspeed:6 - idle: { - left: { row: 0, frames: 5 }, - right: { row: 0, frames: 5}, - }, - walk: { - left: { row: 1, frames: 6 }, - right: { row: 1, frames: 6 }, - }, - run: { - left: { row: 2, frames: 7 }, - right: { row: 2, frames: 7 }, - }, - jump: { - left: { row: 3, frames: 8 }, - right: { row: 3, frames: 8 }, - }, + idle: {row: 0, frames: 5 }, + walk: { row: 1, frames: 6 }, + run: { row: 2, frames: 7 }, + jump: {row: 3, frames: 8 }, hitbox: { widthPercentage: 0.3, heightPercentage: 0.8 } }, whitemario: { diff --git a/assets/js/platformer3x/PlayerBaseOneD.js b/assets/js/platformer3x/PlayerBaseOneD.js index 00f5ed0c..de2f5328 100644 --- a/assets/js/platformer3x/PlayerBaseOneD.js +++ b/assets/js/platformer3x/PlayerBaseOneD.js @@ -136,6 +136,8 @@ export class PlayerBaseOneD extends Character { // Increase the player's x position according to run or walk animation and related speed this.setX(this.x + (this.state.animation === 'run' ? this.runSpeed : this.speed)); } + GameEnv.PlayerPosition.playerX = this.x + GameEnv.PlayerPosition.playerY = this.y } } @@ -145,6 +147,7 @@ export class PlayerBaseOneD extends Character { updateAnimation() { switch (this.state.animation) { case 'idle': + console.log(this.playerData.idle) if(this.state.direction == "left"){ this.canvas.style.transform = 'scaleX(-1)'; } diff --git a/assets/js/platformer3x/PlayerSkibidi.js b/assets/js/platformer3x/PlayerSkibidi.js index d12307b2..f10c2060 100644 --- a/assets/js/platformer3x/PlayerSkibidi.js +++ b/assets/js/platformer3x/PlayerSkibidi.js @@ -1,6 +1,7 @@ import GameEnv from './GameEnv.js'; import PlayerBase from './PlayerBase.js'; import GameControl from './GameControl.js'; +import PlayerBaseOneD from './PlayerBaseOneD.js'; ///With this you can change the direction of the sprite sheet with just the sprite rows. /** * @class PlayerSkibidi class @@ -12,7 +13,7 @@ import GameControl from './GameControl.js'; * * @extends PlayerBase */ -export class PlayerSkibidi extends PlayerBase { +export class PlayerSkibidi extends PlayerBaseOneD { /// Using PlayerBaseOneD added the sprite mirror but deleted the sprite not showing the animations /** GameObject instantiation: constructor for PlayerSkibidi object * @extends Character @@ -23,6 +24,8 @@ export class PlayerSkibidi extends PlayerBase { constructor(canvas, image, data) { super(canvas, image, data); + this.animationSpeed = data?.animationSpeed; + this.counter = this.animationSpeed; // Goomba variables, deprecate? this.timer = false; GameEnv.invincible = false; // Player is not invincible @@ -44,6 +47,21 @@ export class PlayerSkibidi extends PlayerBase { this.setY(this.y - (this.bottom * jumpHeightFactor)); } + updateFrameX(){ + if (this.frameX < this.maxFrame) { + if(this.counter > 0){ + this.frameX = this.frameX; + this.counter--; + } + else{ + this.frameX++; + this.counter = this.animationSpeed; + } + } else { + this.frameX = this.minFrame; + } + } + /** * @override * gameLoop: Watch for Player collision events @@ -56,6 +74,7 @@ export class PlayerSkibidi extends PlayerBase { this.handleCollisionEvent("laser"); } + /** * @override * gameloop: Handles additional Player reaction / state updates to the collision for game level diff --git a/assets/js/platformer3x/SettingsControl.js b/assets/js/platformer3x/SettingsControl.js index e028d767..ffb7a151 100644 --- a/assets/js/platformer3x/SettingsControl.js +++ b/assets/js/platformer3x/SettingsControl.js @@ -57,218 +57,754 @@ const backgroundDim = { dimDiv.remove(); isOpen = false const sidebar = document.getElementById("sidebar") - sidebar.style.width = isOpen?"70%":"0px"; - sidebar.style.top = isOpen?"15%":"0px"; - sidebar.style.left = isOpen?"15%":"0px"; + sidebar.style.width = "0px"; + sidebar.style.left = "-100px" + sidebar.style.top = "15%" } } let isOpen = true // define the SettingsControl class -export class SettingsControl extends LocalStorage{ - constructor(){ //default keys for localStorage - var keys = { - userID:"userID", - currentLevel:"currentLevel", - isInverted:"isInverted", - gameSpeed:"gameSpeed", - gravity:"gravity", - difficulty: "difficulty", - }; - super(keys); //creates this.keys - } - - reloadGame() { - // Add code to reload or restart your game here - // You may want to perform actions like resetting the game state, restarting the level, etc. - // Example: - window.location.reload(); // Reload the entire page (this might not be suitable for all scenarios) - // Alternatively, you may have a custom function to handle game restart logic. - } +// export class SettingsControl extends LocalStorage{ +// constructor(){ //default keys for localStorage +// var keys = { +// userID:"userID", +// currentLevel:"currentLevel", +// isInverted:"isInverted", +// gameSpeed:"gameSpeed", +// gravity:"gravity", +// difficulty: "difficulty", +// }; +// super(keys); //creates this.keys +// } + +// reloadGame() { +// // Add code to reload or restart your game here +// // You may want to perform actions like resetting the game state, restarting the level, etc. +// // Example: +// window.location.reload(); // Reload the entire page (this might not be suitable for all scenarios) +// // Alternatively, you may have a custom function to handle game restart logic. +// } - /** - * Note. Separated from constructor so that class can be created before levels are addeda - * - * Initializes the SettingsControl instance. - * Loads all keys from local storage. - * For each key, - * * If it exists in local storage, loads and parses its value. - * * Else when the key does not exist in local storage, sets key to the corresponding GameEnv.js variable. - */ - initialize(){ - // Load all keys from local storage - this.loadAll(); +// /** +// * Note. Separated from constructor so that class can be created before levels are addeda +// * +// * Initializes the SettingsControl instance. +// * Loads all keys from local storage. +// * For each key, +// * * If it exists in local storage, loads and parses its value. +// * * Else when the key does not exist in local storage, sets key to the corresponding GameEnv.js variable. +// */ +// initialize(){ +// // Load all keys from local storage +// this.loadAll(); - window.addEventListener("difficulty", (e) => { - // Update the difficulty value when a difficulty event is fired - this[this.keys.difficulty] = e.detail.difficulty(); - // Update the difficulty value in the game environment - GameEnv.difficulty = parseFloat(this[this.keys.difficulty]); - // Save the difficulty value to local storage - this.save(this.keys.difficulty); - - // Reload the game to apply the new difficulty settings - this.reloadGame(); - }); - - /** - * Handles a key by checking if it exists in local storage and parsing its value. - * If the key does not exist in local storage, it sets the key to the current value of the game environment variable. - * - * @param {string} key - The localstorae key. - * @param {*} gameEnvVariable - The corresponding game environment variable. - * @param {function} [parser=(val) => val] - An optional function to parse the value from local storage. - * If no parser parameter/function is provided, (val) => val is unchanged. - * Else if parser is provided, the value is parsed ... e.g.: - * * (val) => vall === "true" parses the value as a boolean - * * (val) => parseFloat(val) parses the value as a floating point number - */ - const handleKey = (key, gameEnvVariable, parser = (val) => val) => { - if (this[this.keys[key]]) { - return parser(this[this.keys[key]]); - } else { - this[this.keys[key]] = gameEnvVariable; - return gameEnvVariable; - } - }; - - /* Call the handleKey function to set up each game environment variable - * The handleKey function takes three parameters: - * * key - the local storage key - * * gameEnvVariable - the corresponding game environment variable - * * parser - an optional function to parse the value extracted from local storage - */ - // 'userID', the value is parsed as a string - GameEnv.userID = handleKey('userID', GameEnv.userID); - // 'currentLevel', the value is parsed as a an index into the GameEnv.levels array - GameEnv.currentLevel = handleKey('currentLevel', GameEnv.levels[Number(this[this.keys.currentLevel])]); - // 'isInverted', the value is parsed to a boolean - GameEnv.isInverted = handleKey('isInverted', GameEnv.isInverted, (val) => val === "true"); - // 'gameSpeed', the value is parsed to a floating point number - GameEnv.gameSpeed = handleKey('gameSpeed', GameEnv.gameSpeed, parseFloat); - // 'gravity', the value is parsed to a floating point number - GameEnv.gravity = handleKey('gravity', GameEnv.gravity, parseFloat); - // 'difficulty', the value is parsed to a floating point number - GameEnv.difficulty = handleKey('difficulty', GameEnv.difficulty); - - - // List for th 'userID' update event - window.addEventListener("userID", (e)=>{ - // Update the userID value when a userID event is fired - this[this.keys.userID] = e.detail.userID(); - // Update the userID value in the game environment - GameEnv.userID = this[this.keys.userID]; - - Socket.sendData("name",GameEnv.userID); - // Save the userID value to local storage - this.save(this.keys.userID); - }); +// window.addEventListener("difficulty", (e) => { +// // Update the difficulty value when a difficulty event is fired +// this[this.keys.difficulty] = e.detail.difficulty(); +// // Update the difficulty value in the game environment +// GameEnv.difficulty = parseFloat(this[this.keys.difficulty]); +// // Save the difficulty value to local storage +// this.save(this.keys.difficulty); + +// // Reload the game to apply the new difficulty settings +// this.reloadGame(); +// }); + +// /** +// * Handles a key by checking if it exists in local storage and parsing its value. +// * If the key does not exist in local storage, it sets the key to the current value of the game environment variable. +// * +// * @param {string} key - The localstorae key. +// * @param {*} gameEnvVariable - The corresponding game environment variable. +// * @param {function} [parser=(val) => val] - An optional function to parse the value from local storage. +// * If no parser parameter/function is provided, (val) => val is unchanged. +// * Else if parser is provided, the value is parsed ... e.g.: +// * * (val) => vall === "true" parses the value as a boolean +// * * (val) => parseFloat(val) parses the value as a floating point number +// */ +// const handleKey = (key, gameEnvVariable, parser = (val) => val) => { +// if (this[this.keys[key]]) { +// return parser(this[this.keys[key]]); +// } else { +// this[this.keys[key]] = gameEnvVariable; +// return gameEnvVariable; +// } +// }; + +// /* Call the handleKey function to set up each game environment variable +// * The handleKey function takes three parameters: +// * * key - the local storage key +// * * gameEnvVariable - the corresponding game environment variable +// * * parser - an optional function to parse the value extracted from local storage +// */ +// // 'userID', the value is parsed as a string +// GameEnv.userID = handleKey('userID', GameEnv.userID); +// // 'currentLevel', the value is parsed as a an index into the GameEnv.levels array +// GameEnv.currentLevel = handleKey('currentLevel', GameEnv.levels[Number(this[this.keys.currentLevel])]); +// // 'isInverted', the value is parsed to a boolean +// GameEnv.isInverted = handleKey('isInverted', GameEnv.isInverted, (val) => val === "true"); +// // 'gameSpeed', the value is parsed to a floating point number +// GameEnv.gameSpeed = handleKey('gameSpeed', GameEnv.gameSpeed, parseFloat); +// // 'gravity', the value is parsed to a floating point number +// GameEnv.gravity = handleKey('gravity', GameEnv.gravity, parseFloat); +// // 'difficulty', the value is parsed to a floating point number +// GameEnv.difficulty = handleKey('difficulty', GameEnv.difficulty); + + +// // List for th 'userID' update event +// window.addEventListener("userID", (e)=>{ +// // Update the userID value when a userID event is fired +// this[this.keys.userID] = e.detail.userID(); +// // Update the userID value in the game environment +// GameEnv.userID = this[this.keys.userID]; + +// Socket.sendData("name",GameEnv.userID); +// // Save the userID value to local storage +// this.save(this.keys.userID); +// }); - // Listen for the 'resize' update event - window.addEventListener("resize",()=>{ - // Update the current level index when the level changes - this[this.keys.currentLevel] = GameEnv.levels.indexOf(GameEnv.currentLevel); - // Save the current level index to local storage - this.save(this.keys.currentLevel); - }); +// // Listen for the 'resize' update event +// window.addEventListener("resize",()=>{ +// // Update the current level index when the level changes +// this[this.keys.currentLevel] = GameEnv.levels.indexOf(GameEnv.currentLevel); +// // Save the current level index to local storage +// this.save(this.keys.currentLevel); +// }); + +// // Listen for the 'isInverted' update event +// window.addEventListener("isInverted", (e)=>{ +// // Update the isInverted value when an invert event is fired +// this[this.keys.isInverted] = e.detail.isInverted(); +// // Update the isInverted value in the game environment +// GameEnv.isInverted = this[this.keys.isInverted]; +// // Save the isInverted value to local storage +// this.save(this.keys.isInverted); +// }); + +// // Listen for the 'gameSpeed' update event +// window.addEventListener("gameSpeed",(e)=>{ +// // Update the gameSpeed value when a speed event is fired +// this[this.keys.gameSpeed] = e.detail.gameSpeed(); +// // Update the gameSpeed value in the game environment +// GameEnv.gameSpeed = parseFloat(this[this.keys.gameSpeed]); +// // Save the gameSpeed value to local storage +// this.save(this.keys.gameSpeed); +// }); + +// // Listen for the 'gravity' update event +// window.addEventListener("gravity",(e)=>{ +// // Update the gravity value when a gravity event is fired +// this[this.keys.gravity] = e.detail.gravity(); +// // Update the gravity value in the game environment +// GameEnv.gravity = parseFloat(this[this.keys.gravity]); +// // Save the gravity value to local storage +// this.save(this.keys.gravity); +// }); + +// // Listen for the 'gravity' update event +// window.addEventListener("difficulty",(e)=>{ +// // Update the gravity value when a gravity event is fired +// this[this.keys.difficulty] = e.detail.difficulty(); +// // Update the gravity value in the game environment +// GameEnv.difficulty = parseFloat(this[this.keys.difficulty]); +// // Save the gravity value to local storage +// this.save(this.keys.difficulty); +// }); + +// window.addEventListener("isTheme", (e)=>{ +// // Update the isInverted value when an invert event is fired +// this[this.keys.isTheme] = e.detail.isTheme(); +// // Update the isInverted value in the game environment +// GameEnv.isTheme = this[this.keys.isTheme]; +// // Save the isInverted value to local storage +// this.save(this.keys.isTheme); +// }); + +// } + +// /** +// * Getter for the userID property. +// * Creates a div with a text input for the user to enter a userID. +// * The input's value is bound to the GameEnv's userID string. +// * @returns {HTMLDivElement} The div containing the userID input. +// */ +// get userIDInput() { +// const div = document.createElement("div"); +// div.innerHTML = "User ID: "; // label + +// const userID = document.createElement("input"); // get user defined userID +// userID.type = "text"; +// userID.value = GameEnv.userID; // GameEnv contains latest userID +// userID.maxLength = 10; // set maximum length to 10 characters +// userID.className = "input userID"; // custom style in platformer-styles.scss + +// userID.addEventListener("change", () => { +// // dispatch event to update userID +// window.dispatchEvent(new CustomEvent("userID", { detail: {userID:()=>userID.value} })); +// }); + +// Socket.sendData("name",GameEnv.userID) + +// div.append(userID); // wrap input element in div +// return div; +// } + +// /** +// * Getter for the levelTable property. +// * Creates a table with a row for each game level. +// * Each row contains the level number and the level tag. +// * Passive levels are skipped and not added to the table. +// * @returns {HTMLTableElement} The table containing the game levels. +// */ +// get levelTable(){ +// // create table element +// var t = document.createElement("table"); +// t.className = "table levels"; +// //create table header +// var header = document.createElement("tr"); +// var th1 = document.createElement("th"); +// th1.innerText = "#"; +// header.append(th1); +// var th2 = document.createElement("th"); +// th2.innerText = "Level Tag"; +// header.append(th2); +// t.append(header); + +// // Create table rows/data +// for(let i = 0, count = 1; i < GameEnv.levels.length; i++){ +// if (GameEnv.levels[i].passive) //skip passive levels +// continue; +// // add level to table +// var row = document.createElement("tr"); +// var td1 = document.createElement("td"); +// td1.innerText = String(count++); //human counter +// row.append(td1); +// // place level name in button +// var td2 = document.createElement("td"); +// td2.innerText = GameEnv.levels[i].tag; +// row.append(td2); +// // listen for row click +// row.addEventListener("click",()=>{ // when player clicks on the row +// //transition to selected level +// GameControl.transitionToLevel(GameEnv.levels[i]); // resize event is triggered in transitionToLevel +// }) +// // add level row to table +// t.append(row); +// } + +// return t; //returns element +// } + +// /** +// * Getter for the isInvertedInput property. +// * Creates a div with a checkbox input for the user to invert the game controls. +// * The checkbox's checked state is bound to the GameEnv's isInverted state. +// * @returns {HTMLDivElement} The div containing the isInverted checkbox. +// */ +// get isInvertedInput() { +// const div = document.createElement("div"); +// div.innerHTML = "Invert: "; // label + +// const isInverted = document.createElement("input"); // get user defined invert boolean +// isInverted.type = "checkbox"; +// isInverted.checked = GameEnv.isInverted; // GameEnv contains latest isInverted state + +// isInverted.addEventListener("change", () => { +// //`dispatch event to update isInverted +// window.dispatchEvent(new CustomEvent("isInverted", { detail: {isInverted:()=>isInverted.checked} })); +// }); + +// div.append(isInverted); // wrap input element in div +// return div; +// } + +// get isThemeInput() { +// const localstorage = window.localStorage +// const lightmodekey = "islightMode" +// const div = document.createElement("div"); +// div.innerHTML = "Theme Change:"; // label +// const localStorageLightModeToggle = localstorage.getItem(lightmodekey) + +// if (localStorageLightModeToggle) { +// GameEnv.isLightMode = localStorageLightModeToggle.toLowerCase() === "true" +// } + + +// const islightMode = document.createElement("input"); // get user defined lightmode boolean +// islightMode.type = "checkbox"; +// if (GameEnv.isLightMode) { +// enableLightMode(); +// islightMode.checked = true; +// } else { +// enableDarkMode(); +// islightMode.checked = false; +// } +// islightMode.addEventListener('change', () => { +// if (islightMode.checked) { +// enableLightMode(); +// GameEnv.isLightMode = true; +// localstorage.setItem(lightmodekey, GameEnv.isLightMode) +// } else { +// enableDarkMode(); +// GameEnv.isLightMode = false; +// localstorage.setItem(lightmodekey, GameEnv.isLightMode) +// } +// console.log(GameEnv.isLightMode) +// }); + + +// // Append elements to the DOM or wherever appropriate +// div.appendChild(islightMode); +// return div +// // Append div to your settings container +// // For example: +// // document.getElementById('settingsContainer').appendChild(div); +// } + +// /** +// * Getter for the gameSpeedInput property. +// * Creates a div with a number input for the user to adjust the game speed. +// * The input's value is bound to the GameEnv's gameSpeed state. +// * @returns {HTMLDivElement} The div containing the gameSpeed input. +// */ + +// get gameSpeedInput() { +// const div = document.createElement("div"); +// div.innerHTML = "Game Speed: "; // label + +// const gameSpeed = document.createElement("input"); // get user defined game speed +// gameSpeed.type = "number"; +// gameSpeed.min = 1.0; +// gameSpeed.max = 8.0; +// gameSpeed.step = 0.1; +// gameSpeed.default = 2.0; // customed property for default value +// gameSpeed.value = GameEnv.gameSpeed; // GameEnv contains latest game speed +// gameSpeed.className = "input gameSpeed"; // custom style in platformer-styles.scss + +// gameSpeed.addEventListener("change", () => { +// // check values are within range +// const value = parseFloat(gameSpeed.value).toFixed(1); +// gameSpeed.value = (value < gameSpeed.min || value > gameSpeed.max || isNaN(value)) ? gameSpeed.default : value; +// // dispatch event to update game speed +// window.dispatchEvent(new CustomEvent("gameSpeed", { detail: {gameSpeed:()=>gameSpeed.value} })); +// }); + +// div.append(gameSpeed); // wrap input element in div +// return div; +// } + +// /** +// * Getter for the gravityInput property. +// * Creates a div with a number input for the user to adjust the game gravity. +// * The input's value is bound to the GameEnv's gravity state. +// * @returns {HTMLDivElement} The div containing the gravity input. +// */ +// get gravityInput() { +// const div = document.createElement("div"); +// div.innerHTML = "Gravity: "; // label + +// const gravity = document.createElement("input"); // get user defined gravity +// gravity.type = "number"; +// gravity.min = 1.0; +// gravity.max = 8.0; +// gravity.step = 0.1; +// gravity.default = 3.0; // customed property for default value +// gravity.value = GameEnv.gravity; // GameEnv contains latest gravity +// gravity.className = "input gravity"; // custom style in platformer-styles.scss + +// gravity.addEventListener("change", () => { +// // check values are within range +// const value = parseFloat(gravity.value).toFixed(1); +// gravity.value = (value < gravity.min || value > gravity.max || isNaN(value)) ? gravity.default : value; +// // dispatch event to update gravity +// window.dispatchEvent(new CustomEvent("gravity", { detail: {gravity:()=>gravity.value} })); +// }); + +// div.append(gravity); // wrap input element in div +// return div; +// } + + +// /** +// * Getter for the difficultyInput property. +// * Creates a div with a number input for the user to adjust the game difficulty. +// * @returns {HTMLDivElement} The div containing the difficultly input. +// */ +// get difficultyInput() { +// const div = document.createElement("div"); +// div.innerHTML = "Difficulty: "; // label + +// const difficulty = document.createElement("select"); // dropdown for difficulty +// const options = ["Easy", "Normal", "Hard", "Impossible"]; + +// options.forEach(option => { +// const opt = document.createElement("option"); +// opt.value = option.toLowerCase(); +// opt.text = option; +// difficulty.add(opt); +// }); + +// difficulty.value = GameEnv.difficulty; // GameEnv contains latest difficulty + +// difficulty.addEventListener("change", () => { +// // dispatch event to update difficulty +// window.dispatchEvent(new CustomEvent("difficulty", { detail: { difficulty: () => difficulty.value } })); +// }); + +// div.append(difficulty); // wrap select element in div +// return div; +// } + +// get multiplayerButton() { +// const div = document.createElement("div"); +// div.innerHTML = "Multiplayer: "; // label + +// const button = document.createElement("button"); // button for Multiplayer +// button.innerText = String(Socket.shouldBeSynced); + +// button.addEventListener("click", () => { +// // dispatch event to update difficulty +// button.innerText = String(Socket.changeStatus()); +// }); + +// div.append(button); // wrap button element in div +// return div; +// } - // Listen for the 'isInverted' update event - window.addEventListener("isInverted", (e)=>{ - // Update the isInverted value when an invert event is fired - this[this.keys.isInverted] = e.detail.isInverted(); - // Update the isInverted value in the game environment - GameEnv.isInverted = this[this.keys.isInverted]; - // Save the isInverted value to local storage - this.save(this.keys.isInverted); - }); +// get chatButton() { +// const div = document.createElement("div"); +// div.innerHTML = "Chat: "; // label + +// const button = document.createElement("button"); // button for Multiplayer +// button.innerText = "open"; +// /** +// * Chat class to make the chat more refined and functional +// */ +// var ChatClass = new Chat([]); +// var chatBoxContainer = ChatClass.chatBoxContainer; +// var chatBox = chatBoxContainer.children.namedItem("chatBox"); +// var chatInput = chatBoxContainer.children.namedItem("chatInput"); +// var chatButton = chatBoxContainer.children.namedItem("chatButton"); +// chatBoxContainer.style.display = "none"; +// chatBoxContainer.style.zIndex = 2; +// chatBoxContainer.style.position = "absolute"; +// chatBoxContainer.style.top = "70%"; +// chatBoxContainer.style.left = "50%"; +// chatBoxContainer.style.width = "50%"; +// chatBoxContainer.style.height = "30%"; +// chatBoxContainer.style.backgroundColor = "grey"; +// chatBoxContainer.style.opacity = "65%"; +// chatBoxContainer.style.borderRadius = "1%"; +// chatBox.style.position = "relative"; +// chatBox.style.resize = "both"; +// chatBox.style.overflow = "auto"; +// chatBox.style.height = "90%"; +// chatBox.style.width = "100%"; +// chatBox.style.top = "0%"; +// chatInput.style.position = "relative"; +// chatInput.style.bottom = "0%"; +// chatInput.style.height = "10%" +// chatInput.style.width = "80%"; +// chatButton.style.position = "relative"; +// chatButton.style.height = "10%"; +// chatButton.style.width = "20%"; +// chatButton.style.bottom = "0%"; + + +// document.getElementById("sidebar").insertAdjacentElement("afterend",chatBoxContainer); + +// var isShown = false; +// button.addEventListener("click", () => { +// isShown=!isShown; +// if(isShown){ +// chatBoxContainer.style.display = "block"; +// button.innerText = "close"; +// }else{ +// chatBoxContainer.style.display = "none"; +// button.innerText = "open" +// } +// }); + +// div.append(button); // wrap button element in div +// return div; +// } + +// get playerCount(){ +// const div = document.createElement("div"); +// const text = document.createElement("p"); +// const button = document.createElement("button"); + +// text.innerText = "1/10 players"; +// button.innerText = "check player count"; + +// function update(d){ +// text.innerText = String(d)+"/10 players"; +// } +// Socket.createListener("playerCount",update); +// button.addEventListener("click",()=>{ +// Socket.removeAllListeners("playerCount") +// Socket.createListener("playerCount",update); +// Socket.socket.emit("checkPlayers",""); +// }); +// div.append(text); +// div.append(button); +// return div; +// } + +// /** +// * Static method to initialize the game settings controller and add the settings controls to the sidebar. +// * Constructs an HTML table/menu from GameEnv.levels[] and HTML inputs for invert, game speed, and gravity. +// * Each input has an event update associated with it. +// * All elements are appended to the sidebar. +// */ +// static sidebar(){ +// // Initiliaze Game settings controller +// var settingsControl = new SettingsControl(); +// settingsControl.initialize(); + +// // Get/Construct an HTML table/menu from GameEnv.levels[] +// var levels = settingsControl.levelTable; +// document.getElementById("sidebar").append(levels); + +// // Get/Construct HTML input and event update for invert +// var invertControl = settingsControl.isInvertedInput; +// document.getElementById("sidebar").append(invertControl); + +// var hintsSection = document.createElement("div") +// hintsSection.innerHTML = "Toggle fun facts: " +// // Store the updated toggle state in local storage +// // Create the hints button (checkbox) +// var hintsButton = document.createElement("input"); +// hintsButton.type = "checkbox"; + +// // Reference the hints section +// const hints = document.getElementsByClassName("fun_facts")[0]; + +// // Check localStorage for existing funFact state and set the initial state +// const localStorage = localStorage.getItem('funFact'); +// if (localStorageFunFact !== null) { +// GameEnv.funFact = localStorageFunFact.toLowerCase() === "true"; +// } else { +// // Default value if nothing is found in localStorage +// GameEnv.funFact = true; +// } + +// // Set the initial state of hints and the checkbox based on GameEnv.funFact +// if (GameEnv.funFact) { +// hints.style.display = "unset"; +// hintsButton.checked = true; +// } else { +// hints.style.display = "none"; +// hintsButton.checked = false; +// } + +// // Add the button to the DOM (assuming there is an element to append it to) +// document.body.appendChild(hintsButton); + +// // Add event listener to the button to update display and localStorage +// hintsButton.addEventListener("click", () => { +// if (!hintsButton.checked) { +// hints.style.display = "none"; +// GameEnv.funFact = false; +// } else { +// hints.style.display = "unset"; +// GameEnv.funFact = true; +// } +// localStorage.setItem('funFact', GameEnv.funFact); +// console.log(GameEnv.funFact); +// }); - // Listen for the 'gameSpeed' update event - window.addEventListener("gameSpeed",(e)=>{ - // Update the gameSpeed value when a speed event is fired - this[this.keys.gameSpeed] = e.detail.gameSpeed(); - // Update the gameSpeed value in the game environment - GameEnv.gameSpeed = parseFloat(this[this.keys.gameSpeed]); - // Save the gameSpeed value to local storage - this.save(this.keys.gameSpeed); - }); + + +// hintsSection.append(hintsButton) +// document.getElementById("sidebar").append(hintsSection) + +// // Get/Construct HTML input and event update fo game speed +// var userID = settingsControl.userIDInput; +// document.getElementById("sidebar").append(userID); + +// // Get/Construct HTML input and event update for game speed +// var gameSpeed = settingsControl.gameSpeedInput; +// document.getElementById("sidebar").append(gameSpeed); + +// // Get/Construct HTML input and event update for gravity +// var gravityInput = settingsControl.gravityInput; +// document.getElementById("sidebar").append(gravityInput); + +// // Get/Construct HTML input and event update for difficulty +// var difficultyInput = settingsControl.difficultyInput; +// document.getElementById("sidebar").append(difficultyInput); + +// // Get/Construct HTML button and event update for multiplayer +// var multiplayerButton = settingsControl.multiplayerButton; +// document.getElementById("sidebar").append(multiplayerButton); + +// // Get/Construct HTML button and event update for theme +// var themeButton = settingsControl.themeButton; +// document.getElementById("sidebar").append(themeButton); + +// // Get/Construct HTML button and event update for multiplayer +// var chatButton = settingsControl.chatButton; +// document.getElementById("sidebar").append(chatButton); + +// // Get/Construct HTML button and event update for multiplayer +// var playerCount = settingsControl.playerCount; +// document.getElementById("sidebar").append(playerCount); + +// // Get/Construct HTML input and event update for theme change +// var themeChangeControl = settingsControl.isThemeInput; +// document.getElementById("sidebar").append(themeChangeControl); + +// // Listener, isOpen, and function for sidebar open and close +// var submenuHeight = 0; // calculated height of submenu +// function sidebarPanel(){ +// // toggle isOpen +// isOpen = true; +// // open and close properties for sidebar based on isOpen +// backgroundDim.create() +// var sidebar = document.querySelector('.sidebar'); +// sidebar.style.width = isOpen?"200px":"0px"; +// sidebar.style.paddingLeft = isOpen?"10px":"0px"; +// sidebar.style.paddingRight = isOpen?"10px":"0px"; +// sidebar.style.top = `calc(${submenuHeight}px + ${GameEnv.top}px)`; +// } +// // settings-button and event listener opens sidebar +// document.getElementById("settings-button").addEventListener("click",sidebarPanel); + +// window.addEventListener('load', function() { +// var submenu = document.querySelector('.submenu'); +// submenuHeight = submenu.offsetHeight; +// }); +// } + +// } - // Listen for the 'gravity' update event - window.addEventListener("gravity",(e)=>{ - // Update the gravity value when a gravity event is fired - this[this.keys.gravity] = e.detail.gravity(); - // Update the gravity value in the game environment - GameEnv.gravity = parseFloat(this[this.keys.gravity]); - // Save the gravity value to local storage - this.save(this.keys.gravity); - }); +const SettingsControl = { + initialize () { + const sidebarDiv = document.getElementById("sidebar") + const sidebarContents = this.createSidebar() - // Listen for the 'gravity' update event - window.addEventListener("difficulty",(e)=>{ - // Update the gravity value when a gravity event is fired - this[this.keys.difficulty] = e.detail.difficulty(); - // Update the gravity value in the game environment - GameEnv.difficulty = parseFloat(this[this.keys.difficulty]); - // Save the gravity value to local storage - this.save(this.keys.difficulty); - }); + document.getElementById("settings-button").addEventListener("click", this.openSettings) + }, - window.addEventListener("isTheme", (e)=>{ - // Update the isInverted value when an invert event is fired - this[this.keys.isTheme] = e.detail.isTheme(); - // Update the isInverted value in the game environment - GameEnv.isTheme = this[this.keys.isTheme]; - // Save the isInverted value to local storage - this.save(this.keys.isTheme); - }); + openSettings () { + const submenu = document.querySelector('.submenu'); + const submenuHeight = submenu.offsetHeight; + // toggle isOpen + isOpen = true; + // open and close properties for sidebar based on isOpen + backgroundDim.create() + const sidebar = document.querySelector('.sidebar'); + sidebar.style.width = isOpen?"200px":"0px"; + sidebar.style.paddingLeft = isOpen?"10px":"0px"; + sidebar.style.paddingRight = isOpen?"10px":"0px"; + sidebar.style.paddingTop = "10px" + sidebar.style.top = `calc(${submenuHeight}px + ${GameEnv.top}px)`; + sidebar.style.left = '0px' + + sidebar.hidden = false + }, + + createSidebar () { + const levels = this.levelTable(); + document.getElementById("sidebar").append(levels); + // Get/Construct HTML input and event update fo game speed + const userID = this.userIDInput(); + document.getElementById("sidebar").append(userID); - } + // Get/Construct HTML input and event update for game speed + const gameSpeed = this.gameSpeedInput(); + document.getElementById("sidebar").append(gameSpeed); + + // Get/Construct HTML input and event update for gravity + const gravityInput = this.gravityInput(); + document.getElementById("sidebar").append(gravityInput); + + // Get/Construct HTML input and event update for difficulty + const difficultyInput = this.difficultyInput(); + document.getElementById("sidebar").append(difficultyInput); + + // Get/Construct HTML button and event update for multiplayer + const multiplayerButton = this.multiplayerButton(); + document.getElementById("sidebar").append(multiplayerButton); + + // Get/Construct HTML button and event update for multiplayer + const chatButton = this.chatButton(); + document.getElementById("sidebar").append(chatButton); + + // Get/Construct HTML button and event update for multiplayer + const playerCount = this.playerCount(); + document.getElementById("sidebar").append(playerCount); + + // Get/Construct HTML input and event update for theme change + const themeChangeControl = this.isThemeInput(); + document.getElementById("sidebar").append(themeChangeControl); + + const hintsButton = this.hintsButton(); + document.getElementById("sidebar").append(hintsButton); + }, + + hintsButton() { + const container = document.createElement("div") + const title = document.createElement("span") + title.textContent = "Show Hints: " + const hintsButton = document.createElement("input"); + hintsButton.type = "checkbox"; - /** - * Getter for the userID property. - * Creates a div with a text input for the user to enter a userID. - * The input's value is bound to the GameEnv's userID string. - * @returns {HTMLDivElement} The div containing the userID input. - */ - get userIDInput() { - const div = document.createElement("div"); - div.innerHTML = "User ID: "; // label + // Reference the hints section + const hints = document.getElementsByClassName("fun_facts")[0]; - const userID = document.createElement("input"); // get user defined userID - userID.type = "text"; - userID.value = GameEnv.userID; // GameEnv contains latest userID - userID.maxLength = 10; // set maximum length to 10 characters - userID.className = "input userID"; // custom style in platformer-styles.scss + // Check localStorage for existing funFact state and set the initial state + const localStorageFunFact = window.localStorage.getItem('funFact'); - userID.addEventListener("change", () => { - // dispatch event to update userID - window.dispatchEvent(new CustomEvent("userID", { detail: {userID:()=>userID.value} })); - }); + if (localStorageFunFact !== null) { + GameEnv.funFact = localStorageFunFact.toLowerCase() === "true"; + } else { + // Default value if nothing is found in localStorage + GameEnv.funFact = true; + } - Socket.sendData("name",GameEnv.userID) + // Set the initial state of hints and the checkbox based on GameEnv.funFact + if (GameEnv.funFact) { + hints.style.display = "unset"; + hintsButton.checked = true; + } else { + hints.style.display = "none"; + hintsButton.checked = false; + } - div.append(userID); // wrap input element in div - return div; - } + // Add event listener to the button to update display and localStorage + hintsButton.addEventListener("click", () => { + if (!hintsButton.checked) { + hints.style.display = "none"; + GameEnv.funFact = false; + } else { + hints.style.display = "unset"; + GameEnv.funFact = true; + } - /** - * Getter for the levelTable property. - * Creates a table with a row for each game level. - * Each row contains the level number and the level tag. - * Passive levels are skipped and not added to the table. - * @returns {HTMLTableElement} The table containing the game levels. - */ - get levelTable(){ + localStorage.setItem('funFact', GameEnv.funFact); + }); + + container.append(title) + container.append(hintsButton) + + return container + }, + + levelTable() { // create table element - var t = document.createElement("table"); + const t = document.createElement("table"); t.className = "table levels"; //create table header - var header = document.createElement("tr"); - var th1 = document.createElement("th"); + const header = document.createElement("tr"); + const th1 = document.createElement("th"); th1.innerText = "#"; header.append(th1); - var th2 = document.createElement("th"); + const th2 = document.createElement("th"); th2.innerText = "Level Tag"; header.append(th2); t.append(header); @@ -278,12 +814,12 @@ export class SettingsControl extends LocalStorage{ if (GameEnv.levels[i].passive) //skip passive levels continue; // add level to table - var row = document.createElement("tr"); - var td1 = document.createElement("td"); + const row = document.createElement("tr"); + const td1 = document.createElement("td"); td1.innerText = String(count++); //human counter row.append(td1); // place level name in button - var td2 = document.createElement("td"); + const td2 = document.createElement("td"); td2.innerText = GameEnv.levels[i].tag; row.append(td2); // listen for row click @@ -296,82 +832,9 @@ export class SettingsControl extends LocalStorage{ } return t; //returns
element - } - - /** - * Getter for the isInvertedInput property. - * Creates a div with a checkbox input for the user to invert the game controls. - * The checkbox's checked state is bound to the GameEnv's isInverted state. - * @returns {HTMLDivElement} The div containing the isInverted checkbox. - */ - get isInvertedInput() { - const div = document.createElement("div"); - div.innerHTML = "Invert: "; // label - - const isInverted = document.createElement("input"); // get user defined invert boolean - isInverted.type = "checkbox"; - isInverted.checked = GameEnv.isInverted; // GameEnv contains latest isInverted state - - isInverted.addEventListener("change", () => { - //`dispatch event to update isInverted - window.dispatchEvent(new CustomEvent("isInverted", { detail: {isInverted:()=>isInverted.checked} })); - }); - - div.append(isInverted); // wrap input element in div - return div; - } - - get isThemeInput() { - const localstorage = window.localStorage - const lightmodekey = "islightMode" - const div = document.createElement("div"); - div.innerHTML = "Theme Change:"; // label - const localStorageLightModeToggle = localstorage.getItem(lightmodekey) - - if (localStorageLightModeToggle) { - GameEnv.isLightMode = localStorageLightModeToggle.toLowerCase() === "true" - } - - - const islightMode = document.createElement("input"); // get user defined lightmode boolean - islightMode.type = "checkbox"; - if (GameEnv.isLightMode) { - enableLightMode(); - islightMode.checked = true; - } else { - enableDarkMode(); - islightMode.checked = false; - } - islightMode.addEventListener('change', () => { - if (islightMode.checked) { - enableLightMode(); - GameEnv.isLightMode = true; - localstorage.setItem(lightmodekey, GameEnv.isLightMode) - } else { - enableDarkMode(); - GameEnv.isLightMode = false; - localstorage.setItem(lightmodekey, GameEnv.isLightMode) - } - console.log(GameEnv.isLightMode) - }); - - - // Append elements to the DOM or wherever appropriate - div.appendChild(islightMode); - return div - // Append div to your settings container - // For example: - // document.getElementById('settingsContainer').appendChild(div); - } - - /** - * Getter for the gameSpeedInput property. - * Creates a div with a number input for the user to adjust the game speed. - * The input's value is bound to the GameEnv's gameSpeed state. - * @returns {HTMLDivElement} The div containing the gameSpeed input. - */ + }, - get gameSpeedInput() { + gameSpeedInput() { const div = document.createElement("div"); div.innerHTML = "Game Speed: "; // label @@ -394,46 +857,68 @@ export class SettingsControl extends LocalStorage{ div.append(gameSpeed); // wrap input element in div return div; - } + }, - /** - * Getter for the gravityInput property. - * Creates a div with a number input for the user to adjust the game gravity. - * The input's value is bound to the GameEnv's gravity state. - * @returns {HTMLDivElement} The div containing the gravity input. - */ - get gravityInput() { + userIDInput () { const div = document.createElement("div"); - div.innerHTML = "Gravity: "; // label + div.innerHTML = "User ID: "; // label + + const userID = document.createElement("input"); // get user defined userID + userID.type = "text"; + userID.value = GameEnv.userID; // GameEnv contains latest userID + userID.maxLength = 10; // set maximum length to 10 characters + userID.className = "input userID"; // custom style in platformer-styles.scss + + userID.addEventListener("change", () => { + // dispatch event to update userID + window.dispatchEvent(new CustomEvent("userID", { detail: {userID:()=>userID.value} })); + }); + + Socket.sendData("name",GameEnv.userID) + + div.append(userID); // wrap input element in div + return div; + }, + + playerCount(){ + const div = document.createElement("div"); + const text = document.createElement("p"); + const button = document.createElement("button"); + + text.innerText = "1/10 players"; + button.innerText = "check player count"; + + function update(d){ + text.innerText = String(d)+"/10 players"; + } + Socket.createListener("playerCount",update); + button.addEventListener("click",()=>{ + Socket.removeAllListeners("playerCount") + Socket.createListener("playerCount",update); + Socket.socket.emit("checkPlayers",""); + }); + div.append(text); + div.append(button); + return div; + }, + + multiplayerButton() { + const div = document.createElement("div"); + div.innerHTML = "Multiplayer: "; // label - const gravity = document.createElement("input"); // get user defined gravity - gravity.type = "number"; - gravity.min = 1.0; - gravity.max = 8.0; - gravity.step = 0.1; - gravity.default = 3.0; // customed property for default value - gravity.value = GameEnv.gravity; // GameEnv contains latest gravity - gravity.className = "input gravity"; // custom style in platformer-styles.scss + const button = document.createElement("button"); // button for Multiplayer + button.innerText = String(Socket.shouldBeSynced); - gravity.addEventListener("change", () => { - // check values are within range - const value = parseFloat(gravity.value).toFixed(1); - gravity.value = (value < gravity.min || value > gravity.max || isNaN(value)) ? gravity.default : value; - // dispatch event to update gravity - window.dispatchEvent(new CustomEvent("gravity", { detail: {gravity:()=>gravity.value} })); + button.addEventListener("click", () => { + // dispatch event to update difficulty + button.innerText = String(Socket.changeStatus()); }); - div.append(gravity); // wrap input element in div + div.append(button); // wrap button element in div return div; - } - + }, - /** - * Getter for the difficultyInput property. - * Creates a div with a number input for the user to adjust the game difficulty. - * @returns {HTMLDivElement} The div containing the difficultly input. - */ - get difficultyInput() { + difficultyInput() { const div = document.createElement("div"); div.innerHTML = "Difficulty: "; // label @@ -456,25 +941,9 @@ export class SettingsControl extends LocalStorage{ div.append(difficulty); // wrap select element in div return div; - } - - get multiplayerButton() { - const div = document.createElement("div"); - div.innerHTML = "Multiplayer: "; // label - - const button = document.createElement("button"); // button for Multiplayer - button.innerText = String(Socket.shouldBeSynced); - - button.addEventListener("click", () => { - // dispatch event to update difficulty - button.innerText = String(Socket.changeStatus()); - }); - - div.append(button); // wrap button element in div - return div; - } + }, - get chatButton() { + chatButton() { const div = document.createElement("div"); div.innerHTML = "Chat: "; // label @@ -483,11 +952,11 @@ export class SettingsControl extends LocalStorage{ /** * Chat class to make the chat more refined and functional */ - var ChatClass = new Chat([]); - var chatBoxContainer = ChatClass.chatBoxContainer; - var chatBox = chatBoxContainer.children.namedItem("chatBox"); - var chatInput = chatBoxContainer.children.namedItem("chatInput"); - var chatButton = chatBoxContainer.children.namedItem("chatButton"); + const ChatClass = new Chat([]); + const chatBoxContainer = ChatClass.chatBoxContainer; + const chatBox = chatBoxContainer.children.namedItem("chatBox"); + const chatInput = chatBoxContainer.children.namedItem("chatInput"); + const chatButton = chatBoxContainer.children.namedItem("chatButton"); chatBoxContainer.style.display = "none"; chatBoxContainer.style.zIndex = 2; chatBoxContainer.style.position = "absolute"; @@ -530,154 +999,74 @@ export class SettingsControl extends LocalStorage{ div.append(button); // wrap button element in div return div; - } + }, - get playerCount(){ + isThemeInput() { + const localstorage = window.localStorage + const lightmodekey = "islightMode" const div = document.createElement("div"); - const text = document.createElement("p"); - const button = document.createElement("button"); - - text.innerText = "1/10 players"; - button.innerText = "check player count"; - - function update(d){ - text.innerText = String(d)+"/10 players"; - } - Socket.createListener("playerCount",update); - button.addEventListener("click",()=>{ - Socket.removeAllListeners("playerCount") - Socket.createListener("playerCount",update); - Socket.socket.emit("checkPlayers",""); - }); - div.append(text); - div.append(button); - return div; - } - - /** - * Static method to initialize the game settings controller and add the settings controls to the sidebar. - * Constructs an HTML table/menu from GameEnv.levels[] and HTML inputs for invert, game speed, and gravity. - * Each input has an event update associated with it. - * All elements are appended to the sidebar. - */ - static sidebar(){ - // Initiliaze Game settings controller - var settingsControl = new SettingsControl(); - settingsControl.initialize(); - - // Get/Construct an HTML table/menu from GameEnv.levels[] - var levels = settingsControl.levelTable; - document.getElementById("sidebar").append(levels); - - // Get/Construct HTML input and event update for invert - var invertControl = settingsControl.isInvertedInput; - document.getElementById("sidebar").append(invertControl); - - var hintsSection = document.createElement("div") - hintsSection.innerHTML = "Toggle fun facts: " - // Store the updated toggle state in local storage - // Create the hints button (checkbox) - var hintsButton = document.createElement("input"); - hintsButton.type = "checkbox"; - - // Reference the hints section - const hints = document.getElementsByClassName("fun_facts")[0]; - - // Check localStorage for existing funFact state and set the initial state - const localStorageFunFact = localStorage.getItem('funFact'); - if (localStorageFunFact !== null) { - GameEnv.funFact = localStorageFunFact.toLowerCase() === "true"; - } else { - // Default value if nothing is found in localStorage - GameEnv.funFact = true; + div.innerHTML = "Theme Change:"; // label + const localStorageLightModeToggle = localstorage.getItem(lightmodekey) + + if (localStorageLightModeToggle) { + GameEnv.isLightMode = localStorageLightModeToggle.toLowerCase() === "true" } - // Set the initial state of hints and the checkbox based on GameEnv.funFact - if (GameEnv.funFact) { - hints.style.display = "unset"; - hintsButton.checked = true; + const islightMode = document.createElement("input"); // get user defined lightmode boolean + islightMode.type = "checkbox"; + if (GameEnv.isLightMode) { + enableLightMode(); + islightMode.checked = true; } else { - hints.style.display = "none"; - hintsButton.checked = false; + enableDarkMode(); + islightMode.checked = false; } - // Add the button to the DOM (assuming there is an element to append it to) - document.body.appendChild(hintsButton); - - // Add event listener to the button to update display and localStorage - hintsButton.addEventListener("click", () => { - if (!hintsButton.checked) { - hints.style.display = "none"; - GameEnv.funFact = false; + islightMode.addEventListener('change', () => { + if (islightMode.checked) { + enableLightMode(); + GameEnv.isLightMode = true; + localstorage.setItem(lightmodekey, GameEnv.isLightMode) } else { - hints.style.display = "unset"; - GameEnv.funFact = true; + enableDarkMode(); + GameEnv.isLightMode = false; + localstorage.setItem(lightmodekey, GameEnv.isLightMode) } - localStorage.setItem('funFact', GameEnv.funFact); - console.log(GameEnv.funFact); - }); - - - - hintsSection.append(hintsButton) - document.getElementById("sidebar").append(hintsSection) - - // Get/Construct HTML input and event update for game speed - var gameSpeed = settingsControl.gameSpeedInput; - document.getElementById("sidebar").append(gameSpeed); - - // Get/Construct HTML input and event update for gravity - var gravityInput = settingsControl.gravityInput; - document.getElementById("sidebar").append(gravityInput); + }) - // Get/Construct HTML input and event update for difficulty - var difficultyInput = settingsControl.difficultyInput; - document.getElementById("sidebar").append(difficultyInput); - - // Get/Construct HTML button and event update for multiplayer - var multiplayerButton = settingsControl.multiplayerButton; - document.getElementById("sidebar").append(multiplayerButton); - - // Get/Construct HTML button and event update for theme - var themeButton = settingsControl.themeButton; - document.getElementById("sidebar").append(themeButton); + div.appendChild(islightMode); - // Get/Construct HTML button and event update for multiplayer - var chatButton = settingsControl.chatButton; - document.getElementById("sidebar").append(chatButton); + return div + }, - // Get/Construct HTML button and event update for multiplayer - var playerCount = settingsControl.playerCount; - document.getElementById("sidebar").append(playerCount); - - // Get/Construct HTML input and event update for theme change - var themeChangeControl = settingsControl.isThemeInput; - document.getElementById("sidebar").append(themeChangeControl); - - // Listener, isOpen, and function for sidebar open and close - var submenuHeight = 0; // calculated height of submenu - function sidebarPanel(){ - // toggle isOpen - isOpen = true; - // open and close properties for sidebar based on isOpen - backgroundDim.create() - var sidebar = document.querySelector('.sidebar'); - sidebar.style.width = isOpen?"200px":"0px"; - sidebar.style.paddingLeft = isOpen?"10px":"0px"; - sidebar.style.paddingRight = isOpen?"10px":"0px"; - sidebar.style.top = `calc(${submenuHeight}px + ${GameEnv.top}px)`; - } - // settings-button and event listener opens sidebar - document.getElementById("settings-button").addEventListener("click",sidebarPanel); - // sidebar-header and event listener closes sidebar - document.getElementById("sidebar-header").addEventListener("click",sidebarPanel); - - window.addEventListener('load', function() { - var submenu = document.querySelector('.submenu'); - submenuHeight = submenu.offsetHeight; + gravityInput() { + const div = document.createElement("div"); + div.innerHTML = "Gravity: "; // label + + const gravity = document.createElement("input"); // get user defined gravity + gravity.type = "number"; + gravity.min = 1.0; + gravity.max = 8.0; + gravity.step = 0.1; + gravity.default = 3.0; // customed property for default value + gravity.value = GameEnv.gravity; // GameEnv contains latest gravity + gravity.className = "input gravity"; // custom style in platformer-styles.scss + + gravity.addEventListener("change", () => { + // check values are within range + const value = parseFloat(gravity.value).toFixed(1) ; + gravity.value = (value < gravity.min || value > gravity.max || isNaN(value)) ? gravity.default : value; + // dispatch event to update gravity + window.dispatchEvent(new CustomEvent("gravity", { detail: {gravity:()=>gravity.value} })); }); - } + div.append(gravity); // wrap input element in div + return div; + }, + + reload () { + window.location.reload() + } } export default SettingsControl; \ No newline at end of file diff --git a/index.md b/index.md index 99996e02..8948e9cf 100644 --- a/index.md +++ b/index.md @@ -9,7 +9,6 @@ image: /images/platformer/backgrounds/home.png
@@ -130,7 +129,7 @@ image: /images/platformer/backgrounds/home.png */ // Construct settings sidebar, MVC variable paradigm, and async events to trigger user interaction - SettingsControl.sidebar(); + SettingsControl.initialize(); Leaderboard.initializeLeaderboard(); startCutstory(); RandomEvent();