Step Before Final Looks

copev313 · copev313 · commit 549b36295c84 · 2020-08-22T19:28:00.000-04:00
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+		<title>Pixel Drawing App - Made with Vue.js</title>
+	</head>
+
+	<body>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+	</body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,33 @@
 <template>
   <div id="app">
     <ColorPicker :color="color"/>
-    <Canvas/>
+    <Canvas :pixels="pixels"/>
   </div>
 </template>
 
 <script>
 import Canvas from "./components/Canvas";
 import ColorPicker from "./components/ColorPicker";
 
+const defaultColor = "white";
+
 export default {
   name: "App",
   data: function() {
     return {
-      color: "white"
+      color: defaultColor,
+      pixels: Array(30 * 30)
+        .fill()
+        .map(() => defaultColor)
     };
   },
   components: {
     Canvas,
     ColorPicker
   },
   mounted() {
-    this.$root.$on("updatecolor", color => {
-      this.color = color;
+    this.$root.$on("clickedpixel", index => {
+      this.pixels.splice(index, 1, this.color);
     });
   }
 };
diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="canvas">
-    <Pixel v-for="n in 30*30" color="blue"/>
+    <Pixel isInCanvas v-for="(color, index) in pixels" :key="index" :index="index" :color="color"/>
   </div>
 </template>
 
@@ -11,6 +11,9 @@ export default {
   name: "Canvas",
   components: {
     Pixel
+  },
+  props: {
+    pixels: Array
   }
 };
 </script>
diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <Pixel interactive color="white" :current="color == 'white' ? true : false"/>
-    <Pixel interactive color="lightblue" :current="color == 'lightblue' ? true : false"/>
-    <Pixel interactive color="blue" :current="color == 'blue' ? true : false"/>
-    <Pixel interactive color="darkblue" :current="color == 'darkblue' ? true : false"/>
+    <Pixel isInColorPicker color="white" :current="color == 'white' ? true : false"/>
+    <Pixel isInColorPicker color="lightblue" :current="color == 'lightblue' ? true : false"/>
+    <Pixel isInColorPicker color="blue" :current="color == 'blue' ? true : false"/>
+    <Pixel isInColorPicker color="darkblue" :current="color == 'darkblue' ? true : false"/>
   </div>
 </template>
 
diff --git a/src/components/Pixel.vue b/src/components/Pixel.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    @click="interactive && changeColor(color)"
-    :class="['pixel', color, current ? 'current' : '']"
-  ></div>
+  <div @click="handleClick" :class="['pixel', color, current ? 'current' : '']"></div>
 </template>
 
 <script>
@@ -11,11 +8,18 @@ export default {
   props: {
     color: String,
     current: Boolean,
-    interactive: Boolean
+    isInColorPicker: Boolean,
+    isInCanvas: Boolean,
+    index: Number
   },
   methods: {
-    changeColor: function(color) {
-      this.$root.$emit("updatecolor", color);
+    handleClick: function() {
+      if (this.isInColorPicker) {
+        this.$root.$emit("updatecolor", this.color);
+      }
+      if (this.isInCanvas) {
+        this.$root.$emit("clickedpixel", this.index);
+      }
     }
   }
 };
