controller next btn

components/Controller.vue

@@ -6,7 +6,9 @@ const p = defineProps<{
   robo: Robot,
   chapterName: String,
   currentTask: String,
-  taskCount: String
+  taskCount: String,
+  nextToggle: Boolean,
+  nextUrl: String
 }>()
 
 function callFunction(functionName) {
@@ -18,13 +20,19 @@ let RoboMethods = $ref(Object.getOwnPropertyNames(Object.getPrototypeOf(p.robo))
 </script>
 <template>
   <div class="w-full bg-stone-400 flex justify-between ali pt-4">
-    <div>
+    <div class="grid grid-rows-3 gap-2">
       <h2 class="text-3xl bg-white p-2 font-mono">Level</h2>
-      <div class="bg-black text-white p-2 ">
+      <div class="bg-black text-white p-2">
         {{ currentTask }} / {{ taskCount }}
       </div>
+      <router-link v-if="nextToggle" :to="nextUrl">
+        <button class="text-3xl font-mono text-red-500">
+          Next >
+        </button>
+      </router-link>
     </div>
 
+
     <div class="grid grid-cols-2 flex-grow p-4 gap-2">
       <button
           v-for="methode of RoboMethods"
@@ -33,7 +41,9 @@ let RoboMethods = $ref(Object.getOwnPropertyNames(Object.getPrototypeOf(p.robo))
       </button>
     </div>
     <PopUp>
-     <slot/>
+      <slot/>
     </PopUp>
   </div>
 </template>
+
+

pages/chapter/console/demo.vue

@@ -0,0 +1,43 @@
+<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"
+import LayouGameBoy from "~/components/LayouGameBoy.vue";
+
+const router = useRouter()
+const level = new Level({obstacles: new Set([3, 6, 10]), goal: 8})
+const robo = new Robot({level})
+
+let nextToggle = $ref(false)
+
+watchEffect(() => {
+  if (robo._x >= level.goal) {
+    nextToggle = true
+  }
+})
+
+</script>
+<template>
+  <LayouGameBoy>
+    <GameView
+        :robo="robo"
+        :resolution="12"
+    />
+    <Controller
+        :nextToggle="nextToggle"
+        next-url="/chapter/console/2"
+        :robo="robo"
+        chapter-name="Methods"
+        current-task="1"
+        task-count="4"
+    >
+      <h2 class="text-5xl font-mono">Aufgabe 1</h2>
+      <article>
+        lorem
+      </article>
+    </Controller>
+  </LayouGameBoy>
+</template>