2 – Winning

composables/actions/win.ts

@@ -0,0 +1,7 @@
+import type { CardsCollectionItem } from '@nuxt/content'
+import type { BoardCard } from '~/types/Board'
+import type { Action } from '~/types/Action'
+
+export const win: Action = (_action: CardsCollectionItem['interactions'][0]['actions'][0], _baseCard: BoardCard, _interactingCard: BoardCard) => {
+  navigateTo('/win', { external: true })
+}

composables/useAction.ts

@@ -13,6 +13,7 @@ import { travel } from './actions/travel'
 import { destroyAll } from './actions/destroyAll'
 import { destroyRandom } from './actions/destroyRandom'
 import { random } from './actions/random'
+import { win } from './actions/win'
 import type { BoardCard } from '~/types/Board'
 import type { Action } from '~/types/Action'
 import { reveal } from '~/composables/actions/reveal'
@@ -33,6 +34,7 @@ const allActions: { [key: string]: Action } = {
   destroyRandom,
   random,
   reveal,
+  win,
 }
 
 export const useAction = () => {

composables/useCardTimer.ts

@@ -25,7 +25,15 @@ export const useCardTimer = () => {
     }, 10)
   }
 
+  const reset = (card: BoardCard) => {
+    if (card.timerTimeoutId) clearTimeout(card.timerTimeoutId)
+    if (card.timerIntervalId) clearInterval(card.timerIntervalId)
+
+    card.timerStartAt = card.timerFinishAt = card.timerProgress = card.timerTimeoutId = card.timerIntervalId = undefined
+  }
+
   return {
     init,
+    reset,
   }
 }

composables/useInteraction.ts

@@ -6,6 +6,7 @@ export const useInteraction = (draggingCard: BoardCard) => {
   const boardStore = useBoardStore()
   const { runActions } = useAction()
   const { startCooldown } = useCardCooldown()
+  const { reset } = useCardTimer()
 
   const getAvailableInteractions = (boardCard: BoardCard): string[] => {
     return (boardCard.card.interactions ?? []).map(interaction => interaction.card)
@@ -43,6 +44,10 @@ export const useInteraction = (draggingCard: BoardCard) => {
     }
 
     boardCard.currentInteraction = interaction
+    if (boardCard.card.timer?.resetWhenCardIsStacked) {
+      reset(boardCard)
+    }
+
     if ((interaction.time ?? 0) <= 0) {
       runInteractionActions(boardCard)
       return

content.config.ts

@@ -54,6 +54,7 @@ export default defineContentConfig({
         onSpawn: actionsType,
         timer: z.object({
           time: z.number().positive().default(0),
+          resetWhenCardIsStacked: z.boolean().default(false),
           actions: actionsType,
         }).optional(),
       }),

content/cards/hyperdrive.json

@@ -24,7 +24,8 @@
       "time": 3,
       "actions": [
         {
-          "type": "travel"
+          "type": "travel",
+          "amount": 10 
         },
         {
           "type": "destroy"
@@ -36,7 +37,8 @@
       "time": 3,
       "actions": [
         {
-          "type": "travel"
+          "type": "travel",
+          "amount": 10 
         },
         {
           "type": "destroy"

content/cards/pirate.json

@@ -105,5 +105,17 @@
         }
       ]
     }
-  ]
+  ],
+  "timer": {
+    "time": 12,
+    "resetWhenCardIsStacked": true,
+    "actions": [
+      {
+        "type": "destroy"
+      },
+      {
+        "type": "destroyRandom"
+      }
+    ]
+  }
 }

content/cards/rocket.json

@@ -26,6 +26,30 @@
           "amount": 5
         }
       ]
+    },
+    {
+      "card": "helmsman",
+      "time": 5,
+      "infinite": true,
+      "consumeContainer": true,
+      "actions": [
+        {
+          "type": "travel",
+          "amount": 7 
+        }
+      ]
+    },
+    {
+      "card": "helmsman-instructor",
+      "time": 5,
+      "infinite": true,
+      "consumeContainer": true,
+      "actions": [
+        {
+          "type": "travel",
+          "amount": 7
+        }
+      ]
     }
   ]
 }

content/events/win.json

@@ -3,5 +3,9 @@
   "icon": "material-symbols:flag",
   "type": "positive",
   "hidden": true,
-  "actions": []
+  "actions": [
+    {
+      "type": "win"
+    }
+  ]
 }

pages/index.vue

@@ -28,15 +28,13 @@ watchOnce(container, () => {
   addPercentage('soldier', 10, 75)
 
   addPercentage('rocket', 50, 50)
-  addPercentage('trade-link-broken', 90, 75)
+  addPercentage('trade-link', 90, 50)
 
-  addPercentage('fuel', 35, 25, 3)
+  addPercentage('fuel', 45, 25, 3)
   addPercentage('money', 50, 25, 400)
-  addPercentage('metal', 50, 25, 5)
+  addPercentage('metal', 55, 25, 5)
 
-  addPercentage('flux-generator', 55, 80)
-  addPercentage('radar', 40, 100)
-  addPercentage('radar', 40, 100)
+  addPercentage('flux-generator', 50, 80)
 })
 </script>
 

pages/win.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="!mt-20 container !mx-auto text-center text-green-200">
+    <h1 class="!text-8xl !font-bold">
+      You won!
+    </h1>
+
+    <p class="text-2xl !mt-4">
+      But unfortunately, you are lost in the depth of space. Well, someone is probably sad about that 😰. Anyway, thanks for playing!
+    </p>
+
+    <UButton
+      class="!mt-8 !bg-neutral-300 !py-4 !px-10 cursor-pointer !rounded-md !text-neutral-900"
+      color="neutral"
+      @click="navigateTo('/', { external: true })"
+    >
+      Retry
+    </UButton>
+  </div>
+</template>

stores/BoardStore.ts

@@ -88,6 +88,10 @@ export const useBoardStore = defineStore('board', () => {
     card.parentCard.interactionTimeoutId = undefined
     card.parentCard.interactionFinishAt = undefined
     card.parentCard.currentInteraction = undefined
+
+    if (card.parentCard.card.timer?.resetWhenCardIsStacked) {
+      init(card.parentCard)
+    }
   }
 
   function unstackCard(card: BoardCard, position: { x: number, y: number }) {