fix: format, lint, props warning

src/App.vue

@@ -36,19 +36,22 @@
 
 <template>
   <main>
-    <h1 id="main-title" class="main-title" v-if="store.mainMenu || windowWidth <= 800">
+    <h1
+      v-if="store.mainMenu || windowWidth <= 800"
+      id="main-title"
+      class="main-title"
+    >
       <span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
         {{ store.mainMenu == true ? "▼" : "☰" }}
       </span>
-      <span >Cellular Automata Explorer</span>
+      <span>Cellular Automata Explorer</span>
     </h1>
     <div id="container" class="container">
-      <MainMenu class="main-menu" v-if="store.mainMenu || windowWidth >= 800" />
+      <MainMenu v-if="store.mainMenu || windowWidth >= 800" class="main-menu" />
       <CanvasBoard />
     </div>
-    <MenuReset :windowWidth=windowWidth />
+    <MenuReset :window-width="windowWidth" />
   </main>
 </template>
 
-<style src="./assets/css/main.css">
-</style>
+<style src="./assets/css/main.css"></style>

src/assets/css/main.css

@@ -38,7 +38,8 @@ h2,
   font-weight: bold;
 }
 
-h1, .desktop-title {
+h1,
+.desktop-title {
   font-size: larger;
   text-transform: uppercase;
 }
@@ -77,7 +78,6 @@ select {
 input[type="number"] {
   max-width: 100%;
   height: 100%;
-  
 }
 
 input[type="button"] {
@@ -166,7 +166,9 @@ label,
   vertical-align: center;
 }
 
-.next, .stop, .reset {
+.next,
+.stop,
+.reset {
   display: inline-block;
   vertical-align: bottom;
 }

src/components/MenuReset.vue

@@ -2,13 +2,22 @@
   import { globalStore } from "../stores/index.js";
   import { defineProps } from "vue";
 
-  const props = defineProps(['windowWidth']);
+  const props = defineProps(
+    {
+      windowWidth: {
+        type: Number,
+        default: 800
+      }
+    }
+  );
   const store = globalStore();
 </script>
 
 <template>
   <div class="reset-menu">
-    <div class="desktop-title" v-if="windowWidth >= 800">Cellular Automata Explorer</div>
+    <div v-if="props.windowWidth >= 800" class="desktop-title">
+      Cellular Automata Explorer
+    </div>
     <div class="reset-input">
       <div class="loop">
         <label>