styling fixes

src/assets/main.css

@@ -1,3 +0,0 @@
-body {
-    background: black;
-}

src/assets/main.scss

@@ -0,0 +1,10 @@
+body {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    background: black;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}

src/components/Game.vue

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import 'phaser';
-import { Game, Scene, useGame } from 'phavuer'
+import { Game, Scene, useGame, useScene } from 'phavuer'
 import World from '@/components/World.vue'
 
 const gameConfig = {
@@ -40,7 +40,12 @@ const create = (scene: Phaser.Scene) => {
     cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
   });
 
-  scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff00ff, 0.5).setOrigin(0, 0);
+  const grid = scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff00ff, 0.5).setOrigin(0, 0);
+
+  // window.addEventListener('resize', () => {
+  //   grid.width = window.innerWidth;
+  //   grid.height = window.innerHeight;
+  // });
 }
 </script>
 
@@ -50,10 +55,5 @@ const create = (scene: Phaser.Scene) => {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  border: 1px solid white;
-}
-
-.game {
-  border: 1px solid red;
 }
 </style>

src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+import './assets/main.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'