From 5617cddcfa4b3151f3d9192fe1cc26493f595c17 Mon Sep 17 00:00:00 2001
From: ='fauz <='fauzgabriel@gmail.com>
Date: Mon, 20 Oct 2025 13:26:26 +0700
Subject: [PATCH] flipcards

---
 public/images/cards.png | Bin 0 -> 15788 bytes
 src/pages/Findwords.vue |  58 +++++------
 src/pages/Flipcard.vue  | 207 ++++++++++++++++++++++++++++++++++++++++
 src/pages/Minigame.vue  |   9 +-
 src/router/index.js     |   2 +
 5 files changed, 244 insertions(+), 32 deletions(-)
 create mode 100644 public/images/cards.png
 create mode 100644 src/pages/Flipcard.vue

diff --git a/public/images/cards.png b/public/images/cards.png
new file mode 100644
index 0000000000000000000000000000000000000000..623da565b45086644b7ec31def225c83d948e23b
GIT binary patch
literal 15788
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
BAN~LU

literal 0
HcmV?d00001

diff --git a/src/pages/Findwords.vue b/src/pages/Findwords.vue
index 306420f..1903a8e 100644
--- a/src/pages/Findwords.vue
+++ b/src/pages/Findwords.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="flex flex-col min-h-screen bg-gradient-to-b from-indigo-400 to-blue-200 text-gray-900 select-none">
+  <div class="flex flex-col min-h-screen bg-gradient-to-b from-green-200 to-lime-100 text-gray-900 select-none"
+       style="background-image:url('/images/footer.png'); background-size:cover; background-position:center;">
     <!-- Header -->
-    <header class="flex items-center justify-center bg-indigo-600 text-white py-4 shadow-md">
-      <h1 class="text-2xl font-bold tracking-wide flex items-center gap-2">
-        <span>🔤</span> Temukan Kata Positif
+    <div class="text-center mt-8">
+      <h1 class="text-4xl font-extrabold bg-gradient-to-r from-emerald-500 to-lime-500 bg-clip-text text-transparent">
+        <span>🌿</span>Temukan Kata Positif
       </h1>
-    </header>
+      <p class="text-gray-500 mt-2">Temukan kata kata positif yang ada di bawah ini 📖</p>
+    </div>
 
     <!-- Grid Game -->
     <main class="flex-1 flex flex-col items-center justify-center p-4">
@@ -31,7 +33,7 @@
             @touchmove.prevent="dragSelectTouch($event)"
             @touchend.prevent="endSelect"
             class="flex items-center justify-center text-lg sm:text-xl font-bold rounded-xl cursor-pointer 
-                   transition-all duration-200 ease-out"
+                   transition-all duration-200 ease-out shadow-md"
             :class="cellClass(rowIndex, colIndex)"
           >
             {{ letter }}
@@ -40,20 +42,22 @@
       </div>
 
       <!-- Footer Words -->
-      <div class="mt-6 bg-white bg-opacity-80 p-4 rounded-2xl shadow-lg w-full max-w-lg">
-        <h2 class="font-semibold text-gray-700 mb-2">Cari kata berikut:</h2>
-        <div class="flex flex-wrap gap-2">
+      <div class="mt-6 bg-white bg-opacity-80 p-4 rounded-3xl shadow-lg w-full max-w-lg border border-lime-200">
+        <h2 class="font-semibold text-green-800 mb-2 text-center">Cari kata berikut:</h2>
+        <div class="flex flex-wrap justify-center gap-2">
           <span
             v-for="word in words"
             :key="word"
-            class="px-3 py-1 rounded-full text-sm font-semibold"
-            :class="foundWords.includes(word) ? 'bg-green-300 text-green-800 animate-pulse' : 'bg-gray-200 text-gray-600'"
+            class="px-3 py-1 rounded-full text-sm font-semibold shadow transition-all duration-200"
+            :class="foundWords.includes(word) 
+              ? 'bg-green-300 text-green-900 animate-bounce-glow'
+              : 'bg-lime-100 text-green-700 hover:bg-green-200 hover:scale-105'"
           >
             {{ word }}
           </span>
         </div>
-        <p class="mt-3 text-xs text-gray-600 italic">
-           Temukan semua kata positif seperti sabar, cinta, syukur, dan gembira untuk hati yang ceria!
+        <p class="mt-3 text-xs text-green-700 italic text-center">
+          Temukan semua kata positif seperti sabar, cinta, syukur, dan gembira untuk hati yang ceria!
         </p>
       </div>
     </main>
@@ -62,18 +66,20 @@
     <footer class="p-4 flex justify-center gap-3">
       <button
         @click="resetGame"
-        class="px-5 py-2 bg-indigo-600 text-white font-bold rounded-full shadow hover:shadow-lg hover:bg-indigo-700 active:scale-95 transition"
+        class="px-6 py-2 bg-gradient-to-r from-lime-400 to-green-500 text-white font-bold rounded-full shadow-md hover:shadow-lg hover:scale-105 active:scale-95 transition-all duration-200"
       >
         🔄 Main Lagi
       </button>
     </footer>
   </div>
 </template>
+
 <script>
 export default {
-    name:'Find-words'
-}
+  name: "Find-words"
+};
 </script>
+
 <script setup>
 import { ref, onMounted } from "vue";
 
@@ -126,7 +132,6 @@ function generateGrid() {
     }
   });
 
-  // isi huruf acak
   const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   for (let r = 0; r < size; r++) {
     for (let c = 0; c < size; c++) {
@@ -144,8 +149,8 @@ function cellClass(r, c) {
   );
 
   if (isFound) return "bg-green-300 text-green-900 scale-105";
-  if (isSelected) return "bg-yellow-300 text-yellow-900 scale-105";
-  return "bg-white text-indigo-700 hover:bg-indigo-100 hover:scale-105";
+  if (isSelected) return "bg-yellow-200 text-yellow-900 scale-105";
+  return "bg-white text-green-700 hover:bg-green-100 hover:scale-105";
 }
 
 function startSelect(r, c) {
@@ -159,7 +164,6 @@ function dragSelect(r, c) {
   if (last.r !== r || last.c !== c) selectedCells.value.push({ r, c });
 }
 
-// khusus mobile (touchmove)
 function dragSelectTouch(e) {
   if (!isSelecting.value) return;
   const touch = e.touches[0];
@@ -196,15 +200,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@keyframes pulseGlow {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(0, 255, 127, 0.8);
-  }
+@keyframes bounceGlow {
+  0%, 100% { box-shadow: 0 0 8px rgba(72, 255, 140, 0.6); transform: scale(1); }
+  50% { box-shadow: 0 0 20px rgba(72, 255, 140, 1); transform: scale(1.05); }
 }
-.animate-pulse {
-  animation: pulseGlow 1s infinite;
+.animate-bounce-glow {
+  animation: bounceGlow 1s infinite;
 }
 </style>
diff --git a/src/pages/Flipcard.vue b/src/pages/Flipcard.vue
new file mode 100644
index 0000000..c1451be
--- /dev/null
+++ b/src/pages/Flipcard.vue
@@ -0,0 +1,207 @@
+<template>
+  <div
+    class="min-h-screen flex flex-col items-center justify-start bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2 mb-[-10px] relative overflow-hidden"
+     style="background-image:url('/images/footer.png'); 
+    background-repeat:no-repeat; 
+    background-position:bottom; 
+    background-size: 100% 200px;"
+    margin-bottom=-10px;
+  >
+    <!-- Top Bar -->
+    
+    <div class="text-center mt-8">
+      <h1 class="text-4xl font-extrabold bg-gradient-to-r from-emerald-500 to-lime-500 bg-clip-text text-transparent">
+        <span>🌿</span>Game Makanan Nusantara
+      </h1>
+      <p class="text-gray-500 mt-2">Temukan pasangan gambar sesuai gambar daerahnya 📖</p>
+    </div>
+    <!-- Game Area -->
+    <main class="flex-1 w-full flex flex-col items-center justify-center mt-6">
+      <!-- Loading -->
+      <div v-if="isLoading" class="flex flex-col items-center justify-center mt-12">
+        <div class="loader mb-4"></div>
+        <p class="text-green-800 font-semibold text-lg">Menyiapkan kartu...</p>
+      </div>
+
+      <!-- Game Grid -->
+      <div
+        v-else
+        class="grid grid-cols-3 gap-4 w-full max-w-md mt-4 px-4 animate-fade-in-up"
+      >
+        <div
+          v-for="(card, index) in cards"
+          :key="index"
+          class="relative w-full aspect-square cursor-pointer perspective"
+          @click="flipCard(index)"
+        >
+          <div
+            class="transition-transform duration-700 transform-style-preserve-3d w-full h-full"
+            :class="{ 'rotate-y-180': flippedIndexes.includes(index) || card.isMatched }"
+          >
+            <!-- Card Back -->
+            <div
+              class="absolute w-full h-full bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex flex-col items-center justify-center text-white backface-hidden border-4 border-lime-200 shadow-lg hover:scale-105 transition-transform"
+            >
+              <span class="text-4xl font-bold drop-shadow-lg">🍀</span>
+              <small class="mt-1 font-medium text-xs">Klik Aku!</small>
+            </div>
+
+            <!-- Card Front -->
+            <div
+              class="absolute w-full h-full rounded-xl border-4 border-lime-300 overflow-hidden rotate-y-180 backface-hidden shadow-xl"
+              :class="{ 'bg-green-200': card.isMatched }"
+            >
+              <img
+                :src="card.content"
+                alt="Card"
+                class="w-full h-full object-cover"
+                @error="onImageError"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Footer note -->
+    <footer class="absolute bottom-4 text-sm text-green-900 opacity-80">
+      © 2025 Freekake Kids — Belajar sambil bermain 🌼
+    </footer>
+  </div>
+</template>
+
+<script>
+import api from '@/util/api';
+
+export default {
+  name: "FlipCardGameKids",
+  data() {
+    return {
+      contentId: 3,
+      cards: [],
+      pairs: {},
+      flippedIndexes: [],
+      isLoading: true,
+    };
+  },
+  async mounted() {
+    await this.loadData();
+  },
+  methods: {
+    async loadData() {
+      try {
+        const res = await api.get(
+          `/content/contents/${this.contentId}`
+        );
+
+        const data = res.data.data || {};
+        const items = data.items || [];
+        const pairs = data.pairs || {};
+
+        this.pairs = pairs;
+
+        const duplicated = [...items];
+        duplicated.sort(() => Math.random() - 0.5);
+
+        this.cards = duplicated.map((url) => ({
+          content: url,
+          isMatched: false,
+        }));
+
+        this.isLoading = false;
+      } catch (e) {
+        console.error("Load failed", e);
+      }
+    },
+
+    flipCard(index) {
+      const card = this.cards[index];
+      if (card.isMatched || this.flippedIndexes.includes(index)) return;
+
+      this.flippedIndexes.push(index);
+
+      if (this.flippedIndexes.length === 2) {
+        const first = this.cards[this.flippedIndexes[0]];
+        const second = this.cards[this.flippedIndexes[1]];
+        const isMatch =
+          this.pairs[first.content] === second.content ||
+          this.pairs[second.content] === first.content;
+
+        setTimeout(() => {
+          if (isMatch) {
+            first.isMatched = true;
+            second.isMatched = true;
+          }
+          this.flippedIndexes = [];
+        }, 1000);
+      }
+    },
+
+    onImageError(event) {
+      event.target.src = "https://via.placeholder.com/120x120?text=🍰";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.perspective {
+  perspective: 1000px;
+}
+.transform-style-preserve-3d {
+  transform-style: preserve-3d;
+}
+.rotate-y-180 {
+  transform: rotateY(180deg);
+}
+.backface-hidden {
+  backface-visibility: hidden;
+}
+
+/* Futuristic Loader */
+.loader {
+  width: 50px;
+  height: 50px;
+  border: 6px solid rgba(255, 255, 255, 0.5);
+  border-top-color: #22c55e;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Cute animation */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+}
+
+.animate-fade-in-down {
+  animation: fade-in-down 0.6s ease-out;
+}
+</style>
diff --git a/src/pages/Minigame.vue b/src/pages/Minigame.vue
index a6cd145..18dce9a 100644
--- a/src/pages/Minigame.vue
+++ b/src/pages/Minigame.vue
@@ -82,7 +82,7 @@ export default {
       return{
             games: [
                 { name: "Temukan kata", img: "/images/crossword.png", badge:"New" },
-                { name: "Tebak Gambar", img: "/images/tebak-gambar.png", badge:"coming soon" },
+                { name: "Tebak Gambar", img: "/images/cards.png", badge:"New" },
             ],
             tiltTransforms: {}
         };
@@ -90,8 +90,11 @@ export default {
     methods: {
         toContents(content) {
             if(content){
-                if(content.name == "Temukan kata")
-                this.$router.push({ name: "game-find-words", params: { content: content } });
+                if(content.name == "Temukan kata"){
+                    this.$router.push({ name: "game-find-words", params: { content: content } });
+                }else if(content.name == "Tebak Gambar"){
+                    this.$router.push({ name: "flipcard", params: { content: content } });
+                }
             }
         },
         resetTilt(name) {
diff --git a/src/router/index.js b/src/router/index.js
index 70cbc47..8f61bf8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@ import SynopsisPage from '@/pages/Synopsis.vue'
 import MissionPage from '@/pages/MissionPage.vue'
 import FindwordsPage from '@/pages/Findwords.vue'
 import MinigamePage from '@/pages/Minigame.vue'
+import FlipcardPage from '@/pages/Flipcard.vue'
 
 const routes = [
   { path: '/', name: 'home', component: HomePage , meta:{requiresAuth:true}},
@@ -36,6 +37,7 @@ const routes = [
   // game
   { path: '/entertainment/game/find-words/', name:'game-find-words', component:FindwordsPage, props:true},
   { path: '/entertainment/mini-games/', name:'mini-games', component:MinigamePage, props:true},
+  { path: '/entertainment/mini-games/flipcard/', name:'flipcard', component:FlipcardPage, props:true},
 ]
 
 const router = createRouter({