grid fix

teach-a-bot-hack-basel · Oct 23, 2022 · 1d43e14 · 1d43e14
1 parent 39948ed
commit 1d43e14
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/components/GameView.vue b/components/GameView.vue
@@ -11,20 +11,20 @@ const p = defineProps<{
 </script>
 
 <template>
-  <div class="grid aspect-square border-4 border-gray-600 bg-green-200 rounded-lg"
-       :style="{gridTemplateColumns: resolution, gridTemplateRows: resolution}">
+  <div class="grid border-4 border-gray-600 bg-green-200 rounded-lg
+grid-rows-[200px_minmax(900px,_1fr)_100px]"
+       :style="{gridTemplateColumns: '1fr '.repeat(resolution), gridTemplateRows: '1fr '.repeat(resolution)}">
 
-    <RoboComp class="aspect-square bg-black"
+    <RoboComp class="aspect-square"
               :style="{gridRowStart: resolution - robo._y, gridColumnStart: 1 + robo._x}"/>
 
-
     <div
-        v-for="obst of robo._level.obstacles" class="bg-black"
+        v-for="obst of robo._level.obstacles" class="bg-black aspect-square"
         :style="{gridColumnStart: 1 + obst, gridRowStart: resolution}"
     />
 
     <div
-        class="bg-yellow-400"
+        class="bg-yellow-400 aspect-square"
         :style="{gridRowStart: resolution, gridColumnStart: 1 + robo._level.goal}"
     ></div>
   </div>