From 351b63da6ba2ce4fdc492d26df22933839607159 Mon Sep 17 00:00:00 2001
From: "nikolaus.feith" <nikolaus.feith@unileoben.ac.at>
Date: Mon, 6 Mar 2023 13:38:43 +0100
Subject: [PATCH] manual finished

---
 .../src/components/MountainCarCanvas.vue      | 22 ++++++++++---------
 ActiveBOWeb/src/components/SubLayout.vue      |  4 ++--
 ActiveBOWeb/src/store/MountainCarStore.js     | 10 ++++-----
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/ActiveBOWeb/src/components/MountainCarCanvas.vue b/ActiveBOWeb/src/components/MountainCarCanvas.vue
index d5c1b75..6d01a42 100644
--- a/ActiveBOWeb/src/components/MountainCarCanvas.vue
+++ b/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>
diff --git a/ActiveBOWeb/src/components/SubLayout.vue b/ActiveBOWeb/src/components/SubLayout.vue
index fa5415d..4106d22 100644
--- a/ActiveBOWeb/src/components/SubLayout.vue
+++ b/ActiveBOWeb/src/components/SubLayout.vue
@@ -23,8 +23,8 @@
       <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%' }">
-              <MountainCarCanvas/>
+            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
+                <MountainCarCanvas/>
             </v-card>
           </v-col>
           <v-col cols="12">
diff --git a/ActiveBOWeb/src/store/MountainCarStore.js b/ActiveBOWeb/src/store/MountainCarStore.js
index dd1e861..47b5b14 100644
--- a/ActiveBOWeb/src/store/MountainCarStore.js
+++ b/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,
         }
     },