Skip to content

Commit

Permalink
Remove P5 from code
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesroutley
jamesroutley committed Sep 4, 2020
1 parent 15b862e commit de19c41
Show file tree
Hide file tree
Showing 20 changed files with 654 additions and 962 deletions.
19 changes: 0 additions & 19 deletions build/engine.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,19 +128,6 @@ declare class CanvasRenderer {
private _getCSSColor;
setText(text: string): void;
}
declare class P5Renderer {
private _gridHeight;
private _gridWidth;
private _text;
private _dots;
private _dotSize;
private _gapSize;
constructor(gridHeight: number, gridWidth: number, containerId?: string);
private _drawGrid;
private _getCSSColor;
setDot(x: number, y: number, val: Color): void;
setText(text: string): void;
}
/**
* Game is the object that controls the actual running of the game. You
* create a new one by passing in a {@Link GameConfig}. Calling `game.run()`
Expand Down Expand Up @@ -211,10 +198,4 @@ declare class Game {
private _update;
private _clearGrid;
private _render;
/**
* This function sets up listeners for keyboard and mouse input. We
* currently use P5 for this
* TODO: switch to native functions
*/
_listenForInput(): void;
}
169 changes: 0 additions & 169 deletions build/engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,115 +232,6 @@ var CanvasRenderer = /** @class */ (function () {
};
return CanvasRenderer;
}());
var P5Renderer = /** @class */ (function () {
function P5Renderer(gridHeight, gridWidth, containerId) {
this._gridHeight = 24;
this._gridWidth = 24;
this._text = "";
// Variables used when rendering the grid
this._dotSize = 16;
this._gapSize = 8;
this._gridHeight = gridHeight;
this._gridWidth = gridWidth;
// Initialise internal dot store
this._dots = new Array(this._gridHeight);
for (var y = 0; y < this._dots.length; y++) {
var row = new Array(this._gridWidth);
for (var i = 0; i < row.length; i++) {
row[i] = Color.Gray;
}
this._dots[y] = row;
}
// Start P5
// This implementation is inefficient because of P5's API - we're also
// running the P5 update loop alongside our internal update loop
var parentElement = undefined;
if (containerId) {
parentElement = document.getElementById(containerId) || undefined;
}
new p5(function (p) {
p.setup = function () {
var width = this._dotSize * this._gridWidth +
this._gapSize * (this._gridWidth - 1);
var height = this._dotSize * this._gridHeight +
this._gapSize * (this._gridHeight - 1) +
50;
p.createCanvas(width, height);
// Don't draw outlines around circles
p.noStroke();
// TODO: maybe we should just make this much greater than the 24a2
// frame rate to avoid stuttering issues?
p.frameRate(24);
}.bind(this);
p.draw = function () {
// Clear the drawing
p.clear();
// Draw the grid
this._drawGrid(p);
// Draw the text
p.push();
p.textFont("monospace");
p.textSize(18);
var textY = this._dotSize * this._gridHeight +
this._gapSize * (this._gridHeight - 1) +
32;
p.text(this._text, 0, textY);
p.pop();
}.bind(this);
}.bind(this), parentElement);
}
P5Renderer.prototype._drawGrid = function (p) {
var _this = this;
var offset = this._dotSize + this._gapSize;
p.push();
p.translate(this._dotSize / 2, this._dotSize / 2);
this._dots.forEach(function (row, y) {
row.forEach(function (dot, x) {
p.fill(p.color(_this._getCSSColor(dot)));
p.circle(x * offset, y * offset, _this._dotSize);
});
});
p.pop();
};
P5Renderer.prototype._getCSSColor = function (color) {
switch (color) {
case Color.Gray:
return "gainsboro";
case Color.Black:
return "black";
case Color.Red:
return "red";
case Color.Orange:
return "orange";
case Color.Yellow:
return "gold";
case Color.Green:
return "green";
case Color.Blue:
return "blue";
case Color.Indigo:
return "indigo";
case Color.Violet:
return "violet";
default:
console.error("no CSS color defined for " + color);
return "";
}
};
P5Renderer.prototype.setDot = function (x, y, val) {
if (y < 0 || y >= this._dots.length) {
throw new Error("P5Renderer: Error trying to set dot (" + x + ", " + y + "): y is out of bounds");
}
if (x < 0 || x >= this._dots[y].length) {
throw new Error("P5Renderer: Error trying to set dot (" + x + ", " + y + "): x is out of bounds");
}
this._dots[y][x] = val;
};
P5Renderer.prototype.setText = function (text) {
this._text = text;
};
return P5Renderer;
}());
/**
* Game is the object that controls the actual running of the game. You
* create a new one by passing in a {@Link GameConfig}. Calling `game.run()`
Expand Down Expand Up @@ -479,7 +370,6 @@ var Game = /** @class */ (function () {
var delay = 1000 / (this._config.frameRate || 24);
this._interval = window.setInterval(this._update.bind(this), delay);
// this._update.bind(this);
// this._listenForInput();
};
/**
* The internal function that's called on every frame.
Expand Down Expand Up @@ -524,64 +414,5 @@ var Game = /** @class */ (function () {
}
this._renderer.setText(this._text);
};
/**
* This function sets up listeners for keyboard and mouse input. We
* currently use P5 for this
* TODO: switch to native functions
*/
Game.prototype._listenForInput = function () {
new p5(function (p) {
p.keyPressed = function () {
if (!this._config.onKeyPress) {
// Return true to not prevent the browser's default behaviour for
// this keypress
return true;
}
// TODO: use WASD instead of arrow keys - they don't have a meaning
// in the browser
if (p.keyCode === p.LEFT_ARROW) {
this._config.onKeyPress(Direction.Left);
return false;
}
if (p.keyCode === p.RIGHT_ARROW) {
this._config.onKeyPress(Direction.Right);
return false;
}
if (p.keyCode === p.UP_ARROW) {
this._config.onKeyPress(Direction.Up);
return false;
}
if (p.keyCode === p.DOWN_ARROW) {
this._config.onKeyPress(Direction.Down);
return false;
}
return true;
}.bind(this);
p.mouseClicked = function () {
if (!this._config.onDotClicked) {
return;
}
var offset = this._dotSize + this._gapSize;
// Iterate over all dot locations, and check whether the distance
// between the click and the dot centre is less than the dot's
// radius
for (var y = 0; y < this._dots.length; y++) {
var row = this._dots[y];
for (var x = 0; x < row.length; x++) {
var dx = this._dotSize / 2 + x * offset;
var dy = this._dotSize / 2 + y * offset;
// p.mouseX and p.mouseY give is the coordinates in the canvas
// space.
var distance = p.dist(dx, dy, p.mouseX, p.mouseY);
if (distance < this._dotSize / 2) {
this._config.onDotClicked(x, y);
// We've found the dot, so exit early
return;
}
}
}
}.bind(this);
}.bind(this));
};
return Game;
}());
136 changes: 0 additions & 136 deletions build/src/engine.d.ts
View file

This file was deleted.

Loading

0 comments on commit de19c41

Please sign in to comment.