collision detection; falling after jump

classes/Robot.ts

@@ -1,26 +1,39 @@
-import {reactive} from "#imports";
+import {reactive} from "#imports"
+import {Level} from "~/classes/Level"
 
 export class Robot {
-    name=''
-    color=''
+  name = ""
+  color = ""
 
-    _x = 0
-    _y = 0
+  _x = 0
+  _y = 0
 
-    constructor() {
-        const proxy = reactive(this)
-        window.Robo = proxy
-        return proxy
-    }
+  _level: Level
 
-    move() {
-        // TODO: do not increment if blocked
-        // TODO: land if not blocked below
-        this._x++
+  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
     }
 
-    jump() {
-        this._y++
+    // move
+    this._x++
+
+    // land if possible
+    if ((this._y > 0) && !this._level.obstacles.has(this._x)) {
+      this._y--
     }
-}
+  }
+
+  jump() {
+    this._y++
+  }
+}

pages/index.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import {onMounted} from "#imports";
-import {Robot} from "~/classes/Robot";
-import {Level} from "~/classes/Level";
+  import {onMounted} from "#imports"
+  import {Robot} from "~/classes/Robot"
+  import {Level} from "~/classes/Level"
+  import Counter from "~/components/Counter.vue"
 
-const Robo = new Robot()
-const level = new Level({obstacles: new Set([2,4,8])})
-
-console.log(level)
+  const level = new Level({obstacles: new Set([2, 4, 8])})
+  const Robo = new Robot({level})
 
 </script>
 
 <template>
   <main>
-    <pre>{{ JSON.stringify(Robo, null, 2)}}</pre>
-    <pre>obstacles: {{ [...level.obstacles].join(',')  }}</pre>
+    <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'}"></div>
+      <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>