canvas fail

README.md

@@ -2,14 +2,30 @@
 
 ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
 
+# TODAY
+
+DRAWING blocks bro.
+
+## HOW TO DRAW BLOCKS
+
+* What we are doing now, the slowest worst way that uses > 4gb of ram for a blank 80x80 ascii lol
+
+* Canvas
+
+* Webgl renderding direct to canvas, three.js webgl
+
 # Doneish
 
 * Initial data structure which will hold our ASCII informations.
 * Added vue-tailwind.com
 
+# Things To Do
+
+* Properly get CSS into the JS stuff ya lazy bird
+
 # Roadmap
 
- * Integrate front end library 
+ * Integrate front end library - DONE
  * Tie the ascii Meta Data into tabs / interface
  * Take a quick look at ASCIIBLASTER, compare code
  * Render the individual blocks
@@ -59,6 +75,9 @@ If we can import an ASCII -> two dimensional array -> Export
 * https://jp.itch.io/playscii / http://vectorpoem.com/playscii/
 * https://mircart.org/
 * https://asdf.us/asciiblaster/
+* https://acid.vegas/asciimaker
+* https://stackoverflow.com/questions/60263401/draw-on-canvas-with-vue
+* https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
 
 ## Project setup
 ```

src/components/Block.vue

@@ -1,5 +1,5 @@
 <template>
-      <div :id=blockId :class=blockClass>
+      <div :id=blockId :style=blockClass>
           {{ this.data.char }}
       </div>
 </template>

src/views/Editor.vue

@@ -1,49 +1,147 @@
 <template>
   <div>
-    <h1>{{ currentAsciibirdMeta.title }} ({{ currentAsciibirdMeta.width }} / {{ currentAsciibirdMeta.height }})</h1>
+    <h1>
+      {{ currentAsciibirdMeta.title }} ({{ currentAsciibirdMeta.width }} /
+      {{ currentAsciibirdMeta.height }})
+    </h1>
     <pre><small>{{ JSON.stringify(currentAsciibirdMeta) }}</small></pre>
 
-    <div id="canvas">
-      <span v-for="(yValue, y) in currentAsciibirdMeta.blocks" :key="y">
+    <div>
+      <canvas
+        :ref="generateCanvasId"
+        :id="generateCanvasId"
+        @mousedown="startSelect"
+        @mousemove="drawRect"
+        @mouseup="stopSelect"
+        v-bind:class="dataFieldClass"
+      ></canvas>
+
+      <!-- <span v-for="(yValue, y) in currentAsciibirdMeta.blocks" :key="y">
         <span v-for="(xValue, x) in currentAsciibirdMeta.blocks" :key="x">
 
-          <Block :data="currentAsciibirdMeta.blocks[y][x]" v-if="currentAsciibirdMeta.blocks.length" />
+          <Block :data="currentAsciibirdMeta.blocks[y][x]" v-if="currentAsciibirdMeta.blocks.length" :blockWidth="currentAsciibirdMeta.blockWidth"  :blockHeight="currentAsciibirdMeta.blockHeight" />
 
         </span>
-      </span>
+      </span> -->
     </div>
-
   </div>
 </template>
 
+<style>
+body {
+  margin: 2rem;
+  background: #eee;
+}
+
+#canvas {
+  background: white;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
+}
+</style>
+
 <script>
 import Block from '../components/Block.vue';
 
 export default {
   name: 'Editor',
   components: { Block },
-  created() {
+  mounted() {
     this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[0];
+    console.log(this.$refs);
+  },
+  created() {
+
   },
   data: () => ({
     text: 'ASCII',
     currentAsciibirdMeta: null,
+    data: {
+      message: 'Hello Vue!',
+      vueCanvas: null,
+    },
+    ctx: null,
+    selectionMode: false,
+    startPosition: {
+      x: null,
+      y: null,
+    },
   }),
   computed: {
     getFullPath() {
       return this.$route.path;
     },
+    generateCanvasId() {
+      return `canvas-${this.currentAsciibirdMeta.key}`;
+    },
   },
   watch: {
     getFullPath() {
-      console.log(this);
+      // console.log(this);
       this.getData();
     },
   },
   methods: {
+    dataFieldClass(event) {
+      this.ctx = event.currentTarget.id;
+      console.log(this.ctx);
+    },
     getData() {
       // Call my lovely API
-      this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[this.$route.params.ascii.split('/').join('')];
+      this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[
+        this.$route.params.ascii.split('/').join('')
+      ];
+    },
+    startSelect(e) {
+      this.selectionMode = true;
+      this.startPosition.x = e.clientX;
+      this.startPosition.y = e.clientY;
+    },
+    // dataFieldClass() {
+    //   console.log({'NIGGA': this.$refs[this.generateCanvasId]});
+
+    //   if (!this.$refs[this.generateCanvasId]) {
+    //     // First render, the element is not there yet
+    //     return null;
+    //   } else {
+    //     // Here is the element
+    //     this.ctx = this.$refs[this.generateCanvasId]
+    //     console.log(this.$refs[this.generateCanvasId]);
+    //   }
+    // },
+    drawRect(e) {
+      if (this.selectionMode) {
+        // console.log(this.startPosition);
+        this.ctx.beginPath();
+        this.ctx.rect(
+          this.startPosition.x,
+          this.startPosition.y,
+          e.clientX - this.startPosition.x,
+          e.clientY - this.startPosition.y,
+        );
+        this.ctx.closePath();
+        this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
+        this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+        this.ctx.strokeStyle = '#f00';
+        this.ctx.stroke();
+      }
+    },
+    canvasClass(e) {
+      this.ctx = e.target;
+
+      this.ctx.strokeStyle = 'red';
+      this.ctx.beginPath();
+      this.ctx.moveTo(100, 100);
+      this.ctx.lineTo(200, 100);
+      this.ctx.lineTo(200, 150);
+      this.ctx.closePath();
+      this.ctx.stroke();
+    },
+    stopSelect(e) {
+      this.ctx.fillStyle = '#fff';
+
+      this.selectionMode = false;
+      this.startPosition.x = null;
+      this.startPosition.y = null;
     },
   },
 };