diff --git a/.gitignore b/.gitignore
index c98b99c..7a15733 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
.cache/
-dist/
+*.min.js
diff --git a/README.md b/README.md
index 16efc9f..89d1347 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,9 @@
# Improcket
A little 2D space rocket game. Not done tho.
+
+### Building
+
+Install `rollup` and run `./rollup`.
+
+Host `dist/` on some static HTTP server.
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..aa4dd6d
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/dist/styles.css
similarity index 100%
rename from styles.css
rename to dist/styles.css
diff --git a/index.html b/index.html
index 9a91d54..8ad5c42 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
-
+
diff --git a/js/game.mjs b/js/game.mjs
index 979a673..8acdef2 100644
--- a/js/game.mjs
+++ b/js/game.mjs
@@ -1,8 +1,9 @@
import * as graphics from './graphics/index.mjs';
+import * as gui from './gui/index.mjs';
export let game;
-export function init() {
+export async function init() {
game = {
state: {
room: 'menu',
@@ -11,11 +12,15 @@ export function init() {
};
graphics.init();
+ gui.init();
- tick();
+ // Recursive `requestAnimationFrame` can cause problems with Parcel.
+ while(true) {
+ await tick();
+ await new Promise(res => requestAnimationFrame(res));
+ }
}
-function tick() {
+async function tick() {
graphics.render();
- requestAnimationFrame(tick);
}
diff --git a/js/graphics/gui.mjs b/js/graphics/gui.mjs
index e69de29..1b02a26 100644
--- a/js/graphics/gui.mjs
+++ b/js/graphics/gui.mjs
@@ -0,0 +1,10 @@
+import * as gui from '../gui/index.mjs';
+
+export function render() {
+
+}
+
+export function renderFrame(frame) {
+ context.fillStyle = '#eb9';
+ context.fillRect(frame.x, frame.y, frame.w, frame.h);
+}
diff --git a/js/graphics/index.mjs b/js/graphics/index.mjs
index 7cc470d..5d1e9bb 100644
--- a/js/graphics/index.mjs
+++ b/js/graphics/index.mjs
@@ -1,6 +1,7 @@
import {game} from '../game.mjs';
import {getContainedSectors} from '../world/index.mjs';
import * as background from './background.mjs';
+import * as gui from './gui.mjs';
export let canvas, context, tempCanvas, tempContext;
export let view;
@@ -32,6 +33,8 @@ export function render() {
background.render();
context.restore();
+
+ gui.render();
}
export function getVisibleSectors() {
diff --git a/js/gui/button.mjs b/js/gui/button.mjs
new file mode 100644
index 0000000..6f5ed43
--- /dev/null
+++ b/js/gui/button.mjs
@@ -0,0 +1,8 @@
+import * as gui from './index.mjs';
+
+export class GuiButton extends gui.GuiElement {
+ constructor(x, y, text, onclick) {
+ let textSize = gui.measureText(text, 'Arial 14pt');
+ super(x, y, ...textSize);
+ }
+}
diff --git a/js/gui/element.mjs b/js/gui/element.mjs
new file mode 100644
index 0000000..ba13b2a
--- /dev/null
+++ b/js/gui/element.mjs
@@ -0,0 +1,25 @@
+const defaultOptions = {
+ draw: true // Whether the element itself will be rendered.
+}
+
+export default class GuiElement {
+ constructor(x, y, w, h, options) {
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ this.children = new Set();
+ this.parent = null;
+
+ this.options = Object.assign(options, defaultOptions);
+ }
+
+ append(element) {
+ this.children.add(element);
+ element.parent = this;
+ }
+
+ clear() {
+ this.children.clear();
+ }
+}
diff --git a/js/gui/frame.mjs b/js/gui/frame.mjs
new file mode 100644
index 0000000..484933e
--- /dev/null
+++ b/js/gui/frame.mjs
@@ -0,0 +1,8 @@
+import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
+
+export default class GuiFrame extends GuiElement {
+ constructor(x, y, w, h, options) {
+ super(x, y, w, h, options);
+ }
+}
diff --git a/js/gui/index.mjs b/js/gui/index.mjs
new file mode 100644
index 0000000..5ec1b48
--- /dev/null
+++ b/js/gui/index.mjs
@@ -0,0 +1,17 @@
+import {context} from '../graphics/index.mjs';
+import * as modules from './modules.mjs';
+
+export const elements = new Set();
+export let root;
+
+export function init() {
+ elements.clear();
+ root = modules.root();
+ console.log(root);
+}
+
+export function measureText(msg, font) {
+ context.font = font;
+ let measurement = context.measureText(msg);
+ return [measurement.width, measurement.height];
+}
diff --git a/js/gui/misc.mjs b/js/gui/misc.mjs
new file mode 100644
index 0000000..9fd83a3
--- /dev/null
+++ b/js/gui/misc.mjs
@@ -0,0 +1,11 @@
+import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
+
+export class GuiImage extends gui.GuiElement {
+ constructor(src, x, y, w, h) {
+ w = w || src.width;
+ h = h || src.height;
+ super(x, y, w, h);
+ this.image = src;
+ }
+}
diff --git a/js/gui/modules.mjs b/js/gui/modules.mjs
new file mode 100644
index 0000000..195b543
--- /dev/null
+++ b/js/gui/modules.mjs
@@ -0,0 +1,13 @@
+import * as gui from './index.mjs';
+import {canvas} from '../graphics/index.mjs';
+import GuiFrame from './frame.mjs';
+
+export function root() {
+ return new GuiFrame(0, 0, canvas.width, canvas.height, {
+ draw: false
+ });
+}
+
+export function titleScreen() {
+
+}
diff --git a/js/world/index.mjs b/js/world/index.mjs
index 344816f..d19aabe 100644
--- a/js/world/index.mjs
+++ b/js/world/index.mjs
@@ -1,3 +1,3 @@
import * as sector from './sector.mjs';
-export {sectorFromPoint, getContainedSectors} from './sector.mjs';
+export {getSectorFromWorld, getContainedSectors} from './sector.mjs';
diff --git a/rollup b/rollup
new file mode 100755
index 0000000..9333891
--- /dev/null
+++ b/rollup
@@ -0,0 +1,2 @@
+#!/bin/bash
+rollup js/index.mjs --o dist/improcket.min.js --f es --watch