add medals to share text

tom-james-watson · Jan 30, 2022 · 49c020f · 49c020f
1 parent e62ce70
commit 49c020f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/components/game-over.tsx b/components/game-over.tsx
@@ -12,6 +12,17 @@ interface Props {
 
 const defaultShareText = "Share";
 
+function getMedal(score: number): string {
+  if (score >= 20) {
+    return "🥇 ";
+  } else if (score >= 10) {
+    return "🥈 ";
+  } else if (score >= 1) {
+    return "🥉 ";
+  }
+  return "";
+}
+
 export default function GameOver(props: Props) {
   const { highscore, resetGame, score } = props;
 
@@ -25,7 +36,9 @@ export default function GameOver(props: Props) {
 
   const share = React.useCallback(async () => {
     await navigator?.clipboard?.writeText(
-      `🏛️ wikitrivia.tomjwatson.com\n\nStreak: ${score}\nBest Streak: ${highscore}`
+      `🏛️ wikitrivia.tomjwatson.com\n\n${getMedal(
+        score
+      )}Streak: ${score}\n${getMedal(highscore)}Best Streak: ${highscore}`
     );
     setShareText("Copied");
     setTimeout(() => {

diff --git a/components/instructions.tsx b/components/instructions.tsx
@@ -16,9 +16,11 @@ export default function Instructions(props: Props) {
     <div className={styles.instructions}>
       <div className={styles.wrapper}>
         <h2>Place the cards on the timeline in the correct order.</h2>
-        <div className={styles.highscoreWrapper}>
-          <Score score={highscore} title="Best streak" />
-        </div>
+        {highscore !== 0 && (
+          <div className={styles.highscoreWrapper}>
+            <Score score={highscore} title="Best streak" />
+          </div>
+        )}
         <Button onClick={start} text="Start game" />
         <div className={styles.about}>
           <div>

diff --git a/styles/instructions.module.scss b/styles/instructions.module.scss
@@ -15,6 +15,7 @@
       color: $text-light;
       font-style: italic;
       text-transform: uppercase;
+      margin-bottom: 40px;
     }
 
     .highscoreWrapper {

diff --git a/styles/score.module.scss b/styles/score.module.scss
@@ -6,7 +6,6 @@
   border-radius: $box-border-radius;
   padding: 10px 24px;
   text-align: left;
-  width: 140px;
 
   .title {
     font-weight: 700;
@@ -16,6 +15,7 @@
   }
 
   .value {
+    display: flex;
     font-weight: 700;
     font-size: 24px;
   }