Merge pull request #124 from Cars-n/win-menu

Win menu

index.html

@@ -48,6 +48,7 @@
 
 	  <link rel="stylesheet" href="src/css/PauseMenu.css">
 	  <link rel="stylesheet" href="src/css/MainMenu.css">
+	  <link rel="stylesheet" href="src/css/WinMenu.css">
 
 </head>
 
@@ -60,6 +61,7 @@
 	<script  src="src/js/mainPlayer.js"></script>
 	<script  src="src/js/videoCheck.js"></script>
 	<script  src="src/js/menu.js"></script>
+	<script  src="src/js/win.js"></script>
 	<script  src="src/js/playing.js"></script>
 	<script  src="src/js/Camera.js"></script>
 	<script  src="src/js/pause.js"></script>

sketch.js

@@ -22,6 +22,7 @@ let fullHealth, twoHealth, oneHealth, deadHealth;
 let mainMenu;
 let pauseMenu;
 let settingsMenu;
+let winMenu;
 let CreepyPiano1, CreepyPiano2;
 let mainMenuSound;
 let trapDoorImage;
@@ -152,6 +153,9 @@ function setup() {
 	//Makes a new settings menu
 	settingsMenu = new SettingsMenu();
 
+	//Makes a new win menu
+	winMenu = new WinMenu();
+
 }
 
 function draw() {
@@ -185,6 +189,9 @@ function draw() {
 	else if (GAMESTATE == "PAUSE") {
 		pauseFunctionality();
 	}
+	else if (GAMESTATE == "WON") {
+		winFunctionality();
+	}
 
 	/* TODO - FOR THE SETTINGS TRIGGER
 	/*else if (GAMESTATE == 'SETTINGS') {

src/css/WinMenu.css

@@ -0,0 +1,80 @@
+/**
+    CSS Styling for the pause screen
+
+*/
+
+
+/*
+    Lays out the grid implementation that will be overlaid to center the buttons
+    3x4 grid with fractional units for scalability
+    The 3 allows for a center
+*/
+.layoutGrid {
+    display: grid;
+    grid-template:
+    ".    .        .      .            ." 1fr
+    ".    .        .      .            ." 1fr
+    ".    .        Exit   .            ." 1fr
+    ".    .        .      .            ." 1fr
+    /1fr  1fr      1fr    1fr          1fr;
+}
+
+.Exit{
+    grid-area: Exit;
+    justify-content: center;
+    padding-top: 150px;
+
+}
+
+.EscapedMenuButtons{
+    background-color: transparent;
+    display: grid;
+    color: white;
+    border: none;
+    font-size: 25px;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+
+.EscapedHeading {
+    color: white;
+}
+
+.EscapedMenuButtons:hover{
+    color: rgb(252, 252, 86);
+}
+
+
+@keyframes EscapedGlitch {
+    0% {
+        opacity: 1;
+    }
+    20% {
+        opacity: 0.8;
+    }
+    40% {
+        opacity: 0.9;
+    }
+    60% {
+        text-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow;
+    }
+    80% {
+        background-color: transparent;
+        color: rgb(255, 255, 157); 
+        text-shadow: 0 0 10px rgb(255, 255, 117), 0 0 20px rgb(255, 255, 246), 0 0 30px rgb(255, 255, 0);
+        opacity: 0.75;
+    }
+    100% {
+        opacity: 1;
+    }
+  }
+
+.EscapedH1 {
+    font-size: 7em;
+    color: rgb(255, 255, 0);
+    background-color: transparent;
+    border:none;
+    animation: EscapedGlitch 4s infinite;
+    text-shadow: 0 0 5px yellow; /* Add a yellow glow effect */
+    transition: all 0.1s ease-in-out; /* Smoother transition for the glitch effect */
+  }

src/js/Screens.js

@@ -434,3 +434,65 @@ class BlinkViewer {
 		return CURRENTGAMESTATE;
 	}
 }
+
+class WinMenu {
+	/**
+	 * Default constructor, makes a background and exit buttons
+	 */
+	constructor() {
+		this.exitButton = createButton('> Exit');
+		this.title = createButton('YOU ESCAPED');
+
+		//Backdrop to the menu
+		this.menu = new Sprite(1920/2,1080/2,1920,1080);
+		this.menu.layer = MAIN_MENU_LAYER;
+		this.menu.opacity = 0.4;
+		this.menu.color = 'black';
+		this.menu.collider = 'none';
+
+		this.title.class("EscapedH1");
+		this.title.position(600,50);
+		this.title.hide();
+
+		// Setup exit Button
+		this.exitButton.class("EscapedMenuButtons");
+		this.exitButton.attribute("name", "exit");
+
+		this.exitButton.position(675,250)
+		this.exitButton.hide();		//Hides the button until win menu is triggered
+
+	}
+
+	/**
+	 * Shows the menu and buttons
+	 * 
+	 * @param {*} CURRENTGAMESTATE 
+	 */
+	showMenu() {
+		this.menu.visible = true;
+		this.exitButton.show();
+		this.title.show();
+
+	}
+
+	/**
+	 * Hides the menu 
+	 * 
+	 */
+	hideMenu() {
+		this.exitButton.hide();
+		this.title.hide();
+		this.menu.visible = false;
+	}
+
+
+	/**
+	 * Called when exit is clicked
+	 * Takes you to the main menu
+	 */
+	exitGame(CURRENTGAMESTATE) {
+		this.hideMenu();
+		CURRENTGAMESTATE = "MENU";
+		return CURRENTGAMESTATE;
+	}
+}

src/js/playing.js

@@ -44,6 +44,7 @@ function playingFunctionality(){
             }});
         }
         if(BOSSISALIVE) giantEyeBossfight();
+        else GAMESTATE = "WON";
 
     }
     if(player.health <= 0) { 

src/js/win.js

@@ -0,0 +1,13 @@
+function winFunctionality() {
+    player.velocity.y = 0;
+    player.velocity.x = 0;
+    player.changeAni("idle_" + playerMovement.lastDirection);
+    movementSounds(player,footsteps);
+
+    winMenu.showMenu();
+
+    winMenu.exitButton.mousePressed(() => {
+        GAMESTATE = winMenu.exitGame(GAMESTATE);
+
+    });
+}