style: Small code updates

- Comment code better
- Cleaned up the code
- Blocked worse scores for local-storage

Author: TFJ2021

src/game/custom_classes/Background.ts

@@ -13,6 +13,7 @@ export enum Layer {
 const layers: Layer[] = [Layer.FRONT, Layer.MIDDLE, /*Layer.BACK*/];
 
 // Config
+const backgroundImage: string = "gameBackground3";
 const backgroundSpeed: number = 1;
 const houseKeys: string[] = ["house1", "house2", "house3", "house4", "church"];
 const layerPropertiesMap: Record<Layer, LayerProperties> = {
@@ -43,7 +44,7 @@ const layerPropertiesMap: Record<Layer, LayerProperties> = {
     scale: () => 4 + Math.random() * 0.2,
     depth: -3,
     y: () => globalConsts.gameHeight - 55,
-    speed: () => 1.2 * globalConsts.houseSpeed  
+    speed: () => 1.2 * globalConsts.houseSpeed
     speed: () => 0.6,
     opacity: 0.6,
     // Data
@@ -92,12 +93,12 @@ export function spawnHouses(scene: Scene): void {
 // Create Background
 function createBackground(): void {
   // Background A
-  backgroundA = currentScene.add.image(globalConsts.gameWidth / 2, globalConsts.gameHeight / 2.2, "gameBackground3");
+  backgroundA = currentScene.add.image(globalConsts.gameWidth / 2, globalConsts.gameHeight / 2.2, backgroundImage);
   backgroundA.setScale(4.5);
   backgroundA.setDepth(-4);
 
   // Background B
-  backgroundB = currentScene.add.image(globalConsts.gameWidth / 2 + backgroundA.displayWidth, globalConsts.gameHeight / 2.2, "gameBackground3");
+  backgroundB = currentScene.add.image(globalConsts.gameWidth / 2 + backgroundA.displayWidth, globalConsts.gameHeight / 2.2, backgroundImage);
   backgroundB.setScale(4.5);
   backgroundB.setDepth(-4);
 }
@@ -129,26 +130,27 @@ function spawnHouse(layer: Layer): void {
 // Moves every house on every layer
 export function updateMovement(): void {
   for (let layer of layers) moveHouses(getLayerDetails(layer).houses, getLayerDetails(layer).speed()); // Moves houses
-  moveBackground(); // ️ Moves Background
+  moveBackground(); // ️ Moves Backgrounds
 }
 
 // Moves background
 function moveBackground(): void {
   backgroundA.x -= backgroundSpeed * globalConsts.backgroundSpeed;
   backgroundB.x -= backgroundSpeed * globalConsts.backgroundSpeed;
 
-
   if (backgroundA.x <= -backgroundA.displayWidth / 2) backgroundA.x = backgroundB.x + backgroundB.displayWidth;
   if (backgroundB.x <= -backgroundB.displayWidth / 2) backgroundB.x = backgroundA.x + backgroundA.displayWidth;
 }
 
 
 // Moves every house on specified layer
 function moveHouses(houses: Phaser.GameObjects.Image[], speed: number): void {
+  // Moves houses
   houses.forEach(house => {
     house.x -= speed;
   });
 
+  // Destroys houses when out of bounds
   for (let i = houses.length - 3; i >= 0; i--) {
     if (houses[i].x < -houses[i].width * 4 - 50) {
       houses[i].destroy();

src/game/custom_classes/Button.ts

@@ -1,6 +1,5 @@
 import {GameObjects, Scene} from "phaser";
 
-//import via (import {Button} from "../custom_classes/Button")
 export class Button {
   readonly x: number;
   readonly y: number;
@@ -13,7 +12,7 @@ export class Button {
     //initialise variables
     this.x = x; //x position
     this.y = y; //y position
-    this.image = image; //image as string
+    this.image = image; // imageID
     this.scene = curScene; //the scene the buttons is in (this)
 
     // add buttons to the current scene (just "this" in the scene you implement the buttons)
@@ -25,18 +24,20 @@ export class Button {
     // scales the button
     this.button.setScale(scale, scale);
 
-    // Buttons actions
+    // On (Un-)Hover
     this.button.on('pointerover', () => {
       this.button.setAlpha(0.7);
     });
 
     this.button.on('pointerout', () => {
       this.button.setAlpha(1);
     });
+
     // Calls function that is provided
     this.button.on('pointerdown', onButtonPressed);
   }
 
+  // Helper methode to change image
   setImage(newImage: string): void {
     this.image = newImage;
     this.button.setTexture(newImage)

src/game/loader/Boot.ts

@@ -53,8 +53,6 @@ export class Boot extends Scene {
 }
 
 // When all assets are done
-// When all the assets have loaded, it's often worth creating global objects here that the rest of the game can use.
-// For example, you can define global animations here, so we can use them in other scenes.
 export function start(scene: Phaser.Scenes.ScenePlugin): void {
 
   // Switch to main menu

src/game/main.ts

@@ -6,9 +6,9 @@ import {Preloader} from './loader/Preloader.ts';
 import {Options} from './scenes/Options.ts';
 import {Credits} from './scenes/Credits.ts';
 import {Controls} from './scenes/Controls.ts';
-import Image = Phaser.GameObjects.Image;
 import {ThatGame} from './thatFolder/ThatGame.ts';
 import {Leaderboard} from './scenes/Leaderboard.ts';
+import Image = Phaser.GameObjects.Image;
 
 // Config
 const gameW: number = 1024;
@@ -19,11 +19,6 @@ const background: number = 0xd3d1fa;
 const debugMode: boolean = false;
 const pixelFontName: string = "pixelFont";
 const api: string | undefined = undefined // "http://localhost:3000"; // Dont forget the http(s) | undefined -> localstorage
-const getRandomInt: Function = (min: number, max: number): number => {//return a random number between min(inclusive) and max(inclusive)
-  const minCeiled: number = Math.ceil(min);
-  const maxFloored: number = Math.floor(max);
-  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled)
-}
 let speed: number = 1;
 
 // Global variables
@@ -72,11 +67,11 @@ const config: Phaser.Types.Core.GameConfig = {
 };
 
 // Creates new Game instance
-export default function startGame() {
-  return new Game({...config});
+export default function startGame(): void {
+  new Game({...config});
 }
 
-// Displays player
+// Displays player in the corner
 export function displayPlayer(that: any): void {
   const player: Image = that.add.image(globalConsts.santaX, globalConsts.santaY, 'player2');
   player.setScale(4);
@@ -88,3 +83,10 @@ export function displayDebug(scene: Scene): void {
   scene.add.graphics().setAlpha(0.75);
   scene.physics.world.createDebugGraphic();
 }
+
+// Get random Int between to points
+function getRandomInt(min: number, max: number): number {
+  const minCeiled: number = Math.ceil(min);
+  const maxFloored: number = Math.floor(max);
+  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled)
+}

src/game/scenes/GameOver.ts

@@ -2,9 +2,9 @@ import {Scene} from 'phaser';
 import {displayPlayer, globalConsts} from '../main.ts';
 import {formatTime} from '../thatFolder/ThatPlayer.ts';
 import {Button} from '../custom_classes/Button.ts';
+import {fetchLeaderboard, removeEntry, sortedLeaderboard, sortLeaderboard} from './Leaderboard.ts';
 import Text = Phaser.GameObjects.Text;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {fetchLeaderboard, removeEntry, sortedLeaderboard, sortLeaderboard} from './Leaderboard.ts';
 
 // config
 const range: number = 2;
@@ -64,7 +64,6 @@ export class GameOver extends Scene {
 
     // Save score button
     saveButton = new Button(700, 700, 7, "button_save", scene, () => prompt());
-    // TODO | add "to full leaderboard" button
 
     // Clicker
     const blocker: Rectangle = this.add.rectangle(0, 0, globalConsts.gameWidth, globalConsts.gameHeight, 0x000000, 0.001)
@@ -91,7 +90,7 @@ function prompt(): void {
   // Cancel
   if (prompt == null) return;
 
-  // YOU cannot be used
+  // "YOU" cannot be used
   if (prompt.toUpperCase() == "YOU") {
     alert("This cannot be used as name");
     return;
@@ -133,7 +132,7 @@ function prompt(): void {
 
     // Removes and rerenders leaderboard
     clearsLeaderboardLine();
-    renderLeaderboard();
+    renderLeaderboard().then();
 
     // Resets button
     saveButton.setImage("button_saved");
@@ -229,10 +228,12 @@ export async function generateCode(): Promise<string | undefined> {
 async function saveLeaderboard(name: string, key: string | null, value: number): Promise<Response | undefined> {
   // Local-storage
   if (globalConsts.apiURL == undefined) {
+    const oldEntry: leaderboardEntry | undefined = getEntryByName(name);
+    if (oldEntry && oldEntry.score > value) return new Response(JSON.stringify({success: false}), {status: 208}); // Better score exists
     sortedLeaderboard?.push({name: name, score: value}); // Adds entry
     sortedLeaderboard?.filter(entry => entry.name !== "YOU"); // Removes YOU
     localStorage.setItem("leaderboard", JSON.stringify(sortedLeaderboard, null, 0))
-    return new Response(JSON.stringify({ success: true }), { status: 200 });
+    return new Response(JSON.stringify({success: true}), {status: 200});
   }
 
   // Request info
@@ -254,3 +255,8 @@ async function saveLeaderboard(name: string, key: string | null, value: number):
     return undefined;
   }
 }
+
+// Gets leaderboard entry by name
+function getEntryByName(name: string): leaderboardEntry | undefined {
+  return sortedLeaderboard?.find(entry => entry.name === name);
+}

src/game/scenes/Leaderboard.ts

@@ -31,7 +31,7 @@ let currentCategory: leaderboardCategory = "default";
 export let sortedLeaderboard: leaderboardEntry[] | undefined;
 let clickedRefresh: number = 0;
 
-// Scene class
+// Full Leaderboard
 export class Leaderboard extends Scene {
 
   // Constructor
@@ -60,7 +60,7 @@ export class Leaderboard extends Scene {
 
     // Subtitle
     subtitle = scene.add.text(110, 163, "Loading this text", {
-      font: "30px pixelFont",
+      font: "27px pixelFont",
       color: "#ffffff",
       align: 'center'
     });