Merge branch 'main' of https://github.com/teach-a-bot-hack-basel/teac…

…h-a-bot

components/Controller.vue

@@ -4,6 +4,9 @@ import {Robot} from "~/classes/Robot";
 
 const p = defineProps<{
   robo: Robot,
+  chapterName: String,
+  currentTask: number,
+  taskCount: number
 }>()
 
 function callFunction(functionName) {
@@ -14,7 +17,16 @@ 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">
+  <div class="w-full bg-gray-400 flex justify-between pt-4">
+    <div class="grid grid-cols-2 border-2 border-gray-200 p-2 gap-2">
+      <div class="grid grid-rows-2">
+        <div class="bg-red-500 p-2">Chapter</div>
+        <div class="bg-red-500 p-2">{{ chapterName }}</div>
+      </div>
+      <div class="bg-red-500 p-2">
+        {{currentTask}}/{{taskCount}}
+      </div>
+    </div>
     <div class="flex gap-2">
       <button
           class="p-4 border-2 border-gray-500 rounded-xl flex place-items-center"

components/GameView.vue

@@ -3,22 +3,25 @@ import {Robot} from "~/classes/Robot"
 
 const p = defineProps<{
   robo: Robot,
+  resolution: {
+    type: Number,
+    default: 12,
+  },
 }>()
 
-console.log('Robo: ', p.robo);
+// 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="grid aspect-square bg-green-50"
+       :style="{gridTemplateColumns: resolution, gridTemplateRows: resolution}">
     <div
         class="bg-gray-500"
-        :style="{gridRowStart: 24 - robo._y, gridColumnStart: 1 + robo._x}"
+        :style="{gridRowStart: resolution - robo._y, gridColumnStart: 1 + robo._x}"
     ></div>
 
     <div v-for="obst of robo._level.obstacles" class="bg-black"
-         :style="{gridColumnStart: 1 + obst, gridRowStart: 24}"/>
+         :style="{gridColumnStart: 1 + obst, gridRowStart: resolution}"/>
   </div>
 </template>

pages/chapter/console/1.vue

@@ -1,26 +1,36 @@
 <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 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([3, 6, 10]), goal: 2})
-  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')
-    }
-  })
+watchEffect(() => {
+  if (robo._x >= level.goal) {
+    alert('goal reached!')
+    router.push('/chapter/console/2')
+  }
+})
 
 </script>
 <template>
-  <div class="flex flex-col aspect-square">
-    <GameView :robo="robo" class="flex-grow"/>
-    <Controller :robo="robo" class="fixed bottom-0"/>
+  <div class="flex flex-col aspect-square max-w-2xl mx-auto mt-10">
+    <div class="p-10 bg-gray-400">
+      <GameView
+          :robo="robo"
+          :resolution="12"
+      />
+      <Controller
+          :robo="robo"
+          chapter-name="Methods"
+          current-task="1"
+          task-count="4"
+      />
+    </div>
   </div>
 </template>