From cd2dfffecb67273d78ded62b304c85a35f897cb4 Mon Sep 17 00:00:00 2001
From: Daryll Santos <daryll.santos@gmail.com>
Date: Tue, 20 May 2025 22:37:13 +0800
Subject: [PATCH 1/4] Change model in `ScryfallCard` to have cmc, set_name, and
 oracle_text

---
 src/models/scryfall-card.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/models/scryfall-card.ts b/src/models/scryfall-card.ts
index 58e1008..337a581 100644
--- a/src/models/scryfall-card.ts
+++ b/src/models/scryfall-card.ts
@@ -33,6 +33,9 @@ export type DefaultScryfallCard = {
   set: string;
   image_uris: ScryfallImageUris;
   card_faces?: never;
+  cmc: number;
+  set_name: string;
+  oracle_text: string;
 };
 
 export type SplitScryfallCard = {
@@ -46,6 +49,9 @@ export type SplitScryfallCard = {
   set: string;
   image_uris: ScryfallImageUris;
   card_faces: ScryfallSplitCardFace[];
+  cmc: number;
+  set_name: string;
+  oracle_text: string;
 };
 
 export type DfcScryfallCard = {
@@ -59,6 +65,9 @@ export type DfcScryfallCard = {
   card_faces: ScryfallCardFace[];
   image_uris?: never;
   flavor_name?: never;
+  cmc: number;
+  set_name: string;
+  oracle_text: string;
 };
 
 export type ScryfallCard = DefaultScryfallCard | SplitScryfallCard | DfcScryfallCard;

From 5e56ef6b54ac4ed14e4fd3e14ef44af7d55b642f Mon Sep 17 00:00:00 2001
From: Daryll Santos <daryll.santos@gmail.com>
Date: Tue, 20 May 2025 22:43:25 +0800
Subject: [PATCH 2/4] Add `CardClues` component

---
 src/components/CardClues.vue  | 114 ++++++++++++++++++++++++++++++++++
 src/components/GameScreen.vue |   8 ++-
 2 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 src/components/CardClues.vue

diff --git a/src/components/CardClues.vue b/src/components/CardClues.vue
new file mode 100644
index 0000000..8f18744
--- /dev/null
+++ b/src/components/CardClues.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ScryfallCard } from "../models/scryfall-card";
+
+const props = defineProps<{
+  card: ScryfallCard;
+}>();
+
+const activeClue = ref<"cmc" | "set" | "type" | "oracle" | null>(null);
+
+const clues = [
+  {
+    id: "cmc",
+    label: "Show Mana Value",
+  },
+  {
+    id: "set",
+    label: "Show Set",
+  },
+  {
+    id: "type",
+    label: "Show Type",
+  },
+  {
+    id: "oracle",
+    label: "Show Rules Text",
+  },
+] as const;
+
+const visibleClues = computed(() =>
+  clues.filter((clue) => clue.id === "type" || clue.id === "oracle" || !props.card.card_faces)
+);
+</script>
+
+<template>
+  <div class="clue-buttons">
+    <button
+      v-for="clue in visibleClues"
+      :key="clue.id"
+      class="clue-button"
+      @click="activeClue = activeClue === clue.id ? null : clue.id"
+      :class="{ active: activeClue === clue.id }"
+    >
+      {{ clue.label }}
+    </button>
+  </div>
+
+  <div v-if="activeClue" class="clues">
+    <div v-if="activeClue === 'cmc' && !card.card_faces" class="clue">
+      Mana Value: {{ card.cmc }}
+    </div>
+    <div v-if="activeClue === 'set' && !card.card_faces" class="clue">Set: {{ card.set_name }}</div>
+    <div v-if="activeClue === 'type'" class="clue">Type: {{ card.type_line }}</div>
+    <div v-if="activeClue === 'oracle'" class="clue oracle-text">
+      {{ card.oracle_text }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.clue-buttons {
+  display: flex;
+  gap: 8px;
+  margin: 16px 0;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.clue-button {
+  padding: 8px 16px;
+  background: var(--clue-button-background, #4a5568);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1em;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--clue-button-hover-background, #2d3748);
+  }
+
+  &:focus {
+    outline: 2px solid var(--clue-button-focus-outline, #4299e1);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    background: var(--clue-button-active-background, #2d3748);
+    transform: translateY(1px);
+  }
+}
+
+.clues {
+  margin: 16px 0;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: center;
+  width: 100%;
+  max-width: 400px;
+  animation: slideDown 0.2s ease-out;
+}
+
+.clue {
+  font-size: 1.1em;
+  font-weight: 500;
+}
+
+.oracle-text {
+  white-space: pre-line;
+  text-align: left;
+  line-height: 1.5;
+}
+</style>
diff --git a/src/components/GameScreen.vue b/src/components/GameScreen.vue
index 4ded15c..dee9cb1 100644
--- a/src/components/GameScreen.vue
+++ b/src/components/GameScreen.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { Outcome } from "../models/outcome";
 import { fetchNextCard, LoadingStatus, setGuess, useAppDispatch, useAppSelector } from "../store";
-import CardArt from "./CardArt.vue";
-import GuessInput from "./GuessInput.vue";
 import { isGuessOk } from "../utils/guess";
+import CardArt from "./CardArt.vue";
+import CardClues from "./CardClues.vue";
 import GuessFeedback from "./GuessFeedback.vue";
+import GuessInput from "./GuessInput.vue";
 import LoadingHammer from "./LoadingHammer.vue";
 
 const dispatch = useAppDispatch();
@@ -35,7 +36,6 @@ const retry = () => {
 
 const submitGuess = (guess: string) => {
   if (!card.value) {
-    console.debug("Guess was submitted somehow, but no card is loaded.");
     return;
   }
 
@@ -76,6 +76,8 @@ const submitGuess = (guess: string) => {
 
     <p class="score">Score: {{ score }}</p>
 
+    <CardClues v-if="card" :card="card" />
+
     <GuessFeedback v-if="prevGuess && prevCard" :guess="prevGuess" :card="prevCard" />
   </div>
 </template>

From 71759073669dbe5f0195ea8c35fce71aaf4c947b Mon Sep 17 00:00:00 2001
From: Daryll Santos <daryll.santos@gmail.com>
Date: Tue, 20 May 2025 22:47:09 +0800
Subject: [PATCH 3/4] Fix z-index issue with Autocomplete and clues

---
 src/components/GuessAutocompleteList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/GuessAutocompleteList.vue b/src/components/GuessAutocompleteList.vue
index 58cd44c..bd53216 100644
--- a/src/components/GuessAutocompleteList.vue
+++ b/src/components/GuessAutocompleteList.vue
@@ -66,6 +66,7 @@ const vScrollIntoView: Directive<HTMLElement, boolean> = {
   align-items: stretch;
   max-height: calc((var(--count) + 0.6) * (1em + var(--v-padding) * 2));
   overflow-y: scroll;
+  z-index: 10;
 
   @include mixins.bp-large {
     --count: 4;

From b98dabc73210428ea387a2d85598fe64fd141a3c Mon Sep 17 00:00:00 2001
From: Daryll Santos <daryll.santos@gmail.com>
Date: Tue, 20 May 2025 22:56:24 +0800
Subject: [PATCH 4/4] Dismiss the clue when the card changes

---
 src/components/CardClues.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/CardClues.vue b/src/components/CardClues.vue
index 8f18744..454e224 100644
--- a/src/components/CardClues.vue
+++ b/src/components/CardClues.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import type { ScryfallCard } from "../models/scryfall-card";
+import { useAppSelector } from "../store";
 
 const props = defineProps<{
   card: ScryfallCard;
 }>();
 
 const activeClue = ref<"cmc" | "set" | "type" | "oracle" | null>(null);
+const storeCard = useAppSelector((state) => state.game.card);
+
+// Dismiss the active clue when the card changes
+watch(storeCard, () => {
+  activeClue.value = null;
+});
 
 const clues = [
   {