From 175dfde32e9d4158cfdc4062ec9b273d847ac849 Mon Sep 17 00:00:00 2001
From: jsun969 <i@jsun.lol>
Date: Mon, 23 Oct 2023 19:34:09 +0800
Subject: [PATCH] feat(game/result): add time and score

---
 app/_game/components/ResultDisplay.tsx | 21 +++++++++++++++++
 public/images/result/trophy.svg        | 31 ++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 public/images/result/trophy.svg

diff --git a/app/_game/components/ResultDisplay.tsx b/app/_game/components/ResultDisplay.tsx
index a05d336..c06c4df 100644
--- a/app/_game/components/ResultDisplay.tsx
+++ b/app/_game/components/ResultDisplay.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image'
 import { useState } from 'react'
 
 import { type userScores } from '~/db/schema'
+import dayjs from '~/lib/dayjs'
 import { type User } from '~/stores/User.store'
 
 import { getResultTier } from '../helpers/getResultTier'
@@ -44,6 +45,26 @@ export function ResultDisplay({
         />
       </div>
       <div className="flex h-full flex-col items-center justify-between px-[10px] py-[20px] sm:w-1/2 sm:justify-center sm:gap-[48px] sm:p-[24px]">
+        <div className="flex items-center justify-center gap-[10px] text-[13px] sm:gap-[16px] sm:text-[16px]">
+          <Image
+            src="/images/play/clock.svg"
+            height={24}
+            width={24}
+            alt="time"
+            className="h-[18px] w-[18px] sm:h-[24px] sm:w-[24px]"
+          />
+          <div>{dayjs.duration(userScore.time, 'seconds').format('mm:ss')}</div>
+          <Image
+            src="/images/result/trophy.svg"
+            height={24}
+            width={24}
+            alt="score"
+            className="h-[18px] w-[18px] sm:h-[24px] sm:w-[24px]"
+          />
+          <div>
+            {userScore.score}/{userScore.total}
+          </div>
+        </div>
         <div className="text-center">
           <div className="text-[16px] sm:text-[20px]">~ Test #{testId} ~</div>
           <div className="text-[13px] sm:text-[16px] sm:text-[#A9A9A9]">
diff --git a/public/images/result/trophy.svg b/public/images/result/trophy.svg
new file mode 100644
index 0000000..930b350
--- /dev/null
+++ b/public/images/result/trophy.svg
@@ -0,0 +1,31 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="14.2222" y="5.3335" width="35.5556" height="3.55556" fill="white"/>
+  <rect x="10.6665" y="32" width="23.1111" height="3.55556" transform="rotate(-90 10.6665 32)" fill="white"/>
+  <rect x="49.7778" y="32" width="23.1111" height="3.55556" transform="rotate(-90 49.7778 32)" fill="white"/>
+  <rect x="14.2222" y="32" width="3.55556" height="3.55556" fill="white"/>
+  <rect x="17.7778" y="35.5557" width="3.55556" height="3.55556" fill="white"/>
+  <rect x="14.2222" y="53.3335" width="3.55556" height="3.55556" fill="white"/>
+  <rect x="46.2222" y="53.3335" width="3.55556" height="3.55556" fill="white"/>
+  <rect x="21.3335" y="39.1113" width="5.33333" height="3.55556" fill="white"/>
+  <rect x="17.7778" y="49.7778" width="8.88889" height="3.55556" fill="white"/>
+  <rect x="37.3335" y="49.7778" width="8.88889" height="3.55556" fill="white"/>
+  <rect x="26.6665" y="49.7778" width="7.11111" height="3.55556" transform="rotate(-90 26.6665 49.7778)" fill="white"/>
+  <rect x="33.7778" y="49.7778" width="7.11111" height="3.55556" transform="rotate(-90 33.7778 49.7778)" fill="white"/>
+  <rect width="3.55556" height="3.55556" transform="matrix(-1 0 0 1 49.7778 32)" fill="white"/>
+  <rect width="3.55556" height="3.55556" transform="matrix(-1 0 0 1 46.2222 35.5557)" fill="white"/>
+  <rect width="5.33333" height="3.55556" transform="matrix(-1 0 0 1 42.6665 39.1113)" fill="white"/>
+  <rect x="12.4443" y="56.8887" width="39.1111" height="3.55556" fill="white"/>
+  <rect x="5.3335" y="12.4443" width="5.33333" height="3.55556" fill="white"/>
+  <rect x="5.3335" y="26.6665" width="5.33333" height="3.55556" fill="white"/>
+  <rect x="1.77783" y="26.6665" width="10.6667" height="3.55556" transform="rotate(-90 1.77783 26.6665)" fill="white"/>
+  <rect width="5.33333" height="3.55556" transform="matrix(-1 0 0 1 58.6665 12.4443)" fill="white"/>
+  <rect width="5.33333" height="3.55556" transform="matrix(-1 0 0 1 58.6665 26.6665)" fill="white"/>
+  <rect width="10.6667" height="3.55556" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 62.2222 26.6665)" fill="white"/>
+  <rect x="30.2222" y="14.2222" width="3.55556" height="7.11111" fill="white"/>
+  <rect x="23.1113" y="21.3335" width="3.55555" height="17.7778" transform="rotate(-90 23.1113 21.3335)" fill="white"/>
+  <rect x="26.6665" y="24.8887" width="3.55555" height="10.6667" transform="rotate(-90 26.6665 24.8887)" fill="white"/>
+  <rect x="28.4443" y="28.4443" width="3.55556" height="7.11111" transform="rotate(-90 28.4443 28.4443)" fill="white"/>
+  <rect x="24.8887" y="28.4443" width="3.55556" height="3.55556" fill="white"/>
+  <rect x="35.5557" y="28.4443" width="3.55556" height="3.55556" fill="white"/>
+  </svg>
+  
\ No newline at end of file