linting and formating. renamed canvas component

src/App.vue

@@ -1,71 +1,66 @@
 <template>
   <div id="main">
-    <h1
-      id="main-title"
-    >
-      Cellular Automata Explorer
-    </h1>
+    <h1 id="main-title">Cellular Automata Explorer</h1>
     <div id="container">
       <MainMenu />
-      <Canvas />
+      <CanvasBoard />
     </div>
   </div>
 </template>
 
 <script>
-import MainMenu from './components/MainMenu.vue'
-import Canvas from './components/Canvas.vue'
+import MainMenu from "./components/MainMenu.vue";
+import CanvasBoard from "./components/CanvasBoard.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     MainMenu,
-    Canvas
-  }
-}
+    CanvasBoard,
+  },
+};
 </script>
 
 <style>
 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
 }
 
 * {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
-
 body {
-    background: black;
-    color: white;
-    font-family: Courier New;
+  background: black;
+  color: white;
+  font-family: Courier New;
 }
 
 canvas {
-    flex: auto;
-    background: #110812;
-    margin-right: 10px;
+  flex: auto;
+  background: #110812;
+  margin-right: 10px;
 }
 
-h1, h2 {
-    font-weight: bold;
+h1,
+h2 {
+  font-weight: bold;
 }
 
 h1 {
-    margin : 10px auto;
-    font-size: larger;
-    text-align: center;
+  margin: 10px auto;
+  font-size: larger;
+  text-align: center;
 }
 
 #container {
-    display: flex;
-    height: calc(100vh - 100px);
-    overflow: hidden;
+  display: flex;
+  height: calc(100vh - 100px);
+  overflow: hidden;
 }
 </style>