Point array buffer to the correct location on colorShaderDrawRectangle

dev/watch.js

@@ -1,21 +1,23 @@
-const	fsevents = require('fsevents');
+const	chokidar = require('chokidar');
 const { exec } = require('child_process');
 
 console.log("Started watching /src directory...");
 
-const stop = fsevents.watch('./src', (path, flags, id) => {
-	const info = fsevents.getInfo(path, flags, id);
-	if(info.event === 'moved') {
-		console.log(`Detected change in ${info.path}.`);
-		exec('./build.sh dev', (error, stdout, stderr) => {
-			if(error) {
-				console.log(`error: ${error.message}`);
-			}
-			if(stderr) {
-				console.log(`srderr: ${stderr}`);
-			}
+const command = './bash.rc';
 
-			console.log(stdout);
-		})
-	}
+chokidar.watch('./src', (path) => {
+  console.log(`Detected change in ${path}.`);
+  try {
+    exec(command, (error, stdout, stderr) => {
+      console.log(stdout);
+      if(error) {
+        console.log(`error: ${error.message}`);
+      }
+      if(stderr) {
+        console.log(`stderr: ${stderr}`);
+      }
+    })
+  } catch(e) {
+    console.log(`FAILED: ${e}`);
+  }
 })

package.json

@@ -16,8 +16,7 @@
     "url": "https://github.com/elfedy/svg-draw/issues"
   },
   "homepage": "https://github.com/elfedy/svg-draw#readme",
-  "dependencies": {},
-  "devDependencies": {
-    "fsevents": "^2.1.2"
+  "dependencies": {
+    "chokidar": "^3.5.3"
   }
 }

src/index.ts

@@ -38,7 +38,7 @@ function run(sprite) {
     [ 'x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x'],
     [ 'x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x'],
     [ 'x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x','x'],
-  ]
+  ];
 
 
   if(gl === null) {
@@ -256,7 +256,7 @@ function run(sprite) {
     },
 
     // Enemies
-    enemySpawnCountdown: 3 * time.seconds,
+    enemySpawnCountdown: 1 * time.seconds,
     enemyColor: {
       r: 0.8,
       g: 0.2,
@@ -562,17 +562,6 @@ function run(sprite) {
     // ColorShader
     // Create and bind buffer to the position attribute
     gl.useProgram(colorShaderProgram);
-    gl.bindBuffer(gl.ARRAY_BUFFER, colorShader.buffers.aPosition);
-    gl.vertexAttribPointer(
-      colorShader.locations.aPosition,
-      2,  // size: components per iteration
-      gl.FLOAT,  // data type
-      false, // normalize
-      0, // stride: bytes between beggining of consecutive vetex attributes in buffer
-      0 // offset: where to start reading data from the buffer
-    );
-    // Enable vertex attribute
-    gl.enableVertexAttribArray(colorShader.locations.aPosition);
 
     // TODO(fede): optimize tile drawing:
     // * Just do a single pass through all the tiles.
@@ -593,9 +582,9 @@ function run(sprite) {
     // Draw Tiles and store ground tiles to render
     // after bullets
     let grassTiles = []
-    for(var row = 0; row < Game.tileRows; row++) {
-      for(var col = 0; col < Game.tileCols; col++) {
-        var tile = Game.tiles[row][col];
+    for(let row = 0; row < Game.tileRows; row++) {
+      for(let col = 0; col < Game.tileCols; col++) {
+        let tile = Game.tiles[row][col];
         if(tile == 'x') continue;
         if(tile !== 'g') {
           let tileName
@@ -624,7 +613,6 @@ function run(sprite) {
         }
       }
     }
-
 
     gl.useProgram(colorShaderProgram);
     // DrawBullets
@@ -851,8 +839,8 @@ function bulletCreate(tank: Tank) {
     tank.bullet =  {
       vx: vx,
       vy: vy,
-      width: 10,
-      height: 10,
+      width: 5,
+      height: 5,
       position: {
         x: tank.position.x,
         y: tank.position.y,

src/shaders.ts

@@ -62,9 +62,19 @@ function squareVertices(width: number, height: number, x: number, y: number): nu
 }
 
 // COLOR SHADER
-function colorShaderDrawRectangle(gl, colorShader, color: Color, width, height, x, y)
+function colorShaderDrawRectangle(gl, colorShader, color: Color, width, height, x, y, debugMe =false)
 {
-    var glLocations = colorShader.locations;
+    let glLocations = colorShader.locations;
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorShader.buffers.aPosition);
+    gl.vertexAttribPointer(
+      glLocations.aPosition,
+      2,  // size: components per iteration
+      gl.FLOAT,  // data type
+      false, // normalize
+      0, // stride: bytes between beggining of consecutive vetex attributes in buffer
+      0 // offset: where to start reading data from the buffer
+    );
+    gl.enableVertexAttribArray(glLocations.aPosition);
     // Set matices
     var matrixProjection = mat3.projection(gl.canvas.width, gl.canvas.height);
     var matrixChangeOrigin = mat3.translation(-width / 2, -height / 2);
@@ -141,7 +151,6 @@ var SPRITE_META = {
     width: 20,
     height: 20,
   },
-  // TODO: The rest I added
 };
 
 function textureShaderDrawTank(gl, textureShader, textureName, tank) {