package.json

@@ -12,10 +12,10 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "3.2.0",
+    "@vitejs/plugin-vue": "^3.2.0",
-    "install": "0.13.0",
+    "install": "^0.13.0",
-    "pinia": "2.0.27",
+    "pinia": "^2.0.27",
-    "vite": "^3.2.10",
+    "vite": "^3.2.4",
     "vue": "3.2"
   },
   "devDependencies": {

src/App.vue

@@ -50,7 +50,7 @@
   </div>
 </template>
 
-<style>
+<style scope>
   :root {
     --dark1: #000000;
     --dark2: #333333;

src/components/MenuGeneralOptions.vue

@@ -6,7 +6,7 @@
 
   const updateCanvasHeight = (event) => {
     const elem = event.target;
-    store.renderer.resize(store.renderer.width, elem.value);
+    store.renderer.resize(elem.value, store.renderer.width);
   };
 
   const updateCanvasWidth = (event) => {

src/components/MenuReset.vue

@@ -5,10 +5,10 @@
 </script>
 
 <template>
-  <div class="reset-menu">
+  <div class="form-field">
     <div class="form-field">
       <label>
-        loop
+        Loop
         <input
           :value="store.loop"
           type="checkbox"
@@ -21,7 +21,7 @@
       type="button"
       name="next"
       class="next"
-      value="next"
+      value="Next"
       @click="store.toggleNext()"
     />
     <input
@@ -42,9 +42,9 @@
 </template>
 
 <style scoped>
-  .reset-menu {
+  .form-field {
     display: flex;
+    margin: 5px;
     justify-content: flex-end;
-    padding: 5px;
   }
 </style>

src/stores/index.js

@@ -35,7 +35,7 @@ export const globalStore = defineStore("globalStore", {
       picture: new Image(),
       mainMenu: false,
       activeSubMenu: "",
-      loop: true,
+      loop: false,
       lastAction: "drawfromlast",
       renderer: new Renderer(),
     };