// SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
// For more information, please refer to <https://unlicense.org/>
// SPDX-License-Identifier: Unlicense

var w = 40;
var h = 40;

Actor = function() {
    this.init = function(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.destX = undefined;
        this.destY = undefined;
        this.progress = undefined;
        this.state = 'rest';
        return this;
    };

    this.draw = function(ctx) {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        var x = this.x * w + (w / 2);
        var y = this.y * h + (h / 2);
        if (this.progress !== undefined) {
            x += (this.progress / 100) * ((this.destX - this.x) * w);
            y += (this.progress / 100) * ((this.destY - this.y) * h);
        }
        ctx.arc(x, y, w/2, 0, 2 * Math.PI, false);
        ctx.fill();
    };

    this.setStateMoving = function(dx, dy) {
        if (this.state === 'rest') {
            this.destX = this.x + dx;
            this.destY = this.y + dy;
            this.progress = 0;
            this.state = 'moving';
        }
    };

    this.move = function() {
        if (this.state === 'moving') {
            this.progress += 10;
            if (this.progress >= 100) {
                this.x = this.destX;
                this.y = this.destY;
                this.destX = this.destY = this.progress = undefined;
                this.state = 'rest';
            }
        }
    };
};

Joystick = function() {
    this.init = function() {
        this.dx = 0;
        this.dy = 0;
        this.fire = 0;
    };

    this.attach = function(element) {
        var self = this;
        element.addEventListener('keydown', function(e) {
          switch (e.keyCode) {
            case 38:  /* Up arrow */
              self.dy = -1;
              e.cancelBubble = true;
              break;
            case 40:  /* Down arrow */
              self.dy = 1;
              break;
            case 37:  /* Left arrow */
              self.dx = -1;
              break;
            case 39:  /* Right arrow */
              self.dx = 1;
              break;
          }
        }, true);
        element.addEventListener('keyup', function(e) {
          switch (e.keyCode) {
            case 38:  /* Up arrow */
              self.dy = 0;
              e.cancelBubble = true;
              break;
            case 40:  /* Down arrow */
              self.dy = 0;
              e.cancelBubble = true;
              break;
            case 37:  /* Left arrow */
              self.dx = 0;
              e.cancelBubble = true;
              break;
            case 39:  /* Right arrow */
              self.dx = 0;
              e.cancelBubble = true;
              break;
          }
        }, true);
    };
};

SlideARound = function() {
    var actors;
    var canvas;
    var ctx;
    var intervalId;
    var counter = 0;
    var joystick;

    this.draw = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        document.getElementById('status').innerHTML = joystick.dx + "," + joystick.dy;
        actors[0].setStateMoving(joystick.dx, joystick.dy);

        for (var i = 0; i < actors.length; i++) {
            actors[i].draw(ctx);
            actors[i].move();
        }
    }

    this.start = function(c) {
        actors = [];
        actors.push(new Actor().init(3, 4, "red"));
        actors.push(new Actor().init(2, 2, "blue"));

        canvas = c;
        ctx = canvas.getContext('2d');

        joystick = new Joystick();
        joystick.init();
        joystick.attach(canvas);

        intervalId = setInterval(this.draw, 1000.0/60.0);
    }
}