Update victory / defeat screens

index.html

@@ -51,6 +51,9 @@
 		<link rel="prefetch" href="autoplay.png" />
 		<link rel="prefetch" href="play.png" />
 		<link rel="prefetch" href="fast forward.png" />
+		<link rel="prefetch" href="defeat face.png" />
+		<link rel="prefetch" href="win face.png" />
+		<link rel="prefetch" href="Play Again.png" />
 
 		<title>Profectus</title>
 		<meta name="description" content="A project made in Profectus"/>

src/data/common.css

@@ -309,20 +309,16 @@
     height: 100%;
 }
 
-.total-outcome {
-    font-size: 4vmin;
-    margin: 0;
-}
-
 .smiley {
-    font-size: 20vmin;
+    margin: 0 auto;
-    margin: 0;
     animation: swing 2s infinite ease;
+    height: 35vmin;
+    image-rendering: pixelated;
 }
 
-.total-outcome-container .button {
+.total-outcome-container .replay {
-    margin: 0;
+    margin: 0 auto;
-    font-size: xx-large;
+    height: 15vmin;
 }
 
 .tooltip img {

src/data/projEntry.tsx

@@ -31,6 +31,9 @@ import sellShop from "../../public/shop_Sell1.png";
 import stanz from "../../public/Stanz Coots.png";
 import startStream from "../../public/start stream.png";
 import vespa from "../../public/Vespa Coots.png";
+import victoryFace from "../../public/win face.png";
+import defeatFace from "../../public/defeat face.png";
+import playAgain from "../../public/Play Again.png";
 import CharacterSlot from "./CharacterSlot.vue";
 import "./common.css";
 import "./socket";
@@ -441,16 +444,13 @@ export const main = createLayer("main", function (this: BaseLayer) {
             if (wins.value >= 5) {
                 return (
                     <div class="total-outcome-container">
-                        <span class="total-outcome">You Won!</span>
+                        <img class="smiley" src={victoryFace} />
-                        <span class="smiley">😃</span>
+                        <Row style="margin-top: 5vmin;">
-                        <Row>
                             {new Array(3).fill(0).map((_, i) => (
                                 <CharacterSlot character={team.value[i]} />
                             ))}
                         </Row>
-                        <button class="button" onClick={() => location.reload()}>
+                        <img src={playAgain} class="button" onClick={() => location.reload()} />
-                            Play again
-                        </button>
                         {render(particles)}
                     </div>
                 );
@@ -458,16 +458,13 @@ export const main = createLayer("main", function (this: BaseLayer) {
             if (lives.value <= 0) {
                 return (
                     <div class="total-outcome-container">
-                        <span class="total-outcome">You ran out of lives!</span>
+                        <img class="smiley" src={defeatFace} />
-                        <span class="smiley">😰</span>
+                        <Row style="margin-top: 5vmin;">
-                        <Row>
                             {new Array(3).fill(0).map((_, i) => (
                                 <CharacterSlot character={team.value[i]} />
                             ))}
                         </Row>
-                        <button class="button" onClick={() => location.reload()}>
+                        <img src={playAgain} class="replay" onClick={() => location.reload()} />
-                            Play again
-                        </button>
                         {render(particles)}
                     </div>
                 );
@@ -796,7 +793,6 @@ globalBus.on("update", diff => {
                     Math.random() * boundingRect.width,
                     Math.random() * boundingRect.height
                 );
-                console.log(e);
                 e.playOnceAndDestroy();
             });
         }