diff --git a/_sass/minima/dracula/platformer-styles.scss b/_sass/minima/dracula/platformer-styles.scss
index 59dbab07..807d9b6d 100644
--- a/_sass/minima/dracula/platformer-styles.scss
+++ b/_sass/minima/dracula/platformer-styles.scss
@@ -83,15 +83,15 @@
z-index: 3; // Position on Top of other elements, as well as ID buttons above
// left: 0; // set the sidebar to be on the left side of the page
top: 0; // calculated to be below the header and submenu
- padding-top: 5px;
- padding-bottom: 5px;
+ padding-top: 0px;
+ padding-bottom: 0px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */
// following are changed by JavaScript
width: 0px;
padding-left: 0px;
padding-right: 0px;
- height: 75%;
+ height: 80%;
scroll-behavior: auto;
}
diff --git a/assets/js/platformer3x/Chat.js b/assets/js/platformer3x/Chat.js
index a2746b0e..e7f89367 100644
--- a/assets/js/platformer3x/Chat.js
+++ b/assets/js/platformer3x/Chat.js
@@ -1,10 +1,6 @@
-import Multiplayer from './Multiplayer.js'
+import Multiplayer from './Multiplayer.js';
import createSound from './Sound.js';
-/**
- * Prevents players from typing no-no words in the chat.
- * If these words are detected, a pre-written message
- * will be displayed instead
- */
+
class Chat {
constructor(wordsToAdd){
this.prohibitedWords = ['westview', 'pee', 'poo',
@@ -13,34 +9,32 @@ class Chat {
'911', 'die', 'luigi', 'peach', 'bowser', 'mario',
'mr.mortensen', 'mr. mortensen', 'mortensen', 'lopez',
'mr.lopez', 'mr. lopez','mister mortensen', 'mister lopez',
- 'aws', 'amazonwebservices', 'amazon', 'amazonweb'];
+ 'aws', 'amazonwebservices', 'amazon', 'amazonweb',
+ 'shit', 'fuck', 'bitch', 'ass', 'asshole',
+ 'piss', 'penis', 'kill yourself', 'kys'];
- this.prohibitedWords.concat(wordsToAdd);
+ this.prohibitedWords = this.prohibitedWords.concat(wordsToAdd);
}
soundSource = "/game_levels_mp/assets/audio/discord-ping.mp3";
soundArray = [];
- sendMessage(message){
+ sendMessage(message, color = "black"){
message = this.parseMessage(message);
- Multiplayer.sendData("message",message);
+ Multiplayer.sendData("message", { message, color });
}
parseMessage(message){
this.prohibitedWords.forEach(word => {
const regex = new RegExp('\\b' + word + '\\b', 'gi');
- message = message.replace(regex, 'I Love CSSE! '.repeat(word.length));
+ message = message.replace(regex, 'Erm...you can\'t say that here! This is a safe space! o_o ');
});
return message;
}
-/**
- * Sets up primary chat interfaces and quality of life features,
- * like usernames, buttons, or message placeholders
- *
- */
+
get chatBoxContainer(){
const div = document.createElement("div");
- div.className = ""; //create a class for the chatBox
+ div.className = "";
div.id = "chatBoxContainer";
const div2 = document.createElement("div");
@@ -51,58 +45,77 @@ class Chat {
input.type = "text";
input.placeholder = "Type your message...";
+ const colorSelect = document.createElement("select");
+ colorSelect.id = "colorSelect";
+ colorSelect.innerHTML = `
+
+
+
+
+
+
+
+
+ `;
+
const button = document.createElement("button");
button.id = "chatButton";
button.innerText = "Send";
- function addMessage(message,name){
+ function addMessage(message, name, color){
const div3 = document.createElement("div");
const para = document.createElement("p");
- para.innerHTML = ""+name+":"+" "+message;
- para.style.color = "black";
+ para.innerHTML = `${name}: ${message}`;
div3.append(para);
div2.append(div3);
}
- function onMessage(){
- Multiplayer.removeListener("onMessage")
- Multiplayer.createListener("onMessage",(data)=>{
- var message = this.parseMessage(data.message);
- addMessage(message,data.name?data.name:data.id);
- this.soundArray.forEach((d)=>{
- if (d[1]==true){ //sound can be played
- d[0].play();
- d[1]=false;
- return;
- }
- });
- var sound = createSound(this.soundSource);
- var arrayToAdd = [sound,true];
- this.soundArray.push(arrayToAdd);
- sound.addEventListener("ended",()=>{
- arrayToAdd[1]=true;
- })
- sound.play();
- })
- var message = input.value;
- message = this.parseMessage(message);
- addMessage(message,"you");
- this.sendMessage(message);
- }
- button.addEventListener("click",onMessage.bind(this));
+ const onMessage = () => {
+ Multiplayer.removeListener("onMessage");
+ Multiplayer.createListener("onMessage", (data) => {
+ const message = this.parseMessage(data.message.message);
+ addMessage(message, data.name ? data.name : data.id, data.message.color);
+ this.soundArray.forEach((d) => {
+ if (d[1] == true) {
+ d[0].play();
+ d[1] = false;
+ return;
+ }
+ });
+ const sound = createSound(this.soundSource);
+ const arrayToAdd = [sound, true];
+ this.soundArray.push(arrayToAdd);
+ sound.addEventListener("ended", () => {
+ arrayToAdd[1] = true;
+ });
+ sound.play();
+ });
+
+ let message = input.value;
+ const color = colorSelect.value;
+ message = this.parseMessage(message);
+ addMessage(message, "you", color);
+ this.sendMessage(message, color);
- function KeyCheck(e){
- //console.log(this)
- if(e.key == "Enter"){
- onMessage.bind(this)()
+ input.value = '';
+ };
+
+ button.addEventListener("click", onMessage);
+
+ const keyCheck = (e) => {
+ if (e.key == "Enter") {
+ onMessage();
}
- }
- window.addEventListener("keypress",KeyCheck.bind(this));
+ };
+
+ window.addEventListener("keypress", keyCheck);
div.append(div2);
div.append(input);
+ div.append(colorSelect);
div.append(button);
return div;
}
}
+
export default Chat;
\ No newline at end of file
diff --git a/assets/js/platformer3x/Coin.js b/assets/js/platformer3x/Coin.js
index babd96ed..a2e446ed 100644
--- a/assets/js/platformer3x/Coin.js
+++ b/assets/js/platformer3x/Coin.js
@@ -1,3 +1,4 @@
+import GameControl from './GameControl.js';
import GameEnv from './GameEnv.js';
import GameObject from './GameObject.js';
@@ -52,6 +53,7 @@ export class Coin extends GameObject {
// check player collision
if (this.collisionData.touchPoints.other.id === "player") {
this.destroy();
+ GameControl.gainCoin(5)
GameEnv.playSound("coin");
}
}
diff --git a/assets/js/platformer3x/GameControl.js b/assets/js/platformer3x/GameControl.js
index 24a101ba..e1bdf8fb 100644
--- a/assets/js/platformer3x/GameControl.js
+++ b/assets/js/platformer3x/GameControl.js
@@ -91,8 +91,19 @@ const GameControl = {
if (document.getElementById('timeScore')) {
document.getElementById('timeScore').textContent = (time/1000).toFixed(2)
}
- },
-
+ },
+ updateCoinDisplay() {
+ const coins = GameEnv.coinScore
+ const coinDisplay = document.getElementById('coinScore')
+ if (!coinDisplay) {
+ console.error("COIN DISPLAY DOES NOT EXIST");
+ }
+ coinDisplay.textContent = coins
+ },
+ gainCoin(value) {
+ GameEnv.coinScore += value;
+ this.updateCoinDisplay()
+ },
/**
* Starts the game timer.
* @function startTimer
@@ -121,7 +132,7 @@ const GameControl = {
GameEnv.timerActive = false
GameEnv.time = 0;
GameEnv.coinScore = 0;
-
+ this.updateCoinDisplay()
clearInterval(this.intervalID)
},
diff --git a/assets/js/platformer3x/Leaderboard.js b/assets/js/platformer3x/Leaderboard.js
index 74cdb2b6..c6f38dc5 100644
--- a/assets/js/platformer3x/Leaderboard.js
+++ b/assets/js/platformer3x/Leaderboard.js
@@ -1,204 +1,364 @@
import GameControl from "./GameControl.js";
import GameEnv from "./GameEnv.js";
import Socket from "./Multiplayer.js";
-export class Leaderboard{
- constructor(key){ //default keys for localStorage
- this.key = key;
- this.currentPage = 1; //track the current page
- this.rowsPerPage = 10; //set the maximum number of rows of data per page
- }
-
- get leaderboardTable(){
- // create table element
- var t = document.createElement("table");
- t.className = "table scores";
- // create table header
- var header = document.createElement("tr");
- var th1 = document.createElement("th");
- th1.innerText = "Name";
- header.append(th1);
- var th2 = document.createElement("th");
- th2.innerText = "Score";
- header.append(th2);
- t.append(header);
-
- this.table = t;
-
- return t;
- }
-
- updateLeaderboardTable(pageNumber = 1) { //accept the page number parameter
- // Fetch time scores from local storage
- const timeScores = JSON.parse(localStorage.getItem(this.key)) || [];
-
- // Sort scores from lowest to highest
- timeScores.sort((a, b) => a.time - b.time);
- console.log(timeScores,this.key)
-
- // Calculate the start index and end index for the current leaderboard page
- const startIndex = (pageNumber - 1) * this.rowsPerPage;
- const endIndex = startIndex + this.rowsPerPage;
-
- // Get the existing table element
- const table = this.table;
-
- // Clear the table content
- table.innerHTML = "";
+const Leaderboard = {
+ currentKey: "localTimes",
+ currentPage: 1,
+ rowsPerPage: 10,
+ isOpen: false,
+
+ getSortedLeaderboardData () {
+ const localData = JSON.parse(localStorage.getItem(this.currentKey))
+ if (!localData) {
+ console.log("NO DATA")
+ return []
+ }
+ localData.sort((a, b) => a.time - b.time);
+ return localData
+ },
+
+ backgroundDim: {
+ create () {
+ console.log("CREATE DIM")
+ },
+ remove () {
+ console.log("REMOVE DIM");
+ }
+ },
- // Recreate the table header
- var header = document.createElement("tr");
- var th1 = document.createElement("th");
+ createLeaderboardDisplayTable () {
+ const table = document.createElement("table");
+ table.className = "table scores"
+ const header = document.createElement("tr");
+ const th1 = document.createElement("th");
th1.innerText = "Name";
header.append(th1);
- var th2 = document.createElement("th");
- th2.innerText = "Score";
+ const th2 = document.createElement("th");
+ th2.innerText = "Time";
header.append(th2);
table.append(header);
+ const th3 = document.createElement("th");
+ th3.innerText = "Score";
+ header.append(th3);
+ table.append(header);
- // Populate the table with time scores
- timeScores.forEach(score => {
- var row = document.createElement("tr");
- var td1 = document.createElement("td");
+ return table
+ },
+
+ createPagingButtonsRow(table) {
+ const data = Leaderboard.getSortedLeaderboardData()
+ const breakRow = document.createElement("br")
+ table.append(breakRow)
+ const pagingButtonsRow = document.createElement("tr")
+ const td1 = document.createElement("td");
+ td1.style.textAlign = "end"
+ const backButton = document.createElement("button")
+ backButton.innerText = "<"
+ backButton.style.width = "100%"
+ td1.append(backButton)
+ pagingButtonsRow.append(td1);
+ const td2 = document.createElement("td");
+ td2.innerText = `${this.currentPage} of ${Math.ceil(data.length/Leaderboard.rowsPerPage)}`
+ pagingButtonsRow.append(td2);
+ const td3 = document.createElement("td");
+ td3.style.textAlign = "start"
+ const frontButton = document.createElement("button")
+ frontButton.innerText = ">"
+ frontButton.style.width = "100%"
+ td3.append(frontButton)
+ pagingButtonsRow.append(td3);
+
+ backButton.addEventListener("click", this.backPage)
+ frontButton.addEventListener("click", this.frontPage)
+
+ return pagingButtonsRow
+ },
+
+ updateLeaderboardTable () {
+ const data = this.getSortedLeaderboardData()
+ const table = this.createLeaderboardDisplayTable()
+ const startPage = (this.currentPage-1)*this.rowsPerPage
+ const displayData = data.slice(startPage, startPage+this.rowsPerPage)
+
+ displayData.forEach(score => {
+ const row = document.createElement("tr");
+ const td1 = document.createElement("td");
td1.innerText = score.userID;
row.append(td1);
- var td2 = document.createElement("td");
+ const td2 = document.createElement("td");
td2.innerText = (score.time/1000);
row.append(td2);
+ const td3 = document.createElement("td");
+ td3.innerText = score.coinScore;
+ row.append(td3);
table.append(row);
});
- // Update the current page number
- this.currentPage = pageNumber
-
- // Populate the table with coin/goomba scores
-
- }
-
- // Create button for paging controls
- createPagingControls(){
- const prevButton = document.createElement("button");
- prevButton.innerText = "Previous";
- prevButton.addEventListener("click", () => {
- if (this.CurrentPage>1) {
- this.updateLeaderboardTable(this.currentPage - 1);
- }
- });
-
- const nextButton = document.createElement("button");
- nextButton.innerText = "Next";
- nextButton.addEventListener("click", () => {
- if (this.CurrentPage>1) {
- this.updateLeaderboardTable(this.currentPage + 1);
- }
- });
+ table.append(Leaderboard.createPagingButtonsRow(table));
- const pagingDiv = document.createElement("div");
- pagingDiv.appendChild(prevButton);
- pagingDiv.appendChild(nextButton);
+ return table
+ },
- return pagingDiv
+ backPage () {
+ const table = document.getElementsByClassName("table scores")[0]
- }
-
-
- get clearButton() {
- const div = document.createElement("div");
- div.innerHTML = "Clear Leaderboard: ";
-
- const button = document.createElement("button");
- button.innerText = "Clear!";
-
- button.addEventListener("click", () => {
- const confirmed = confirm("Are you sure you want to clear the leaderboard?");
- if (confirmed) {
- localStorage.clear();
- this.updateLeaderboardTable();
- }
- });
-
- div.append(button); // wrap button element in div
- return div;
- }
-
-
- get filter() {
- const div = document.createElement("div");
- div.innerHTML = "Filters: ";
+ if (Leaderboard.currentPage - 1 == 0) {
+ return;
+ }
- const filter = document.createElement("select");
- const options = ["low", "high"];
-
- options.forEach(option => {
- const opt = document.createElement("option");
- opt.value = option.toLowerCase();
- opt.text = option;
- filter.add(opt);
- });
-
- div.append(filter); // wrap button element in div
- return div;
- }
-
- static leaderboardDropDown() {
- // create title for leaderboard
- var localMultiplayer = document.createElement("div");
- localMultiplayer.id = "leaderboardTitle";
- document.getElementById("leaderboardDropDown").appendChild(localMultiplayer);
+ Leaderboard.currentPage -= 1
- var localLeaderboard = new Leaderboard(GameControl.localStorageTimeKey);
- var serverLeaderboard = new Leaderboard("GtimeScores")
+ if (table) {
+ table.remove() //remove old table if it is there
+ }
+ document.getElementById("leaderboardDropDown").append(Leaderboard.updateLeaderboardTable()) //update new leaderboard
+ },
+
+ frontPage () {
+ const table = document.getElementsByClassName("table scores")[0]
- var t1 = localLeaderboard.leaderboardTable;
- var t2 = serverLeaderboard.leaderboardTable;
- document.getElementById("leaderboardDropDown").append(t1);
- document.getElementById("leaderboardDropDown").append(t2);
+ const data = Leaderboard.getSortedLeaderboardData()
- var clearButton = localLeaderboard.clearButton;
- document.getElementById("leaderboardDropDown").append(clearButton);
+ console.log(data.length/Leaderboard.rowsPerPage)
- //var filterDropDown = newLeaderboard.filter;
- //document.getElementById("leaderboardDropDown").append(filterDropDown);
+ if (Leaderboard.currentPage + 1 > Math.ceil(data.length/Leaderboard.rowsPerPage)) {
+ return
+ }
- var IsOpen = false; // default sidebar is closed
- var SubmenuHeight = 0; // calculated height of submenu
- function leaderboardPanel() {
- if (Socket.shouldBeSynced) {
- // turn off local
- t1.style.display = "none";
- t2.style.display = "table";
+ Leaderboard.currentPage += 1
- localMultiplayer.innerHTML = "Multiplayer Leaderboard";
- } else if (!Socket.shouldBeSynced) {
- // turn off multiplayer
- t2.style.display = "none";
- t1.style.display = "table";
+ if (table) {
+ table.remove() //remove old table if it is there
+ }
+ document.getElementById("leaderboardDropDown").append(Leaderboard.updateLeaderboardTable()) //update new leaderboard
+ },
- localMultiplayer.innerHTML = "Local Leaderboard";
- }
+ openLeaderboardPanel () {
+ leaderboardTitle.innerHTML = "Local Leaderboard";
- localLeaderboard.updateLeaderboardTable();
- serverLeaderboard.updateLeaderboardTable();
// toggle isOpen
- IsOpen = !IsOpen;
+ this.isOpen = !this.isOpen;
// open and close properties for sidebar based on isOpen
- var leaderboard = document.querySelector('.leaderboardDropDown');
- leaderboard.style.width = IsOpen?"80%":"0px";
- leaderboard.style.paddingLeft = IsOpen?"10px":"0px";
- leaderboard.style.paddingRight = IsOpen?"10px":"0px";
- leaderboard.style.top = `calc(${SubmenuHeight}px + ${GameEnv.top}px)`;
- }
- // settings-button and event listener opens sidebar
- document.getElementById("leaderboard-button").addEventListener("click",leaderboardPanel);
- // sidebar-header and event listener closes sidebar
- document.getElementById("leaderboard-header").addEventListener("click",leaderboardPanel);
-
- window.addEventListener('load', function() {
- var Submenu = document.querySelector('.submenu');
- SubmenuHeight = Submenu.offsetHeight;
- });
- }
+ const table = document.getElementsByClassName("table scores")[0]
+ if (!this.isOpen) {
+ Leaderboard.backgroundDim.remove()
+ }
+ if (this.isOpen) {
+ Leaderboard.backgroundDim.create()
+ if (table) {
+ table.remove() //remove old table if it is there
+ }
+ document.getElementById("leaderboardDropDown").append(Leaderboard.updateLeaderboardTable()) //update new leaderboard
+ }
+
+ const leaderboardDropDown = document.querySelector('.leaderboardDropDown');
+ leaderboardDropDown.style.width = this.isOpen?"70%":"0px";
+ leaderboardDropDown.style.top = this.isOpen?"15%":"0px";
+ leaderboardDropDown.style.left = this.isOpen?"15%":"0px";
+ },
+
+ initializeLeaderboard () {
+ const leaderboardTitle = document.createElement("div");
+ leaderboardTitle.id = "leaderboardTitle";
+ document.getElementById("leaderboardDropDown").appendChild(leaderboardTitle);
+ document.getElementById("leaderboardDropDown").append(this.updateLeaderboardTable())
+
+ document.getElementById("leaderboard-button").addEventListener("click",Leaderboard.openLeaderboardPanel)
+ },
+
+// get leaderboardTable(){
+// // create table element
+// var t = document.createElement("table");
+// t.className = "table scores";
+// // create table header
+// var header = document.createElement("tr");
+// var th1 = document.createElement("th");
+// th1.innerText = "Name";
+// header.append(th1);
+// var th2 = document.createElement("th");
+// th2.innerText = "Score";
+// header.append(th2);
+// t.append(header);
+
+// this.table = t;
+
+// return t;
+// }
+
+// updateLeaderboardTable(pageNumber = 1) { //accept the page number parameter
+// // Fetch time scores from local storage
+// const timeScores = JSON.parse(localStorage.getItem(this.key)) || [];
+
+// // Sort scores from lowest to highest
+// timeScores.sort((a, b) => a.time - b.time);
+
+// console.log(timeScores,this.key)
+
+// // Calculate the start indeand end index for the current leaderboard page
+// const startIndex = (pageNumber - 1) * this.rowsPerPage;
+// const endIndex = startIndex + this.rowsPerPage;
+
+// // Get the existing table element
+// const table = this.table;
+
+// // Clear the table content
+// table.innerHTML = "";
+
+// // Recreate the table header
+// var header = document.createElement("tr");
+// var th1 = document.createElement("th");
+// th1.innerText = "Name";
+// header.append(th1);
+// var th2 = document.createElement("th");
+// th2.innerText = "Score";
+// header.append(th2);
+// table.append(header);
+
+// // Populate the table with time scores
+// timeScores.forEach(score => {
+// var row = document.createElement("tr");
+// var td1 = document.createElement("td");
+// td1.innerText = score.userID;
+// row.append(td1);
+// var td2 = document.createElement("td");
+// td2.innerText = (score.time/1000);
+// row.append(td2);
+// table.append(row);
+// });
+
+// // Update the current page number
+// this.currentPage = pageNumber
+
+// // Populate the table with coin/goomba scores
+
+// }
+
+// // Create button for paging controls
+// createPagingControls(){
+// const prevButton = document.createElement("button");
+// prevButton.innerText = "Previous";
+// prevButton.addEventListener("click", () => {
+// if (this.CurrentPage>1) {
+// this.updateLeaderboardTable(this.currentPage - 1);
+// }
+// });
+
+// const nextButton = document.createElement("button");
+// nextButton.innerText = "Next";
+// nextButton.addEventListener("click", () => {
+// if (this.CurrentPage>1) {
+// this.updateLeaderboardTable(this.currentPage + 1);
+// }
+// });
+
+// const pagingDiv = document.createElement("div");
+// pagingDiv.appendChild(prevButton);
+// pagingDiv.appendChild(nextButton);
+
+// return pagingDiv
+
+// }
+
+
+// get clearButton() {
+// const div = document.createElement("div");
+// div.innerHTML = "Clear Leaderboard: ";
+
+// const button = document.createElement("button");
+// button.innerText = "Clear!";
+
+// button.addEventListener("click", () => {
+// const confirmed = confirm("Are you sure you want to clear the leaderboard?");
+// if (confirmed) {
+// localStorage.clear();
+// this.updateLeaderboardTable();
+// }
+// });
+
+// div.append(button); // wrap button element in div
+// return div;
+// }
+
+
+// get filter() {
+// const div = document.createElement("div");
+// div.innerHTML = "Filters: ";
+
+// const filter = document.createElement("select");
+// const options = ["low", "high"];
+
+// options.forEach(option => {
+// const opt = document.createElement("option");
+// opt.value = option.toLowerCase();
+// opt.text = option;
+// filter.add(opt);
+// });
+
+// div.append(filter); // wrap button element in div
+// return div;
+// }
+
+ // static leaderboardDropDown() {
+ // // create title for leaderboard
+ // var localMultiplayer = document.createElement("div");
+ // localMultiplayer.id = "leaderboardTitle";
+ // document.getElementById("leaderboardDropDown").appendChild(localMultiplayer);
+
+
+ // var localLeaderboard = new Leaderboard(GameControl.localStorageTimeKey);
+ // var serverLeaderboard = new Leaderboard("GtimeScores")
+
+ // var t1 = localLeaderboard.leaderboardTable;
+ // var t2 = serverLeaderboard.leaderboardTable;
+ // document.getElementById("leaderboardDropDown").append(t1);
+ // document.getElementById("leaderboardDropDown").append(t2);
+
+ // var clearButton = localLeaderboard.clearButton;
+ // document.getElementById("leaderboardDropDown").append(clearButton);
+
+ // //var filterDropDown = newLeaderboard.filter;
+ // //document.getElementById("leaderboardDropDown").append(filterDropDown);
+
+ // var IsOpen = false; // default sidebar is closed
+ // var SubmenuHeight = 0; // calculated height of submenu
+ // function leaderboardPanel() {
+ // if (Socket.shouldBeSynced) {
+ // // turn off local
+ // t1.style.display = "none";
+ // t2.style.display = "table";
+
+ // localMultiplayer.innerHTML = "Multiplayer Leaderboard";
+ // } else if (!Socket.shouldBeSynced) {
+ // // turn off multiplayer
+ // t2.style.display = "none";
+ // t1.style.display = "table";
+
+ // localMultiplayer.innerHTML = "Local Leaderboard";
+ // }
+
+ // localLeaderboard.updateLeaderboardTable();
+ // serverLeaderboard.updateLeaderboardTable();
+ // // toggle isOpen
+ // IsOpen = !IsOpen;
+ // // open and close properties for sidebar based on isOpen
+ // var leaderboard = document.querySelector('.leaderboardDropDown');
+ // leaderboard.style.width = IsOpen?"80%":"0px";
+ // leaderboard.style.paddingLeft = IsOpen?"10px":"0px";
+ // leaderboard.style.paddingRight = IsOpen?"10px":"0px";
+ // leaderboard.style.top = `calc(${SubmenuHeight}px + ${GameEnv.top}px)`;
+ // }
+ // // settings-button and event listener opens sidebar
+ // document.getElementById("leaderboard-button").addEventListener("click",leaderboardPanel);
+ // // sidebar-header and event listener closes sidebar
+ // document.getElementById("leaderboard-header").addEventListener("click",leaderboardPanel);
+
+// window.addEventListener('load', function() {
+// var Submenu = document.querySelector('.submenu');
+// SubmenuHeight = Submenu.offsetHeight;
+// });
+// }
}
diff --git a/assets/js/platformer3x/Tree.js b/assets/js/platformer3x/Tree.js
index e412f879..821ed8e0 100644
--- a/assets/js/platformer3x/Tree.js
+++ b/assets/js/platformer3x/Tree.js
@@ -12,31 +12,46 @@ export class Tree extends GameObject {
// Draw position is always 0,0
draw() {
+ const glowRadius = 20; // adjust the glow radius as needed
+ const glowColor = 'rgba(255, 255, 0, 0.5)'; // yellow glow color
+
+ // Draw the glowing effect
+ this.ctx.shadowColor = glowColor;
+ this.ctx.shadowBlur = glowRadius;
this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
+
+ // Reset shadow
+ this.ctx.shadowColor = 'transparent';
+ this.ctx.shadowBlur = 0;
}
// Set Tree position
size() {
// Formula for Height should be on constant ratio, using a proportion of 832
- const scaledHeight = GameEnv.innerHeight * (600/832);
+ const scaledHeight = GameEnv.innerHeight * (400/832); // Reduced height
// Formula for Width is scaled: scaledWidth/scaledHeight == this.width/this.height
const scaledWidth = scaledHeight * this.aspect_ratio;
- const treeX = .80 * GameEnv.innerWidth;
- const treeY = (GameEnv.bottom - (.25 * scaledHeight));
+
+ // Calculate tree position
+ const treeX = .80 * GameEnv.innerWidth - scaledWidth / 2; // Center the tree horizontally
+ const treeY = GameEnv.bottom - scaledHeight; // Position the tree at the bottom
+
+ // Set canvas dimensions and position
+ this.canvas.width = scaledWidth;
+ this.canvas.height = scaledHeight;
+ this.canvas.style.width = `${scaledWidth}px`;
+ this.canvas.style.height = `${scaledHeight}px`;
+ this.canvas.style.position = 'absolute';
+ this.canvas.style.left = `${treeX}px`;
+ this.canvas.style.top = `${treeY}px`;
// set variables used in Display and Collision algorithms
this.bottom = treeY;
this.collisionHeight = scaledHeight;
this.collisionWidth = scaledWidth;
-
- //this.canvas.width = this.width;
- //this.canvas.height = this.height;
- this.canvas.style.Width = `${scaledWidth}px`;
- this.canvas.style.Height = `${scaledHeight}px`;
- this.canvas.style.position = 'absolute';
- this.canvas.style.left = `${treeX}px`;
- this.canvas.style.top = `${treeY}px`;
+ // Update canvas context
+ this.ctx = this.canvas.getContext('2d');
}
}
diff --git a/images/platformer/sprites/noirio.png b/images/platformer/sprites/noirio.png
new file mode 100644
index 00000000..26f0299b
Binary files /dev/null and b/images/platformer/sprites/noirio.png differ
diff --git a/index.md b/index.md
index cb2d6b12..21ff1ecb 100644
--- a/index.md
+++ b/index.md
@@ -12,7 +12,7 @@ image: /images/platformer/backgrounds/home.png
-
+
@@ -42,6 +42,9 @@ image: /images/platformer/backgrounds/home.png
Timer: 0
+
+ Coins: 0
+
@@ -118,7 +121,7 @@ image: /images/platformer/backgrounds/home.png
// Construct settings sidebar, MVC variable paradigm, and async events to trigger user interaction
SettingsControl.sidebar();
- Leaderboard.leaderboardDropDown();
+ Leaderboard.initializeLeaderboard();
startCutstory();
/*