From 6e4decfe5c5323c5a4328a080a2b8a47510d9921 Mon Sep 17 00:00:00 2001
From: ='fauz <='fauzgabriel@gmail.com>
Date: Thu, 23 Oct 2025 14:57:16 +0700
Subject: [PATCH] Draft Mission and game

---
 public/images/word-spells.png | Bin 0 -> 20329 bytes
 src/pages/Findwords.vue       |  30 +++
 src/pages/Flipcard.vue        |  31 ++-
 src/pages/Home.vue            | 382 +++++++++++++++++++++-------------
 src/pages/Minigame.vue        |  26 +++
 src/pages/Pointhistory.vue    | 131 ++++++++++++
 src/pages/Wordspells.vue      | 266 +++++++++++++++++++++++
 src/router/index.js           |   4 +
 src/services/missions.js      |  40 +++-
 9 files changed, 763 insertions(+), 147 deletions(-)
 create mode 100644 public/images/word-spells.png
 create mode 100644 src/pages/Pointhistory.vue
 create mode 100644 src/pages/Wordspells.vue

diff --git a/public/images/word-spells.png b/public/images/word-spells.png
new file mode 100644
index 0000000000000000000000000000000000000000..c252bfdb5b8de377edb4fe6ecf0a90fc4e676ea5
GIT binary patch
literal 20329
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
ZLs&TbH-?Nz@t8co!{vx`%i%EUe*u;UFEIcB

literal 0
HcmV?d00001

diff --git a/src/pages/Findwords.vue b/src/pages/Findwords.vue
index 1903a8e..713cb3d 100644
--- a/src/pages/Findwords.vue
+++ b/src/pages/Findwords.vue
@@ -1,4 +1,26 @@
 <template>
+  <!-- Header Section -->
+  <div class="w-full px-6 py-4 flex items-center justify-between backdrop-blur-md bg-white/30 border-b border-emerald-100 z-20">
+    <!-- Back Button -->
+    <button
+      @click="goBack"
+      class="flex items-center gap-2 text-emerald-600 hover:text-emerald-800 transition-colors"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="font-semibold">Kembali</span>
+    </button>
+
+    <!-- Breadcrumb / Path -->
+    <div class="text-sm text-gray-600">
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
+      <span class="mx-2">›</span>
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Mini Games</span>
+      <span class="mx-2">›</span>
+      <span class="text-gray-700 font-semibold">Find Words</span>
+    </div>
+  </div>
   <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 -->
@@ -194,6 +216,14 @@ function resetGame() {
   generateGrid();
 }
 
+function goEntertainment(){
+  window.history.back('/entertainment');
+}
+
+function goBack(){
+  window.history.back('/entertainment/mini-games');
+}
+
 onMounted(() => {
   resetGame();
 });
diff --git a/src/pages/Flipcard.vue b/src/pages/Flipcard.vue
index c1451be..bd2c51a 100644
--- a/src/pages/Flipcard.vue
+++ b/src/pages/Flipcard.vue
@@ -1,4 +1,26 @@
 <template>
+  <!-- Header Section -->
+  <div class="w-full px-6 py-4 flex items-center justify-between backdrop-blur-md bg-white/30 border-b border-emerald-100 z-20">
+    <!-- Back Button -->
+    <button
+      @click="goBack"
+      class="flex items-center gap-2 text-emerald-600 hover:text-emerald-800 transition-colors"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="font-semibold">Kembali</span>
+    </button>
+
+    <!-- Breadcrumb / Path -->
+    <div class="text-sm text-gray-600">
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
+      <span class="mx-2">›</span>
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Mini Games</span>
+      <span class="mx-2">›</span>
+      <span class="text-gray-700 font-semibold">Pasangan Gambar</span>
+    </div>
+  </div>
   <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'); 
@@ -8,7 +30,6 @@
     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
@@ -137,6 +158,14 @@ export default {
       }
     },
 
+    goEntertainment(){
+      window.history.back('/entertainment');
+    },
+
+    goBack(){
+      window.history.back('/entertainment/mini-games');
+    },
+
     onImageError(event) {
       event.target.src = "https://via.placeholder.com/120x120?text=🍰";
     },
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index ce4322b..cd6f181 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -54,13 +54,13 @@
             <span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'KOIN' }}</span>
             <div class="flex items-end justify-center gap-2 p-1">
               <img src="/images/token-poin.svg" alt="coin" class="w-6 h-6" />
-              <span>100</span>
+              <span>{{ this.points }}</span>
             </div>
           </div>
           <div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
             <span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'Dayly Quest' }}</span>
             <div class="flex items-end justify-center gap-2 p-1">
-              <span>3/10</span>
+              <span>{{ this.totalDone }}/{{ this.totalTask }}</span>
             </div>
           </div>
         </div>
@@ -74,7 +74,7 @@
 
     <div class="logo w-full max-w-md flex flex-col items-center mt-4">
       <div class="bg-grey shadow-xl rounded-2xl px-16 py-1 flex flex-col items-center">
-        <h2 class="mt-4 mb-4 text-md font-bold text-grey-400">Level 10 - Hari ke-2</h2>
+        <h2 class="mt-4 mb-4 text-md font-bold text-grey-400">Mission List</h2>
       </div>
     </div>
 
@@ -112,148 +112,226 @@
           </div>
         </div>
     </div> -->
-    <div 
-      v-for="mission in missions"
-      :key="mission.id"
-      
-      class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5 
-            transform transition-transform duration-300 hover:scale-105"
-      >
-        <!-- <div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
-          <div class="flex-shrink-0 mt-1">
-            <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
-          </div>
-          <div class="flex-1">
-            <h2 class="text-xl font-bold text-gray-800">{{ mission.name }}</h2>
-            <p class="text-sm text-gray-600 mb-2">{{ mission.description }}</p>
-            <p class="text-xs font-semibold"
-              :class="{
-                'text-green-600': mission.userStatus === 'completed',
-                'text-yellow-600': mission.userStatus === 'in_progress',
-                'text-gray-500': mission.userStatus === 'not_started'
-              }">
-              Status:  mission.userStatus 
-            </p>
-            <div class="flex items-center gap-4 text-xs text-gray-700">
-              <span class="flex items-center gap-1">
-                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/>
-                </svg>
-                 
-            </span>
-              <span class="flex items-center gap-1">
-                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
-                + {{ mission.coin }} koin
-              </span>
-              <span class="flex items-center gap-1">
-                <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
-                +{{ '100' }}mm
-              </span>
-            </div>
-            <div class="flex items-center gap-4 text-xs text-gray-700">
-              <button v-if="!mission.userStatus ==='completed'" class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold 
-              hover:bg-green-700 transition"
-              @click="handleMissionClick(mission)"
-              >
-              {{ mission.userStatus === 'completed' ? 'SELESAI' :
-                mission.userStatus === 'in_progress' ? 'LANJUTKAN' :
-                'MULAI QUEST' }}
-              </button>
-              <span v-else >Selesai</span>
-            </div>
-          </div>
-        </div> -->
-
-        <div
-          class="relative rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px] overflow-hidden"
-          :class="{
-          'bg-green-100 pointer-events-none opacity-95': mission.userStatus === 'completed',
-          'bg-yellow-100': mission.userStatus === 'in_progress',
-          'bg-white hover:scale-105': mission.userStatus === 'not_started'
-        }"
+    <div v-if="missions.length > 0">
+      <div 
+        v-for="mission in missions"
+        :key="mission.id"
+        
+        class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5 
+              transform transition-transform duration-300 hover:scale-105"
         >
-          <!-- ✅ Stamp layer BEHIND content -->
-          <div
-            v-if="mission.userStatus === 'completed'"
-            class="absolute inset-0 flex justify-end items-center pr-6 z-0"
-          >
-            <span
-              class="text-[64px] font-extrabold text-green-600/15 rotate-[-20deg] select-none pointer-events-none"
-              style="mix-blend-mode: multiply;"
-            >
-              SELESAI
-            </span>
-          </div>
-
-          <!-- ✅ Content layer ABOVE stamp -->
-          <div class="flex-shrink-0 mt-1 relative z-10">
-            <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
-          </div>
-
-          <div class="flex-1 relative z-10">
-            <h2 class="text-xl font-bold text-gray-800">{{ mission.name }}</h2>
-            <p class="text-sm text-gray-600 mb-2">{{ mission.description }}</p>
-
-            <p
-              class="text-xs font-semibold border-b pb-2"
-              :class="{
-                'text-green-600': mission.userStatus === 'completed',
-                'text-yellow-600': mission.userStatus === 'in_progress',
-                'text-gray-500': mission.userStatus === 'not_started'
-              }"
-            >
-              <!-- Status: {{ mission.userStatus }} -->
-            </p>
-            <div class="flex items-center gap-4 text-xs text-gray-700 pt-2">
-              <span class="flex items-center gap-1">
-                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path
-                    d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"
-                  />
-                </svg>
-                {{ timeLeftDH(mission.date_time_from_valid,mission.date_time_to_valid) }}
-              </span>
-
-              <span class="flex items-center gap-1">
-                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
-                  <path d="M10 15a5 5 0 100-10 5 5 0 000 10z" />
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                +{{ mission.coin }} koin
-              </span>
-              <span class="flex items-center gap-1">
-                <svg
-                  class="w-4 h-4 text-green-600 transform rotate-180"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"
-                  />
-                </svg>
-                +100mm
-              </span>
+          <!-- <div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
+            <div class="flex-shrink-0 mt-1">
+              <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
             </div>
-
-            <!-- ✅ Button or empty block -->
-            <div class="flex items-center gap-4 text-xs text-gray-700">
-              <button
-                v-if="mission.userStatus !== 'completed'"
-                :disabled="!isMissionActive(mission.date_time_from_valid, mission.date_time_to_valid)"
-                class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition"
+            <div class="flex-1">
+              <h2 class="text-xl font-bold text-gray-800">{{ mission.name }}</h2>
+              <p class="text-sm text-gray-600 mb-2">{{ mission.description }}</p>
+              <p class="text-xs font-semibold"
+                :class="{
+                  'text-green-600': mission.userStatus === 'completed',
+                  'text-yellow-600': mission.userStatus === 'in_progress',
+                  'text-gray-500': mission.userStatus === 'not_started'
+                }">
+                Status:  mission.userStatus 
+              </p>
+              <div class="flex items-center gap-4 text-xs text-gray-700">
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/>
+                  </svg>
+                  
+              </span>
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
+                  + {{ mission.coin }} koin
+                </span>
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
+                  +{{ '100' }}mm
+                </span>
+              </div>
+              <div class="flex items-center gap-4 text-xs text-gray-700">
+                <button v-if="!mission.userStatus ==='completed'" class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold 
+                hover:bg-green-700 transition"
                 @click="handleMissionClick(mission)"
+                >
+                {{ mission.userStatus === 'completed' ? 'SELESAI' :
+                  mission.userStatus === 'in_progress' ? 'LANJUTKAN' :
+                  'MULAI QUEST' }}
+                </button>
+                <span v-else >Selesai</span>
+              </div>
+            </div>
+          </div> -->
+
+          <div
+            class="relative rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px] overflow-hidden"
+            :class="{
+            'bg-green-100 pointer-events-none opacity-95': mission.userStatus === 'completed',
+            'bg-yellow-100': mission.userStatus === 'in_progress',
+            'bg-white hover:scale-105': mission.userStatus === 'not_started'
+          }"
+          >
+            <!-- ✅ Stamp layer BEHIND content -->
+            <div
+              v-if="mission.userStatus === 'completed'"
+              class="absolute inset-0 flex justify-end items-center pr-6 z-0"
+            >
+              <span
+                class="text-[64px] font-extrabold text-green-600/15 rotate-[-20deg] select-none pointer-events-none"
+                style="mix-blend-mode: multiply;"
               >
-                {{ mission.userStatus === 'in_progress' ? 'LANJUTKAN' : 'MULAI QUEST' }}
-              </button>
-              <div v-else class="w-full mt-4 py-4 px-4"></div>
+                SELESAI
+              </span>
+            </div>
+            <div class="flex-shrink-0 mt-1 relative z-10">
+              <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
+            </div>
+
+            <div class="flex-1 relative z-10">
+              <h2 class="text-xl font-bold text-gray-800">{{ mission.name }}</h2>
+              <p class="text-sm text-gray-600 mb-2">{{ mission.description }}</p>
+
+              <p
+                class="text-xs font-semibold border-b pb-2"
+                :class="{
+                  'text-green-600': mission.userStatus === 'completed',
+                  'text-yellow-600': mission.userStatus === 'in_progress',
+                  'text-gray-500': mission.userStatus === 'not_started'
+                }"
+              >
+                <!-- Status: {{ mission.userStatus }} -->
+              </p>
+              <div class="flex items-center gap-4 text-xs text-gray-700 pt-2">
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"
+                    />
+                  </svg>
+                  {{ timeLeftDH(mission.date_time_from_valid,mission.date_time_to_valid) }}
+                </span>
+
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 15a5 5 0 100-10 5 5 0 000 10z" />
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                  +{{ mission.coin }} koin
+                </span>
+                <span class="flex items-center gap-1">
+                  <svg
+                    class="w-4 h-4 text-green-600 transform rotate-180"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"
+                    />
+                  </svg>
+                  +100mm
+                </span>
+              </div>
+
+              <!-- ✅ Button or empty block -->
+              <div class="flex items-center gap-4 text-xs text-gray-700">
+                <button
+                  v-if="mission.userStatus !== 'completed'"
+                  :disabled="!isMissionActive(mission.date_time_from_valid, mission.date_time_to_valid)"
+                  class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition"
+                  @click="handleMissionClick(mission)"
+                >
+                  {{ mission.userStatus === 'in_progress' ? 'LANJUTKAN' : 'MULAI QUEST' }}
+                </button>
+                <div v-else class="w-full mt-4 py-4 px-4"></div>
+              </div>
             </div>
           </div>
-        </div>
 
+      </div>
+    </div>
+    <div v-else>
+      <div 
+         class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5 
+              transform transition-transform duration-300 hover:scale-105"
+        >
+          <div
+            class="relative rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px] overflow-hidden bg-white hover:scale-105"
+          >
+            <div
+              class="absolute inset-0 flex justify-end items-center pr-6 z-0"
+            >
+              <span
+                class="text-[30px] font-extrabold text-green-600/15 rotate-[-20deg] select-none pointer-events-none"
+                style="mix-blend-mode: multiply;"
+              >
+                Coming Soon
+              </span>
+            </div>
+            <div class="flex-shrink-0 mt-1 relative z-10">
+              <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
+            </div>
+
+            <div class="flex-1 relative z-10">
+              <h2 class="text-xl font-bold text-gray-800">{{ 'Mission Draft' }}</h2>
+              <p class="text-sm text-gray-600 mb-2">{{ '-----------------------------------------------------------' }}</p>
+
+              <p
+                class="text-xs font-semibold border-b pb-2 text-gray-500"
+              >
+              </p>
+              <div class="flex items-center gap-4 text-xs text-gray-700 pt-2">
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"
+                    />
+                  </svg>
+                  {{ '----' }}
+                </span>
+
+                <span class="flex items-center gap-1">
+                  <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 15a5 5 0 100-10 5 5 0 000 10z" />
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                  ----
+                </span>
+                <span class="flex items-center gap-1">
+                  <svg
+                    class="w-4 h-4 text-green-600 transform rotate-180"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"
+                    />
+                  </svg>
+                  ---
+                </span>
+              </div>
+
+              <!-- ✅ Button or empty block -->
+              <div class="flex items-center gap-4 text-xs text-gray-700">
+                <button
+                disabled
+                  class="w-full mt-4 py-2 px-4 rounded-lg bg-red-200 text-white font-bold hover:bg-green-700 transition"
+                >
+                 Coming Soon
+                </button>
+              </div>
+            </div>
+          </div>
+      </div>
     </div>
     <!-- <div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-2.5 md:mx-5
     transform transition-transform duration-300 hover:scale-105
@@ -331,6 +409,16 @@
               <span>Logout</span>
             </button>
           </div>
+
+          <div class="col-span-3 flex justify-center mt-2">
+            <button
+              @click="$router.push('/profile/mission-history')"
+              class="bg-yellow-400 text-indigo-900 font-bold px-4 py-2 rounded-full shadow-md hover:bg-yellow-300 active:scale-95 transition-all"
+            >
+              ⭐ Lihat Riwayat Poin
+            </button>
+          </div>
+
         </div>
         <div class="grid grid-cols-3 gap-4" v-if="modalType === 'character'">
           <div 
@@ -352,7 +440,7 @@
 <script>
 // import { computed } from "vue"
 import { getContent } from '@/services/content';
-import { getMissions,getMissionLogs, createMissionLog } from '@/services/missions';
+import { getMissions,getMissionLogs, createMissionLog, getUserPoint } from '@/services/missions';
 import { useAuthStore } from '@/stores/auth'
 import { nextTick } from 'vue';
 
@@ -389,7 +477,10 @@ export default {
       misi:[],
       logs:[],
       authStore : useAuthStore(),
-      savedUser : JSON.parse(localStorage.getItem('user')) || {}
+      savedUser : JSON.parse(localStorage.getItem('user')) || {},
+      points :0,
+      totalTask : 0,
+      totalDone :0,
     };
   },
   methods: {
@@ -418,10 +509,16 @@ export default {
       const now = new Date();
       return now >= start && now <= end;
     },
+    async myPoints(){
+      const points = await getUserPoint();
+      console.log(points)
+      this.points = points.myPoints;
+      this.totalTask = points.taskCount;
+      this.totalDone = points.myTaskCount;
+    },
     async getMission() {
       const res = await getMissions();
       this.missions = res.results;
-      console.log(this.missions);
     },
     async getLogs(){
       const resLog = await getMissionLogs();
@@ -545,7 +642,6 @@ export default {
       this.missions = this.misi
     },
     handleMissionClick(mission) {
-      //convert to array task
       const missionWithTask = {
         ...mission,
         tasks:[
@@ -598,6 +694,8 @@ export default {
     },
   },
   mounted() {
+      // this.getLogs();
+      this.myPoints();
       this.getMission();
       this.getMissions();
       this.timer = setInterval(() => {
diff --git a/src/pages/Minigame.vue b/src/pages/Minigame.vue
index 18dce9a..a30750f 100644
--- a/src/pages/Minigame.vue
+++ b/src/pages/Minigame.vue
@@ -1,4 +1,24 @@
 <template>
+  <!-- Header Section -->
+  <div class="w-full px-6 py-4 flex items-center justify-between backdrop-blur-md bg-white/30 border-b border-emerald-100 z-20">
+    <!-- Back Button -->
+    <button
+      @click="goBack"
+      class="flex items-center gap-2 text-emerald-600 hover:text-emerald-800 transition-colors"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="font-semibold">Kembali</span>
+    </button>
+
+    <!-- Breadcrumb / Path -->
+    <div class="text-sm text-gray-600">
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Entertainment</span>
+      <span class="mx-2">›</span>
+      <span class="text-gray-700 font-semibold">Mini Game</span>
+    </div>
+  </div>
   <div
     class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-emerald-200 via-teal-100 to-lime-200 
       relative overflow-hidden text-gray-800 mb-[-10px]"
@@ -83,6 +103,7 @@ export default {
             games: [
                 { name: "Temukan kata", img: "/images/crossword.png", badge:"New" },
                 { name: "Tebak Gambar", img: "/images/cards.png", badge:"New" },
+                { name: "Word Spells", img: "/images/word-spells.png", badge:"New" },
             ],
             tiltTransforms: {}
         };
@@ -94,6 +115,8 @@ export default {
                     this.$router.push({ name: "game-find-words", params: { content: content } });
                 }else if(content.name == "Tebak Gambar"){
                     this.$router.push({ name: "flipcard", params: { content: content } });
+                }else if(content.name == "Word Spells"){
+                  this.$router.push({name: "word-spells", params: {content: content}})
                 }
             }
         },
@@ -116,6 +139,9 @@ export default {
                 [name]: `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`
             };
         },
+        goBack(){
+          window.history.back('/entertainment');
+        }
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/pages/Pointhistory.vue b/src/pages/Pointhistory.vue
new file mode 100644
index 0000000..62a8548
--- /dev/null
+++ b/src/pages/Pointhistory.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="w-full px-6 py-4 flex items-center justify-between backdrop-blur-md bg-white/30 border-b border-emerald-100 z-20">
+    <!-- Back Button -->
+    <button
+      @click="goBack"
+      class="flex items-center gap-2 text-emerald-600 hover:text-emerald-800 transition-colors"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="font-semibold">Kembali</span>
+    </button>
+
+    <!-- Breadcrumb / Path -->
+    <div class="text-sm text-gray-600">
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">History</span>
+    </div>
+  </div>
+  <div class="min-h-screen bg-gradient-to-b from-green-100 to-green-300 text-white font-sans flex flex-col">
+    <!-- Header -->
+    <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 pb-4">
+        <span></span>Point History
+      </h1>
+      
+    </div>
+    <!-- Summary Card -->
+    <div class="p-4 flex justify-center">
+      <div class="bg-gradient-to-b from-gray-400 to-slate-500 rounded-2xl p-6 text-center w-full max-w-sm shadow-lg backdrop-blur-md animate-[pulse_3s_infinite]">
+        <p class="text-md text-black font-bold">Total Poin </p>
+        <h2 class="text-4xl font-bold text-yellow-300">{{ totalPoints }}</h2>
+      </div>
+    </div>
+
+    <!-- Filter Section -->
+    <div class="flex justify-center space-x-3 mt-2 mb-4">
+      <button
+        v-for="cat in categories"
+        :key="cat"
+        class="px-3 py-1 rounded-full text-sm font-semibold transition-all"
+        :class="selectedCategory === cat
+          ? 'bg-yellow-400 text-indigo-900'
+          : 'bg-white bg-opacity-20 text-black hover:bg-opacity-40'"
+        @click="selectedCategory = cat"
+      >
+        {{ cat }}
+      </button>
+    </div>
+
+    <!-- Point History List -->
+    <main class="flex-1 overflow-y-auto px-4 pb-6">
+      <transition-group name="fade" tag="div" class="space-y-3 max-w-xl mx-auto">
+        <div
+          v-for="(entry, index) in filteredHistory"
+          :key="entry.id"
+          class="flex justify-between items-center bg-white bg-opacity-15 backdrop-blur-md rounded-xl p-4 shadow hover:bg-opacity-25 transition-all"
+        >
+          <div>
+            <h3 class="font-semibold text-black">{{ entry.activity }} {{ index }}</h3>
+            <p class="text-sm text-black">{{ entry.source }}</p>
+            <p class="text-xs text-black">{{ entry.date }}</p>
+          </div>
+          <span
+            class="font-bold text-lg"
+            :class="entry.points > 0 ? 'text-orange-300' : 'text-red-300'"
+          >
+            {{ entry.points > 0 ? '+' : '' }}{{ entry.points }}
+          </span>
+        </div>
+      </transition-group>
+
+      <p v-if="filteredHistory.length === 0" class="text-center mt-8 text-indigo-200 italic">
+        Belum ada riwayat poin untuk kategori ini 🌱
+      </p>
+    </main>
+
+    <!-- Footer -->
+    <!-- <footer class="py-4 text-center bg-indigo-700 text-sm">
+      🌟 Terus kumpulkan poin dari aktivitas positifmu!
+    </footer> -->
+  </div>
+</template>
+
+<script>
+export default{
+    name:'point-history'
+}
+</script>
+<script setup>
+import { ref, computed } from "vue";
+
+// Data contoh (bisa diganti dari backend)
+const pointHistory = ref([
+  { id: 1, activity: "Menang Game Word Spells", source: "Game", points: 30, date: "2025-10-21 10:22" },
+  { id: 2, activity: "Membaca artikel motivasi", source: "Content", points: 10, date: "2025-10-21 12:00" },
+  { id: 3, activity: "Membaca manga positif", source: "Manga", points: 15, date: "2025-10-22 09:15" },
+  { id: 4, activity: "Kehilangan streak harian", source: "Penalty", points: -5, date: "2025-10-22 09:20" },
+  { id: 5, activity: "Menjawab quiz refleksi diri", source: "Quiz", points: 25, date: "2025-10-22 11:30" },
+]);
+
+// Filter kategori
+const categories = ["Semua", "Game", "Content", "Manga", "Quiz", "Penalty"];
+const selectedCategory = ref("Semua");
+
+// Hitung total poin
+const totalPoints = computed(() =>
+  pointHistory.value.reduce((sum, e) => sum + e.points, 0)
+);
+
+// Filter sesuai kategori
+const filteredHistory = computed(() => {
+  if (selectedCategory.value === "Semua") return pointHistory.value;
+  return pointHistory.value.filter(
+    e => e.source.toLowerCase() === selectedCategory.value.toLowerCase()
+  );
+});
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: all 0.4s ease;
+}
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
diff --git a/src/pages/Wordspells.vue b/src/pages/Wordspells.vue
new file mode 100644
index 0000000..66d703d
--- /dev/null
+++ b/src/pages/Wordspells.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="w-full px-6 py-4 flex items-center justify-between backdrop-blur-md bg-white/30 border-b border-emerald-100 z-20">
+    <button
+      @click="goBack"
+      class="flex items-center gap-2 text-emerald-600 hover:text-emerald-800 transition-colors"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="font-semibold">Kembali</span>
+    </button>
+    <div class="text-sm text-gray-600">
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goEntertainment">Entertainment</span>
+      <span class="mx-2">›</span>
+      <span class="text-emerald-600 font-medium cursor-pointer hover:underline" @click="goBack">Mini Games</span>
+      <span class="mx-2">›</span>
+      <span class="text-gray-700 font-semibold">Temukan Kata</span>
+    </div>
+  </div>
+  <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;
+  >
+    <main class="flex-1 flex flex-col items-center justify-center relative">
+      <canvas ref="canvas" class="absolute inset-0 pointer-events-none"></canvas>
+      <div class="bg-white text-gray-800 px-5 py-2 rounded-full shadow-lg text-2xl font-bold mb-8 min-h-[50px] flex items-center justify-center">
+        {{ currentWord || "..." }}
+      </div>
+      <div
+        ref="circleRef"
+        class="relative flex items-center justify-center"
+        style="width: 300px; height: 300px;"
+        @touchend="endSelect"
+        @mouseup="endSelect"
+      >
+        <div
+          v-for="(letter, i) in letters"
+          :key="i"
+          class="absolute flex items-center justify-center bg-white text-indigo-700 rounded-full font-bold shadow-lg transition-all duration-200 active:scale-90 select-none"
+          :style="letterPosition(i)"
+          :class="[
+            totalSizeClass,
+            selectedIndexes.includes(i) ? 'bg-yellow-300 text-yellow-900 scale-105' : ''
+          ]"
+          @mousedown="startSelect(i)"
+          @touchstart.prevent="startSelect(i)"
+          @mouseenter="dragSelect(i)"
+        >
+          {{ letter }}
+        </div>
+      </div>
+      <div class="mt-8 bg-white bg-opacity-20 p-4 rounded-2xl w-full max-w-md text-center shadow-md">
+        <h2 class="font-semibold mb-2 text-lg">✨ Kata yang Kamu Temukan:</h2>
+        <div class="flex flex-wrap justify-center gap-2 min-h-[40px]">
+          <span
+            v-for="word in foundWords"
+            :key="word"
+            class="px-3 py-1 rounded-full text-sm font-semibold bg-green-300 text-green-900 animate-pulse"
+          >
+            {{ word }}
+          </span>
+
+          <span v-if="foundWords.length === 0" class="text-gray-200 italic">
+            Belum ada kata ditemukan 🌱
+          </span>
+        </div>
+      </div>
+
+      <button
+        @click="resetGame"
+        class="mt-8 px-6 py-2 bg-pink-500 rounded-full font-bold text-white shadow hover:bg-pink-600 active:scale-95"
+      >
+        🔄 Main Lagi
+      </button>
+    </main>
+  </div>
+</template>
+<script>
+    export default {
+        name: "word-spells"
+    }
+</script>
+<script setup>
+    import { ref, onMounted, nextTick, computed } from "vue";
+
+    const allWords = [
+    "TENANG", "SABAR", "SYUKUR", "CINTA", "GEMBIRA", "BANGGA",
+    "IKHLAS", "CERIA", "SETIA", "JUJUR", "RAMAH", "TABAH", "TULUS", "BERANI", "DAMAI"
+    ];
+
+    const words = ref([]);
+    const letters = ref([]);
+    const foundWords = ref([]);
+    const selectedIndexes = ref([]);
+    const currentWord = ref("");
+    const isSelecting = ref(false);
+    const circleRef = ref(null);
+    const canvas = ref(null);
+
+    function shuffle(array) {
+        return array.sort(() => Math.random() - 0.5);
+    }
+    
+    const totalSizeClass = computed(() => {
+        const total = letters.value.length;
+        if (total <= 7) return "w-16 h-16 text-3xl";
+        if (total <= 9) return "w-14 h-14 text-2xl";
+        return "w-12 h-12 text-xl";
+    });
+
+    function initGame() {
+        const chosen = shuffle([...allWords]).slice(0, 4);
+        words.value = chosen;
+        const maxCounts = {};
+        chosen.forEach(word => {
+            const temp = {};
+            for (const ch of word) temp[ch] = (temp[ch] || 0) + 1;
+            for (const [ch, cnt] of Object.entries(temp)) {
+            maxCounts[ch] = Math.max(maxCounts[ch] || 0, cnt);
+            }
+        });
+
+        let fullLetterSet = Object.entries(maxCounts).flatMap(([ch, cnt]) => Array(cnt).fill(ch));
+        const MIN_LETTERS = 7;
+        const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+        if (fullLetterSet.length < MIN_LETTERS) {
+            const fillers = shuffle(alphabet.filter(a => !fullLetterSet.includes(a)))
+            .slice(0, MIN_LETTERS - fullLetterSet.length);
+            fullLetterSet = fullLetterSet.concat(fillers);
+        }
+
+        const MAX_LETTERS = 12;
+        if (fullLetterSet.length > MAX_LETTERS) {
+            fullLetterSet = fullLetterSet.slice(0, MAX_LETTERS);
+        }
+
+        letters.value = shuffle(fullLetterSet);
+        foundWords.value = [];
+        selectedIndexes.value = [];
+        currentWord.value = "";
+        drawConnections();
+    }
+
+    function letterPosition(index) {
+        const total = letters.value.length;
+        const containerSize = 300;
+        const center = containerSize / 2;
+        const radius = (containerSize / 2) - 40;
+        const angle = (index / total) * (2 * Math.PI) - Math.PI / 2;
+        const x = center + radius * Math.cos(angle);
+        const y = center + radius * Math.sin(angle);
+        const baseSize = total <= 8 ? 60 : total <= 10 ? 52 : 46;
+
+        return {
+            left: `${x}px`,
+            top: `${y}px`,
+            width: `${baseSize}px`,
+            height: `${baseSize}px`,
+            transform: "translate(-50%, -50%)"
+        };
+    }
+
+    function startSelect(index) {
+        isSelecting.value = true;
+        selectedIndexes.value = [index];
+        currentWord.value = letters.value[index];
+        drawConnections();
+    }
+
+    function dragSelect(index) {
+        if (!isSelecting.value) return;
+        if (!selectedIndexes.value.includes(index)) {
+            selectedIndexes.value.push(index);
+            currentWord.value += letters.value[index];
+            drawConnections();
+        }
+    }
+
+    function endSelect() {
+        if (!isSelecting.value) return;
+        const attempt = currentWord.value.toUpperCase();
+
+        if (words.value.includes(attempt)) {
+            if (!foundWords.value.includes(attempt)) {
+            foundWords.value.push(attempt);
+            alert(`🎉 Hebat! Kamu menemukan kata ${attempt}!`);
+            } else {
+            alert("⚡ Kata ini sudah kamu temukan!");
+            }
+        } else {
+            alert("😅 Belum benar, coba lagi!");
+        }
+
+        isSelecting.value = false;
+        selectedIndexes.value = [];
+        currentWord.value = "";
+        drawConnections();
+
+        if (foundWords.value.length === words.value.length) {
+            setTimeout(() => alert("🌟 Semua kata ditemukan! Kamu luar biasa!"), 300);
+        }
+        }
+
+        function drawConnections() {
+        const ctx = canvas.value?.getContext("2d");
+        if (!ctx) return;
+        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+
+        if (selectedIndexes.value.length < 2) return;
+
+        const canvasBox = canvas.value.getBoundingClientRect();
+        const nodes = selectedIndexes.value.map((i) => {
+            const el = circleRef.value.children[i];
+            const box = el.getBoundingClientRect();
+            return {
+            x: box.left + box.width / 2 - canvasBox.left,
+            y: box.top + box.height / 2 - canvasBox.top,
+            };
+        });
+
+        ctx.strokeStyle = "rgba(255,255,255,0.9)";
+        ctx.lineWidth = 5;
+        ctx.lineJoin = "round";
+        ctx.lineCap = "round";
+        ctx.beginPath();
+        ctx.moveTo(nodes[0].x, nodes[0].y);
+        for (let i = 1; i < nodes.length; i++) ctx.lineTo(nodes[i].x, nodes[i].y);
+        ctx.stroke();
+    }
+
+    function resetGame() {
+        initGame();
+    }
+
+    function goEntertainment(){
+      window.history.back('/entertainment');
+    }
+    
+    function goBack(){
+      window.history.back('/entertainment/mini-games');
+    }
+    
+    
+    onMounted(async () => {
+        await nextTick();
+        const rect = circleRef.value.getBoundingClientRect();
+        canvas.value.width = rect.width;
+        canvas.value.height = rect.height;
+        initGame();
+    });
+
+</script>
+
+<style scoped>
+    @keyframes pulseGlow {
+        0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.6); }
+        50% { box-shadow: 0 0 20px rgba(255,255,255,0.9); }
+    }
+    .animate-pulse {
+        animation: pulseGlow 1s infinite;
+    }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 8f61bf8..91c449b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,6 +14,8 @@ import MissionPage from '@/pages/MissionPage.vue'
 import FindwordsPage from '@/pages/Findwords.vue'
 import MinigamePage from '@/pages/Minigame.vue'
 import FlipcardPage from '@/pages/Flipcard.vue'
+import WordspellsPage from '@/pages/Wordspells.vue'
+import PointhistoryPage from '@/pages/Pointhistory.vue'
 
 const routes = [
   { path: '/', name: 'home', component: HomePage , meta:{requiresAuth:true}},
@@ -33,11 +35,13 @@ const routes = [
   { path: '/entertainment/manga/:manga_id/chapters/:chapter_id/', name:'manga-list', component:ChapterListPage, props:true},
   { path: '/entertainment/manga/:manga_id/chapters/:chapter_id/pages', name:'manga-read', component:ChapterListPage, props:true},
   { path:'/mission/quest/:id/missions', name: 'quest-missions', component:MissionPage},
+  { path: '/profile/mission-history', name:'mission-history', component:PointhistoryPage},
 
   // 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},
+  { path: '/entertainment/mini-games/word-spells/', name:'word-spells', component:WordspellsPage, props:true},
 ]
 
 const router = createRouter({
diff --git a/src/services/missions.js b/src/services/missions.js
index bdf7385..9e3fb19 100644
--- a/src/services/missions.js
+++ b/src/services/missions.js
@@ -1,7 +1,23 @@
 import api from "@/util/api";
+import { useAuthStore } from "../stores/auth";
 
 export const getMissions = async () => {
-    return await api.get("/mission/missions").then((res) => res.data);
+    const res =  await api.get("/mission/missions");
+    const data = res.data;
+    const missions =  Array.isArray(data.results) ? data.results : [];
+    const now = new Date().toISOString();
+
+    const activeMissions = missions.filter(
+        (mission) => mission.status === 'published' 
+        && new Date(mission.date_time_from_valid) <= now
+        && new Date(mission.date_time_to_valid) >= now 
+    );
+
+    return {
+      ...data,
+      count: activeMissions.length,
+      results: activeMissions,
+    };
 };
 
 export const getMissionLogs = async () => {
@@ -29,6 +45,22 @@ export const updateMissionLog = async(missionId ,data = {}) =>{
     });
 }
 
-// export const getUserPoint = async(user_id) =>{
-//     return await api.get();
-// }
\ No newline at end of file
+export const getUserPoint = async() =>{
+    const auth = useAuthStore();
+    const user = auth.user
+    console.log(`User Data: ${JSON.stringify(user)}`)
+
+    // getting points
+    const resPoint = await getMissionLogs();
+    console.log(`Missions Logs: ${JSON.stringify(resPoint)}`)
+    const userLogs = resPoint.results.filter((log) => log.user_id === user.id);
+    const myPoints = userLogs.reduce((total, log) => total + log.point, 0);
+    
+    return {
+        task: resPoint,
+        taskCount: resPoint.count,
+        myTask: userLogs,
+        myTaskCount: userLogs.length,
+        myPoints,
+    };
+}
\ No newline at end of file