diff --git a/dist/img/logo2.svg b/dist/img/logo2.svg new file mode 100644 index 0000000..c24588a --- /dev/null +++ b/dist/img/logo2.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + Improcket + + diff --git a/js/assets.mjs b/js/assets.mjs index d84a1b7..2d4731f 100644 --- a/js/assets.mjs +++ b/js/assets.mjs @@ -1,6 +1,7 @@ export const images = { title: { - logo: 'logo.png' + logo: 'logo.png', + logoSvg: 'logo2.svg' } }; diff --git a/js/game/events.mjs b/js/game/events.mjs new file mode 100644 index 0000000..0ac2b52 --- /dev/null +++ b/js/game/events.mjs @@ -0,0 +1,5 @@ +import * as game from './index.mjs'; + +export function startGame() { + console.log('started'); +} diff --git a/js/game.mjs b/js/game/index.mjs similarity index 54% rename from js/game.mjs rename to js/game/index.mjs index 9fa7cf9..df96860 100644 --- a/js/game.mjs +++ b/js/game/index.mjs @@ -1,6 +1,7 @@ -import * as graphics from './graphics/index.mjs'; -import * as gui from './gui/index.mjs'; -import * as assets from './assets.mjs'; +import * as graphics from '../graphics/index.mjs'; +import * as gui from '../gui/index.mjs'; +import * as assets from '../assets.mjs'; +import * as input from '../input.mjs'; export let game; @@ -15,14 +16,17 @@ export async function init() { graphics.init(); await assets.init(); gui.init(); + input.init(); // Recursive `requestAnimationFrame` can cause problems with Parcel. while(true) { await tick(); - await new Promise(res => requestAnimationFrame(()=>{})); + await new Promise(res => requestAnimationFrame(res)); } } async function tick() { + gui.tick(); graphics.render(); + input.tick(); } diff --git a/js/graphics/gui.mjs b/js/graphics/gui.mjs index 9311133..a877fd2 100644 --- a/js/graphics/gui.mjs +++ b/js/graphics/gui.mjs @@ -26,7 +26,12 @@ function renderImage(element) { } function renderButton(element) { - context.fillStyle = '#983'; + if (element.mouseHeld) { + context.fillStyle = '#706244'; + } else { + context.fillStyle = element.mouseOver ? '#ad9869' : '#917f58'; + } + context.fillRect(...element.shape); context.strokeStyle = '#541'; context.strokeWidth = 4; diff --git a/js/graphics/index.mjs b/js/graphics/index.mjs index e854989..73200de 100644 --- a/js/graphics/index.mjs +++ b/js/graphics/index.mjs @@ -1,4 +1,4 @@ -import {game} from '../game.mjs'; +import {game} from '../game/index.mjs'; import {getContainedSectors} from '../world/index.mjs'; import * as background from './background.mjs'; import * as gui from './gui.mjs'; diff --git a/js/gui/element.mjs b/js/gui/element.mjs index 4c5f4fa..17aa69e 100644 --- a/js/gui/element.mjs +++ b/js/gui/element.mjs @@ -1,13 +1,12 @@ +import {Rect} from './misc.mjs'; + const defaultOptions = { draw: true // Whether the element itself will be rendered. } -export default class GuiElement { +export default class GuiElement extends Rect { constructor(x, y, w, h, options = {}) { - this.x = x; - this.y = y; - this.w = w; - this.h = h; + super(x, y, w, h); this.children = new Set(); this.parent = null; @@ -16,6 +15,11 @@ export default class GuiElement { this.options = Object.assign({}, defaultOptions, options); } + tick() { + this.tickMouse(); + this.children.forEach(c => c.tick()); + } + append(element) { this.children.add(element); element.parent = this; @@ -24,14 +28,8 @@ export default class GuiElement { clear() { this.children.clear(); } - - get shape() { - return [this.x, this.y, this.w, this.h]; - } - - get center() { - return [this.x + this.w / 2, this.y + this.h / 2]; - } + // 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}) { if (x !== null) { diff --git a/js/gui/index.mjs b/js/gui/index.mjs index 86865b3..a2e8735 100644 --- a/js/gui/index.mjs +++ b/js/gui/index.mjs @@ -10,6 +10,10 @@ export function init() { changeView('title'); } +export function tick() { + root.tick(); +} + export function changeView(view) { root.clear(); diff --git a/js/gui/misc.mjs b/js/gui/misc.mjs index e69de29..69bb215 100644 --- a/js/gui/misc.mjs +++ b/js/gui/misc.mjs @@ -0,0 +1,44 @@ +import * as input from '../input.mjs'; + +export class Rect { + constructor(x = 0, y = 0, w = 0, h = 0) { + this.x = x; + this.y = y; + this.w = w; + this.h = h; + + this.onclick = null; + this.mouseHeld = false; + } + + tickMouse() { + if (this.mouseHeld == true && !input.mouse.held[0] && this.mouseOver) + if (this.onclick !== null) + this.onclick(); + if (!this.mouseHeld && input.mouse.pressed[0] && this.mouseOver) + this.mouseHeld = true; + if (!input.mouse.held[0]) + this.mouseHeld = false; + } + + get shape() { + return [this.x, this.y, this.w, this.h]; + } + + get center() { + return [this.x + this.w / 2, this.y + this.h / 2]; + } + + get mouseOver() { + return this.containsPoint(input.mouse.x, input.mouse.y); + } + + get mouseClicked() { + return this.mouseOver() && input.mouse.pressed[0]; + } + + containsPoint(x, y) { + return x > this.x && x < this.x + this.w + && y > this.y && y < this.y + this.h; + } +} diff --git a/js/gui/modules.mjs b/js/gui/modules.mjs index 8c4bd66..64078da 100644 --- a/js/gui/modules.mjs +++ b/js/gui/modules.mjs @@ -4,6 +4,7 @@ import {canvas} from '../graphics/index.mjs'; import GuiFrame from './frame.mjs'; import GuiImage from './image.mjs'; import GuiButton from './button.mjs'; +import * as events from '../game/events.mjs'; export function root() { return new GuiFrame(0, 0, canvas.width, canvas.height, { @@ -19,8 +20,8 @@ export function title() { logo.posRelative({ x: 0.5, xc: 0.5, y: 0.2 }); // TODO: Implement call to change view to game. - let startFunction = () => {}; - let start = new GuiButton('Start game', startFunction, 0, 0, 200); + let startFunction = events.startGame; + let start = new GuiButton('Start game', events.startGame, 0, 0, 200); shadow.append(start); start.posRelative({ x: 0.5, xc: 0.5, y: 0.7 }); diff --git a/js/index.mjs b/js/index.mjs index 1f2dc8a..2bcb70c 100644 --- a/js/index.mjs +++ b/js/index.mjs @@ -1,3 +1,3 @@ -import { init } from './game.mjs'; +import { init } from './game/index.mjs'; window.addEventListener('load', init); diff --git a/js/input.mjs b/js/input.mjs new file mode 100644 index 0000000..d76bfe8 --- /dev/null +++ b/js/input.mjs @@ -0,0 +1,46 @@ +import {canvas} from './graphics/index.mjs'; + +export const mouse = { pressed: {}, held: {}, x: 0, y: 0 }; +export const keyCode = { pressed: {}, held: {} }; +export const key = { pressed: {}, held: {} }; +export const action = {}; + +const mapping = {}; + +export function tick() { + mouse.pressed = {}; + keyCode.pressed = {}; + key.pressed = {}; +} + +export function init() { + window.addEventListener('keydown', event => { + keyCode.pressed[event.code] = !keyCode.held[event.code]; + keyCode.held[event.code] = true; + key.pressed[event.key] = !keyCode.held[event.key]; + key.held[event.key] = true; + }); + + window.addEventListener('keyup', event => { + keyCode.pressed[event.code] = false; + keyCode.held[event.code] = false; + key.pressed[event.key] = false; + key.held[event.key] = false; + }); + // Ṕ͕͖ẖ̨’̖̺͓̪̹n̼͇͔̯̝̖g̙̩̭͕ͅͅl̻̰͘u͎̥͍̗ͅi̼̞̪̩͚̜͖ ̫̝̻͚͟m͎̳̙̭̩̩̕g̟̤̬̮l̫̕w̶͚͈͚̟͔’͖n͏̝͖̞̺ͅa͏̹͓̬̺f̗̬̬̬̖̫͜h͙̘̝̱̬̗͜ ̼͎͖C̱͔̱͖ṭ̬̱͖h̵̰̼̘̩ùlh̙́u̪̫ ̪̺̹̙̯R̞͓̹̞’͍͎͉͎̦͙ͅl͇̠̮y̙̪̰̪͙̖e̢̩͉͙̼h̗͔̹̳ ̶w̨̼͍̝̭̣̣ͅg̶̳̦̳a̴͉̹͙̭̟ͅh͈͎̞̜͉́’̼̜̠͞n̲a̯g̮͚͓̝l̠ ̹̹̱͙̝f̧̝͖̱h̪̟̻͖̖t͎͘aͅg̤̘͜n̶͈̻̻̝̳ + window.addEventListener('mousedown', event => { + mouse.pressed[event.button] = !mouse.held[event.button]; + mouse.held[event.button] = true; + }); + + window.addEventListener('mouseup', event => { + mouse.pressed[event.button] = false; + mouse.held[event.button] = false; + }); + + window.addEventListener('mousemove', event => { + let rect = canvas.getBoundingClientRect(); + mouse.x = event.clientX - rect.left; + mouse.y = event.clientY - rect.top; + }); +}