final UI except title

docs/assets/js/constants.js

@@ -59,8 +59,8 @@ var constants = {
             offset_x: 16,
             offset_y: 35
         },
-        defaultX: 600,
-        defaultY: -170
+        defaultX: 575,
+        defaultY: -150
     }
 
 };

docs/assets/js/index.js

@@ -33,7 +33,12 @@ images = [
     "lungs.png",
     "lungCover.png",
     "lungBack.png",
-    "chandelier.png"
+    "chandelier.png",
+    "buttonBigHover.png",
+    "buttonBig.png",
+    "buttonSmallHover.png",
+    "buttonSmall.png",
+    "backGround.png"
 ];
 
 audio = [

docs/assets/js/titleScreen/titleScreen.js

@@ -1,87 +1,61 @@
 var titleScreenState = "main"
 var cursor = mousePos;
-var timer = 0;
+var firstFrame = true;
 
 function handleTitleScreen() {
 
     switch (titleScreenState) {
 
-        case ("main"):
+        case "main":
             handleMainScreen();
             break;
-        case ("credits"):
+        case "credits":
             handleCredits();
             break;
-
-
-
     }
 
-    centerCameraOn(0,0)
-    
-    
+    centerCameraOn(0, 0)
+
+
 }
 
 
-function handleMainScreen(){
-    if(rectpoint({x:415, y:200, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-        globalState = globalStates.levelTransition;
-        timer = 0;
-
-        // Play the bgm
-        soundAssets.backingtrack.playForever();
+function handleMainScreen() {
+    var elemStyle = document.getElementById("credits").style;
+    if(elemStyle.display === "block") {
+        elemStyle.display = "none";
     }
+    if (!firstFrame) {
+        if (mousePress[0]) {
+            if (rectpoint({ x: 400, y: 200, w: 300, h: 50 }, mousePos)) {
+                globalState = globalStates.levelTransition;
 
-    if(timer > 20){
-        if(rectpoint({x:415, y:550, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            titleScreenState = "credits"
-            timer = 0;
+                // Play the bgm
+                soundAssets.backingtrack.playForever();
+            }
+
+            if (rectpoint({ x: 400, y: 550, w: 300, h: 50 }, mousePos)) {
+                titleScreenState = "credits"
+                timer = 0;
+            }
         }
     } else {
-        timer++;
+        firstFrame = false;
     }
 }
 
 
-function handleCredits(){
-    //console.log(`X ${cursor.x}, Y ${cursor.y}`);
-    if(timer > 20){
-        if(rectpoint({x:395, y:550, w: 140, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            titleScreenState = "main";
-            timer = 0;
-        }
-
-        // Rsninja
-        if(rectpoint({x:400, y:145, w: 340, h: 30}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            window.open('https://rsninja.dev/', '_blank');
-            timer = 0;
-        }
-
-        // Silas
-        if(rectpoint({x:420, y:227, w: 350, h: 31}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            window.open('https://exvacuum.dev', '_blank');
-            timer = 0;
-        }
-
-        //Evan
-        if(rectpoint({x:430, y:307, w: 360, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            window.open('https://retrylife.ca/', '_blank');
-            timer = 0;
-        }
-
-        // // William
-        if(rectpoint({x:460, y:382, w: 420, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
-            window.open('https://wm-c.dev', '_blank');
-            timer = 0;
-        }
-
-    }else{
-        timer++;
+function handleCredits() {
+    var elemStyle = document.getElementById("credits").style;
+    if(elemStyle.display === "none") {
+        elemStyle.display = "block";
     }
+    elemStyle.left = canvases.cvs.offsetLeft + 220 + "px";
+    elemStyle.top = canvases.cvs.offsetTop + 20 + "px";
 
-    
-        
-
+    if (rectpoint({ x: 80, y: 550, w: 140, h: 50 }, mousePos) && mousePress[0]) {
+        titleScreenState = "main";
+    }
 }
 
 
@@ -89,38 +63,25 @@ function handleCredits(){
 function drawTitleScreen() {
 
     if (titleScreenState === "main") {
-        text("GAME TITLE HERE", 50, 50, "green", 8, 1000);
-        rect(415, 200, 300, 50, "green");
-        text("Play!", 355, 185, "white", 5, 150);
+        img(sprites.backGround, cw / 2, ch / 2);
 
-        rect(415, 550, 300, 50, "green");
-        text("Credits", 325, 535, "white", 5, 150);
+        text("GAME TITLE HERE", 50, 50, "white", 8, 1000);
+        // rect(415, 200, 300, 50, "green");
+        img(sprites["buttonBig" + (rectpoint({ x: 400, y: 200, w: 300, h: 50 }, mousePos) ? "Hover" : "")], 400, 200, 0, 2, 2);
+        text("Play!", 340, 185, "#403826", 5, 150);
+
+        // rect(415, 550, 300, 50, "green");
+        img(sprites["buttonBig" + (rectpoint({ x: 400, y: 550, w: 300, h: 50 }, mousePos) ? "Hover" : "")], 400, 550, 0, 2, 2);
+        text("Credits", 310, 535, "#403826", 5, 150);
     }
 
     if (titleScreenState === "credits") {
-        text("CREDITS", 250, 50, "green", 8, 300);
+        img(sprites.backGround, cw / 2, ch / 2);
 
-        text("rsninja dev", 250, 130, "green", 5, 1000);
-
-        text("Silas Bartha", 250, 210, "green", 5, 1000);
-
-        text("Evan Pratten", 250, 290, "green", 5, 1000);
-
-        text("William Meathrel", 250, 370, "green", 5, 1000)
-
-        //text("Sally Lopez", 250, 320, "green", 5, 1000)
-
-        rect(395, 550, 140, 50, "green");
-        text("Back", 345, 535, "white", 5, 150);
-
-        text("*Names are links to their pages", 705, 495, "green", 2, 100);
+        img(sprites["buttonSmall" + (rectpoint({ x: 80, y: 550, w: 140, h: 50 }, mousePos) ? "Hover" : "")], 80, 550, 0, 2, 2);
+        text("Back", 30, 535, "#403826", 5, 150);
 
+        text("*Names are links to their pages", 705, 495, "black", 2, 100);
     }
 
-
-
-
-
-
-
 }

docs/index.html

@@ -16,15 +16,35 @@
                 border: 5px solid var(--theme-webpage-canvas_border);
                 background-color: var(--theme-webpage-canvas_bg);
             }
+            a {
+                color: white;
+                text-decoration: none;
+            }
+            a:visited {
+                color: rgb(190, 190, 190);
+            }
         </style>
         <link rel="stylesheet" href="assets/css/main.css">
     </head>
     <body>
         <canvas width="800" height="600" id="game"></canvas>
-        <pre style="position: absolute;left: 0;bottom: 0;"> TODO REMOVE ME 
-z: blink
-x: breath
-c: beat heart
+        <pre style="position:absolute;font-family: PixelArial11;font-size: 32px;display:none;" id="credits">
+<u>Programming</u> 
+<a href="https://rsninja.dev">rsninja dev</a>
+<a href="https://wm-c.dev">William Meathrel</a>
+<a href="https://retrylife.ca/">Evan Pratten</a>
+<a href="https://exvacuum.dev">Silas Bartha</a>
+<a href="https://www.youtube.com/channel/UC5TeGG-Ak6ouX5JdxZB-ESg">MarshMarlow</a>
+
+<u>Art</u>
+Sally Lopez 
+<a href="https://rsninja.dev">rsninja dev</a>
+
+<u>Music</u>
+Matthew West
+
+<u>Sounds</u>
+<a href="https://retrylife.ca/">Evan Pratten</a>
         </pre>
 
         <!-- Graphics Library -->