1.0.2

changelog.md

@@ -28,4 +28,15 @@
   - drawText()
 Changed:
   - drawing functions are now in draw.js
-  - change example function colors
+  - change example function colors
+
+## 1.0.2
+- Added:
+  - onMouseUp()
+  - onMouseUpRight()
+  - onMouseClick()
+  - onMouseClickRight()
+  - clearCanvas()
+  - tick
+- Changed:
+  - tps is now 20

draw.js

@@ -20,6 +20,7 @@ getImageHexArray("https://i.imgur.com/UniMfif.png").then(hexArray => {
 });
 
 function draw() {
+  clearCanvas();
   drawRect(3, 3, 10, 10, "#343a40", true);
   drawEllipse(10, 10, 80, 80, "#22b8cf", true);
   drawLine(80, 80, 90, 120, "#51cf66");
@@ -28,24 +29,44 @@ function draw() {
   drawPolygon([[200, 20], [210,3], [220,6], [230, 50], [215, 70]], "#ff922b", true);
   drawSprite(20, 25, testSprite);
   drawText("Hello, world! ǙķDŽƺȹⱲ", 10, 130, "#343a40");
+  drawText("Tick: " + tick, 10, 120, "#343a40");
 
   if (mouseDown) {
-    onMouseDownLeft();
+    onMouseDown();
   }
 
   if (mouseDownRight) {
     onMouseDownRight();
   }
+
+  onInitialMouseDown();
 }
 
-function onMouseDownLeft() {
+
+function onMouseDown() {
 
 }
 
 function onMouseDownRight() {
 
 }
 
+function onMouseUp() {
+
+}
+
+function onMouseUpRight() {
+
+}
+
+function onMouseClick() {
+
+}
+
+function onMouseClickRight() {
+
+}
+
 function onScrollUp() {
 
 }
@@ -60,4 +81,5 @@ drawPixelmap();
 setInterval(() => {
   draw();
   drawPixelmap();
-}, 300);
+  tick++;
+}, 50);

main.js

@@ -32,6 +32,14 @@ function getPixel(x, y) {
   return pixelmap[y][x];
 }
 
+function clearCanvas() {
+  for (let y = 0; y < pixelmap.length; y++) {
+    for (let x = 0; x < pixelmap[y].length; x++) {
+      pixelmap[y][x] = "#f8f9fa";
+    }
+  }
+}
+
 function drawLine(x1, y1, x2, y2, color) {
   const dx = Math.abs(x2 - x1);
   const dy = Math.abs(y2 - y1);
@@ -344,6 +352,25 @@ canvas.addEventListener('mousemove', (event) => {
   mouseYold = mouseY;
 });
 
+let wasMouseDown = false;
+let wasMouseDownRight = false;
+
+function onInitialMouseDown() {
+  if (!wasMouseDown && mouseDown) {
+    onMouseClick();
+    wasMouseDown = true;
+  } else if (!mouseDown) {
+    wasMouseDown = false;
+  }
+
+  if (!wasMouseDownRight && mouseDownRight) {
+    onMouseClickRight();
+    wasMouseDownRight = true;
+  } else if (!mouseDownRight) {
+    wasMouseDownRight = false;
+  }
+}
+
 let mouseDownRight = false;
 
 canvas.addEventListener('contextmenu', (event) => {
@@ -362,9 +389,11 @@ canvas.addEventListener('mousedown', (event) => {
 canvas.addEventListener('mouseup', (event) => {
   if (event.button === 0) {
     mouseDown = false;
+    onMouseUp();
   }
   if (event.button === 2) {
     mouseDownRight = false;
+    onMouseUpRight();
   }
 });
 
@@ -379,4 +408,6 @@ canvas.addEventListener('wheel', (event) => {
   } else {
     onScrollDown();
   }
-});
+});
+
+tick = 0;