manual finished

ActiveBOWeb/src/components/MountainCarCanvas.vue

@@ -1,5 +1,5 @@
 <template>
- <canvas id="MCcanvas" flex/>
+  <canvas id="MCcanvas" width="480" height="320" />
 </template>
 
 <script setup>
@@ -12,9 +12,7 @@ const imageData = ref(null);
 const canvasWidth = mcstore.width;
 const canvasHeight = mcstore.height;
 
-const renderImage = () => {
-  const height = mcstore.getHeight;
-  const width = mcstore.getWidth;
+const renderImage = (width, height) => {
   const red = mcstore.getRed;
   const green = mcstore.getGreen;
   const blue = mcstore.getBlue;
@@ -31,24 +29,28 @@ const renderImage = () => {
   imageData.value = rgbData;
 };
 
-const drawImage = () => {
+const drawImage = (width, height) => {
   if (imageData.value) {
     const canvas = document.getElementById('MCcanvas');
     const context = canvas.getContext('2d')
 
-    const image = new ImageData(imageData.value, canvasWidth, canvasHeight);
+    const image = new ImageData(imageData.value, width, height);
     context.putImageData(image, 0 , 0);
   }
 }
 
 onMounted(() => {
-  renderImage();
-  drawImage();
+  const height = mcstore.getHeight;
+  const width = mcstore.getWidth;
+  renderImage(width, height);
+  drawImage(width, height);
 });
 
 watch(() => mcstore.trigger, () => {
-  renderImage();
-  drawImage();
+  const height = mcstore.getHeight;
+  const width = mcstore.getWidth;
+  renderImage(width, height);
+  drawImage(width, height);
 });
 
 </script>

ActiveBOWeb/src/components/SubLayout.vue

@@ -23,7 +23,7 @@
       <v-col cols="12" md="4">
         <v-row no-gutters>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
+            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
                 <MountainCarCanvas/>
             </v-card>
           </v-col>

ActiveBOWeb/src/store/MountainCarStore.js

@@ -3,11 +3,11 @@ import { defineStore } from "pinia";
 export const useMCStore = defineStore('Mountain Car Store', {
     state: () => {
         return {
-            red: Array(240000).fill(120),
-            green: Array(240000).fill(120),
-            blue: Array(240000).fill(120),
-            width: 600,
-            height: 400,
+            red: Array(153600).fill(120),
+            green: Array(153600).fill(120),
+            blue: Array(153600).fill(120),
+            width: 480,
+            height: 320,
             trigger: false,
         }
     },