計略カードを拡大可能にする

src/App.vue

@@ -30,11 +30,21 @@
     </div>
     <div class="container">
       <div class="left-panel">
-        <div v-if="fetchedData && schemes && index >= 0">
+        <div
+          v-if="fetchedData && schemes && index >= 0"
+          class="image-container"
+        >
           <img
             :src="schemes[index]?.image_uris.normal"
             alt="Scheme Card"
           />
+          <button
+            class="zoom-button"
+            @click="openModal(schemes[index]?.image_uris.large || '')"
+            title="Zoom"
+          >
+            🔍
+          </button>
         </div>
         <div v-else-if="fetchedData">
           <p>Total Cards: {{ fetchedData.total_cards }}</p>
@@ -50,17 +60,39 @@
             <li
               v-for="(s, i) in ongoingSchemes"
               :key="i"
+              class="image-container"
             >
               <img
-                :src="s.image_uris.small"
+                :src="s.image_uris.normal"
                 alt="Ongoing Scheme Card"
                 @click="activateOngoingScheme(s)"
               />
+              <button
+                class="zoom-button"
+                @click.stop="openModal(s.image_uris.large)"
+                title="Zoom"
+              >
+                🔍
+              </button>
             </li>
           </ul>
         </div>
       </div>
     </div>
+
+    <div
+      v-if="modalOpen"
+      class="modal-overlay"
+      @click="closeModal"
+    >
+      <div class="modal-content" @click.stop>
+        <button class="close-button" @click="closeModal">✕</button>
+        <img
+          :src="modalImageSrc"
+          alt="Zoomed card" class="modal-image"
+        />
+      </div>
+    </div>
   </main>
 </template>
 
@@ -76,6 +108,7 @@ interface Scheme {
   image_uris: {
     small: string
     normal: string
+    large: string
   },
   type_line: TypeLine
 }
@@ -91,6 +124,8 @@ const fetchedData = ref<ScryfallListResponse | null>(null)
 const schemes = ref<Scheme[]>([])
 const index = ref<number>(-1)
 const ongoingSchemes = ref<Scheme[]>([])
+const modalOpen = ref<boolean>(false)
+const modalImageSrc = ref<string>('')
 
 interface QueryOptions {
   japaneseOnly: boolean
@@ -165,4 +200,14 @@ const activateOngoingScheme = (scheme: Scheme) => {
     ongoingSchemes.value.splice(schemeIndex, 1)
   }
 }
+
+const openModal = (imageUrl: string) => {
+  modalImageSrc.value = imageUrl
+  modalOpen.value = true
+}
+
+const closeModal = () => {
+  modalOpen.value = false
+  modalImageSrc.value = ''
+}
 </script>

src/assets/main.css

@@ -124,7 +124,7 @@ main {
 
 .scrollable-list img {
   width: 100%;
-  max-width: 150px;
+  max-width: 250px;
   border-radius: 4px;
   transition: opacity 0.2s;
 }
@@ -133,6 +133,86 @@ main {
   opacity: 0.8;
 }
 
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.zoom-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s, transform 0.2s;
+  z-index: 10;
+}
+
+.zoom-button:hover {
+  background-color: rgba(255, 255, 255, 1);
+  transform: scale(1.1);
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.modal-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  z-index: 201;
+}
+
+.close-button:hover {
+  background-color: #e0e0e0;
+}
+
+.modal-image {
+  max-width: 100%;
+  max-height: 85vh;
+  object-fit: contain;
+}
+
 @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);