- add "New High Score" for rank 1 survivor

- add "Top 3 Score" for ranks 2 and 3 - show text once image has finished loading - pixel fade in happens to all scores - fix discovery notis
BibliothecaDAO · Sep 28, 2023 · eeb8b69 · eeb8b69
1 parent 97f0c64
commit eeb8b69
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 66 deletions.
diff --git a/ui/src/app/components/adventurer/DeathDialog.tsx b/ui/src/app/components/adventurer/DeathDialog.tsx
@@ -23,6 +23,7 @@ export const DeathDialog = () => {
   const adventurer = useAdventurerStore((state) => state.adventurer);
   const setAdventurer = useAdventurerStore((state) => state.setAdventurer);
   const showDeathDialog = useUIStore((state) => state.showDeathDialog);
+  const [imageLoading, setImageLoading] = useState(false);
 
   const { data, refetch, setData } = useQueriesStore();
 
@@ -55,68 +56,83 @@ export const DeathDialog = () => {
 
   return (
     <>
-      <div className="top-0 left-0 fixed text-center h-full w-full z-40">
-        {rank! <= 50 ? (
-          <PixelatedImage src={"/scenes/intro/skulls.png"} pixelSize={10} />
-        ) : (
-          <Image
+      {rank && (
+        <div className="top-0 left-0 fixed text-center h-full w-full z-40">
+          <PixelatedImage
             src={"/scenes/intro/skulls.png"}
-            alt="skull"
-            className="absolute object-cover"
-            fill
+            pixelSize={rank <= 100 ? 10 : 20}
+            setImageLoading={setImageLoading}
           />
-        )}
-        <div className="absolute inset-0 bg-black opacity-50"></div>
 
-        <div className="flex flex-col gap-4 sm:gap-10 items-center justify-center z-10 p-10 sm:p-20 h-full">
-          <div className="flex flex-col gap-5 items-center justify-center z-10 self-center ">
-            {rank! <= 50 ? (
-              <GlitchEffect />
-            ) : (
-              <h1 className="text-red-500 text-6xl">YOU DIED!</h1>
-            )}
-            <span ref={messageRef} className="text-lg sm:text-3xl text-red-500">
-              {deathMessage}
-            </span>
-            <span className="flex flex-col gap-2 text-lg sm:text-4xl">
-              <span className="text-terminal-yellow">
-                {getDeathMessageByRank(rank!)}
-              </span>{" "}
-              <span className="text-4xl">
-                <span className="text-terminal-yellow">{adventurer?.name}</span>{" "}
-                died{" "}
-                <span className="text-terminal-yellow">
-                  {getOrdinalSuffix(rank! ?? 0)}
-                </span>{" "}
-                with{" "}
-                <span className="text-terminal-yellow">
-                  {adventurer?.xp} XP
+          <div className="absolute inset-0 bg-black opacity-50"></div>
+
+          {!imageLoading && (
+            <div className="flex flex-col gap-4 sm:gap-10 items-center justify-center z-10 p-10 sm:p-20 h-full">
+              <div className="flex flex-col gap-5 items-center justify-center z-10 self-center ">
+                {rank! <= 3 &&
+                  rank! > 0 &&
+                  (rank === 1 ? (
+                    <h1 className="text-6xl animate-pulseFast">
+                      NEW HIGH SCORE
+                    </h1>
+                  ) : (
+                    <h1 className="text-6xl animate-pulseFast">TOP 3 SCORE</h1>
+                  ))}
+                {rank! <= 50 ? (
+                  <GlitchEffect />
+                ) : (
+                  <h1 className="text-red-500 text-6xl">YOU DIED!</h1>
+                )}
+                <span
+                  ref={messageRef}
+                  className="text-lg sm:text-3xl text-red-500"
+                >
+                  {deathMessage}
                 </span>
-              </span>
-            </span>
-            <span className="sm:text-2xl">
-              Share your score. Continue the journey with another adventurer.
-            </span>
-          </div>
-          <TwitterShareButton
-            text={`RIP ${adventurer?.name}, who died at ${getOrdinalSuffix(
-              rank! ?? 0
-            )} place on #LootSurvivor.\n\nGravestone bears the inscription: ${
-              messageRef.current?.innerText
-            }🪦\n\nEnter here and try to survive: ${appUrl}\n\n@lootrealms #Starknet #Play2Die #LootSurvivor`}
-          />
-          <Button
-            onClick={() => {
-              showDeathDialog(false);
-              setDeathMessage(null);
-              setAdventurer(NullAdventurer);
-            }}
-            className="z-10"
-          >
-            Play Again
-          </Button>
+                <span className="flex flex-col gap-2 text-lg sm:text-4xl">
+                  <span className="text-terminal-yellow">
+                    {getDeathMessageByRank(rank!)}
+                  </span>{" "}
+                  <span className="text-4xl">
+                    <span className="text-terminal-yellow">
+                      {adventurer?.name}
+                    </span>{" "}
+                    died{" "}
+                    <span className="text-terminal-yellow">
+                      {getOrdinalSuffix(rank! ?? 0)}
+                    </span>{" "}
+                    with{" "}
+                    <span className="text-terminal-yellow">
+                      {adventurer?.xp} XP
+                    </span>
+                  </span>
+                </span>
+                <span className="sm:text-2xl">
+                  Share your score. Continue the journey with another
+                  adventurer.
+                </span>
+              </div>
+              <TwitterShareButton
+                text={`RIP ${adventurer?.name}, who died at ${getOrdinalSuffix(
+                  rank! ?? 0
+                )} place on #LootSurvivor.\n\nGravestone bears the inscription: "${
+                  messageRef.current?.innerText
+                }"🪦\n\nEnter here and try to survive: ${appUrl}\n\n@lootrealms #Starknet #Play2Die #LootSurvivor`}
+              />
+              <Button
+                onClick={() => {
+                  showDeathDialog(false);
+                  setDeathMessage(null);
+                  setAdventurer(NullAdventurer);
+                }}
+                className="z-10"
+              >
+                Play Again
+              </Button>
+            </div>
+          )}
         </div>
-      </div>
+      )}
     </>
   );
 };
diff --git a/ui/src/app/components/animations/PixelatedImage.tsx b/ui/src/app/components/animations/PixelatedImage.tsx
@@ -3,9 +3,14 @@ import React, { useEffect, useRef, useState } from "react";
 interface PixelatedImageProps {
   src: string;
   pixelSize: number;
+  setImageLoading: (imageLoaded: boolean) => void;
 }
 
-const PixelatedImage: React.FC<PixelatedImageProps> = ({ src, pixelSize }) => {
+const PixelatedImage: React.FC<PixelatedImageProps> = ({
+  src,
+  pixelSize,
+  setImageLoading,
+}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 
@@ -31,6 +36,7 @@ const PixelatedImage: React.FC<PixelatedImageProps> = ({ src, pixelSize }) => {
     image.src = src;
 
     image.onload = () => {
+      setImageLoading(true);
       const canvas = canvasRef.current;
       if (!canvas) return;
 
@@ -44,9 +50,12 @@ const PixelatedImage: React.FC<PixelatedImageProps> = ({ src, pixelSize }) => {
 
       const scaledWidth = Math.ceil(width / pixelSize);
       const scaledHeight = Math.ceil(height / pixelSize);
+      let maxTimeout = 0;
 
       for (let y = 0; y < scaledHeight; y++) {
         for (let x = 0; x < scaledWidth; x++) {
+          const timeout = Math.random() * 100;
+          maxTimeout = Math.max(maxTimeout, timeout);
           setTimeout(() => {
             // Updated drawImage method to scale the image to the canvas size
             ctx.drawImage(
@@ -60,9 +69,13 @@ const PixelatedImage: React.FC<PixelatedImageProps> = ({ src, pixelSize }) => {
               pixelSize,
               pixelSize
             );
-          }, Math.random() * 100);
+          }, timeout);
         }
       }
+
+      setTimeout(() => {
+        setImageLoading(false);
+      }, maxTimeout);
     };
   }, [src, pixelSize, dimensions]);
 

diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
@@ -507,6 +507,8 @@ export function syscalls({
           }
         }
 
+        const reversedDiscoveries = discoveries.slice().reverse();
+
         const adventurerDiedEvents = events.filter(
           (event) => event.name === "AdventurerDied"
         );
@@ -522,14 +524,14 @@ export function syscalls({
           setData("adventurersByOwnerQuery", 0, "health", deadAdventurerIndex);
           setAdventurer(adventurerDiedEvent.data[0]);
           const killedByObstacle =
-            discoveries.reverse()[0]?.discoveryType == "Obstacle" &&
-            discoveries.reverse()[0]?.adventurerHealth == 0;
+            reversedDiscoveries[0]?.discoveryType == "Obstacle" &&
+            reversedDiscoveries[0]?.adventurerHealth == 0;
           const killedByPenalty =
-            !discoveries.reverse()[0]?.discoveryType &&
-            discoveries.reverse()[0]?.adventurerHealth == 0;
+            !reversedDiscoveries[0]?.discoveryType &&
+            reversedDiscoveries[0]?.adventurerHealth == 0;
           const killedByAmbush =
-            discoveries.reverse()[0]?.ambushed &&
-            discoveries.reverse()[0]?.adventurerHealth == 0;
+            reversedDiscoveries[0]?.ambushed &&
+            reversedDiscoveries[0]?.adventurerHealth == 0;
           if (killedByObstacle || killedByPenalty || killedByAmbush) {
             setDeathNotification(
               "Explore",
@@ -587,7 +589,7 @@ export function syscalls({
 
         setEquipItems([]);
         setDropItems([]);
-        stopLoading(discoveries);
+        stopLoading(reversedDiscoveries);
         setMintAdventurer(false);
       } catch (e) {
         console.log(e);

diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -59,6 +59,9 @@ module.exports = {
       textShadow: {
         'none': 'none',  // This line removes the text shadow
       },
+      animation: {
+        pulseFast: 'pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite'
+      }
     },
   },
   plugins: [