survivors: renaming drawDot to fillDot

adding area for touch movement instead of buttons simulating the keyboard

absurd-survivors/src/Enemies.ts

@@ -1,5 +1,5 @@
 import type {Acting, ChanceEntry, Drawable, Healthy, Placeable, Shooting} from "./interfaces.ts";
-import {drawDot, moveInDirectionOf} from "./utils.ts";
+import {fillDot, moveInDirectionOf} from "./utils.ts";
 import {Vector} from "./base.ts";
 import {World} from "./World.ts";
 import type {Projectile} from "./projectile.ts";
@@ -77,7 +77,7 @@ export class BasicEnemy extends Enemy {
     protected impactInterval: number = 60;
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this._position, this.getSize(), this.color, ctx)
+        fillDot(this._position, this.getSize(), this.color, ctx)
     }
 
 
@@ -192,7 +192,7 @@ export class HealthEnemy extends Enemy {
     protected color: string;
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this._position, this.size, this.color, ctx)
+        fillDot(this._position, this.size, this.color, ctx)
     }
 
 
@@ -245,7 +245,7 @@ export class ContainerEnemy extends Enemy {
     protected color: string;
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this._position, this.size, this.color, ctx)
+        fillDot(this._position, this.size, this.color, ctx)
     }
 
     move() {

absurd-survivors/src/Player.ts

@@ -1,6 +1,6 @@
 import type {Acting, Drawable, Healthy, Item, Leveling, Weapon} from "./interfaces.ts";
 import {Vector} from "./base.ts";
-import {drawDot, getCoordinatesSplit} from "./utils.ts";
+import {fillDot, getCoordinatesSplit} from "./utils.ts";
 
 export class Player implements Drawable, Acting, Healthy  {
     private _position: Vector;
@@ -20,7 +20,7 @@ export class Player implements Drawable, Acting, Healthy  {
     }
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this.position, this._stats.size, this._color, ctx)
+        fillDot(this.position, this._stats.size, this._color, ctx)
         this._weapons.forEach(weapon => weapon.draw(ctx))
     }
 

absurd-survivors/src/drop.ts

@@ -1,6 +1,6 @@
 import type {Drop, Item} from "./interfaces.ts";
 import {World} from "./World.ts";
-import {drawDot, moveInDirectionOf} from "./utils.ts";
+import {fillDot, moveInDirectionOf} from "./utils.ts";
 import {Vector} from "./base.ts";
 import {rarityColor} from "./items.ts";
 
@@ -49,7 +49,7 @@ export class MoneyDrop extends BasicDrop {
     private worth: number;
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this._position, this.size, this._color, ctx)
+        fillDot(this._position, this.size, this._color, ctx)
     }
 
     pickup() {
@@ -76,7 +76,7 @@ export class HealthPack extends BasicDrop {
     private healAmount: number;
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this._position, this.size, this._color, ctx)
+        fillDot(this._position, this.size, this._color, ctx)
     }
 
     pickup() {
@@ -101,7 +101,7 @@ export class HealthPack extends BasicDrop {
 
 export class LevelDrop extends BasicDrop {
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this._position, this.size, this._color, ctx)
+        fillDot(this._position, this.size, this._color, ctx)
     }
 
     pickup() {

absurd-survivors/src/main.ts

@@ -44,7 +44,7 @@ function updateCanvas() {
         world.draw()
         for(let key in keys) {
             if(keys[key].state) {
-                keys[key].fun()
+                keys[key].fun(keys[key].intensity)
             }
         }
     } else {
@@ -65,29 +65,31 @@ function makeKey(char, fun) {
 }
 
 let keys = {};
-makeKey('w', function () {
+makeKey('w', function (intensity: number) {
-    world.movePlayer(new Vector(0, -world.player.stats.speed))
+    world.movePlayer(new Vector(0, -world.player.stats.speed * intensity))
 })
-makeKey('s', function () {
+makeKey('s', function (intensity: number) {
-    world.movePlayer(new Vector(0, world.player.stats.speed))
+    world.movePlayer(new Vector(0, world.player.stats.speed * intensity))
 })
-makeKey('a', function () {
+makeKey('a', function (intensity: number) {
-    world.movePlayer(new Vector(-world.player.stats.speed, 0))
+    world.movePlayer(new Vector(-world.player.stats.speed * intensity, 0))
 })
-makeKey('d', function () {
+makeKey('d', function (intensity: number) {
-    world.movePlayer(new Vector(world.player.stats.speed, 0))
+    world.movePlayer(new Vector(world.player.stats.speed * intensity, 0))
 })
 
 
 function keyUp(event) {
     if(event.key in keys) {
         keys[event.key].state = false;
+        keys[event.key].intensity = 0;
     }
 }
 
 function keyDown(event) {
     if(event.key in keys) {
         keys[event.key].state = true;
+        keys[event.key].intensity = 1;
     }
 }
 
@@ -138,6 +140,12 @@ docReady(function () {
         hud.mouseUp(pos)
     }
 
+    canvas.onmousemove = (event) => {
+        event.preventDefault()
+        let pos = new Vector(event.x, event.y)
+        hud.mouseMove(pos)
+    }
+
     canvas.addEventListener("touchstart", (event) => {
         event.preventDefault()
         let touch = event.touches[0]
@@ -147,11 +155,17 @@ docReady(function () {
 
     canvas.addEventListener("touchend",  (event) => {
         event.preventDefault()
-        let touch = event.touches[0]
         let pos = new Vector(event.clientX, event.clientY)
         hud.mouseUp(pos)
     });
 
+    canvas.addEventListener("touchmove",  (event) => {
+        event.preventDefault()
+        let touch = event.touches[0]
+        let pos = new Vector(touch.clientX, touch.clientY)
+        hud.mouseMove(pos)
+    });
+
     ItemManagement.initializeItems()
 
     requestAnimationFrame(updateCanvas);

absurd-survivors/src/projectile.ts

@@ -4,7 +4,7 @@ import {World} from "./World.ts";
 import {Cooldown, DeadPoint, Point, Vector} from "./base.ts";
 import {
     circleLineCollision,
-    drawDot,
+    fillDot,
     getCoordinatesSplit,
     moveInDirectionOf,
     pointOnLineWithinLine,
@@ -90,7 +90,7 @@ export abstract class Projectile implements Acting, Placeable {
     };
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this.position, this.stats.size, this.color, ctx)
+        fillDot(this.position, this.stats.size, this.color, ctx)
     }
 
     move() {
@@ -142,7 +142,7 @@ export class ChainBallProjectile extends Projectile {
     }
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this.position, this.stats.size, 'pink', ctx) // todo render the weapon instead
+        fillDot(this.position, this.stats.size, 'pink', ctx) // todo render the weapon instead
     }
 
     act() {
@@ -201,7 +201,7 @@ export class StraightMeleeWeaponProjectile extends Projectile {
 
     draw(ctx: CanvasRenderingContext2D) {
         let position = this.getRealPosition();
-        drawDot(position, this.stats.size, 'brown', ctx) // todo render the weapon instead
+        fillDot(position, this.stats.size, 'brown', ctx) // todo render the weapon instead
     }
 
     getRealPosition(): Vector {

absurd-survivors/src/ui.ts

@@ -1,7 +1,7 @@
 import type {Drawable, DrawContainer, MouseInteracting, MouseInterActingContainer} from "./interfaces.ts";
 import {World} from "./World.ts";
 import {Vector} from "./base.ts";
-import {rectPointIntersection} from "./utils.ts";
+import {drawDot, fillDot, rectPointIntersection} from "./utils.ts";
 
 export class HUD implements DrawContainer {
     private health: PlayerInfo;
@@ -27,46 +27,76 @@ export class HUD implements DrawContainer {
         this.controls.mouseUp(pos)
     }
 
+    mouseMove(pos: Vector) {
+        this.controls.mouseMove(pos)
+    }
+
 }
 
 export class Controls implements DrawContainer, MouseInterActingContainer {
 
     private world: World;
-    private buttons: RectButton[] = []
+    private centerPosition: Vector | undefined;
-    private lastHitButton: RectButton | undefined;
+    private keys: any;
+    private size: number;
 
     constructor(world: World, keys: any) {
         this.world = world;
-        let gapSize = 10;
+        this.keys = keys;
-        this.buttons = [
+        this.size = 50;
-            new KeyboardButton(new Vector(this.world.size.x - 150, this.world.size.y - 150 - gapSize), new Vector(50, 50), 'W', keys),
-            new KeyboardButton(new Vector(this.world.size.x - 150, this.world.size.y - 100), new Vector(50, 50), 'S', keys),
-            new KeyboardButton(new Vector(this.world.size.x - 100 + gapSize, this.world.size.y - 100), new Vector(50, 50), 'D', keys),
-            new KeyboardButton(new Vector(this.world.size.x - 200 - gapSize, this.world.size.y - 100), new Vector(50, 50), 'A', keys)
-        ]
     }
 
     draw(ctx: CanvasRenderingContext2D) {
-        this.buttons.forEach(button => {
+        if(this.isPressed()) {
-            button.draw(ctx)
+            drawDot(this.centerPosition!, this.size, 'white', ctx)
-        })
-    }
-
-    mouseDown(pos: Vector) {
-        this.lastHitButton = undefined;
-        for (const button of this.buttons) {
-            if(button.hit(pos)) {
-                button.clickAction(pos)
-                this.lastHitButton = button;
-                return
-            }
         }
     }
 
+    isPressed() {
+        return this.centerPosition !== undefined;
+    }
+
+    mouseDown(pos: Vector) {
+        this.centerPosition = pos
+    }
+
     mouseUp(pos: Vector) {
-       if(this.lastHitButton) {
+        this.centerPosition = undefined;
-           this.lastHitButton.releaseAction(pos)
+        let keys = ['a', 's', 'd', 'w']
-       }
+        keys.forEach(key => {
+            this.keys[key].state = false;
+            this.keys[key].intensity = 0;
+        })
+        this.keys['a'].state = false
+    }
+
+    setKeyTo(key: string, state: boolean, value: number) {
+        this.keys[key].state = state;
+        this.keys[key].intensity = value;
+    }
+
+    mouseMove(pos: Vector) {
+        if(this.isPressed()) {
+            let diff = Vector.createVector(pos, this.centerPosition!);
+            if(diff.vecLength() > this.size && !isNaN(diff.x) && !isNaN(diff.y)) {
+                return;
+            }
+            diff = diff.normalize();
+            if(diff.x > 0) {
+                this.setKeyTo('a', false, 0)
+                this.setKeyTo('d', true, Math.abs(diff.x))
+            } else if(diff.x < 0){
+                this.setKeyTo('d', false, 0)
+                this.setKeyTo('a', true, Math.abs(diff.x))
+            }
+            if(diff.y > 0) {
+                this.setKeyTo('w', false, 0)
+                this.setKeyTo('s', true, Math.abs(diff.y))
+            } else if(diff.y < 0) {
+                this.setKeyTo('s', false, 0)
+                this.setKeyTo('w', true, Math.abs(diff.y))
+            }
+        }
     }
 
 }

absurd-survivors/src/utils.ts

@@ -1,12 +1,19 @@
 import {Vector} from "./base.ts";
 
-export function drawDot(position: Vector, size: number, color: string, ctx: CanvasRenderingContext2D) {
+export function fillDot(position: Vector, size: number, color: string, ctx: CanvasRenderingContext2D) {
     ctx.beginPath();
     ctx.fillStyle = color;
     ctx.arc(position.x, position.y, size, 0, 2 * Math.PI);
     ctx.fill();
 }
 
+export function drawDot(position: Vector, size: number, color: string, ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.arc(position.x, position.y, size, 0, 2 * Math.PI);
+    ctx.stroke();
+}
+
 export function moveInDirectionOf(position: Vector, target: Vector, speedFactor: number): Vector {
     let playerVector = Vector.createVector(target, position);
     let direction = playerVector.normalize()

absurd-survivors/src/weapons.ts

@@ -1,5 +1,5 @@
 import type {Weapon} from "./interfaces.ts";
-import {drawDot, toRad} from "./utils.ts";
+import {fillDot, toRad} from "./utils.ts";
 import {Player} from "./Player.ts";
 import {
     HomingProjectile,
@@ -191,7 +191,7 @@ export class ChainBall extends MeleeWeapon {
 export class HomingPistol extends RangeWeapon {
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this.getPosition(), 1, this.color, ctx)
+        fillDot(this.getPosition(), 1, this.color, ctx)
     }
 
     createProjectile(): boolean {
@@ -230,7 +230,7 @@ export class HomingPistol extends RangeWeapon {
 export class Pistol extends RangeWeapon {
 
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this.getPosition(), 1, this.color, ctx)
+        fillDot(this.getPosition(), 1, this.color, ctx)
     }
 
     private createProjectile(): boolean {
@@ -268,7 +268,7 @@ export class Pistol extends RangeWeapon {
 
 export class SpreadWeapon extends RangeWeapon {
     draw(ctx: CanvasRenderingContext2D) {
-        drawDot(this.getPosition(), 1, this.color, ctx)
+        fillDot(this.getPosition(), 1, this.color, ctx)
     }
 
     private createProjectile(): boolean {