Level.goal

classes/Level.ts

@@ -1,11 +1,12 @@
-import {reactive} from "#imports";
+import {reactive} from "#imports"
 
 export class Level {
-    obstacles = new Set<number>()
+  obstacles = new Set<number>()
+  goal = 0
 
-    constructor(props:Level) {
-        const proxy = reactive(this)
-        Object.assign(proxy, props)
-        return proxy
-    }
-}
+  constructor(props: Level) {
+    const proxy = reactive(this)
+    Object.assign(proxy, props)
+    return proxy
+  }
+}

pages/chapter/console/1.vue

@@ -1,11 +1,21 @@
 <script lang="ts" setup>
-import GameView from "~/components/GameView.vue";
-import Controller from "~/components/Controller.vue"
-import {Robot} from "~/classes/Robot";
-import {Level} from "~/classes/Level";
+  import GameView from "~/components/GameView.vue"
+  import Controller from "~/components/Controller.vue"
+  import {Robot} from "~/classes/Robot"
+  import {Level} from "~/classes/Level"
+  import {watchEffect} from "#imports"
+  import {useRouter} from "#app"
 
-const level = new Level({obstacles: new Set([3, 6, 10])})
-const robo = new Robot({level})
+  const router = useRouter()
+  const level = new Level({obstacles: new Set([3, 6, 10]), goal: 2})
+  const robo = new Robot({level})
+
+  watchEffect(() => {
+    if (robo._x >= level.goal) {
+      alert('goal reached!')
+      router.push('/chapter/console/2')
+    }
+  })
 
 </script>
 <template>

pages/chapter/console/2.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+  import GameView from "~/components/GameView.vue"
+  import Controller from "~/components/Controller.vue"
+  import {Robot} from "~/classes/Robot"
+  import {Level} from "~/classes/Level"
+  import {watchEffect} from "#imports"
+  import {useRouter} from "#app"
+
+  const router = useRouter()
+  const level = new Level({obstacles: new Set([9, 11, 13]), goal: 14})
+  const robo = new Robot({level})
+
+  watchEffect(() => {
+    if (robo._x >= level.goal) {
+      alert('goal reached!')
+      router.push('/chapter/console/3')
+    }
+  })
+
+</script>
+<template>
+  <div class="flex flex-col aspect-square">
+    <GameView :robo="robo" class="flex-grow"/>
+    <Controller :robo="robo" class="fixed bottom-0"/>
+  </div>
+</template>