From 10b0e0a1e3cdc9e8fe10b9a117c9bdf320c5607d Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sun, 9 Nov 2025 17:44:29 +0100
Subject: [PATCH] refactor: move border to screen itself, and use withDefaults

---
 app/app.vue               | 18 ++++--------------
 app/components/Screen.vue | 10 +++++++++-
 app/components/Stats.vue  | 12 +++---------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 07788ad..f320a7a 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,16 +1,6 @@
 <template>
-  <div class="wrapper">
-    <Screen>
-      <Background />
-      <Stats />
-    </Screen>
-  </div>
+  <Screen>
+    <Background />
+    <Stats />
+  </Screen>
 </template>
-
-<style>
-.wrapper {
-  width: fit-content;
-  height: fit-content;
-  border: 1px solid red;
-}
-</style>
diff --git a/app/components/Screen.vue b/app/components/Screen.vue
index f4ed836..06bf8b8 100644
--- a/app/components/Screen.vue
+++ b/app/components/Screen.vue
@@ -64,7 +64,15 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <canvas ref="canvas" :width="SCREEN_WIDTH" :height="SCREEN_HEIGHT" />
+  <canvas
+    ref="canvas"
+    :width="SCREEN_WIDTH"
+    :height="SCREEN_HEIGHT"
+    :style="{
+      margin: '0',
+      border: '1px solid red',
+    }"
+  />
 
   <slot v-if="canvas" />
 </template>
diff --git a/app/components/Stats.vue b/app/components/Stats.vue
index 72702e3..def8f9b 100644
--- a/app/components/Stats.vue
+++ b/app/components/Stats.vue
@@ -1,13 +1,7 @@
 <script lang="ts" setup>
-const props = defineProps({
-  x: {
-    type: Number,
-    default: 0,
-  },
-  y: {
-    type: Number,
-    default: 0,
-  },
+const props = withDefaults(defineProps<{ x?: number; y?: number }>(), {
+  x: 0,
+  y: 0,
 });
 
 const SAMPLES = 60;