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

…h-a-bot

app.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 </script>
 
 <template>

assets/css/tailwind.css

@@ -42,4 +42,9 @@ button {
 button,
 select {
   cursor: pointer;
-}
+}
+
+
+.limit {
+  /*@apply */
+}

classes/Level.ts

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

classes/Robot.ts

@@ -0,0 +1,39 @@
+import {reactive} from "#imports"
+import {Level} from "~/classes/Level"
+
+export class Robot {
+  name = ""
+  color = ""
+
+  _x = 0
+  _y = 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
+    }
+
+    // move
+    this._x++
+
+    // land if possible
+    if ((this._y > 0) && !this._level.obstacles.has(this._x)) {
+      this._y--
+    }
+  }
+
+  jump() {
+    this._y++
+  }
+}

components/Controller.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div class="w-full bg-gray-200 h-20 flex justify-between p-6">
+    <button>
+      Play
+    </button>
+    <button>
+      ?
+    </button>
+  </div>
+</template>

components/GameView.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import {Robot} from "~/classes/Robot";
+
+defineProps<{
+  Robo?: Robot,
+}>()
+</script>
+<template>
+  <div class="grid w-full h-full bg-green-200"
+       style="grid-template-columns: repeat(24, minmax(0, 1fr));
+       grid-template-rows: repeat(24, minmax(0, 1fr));">
+    <div>Test</div>
+    <div>Test</div>
+    <div>Test</div>
+    <div>Test</div>
+    <div>Test</div>
+  </div>
+</template>

nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     global: false,
     dirs: [],
   },
+  ssr: false,
   telemetry: false,
   modules: ["@nuxtjs/tailwindcss"],
   experimental: {

pages/chapter/console/1.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import GameView from "~/components/GameView.vue";
+import Controller from "~/components/Controller.vue"
+</script>
+<template>
+  <div class="flex flex-col aspect-square">
+    <GameView class="flex-grow"/>
+    <Controller class="fixed bottom-0"/>
+  </div>
+</template>

pages/index.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
+  import {onMounted} from "#imports"
+  import {Robot} from "~/classes/Robot"
+  import {Level} from "~/classes/Level"
+  import Counter from "~/components/Counter.vue"
+
+  const level = new Level({obstacles: new Set([2, 4, 8])})
+  const Robo = new Robot({level})
 
-import Counter from "~/components/Counter.vue";
 </script>
 
 <template>
   <main>
-    <h1>Robo</h1>
-    <Counter/>
+    <pre>{{ JSON.stringify(Robo, null, 2) }}</pre>
+    <pre>obstacles: {{ [...level.obstacles].join(",") }}</pre>
+    <div class="w-96 h-32 bg-black relative">
+      <div
+        class="w-8 h-8 bg-gray-500 absolute"
+        :style="{left: (Robo._x * 32)+'px', bottom: (Robo._y * 32)+'px'}"
+      ></div>
+    </div>
   </main>
 </template>