diff --git a/src/game/index.ts b/src/game/index.ts index 0207634..1c2b222 100644 --- a/src/game/index.ts +++ b/src/game/index.ts @@ -61,14 +61,6 @@ async function loop(fn) { then = Date.now(); await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); - // await new Promise(resolve => requestAnimationFrame(resolve)); } }; diff --git a/src/graphics/index.ts b/src/graphics/index.ts index 9dd66c6..c94278e 100644 --- a/src/graphics/index.ts +++ b/src/graphics/index.ts @@ -1,14 +1,17 @@ import * as gui from './gui'; import * as draw from './draw'; import * as input from '../input'; -import {render as renderWorld} from './world'; -import {render as renderBackground} from './background'; +import { render as renderWorld } from './world'; +import { render as renderBackground } from './background'; import * as world from '../world/index'; import * as consts from '../consts'; const TAU = consts.TAU; -export let canvas, context, tempCanvas, tempContext; +export let canvas: HTMLCanvasElement; +export let tempCanvas: HTMLCanvasElement; +export let context: CanvasRenderingContext2D; +export let tempContext: CanvasRenderingContext2D; export let perspective: Perspective; export let trace = true; export let markers = true; @@ -19,11 +22,17 @@ export function init() { tempCanvas = document.querySelector('#temp'); tempContext = tempCanvas.getContext('2d'); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; - canvas.style.width = canvas.width + 'px'; - canvas.style.height = canvas.height + 'px'; + canvas.style.width = window.innerWidth + 'px'; + canvas.style.height = window.innerHeight + 'px'; + } + + resizeCanvas(); + + window.addEventListener('resize', resizeCanvas); perspective = new Perspective(); @@ -147,7 +156,7 @@ class Perspective { get currentShift() { let [ox, oy] = this.oldShift; return [this.interpolate(this.shiftX, ox), - this.interpolate(this.shiftY, oy)]; + this.interpolate(this.shiftY, oy)]; } get currentRotation() { @@ -172,6 +181,8 @@ class Perspective { } tick(delta: number) { + this.bounds = [0, 0, canvas.width, canvas.height]; + if (this.focus !== null) [this.x, this.y] = this.focus.com; @@ -219,7 +230,7 @@ class Perspective { } transformRotate() { - let [,,bw, bh] = this.bounds; + let [, , bw, bh] = this.bounds; context.translate(bw / 2, bh / 2); context.rotate(-this.rotation); context.translate(-bw / 2, -bh / 2); @@ -227,11 +238,11 @@ class Perspective { rotateVector(x, y, r = this.rotation) { return [(x * Math.cos(r) - y * Math.sin(r)), - (y * Math.cos(r) - x * Math.sin(r))]; + (y * Math.cos(r) - x * Math.sin(r))]; } transformCanvas() { - let [,,bw, bh] = this.bounds; + let [, , bw, bh] = this.bounds; let [sx, sy] = this.rotateVector(...this.currentShift, this.rotation); let tx = -(this.x + sx) * this.zoom; let ty = -(this.y + sy) * this.zoom; diff --git a/src/gui/element.ts b/src/gui/element.ts index 4ed4301..8f5b110 100644 --- a/src/gui/element.ts +++ b/src/gui/element.ts @@ -1,4 +1,4 @@ -import {Rect} from './misc'; +import { Rect } from './misc'; const defaultOptions = { draw: true, // Whether the element itself will be rendered. @@ -6,14 +6,17 @@ const defaultOptions = { } export default class GuiElement extends Rect { - constructor(x, y, w, h, options = {}) { - super(x, y, w, h); + children: Set; + parent: GuiElement; + + constructor(x, y, width, height, options = {}) { + super(x, y, width, height); this.children = new Set(); this.parent = null; this.type = 'element'; - this.options = Object.assign({}, defaultOptions, options); + this.options = { ...defaultOptions, ...options }; } tickElement() { @@ -45,14 +48,14 @@ export default class GuiElement extends Rect { // Code should be self-describing, comments are for fucking about. // - Albert Einstein - posRelative({x = null, xc = 0, y = null, yc = 0, w = null, h = null}) { + posRelative({ x = null, xc = 0, y = null, yc = 0, w = null, h = null }) { if (x !== null) - this.x = (this.parent.w * x) - (this.w * xc) + this.parent.x; + this.sourceX = () => (this.parent.w * x) - (this.w * xc) + this.parent.x; if (y !== null) - this.y = (this.parent.h * y) - (this.h * yc) + this.parent.y; + this.sourceY = () => (this.parent.h * y) - (this.h * yc) + this.parent.y; if (w !== null) - this.w = this.parent.w * w; + this.sourceWidth = () => this.parent.w * w; if (h !== null) - this.h = this.parent.h * h; + this.sourceHeight = () => this.parent.h * h; } } diff --git a/src/gui/frame.ts b/src/gui/frame.ts index 1a86f29..7feac67 100644 --- a/src/gui/frame.ts +++ b/src/gui/frame.ts @@ -2,8 +2,8 @@ import * as gui from './index'; import GuiElement from './element'; export default class GuiFrame extends GuiElement { - constructor(x, y, w, h, options) { - super(x, y, w, h, options); + constructor(x, y, width, height, options) { + super(x, y, width, height, options); this.type = 'frame'; } } diff --git a/src/gui/index.ts b/src/gui/index.ts index 21beec8..85c41a9 100644 --- a/src/gui/index.ts +++ b/src/gui/index.ts @@ -1,8 +1,9 @@ import {context} from '../graphics/index'; +import GuiElement from './element'; import * as modules from './modules'; export const elements = new Set(); -export let root; +export let root: GuiElement; export function init() { elements.clear(); diff --git a/src/gui/misc.ts b/src/gui/misc.ts index fe62040..88af7b2 100644 --- a/src/gui/misc.ts +++ b/src/gui/misc.ts @@ -1,11 +1,16 @@ import * as input from '../input'; export class Rect { - constructor(x = 0, y = 0, w = 0, h = 0) { + sourceWidth: number | (() => number); + sourceHeight: number | (() => number); + sourceX: number | (() => number); + sourceY: number | (() => number); + + constructor(x = 0, y = 0, width = 0, height = 0) { this.x = x; this.y = y; - this.w = w; - this.h = h; + this.sourceWidth = width; + this.sourceHeight = height; this.onclick = null; this.mouseHeld = false; @@ -55,6 +60,54 @@ export class Rect { return this.mouseOver() && input.mouse.pressed[0]; } + get w() { + if (typeof this.sourceWidth == 'function') { + return this.sourceWidth(); + } else { + return this.sourceWidth; + } + } + + get h() { + if (typeof this.sourceHeight == 'function') { + return this.sourceHeight(); + } else { + return this.sourceHeight; + } + } + + set w(w) { + this.sourceWidth = w; + } + + set h(h) { + this.sourceHeight = h; + } + + get x() { + if (typeof this.sourceX == 'function') { + return this.sourceX(); + } else { + return this.sourceX; + } + } + + get y() { + if (typeof this.sourceY == 'function') { + return this.sourceY(); + } else { + return this.sourceY; + } + } + + set x(x) { + this.sourceX = x; + } + + set y(y) { + this.sourceY = y; + } + containsPoint(x, y) { return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.h; diff --git a/src/gui/modules.ts b/src/gui/modules.ts index e45f025..03bfe4e 100644 --- a/src/gui/modules.ts +++ b/src/gui/modules.ts @@ -14,8 +14,9 @@ import {state} from '../game/index'; import * as world from '../world/index'; export function root() { - return new GuiFrame(0, 0, canvas.width, canvas.height, { - draw: false + return new GuiFrame(0, 0, () => canvas.width, () => canvas.height, { + draw: false, + name: 'root', }); }