fix climb & show robo methods in Controller

classes/Robot.ts

@@ -2,43 +2,44 @@ import {reactive} from "#imports"
 import {Level} from "~/classes/Level"
 
 export class Robot {
-  name = ""
-  color = ""
-
-  _x = 0
-  _y: 0 | 1 = 0
-
-  _level: Level
-
-  constructor(config: { level: Level }) {
-    this._level = config.level
-    const proxy = reactive(this)
-    window.Robo = proxy
-    return proxy
-  }
-
-  move() {
-    // check for obstacle
-    if (this._y === 0 && this._level.obstacles.has(this._x + 1)) {
-      console.log("cannot move, obstacle in the way")
-      return
+    name = ""
+    color = ""
+
+    _x = 0
+    _y: 0 | 1 = 0
+
+    _level: Level
+
+    constructor(config: { level: Level }) {
+        this._level = config.level
+        const proxy = reactive(this)
+        window.Robo = proxy
+        return proxy
     }
 
-    // move
-    this._x++
+    move() {
+        // check for obstacle
+        if (this._y === 0 && this._level.obstacles.has(this._x + 1)) {
+            console.log("cannot move, obstacle in the way")
+            return
+        }
 
-    // fall if possible
-    if ((this._y === 1) && !this._level.obstacles.has(this._x)) {
-      this._y = 0
+        // move
+        this._x++
+
+        // fall if possible
+        if ((this._y === 1) && !this._level.obstacles.has(this._x)) {
+            this._y = 0
+        }
     }
-  }
-
-  climb() {
-    // check for obstacle
-    if (this._y === 0 && this._level.obstacles.has(this._x + 1)) {
-      this._y = 1
-    } else {
-      console.log("cannot climb, nothing to climb on")
+
+    climb() {
+        // check for obstacle
+        if (this._y === 0 && this._level.obstacles.has(this._x + 1)) {
+            this._y = 1
+            this._x++
+        } else {
+            console.log("cannot climb, nothing to climb on")
+        }
     }
-  }
 }

components/Controller.vue

@@ -1,12 +1,46 @@
 <script lang="ts" setup>
+import PopUp from "~/components/PopUp.vue";
+import {Robot} from "~/classes/Robot";
+
+const p = defineProps<{
+  robo: Robot,
+}>()
+
+function callFunction(functionName) {
+  window["Robo"][functionName]();
+}
+
+let RoboMethods = $ref(Object.getOwnPropertyNames(Object.getPrototypeOf(p.robo)))
+
 </script>
 <template>
   <div class="w-full bg-gray-200 h-20 flex justify-between p-6">
-    <button>
-      Play
-    </button>
-    <button>
-      ?
-    </button>
+    <div class="flex gap-2">
+      <button
+          class="p-4 border-2 border-gray-500 rounded-xl flex place-items-center"
+          v-for="methode of RoboMethods"
+          @click="callFunction(methode)"
+      >{{ methode }}
+      </button>
+    </div>
+    <PopUp>
+      <h2 class="text-5xl">Aufgabe 1</h2>
+      <article>
+        The console is a panel that displays important messages, like errors, for developers. Much of the work the
+        computer does with our code is invisible to us by default. If we want to see things appear on our screen, we can
+        print, or log, to our console directly.
+        Definition by: https://www.codecademy.com/
+
+        robo.log('teach-a-bot')
+
+        robo.log(2500)
+
+        1.1 Use the console.log code in the editor to log the Name of your Robo to the console (String).
+        1.2 On the next line, write another console.log to print out the age of your Robo (Number).
+        1.3 Try another Age and another Name.
+
+        Run your code when you are ready to see the result.
+      </article>
+    </PopUp>
   </div>
 </template>

components/GameView.vue

@@ -1,17 +1,24 @@
 <script lang="ts" setup>
 import {Robot} from "~/classes/Robot"
 
-defineProps<{
+const p = defineProps<{
   robo: Robot,
 }>()
 
+console.log('Robo: ', p.robo);
+
 </script>
 
 <template>
   <div class="grid aspect-square bg-green-50" style="
   grid-template-columns: repeat(24, minmax(0, 1fr));
   grid-template-rows: repeat(24, minmax(0, 1fr));">
+    <div
+        class="bg-gray-500"
+        :style="{gridRowStart: 24 - robo._y, gridColumnStart: 1 + robo._x}"
+    ></div>
+
     <div v-for="obst of robo._level.obstacles" class="bg-black"
-         :style="{gridColumnStart: obst, gridRowStart: 24}"/>
+         :style="{gridColumnStart: 1 + obst, gridRowStart: 24}"/>
   </div>
 </template>

components/PopUp.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+
+let toggle = $ref(false)
+
+
+</script>
+
+<template>
+  <div @click="toggle = !toggle" class="text-3xl">
+    ?
+  </div>
+  <div v-if="toggle" style="background: rgba(0,0,0,0.5)" class="
+  fixed top-0 bottom-0 left-0 right-0
+  grid place-content-center">
+    <div class=" relative w-[80vw] h-[80vh] bg-white rounded-xl p-10">
+      <button @click="toggle = !toggle"
+              class="absolute right-4 top-2 text-3xl">x
+      </button>
+      <div class="grid gap-6 text-2xl font-bold overflow-scroll">
+        <slot/>
+      </div>
+    </div>
+
+  </div>
+</template>

pages/chapter/console/1.vue

@@ -4,13 +4,13 @@ import Controller from "~/components/Controller.vue"
 import {Robot} from "~/classes/Robot";
 import {Level} from "~/classes/Level";
 
-const level = new Level({obstacles: new Set([2, 4, 8])})
+const level = new Level({obstacles: new Set([3, 6, 10])})
 const robo = new Robot({level})
 
 </script>
 <template>
   <div class="flex flex-col aspect-square">
     <GameView :robo="robo" class="flex-grow"/>
-    <Controller class="fixed bottom-0"/>
+    <Controller :robo="robo" class="fixed bottom-0"/>
   </div>
 </template>