diff --git a/index.html b/index.html
deleted file mode 100644
index 8ad5c42..0000000
--- a/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/js/assets.mjs b/js/assets.mjs
index e69de29..d84a1b7 100644
--- a/js/assets.mjs
+++ b/js/assets.mjs
@@ -0,0 +1,28 @@
+export const images = {
+ title: {
+ logo: 'logo.png'
+ }
+};
+
+export const audio = {};
+
+export async function init() {
+ let parse = (obj, convert) => Object.entries(obj).forEach(([k, v]) => {
+ typeof v == 'object' ? parse(v, convert) : obj[k] = convert(v);
+ });
+
+ let promises = [];
+ parse(images, str => {
+ let img = new Image();
+ img.src = 'img/' + str;
+ promises.push(new Promise((res, rej) => {
+ img.addEventListener('load', res);
+ }));
+ return img;
+ });
+ parse(audio, str => {
+ // TODO: Load audio.
+ });
+
+ await Promise.all(promises);
+}
diff --git a/js/game.mjs b/js/game.mjs
index 8acdef2..9fa7cf9 100644
--- a/js/game.mjs
+++ b/js/game.mjs
@@ -1,5 +1,6 @@
import * as graphics from './graphics/index.mjs';
import * as gui from './gui/index.mjs';
+import * as assets from './assets.mjs';
export let game;
@@ -12,12 +13,13 @@ export async function init() {
};
graphics.init();
+ await assets.init();
gui.init();
// Recursive `requestAnimationFrame` can cause problems with Parcel.
while(true) {
await tick();
- await new Promise(res => requestAnimationFrame(res));
+ await new Promise(res => requestAnimationFrame(()=>{}));
}
}
diff --git a/js/graphics/draw.mjs b/js/graphics/draw.mjs
new file mode 100644
index 0000000..1602930
--- /dev/null
+++ b/js/graphics/draw.mjs
@@ -0,0 +1,10 @@
+import {canvas, context} from './index.mjs';
+
+export function text(string, x, y,
+ {font = '52pt Arial', align = 'left', valign = 'top'}) {
+ context.textAlign = align;
+ context.textBaseline = valign;
+ context.font = font;
+
+ context.fillText(string, x, y);
+}
diff --git a/js/graphics/gui.mjs b/js/graphics/gui.mjs
index 1b02a26..2eb9976 100644
--- a/js/graphics/gui.mjs
+++ b/js/graphics/gui.mjs
@@ -1,10 +1,24 @@
+import {canvas, context} from './index.mjs';
import * as gui from '../gui/index.mjs';
export function render() {
-
+ renderElement(gui.root);
}
-export function renderFrame(frame) {
- context.fillStyle = '#eb9';
- context.fillRect(frame.x, frame.y, frame.w, frame.h);
+function renderElement(element) {
+ //console.log(element.options);
+ if (element.options.draw) {
+ if (element.type == 'frame') renderFrame(element);
+ if (element.type == 'image') renderImage(element);
+ }
+ element.children.forEach(renderElement);
+}
+
+function renderFrame(element) {
+ context.fillStyle = '#eb9';
+ context.fillRect(...element.shape);
+}
+
+function renderImage(element) {
+ context.drawImage(element.image, ...element.shape);
}
diff --git a/js/graphics/index.mjs b/js/graphics/index.mjs
index 5d1e9bb..e854989 100644
--- a/js/graphics/index.mjs
+++ b/js/graphics/index.mjs
@@ -2,6 +2,7 @@ import {game} from '../game.mjs';
import {getContainedSectors} from '../world/index.mjs';
import * as background from './background.mjs';
import * as gui from './gui.mjs';
+import * as draw from './draw.mjs';
export let canvas, context, tempCanvas, tempContext;
export let view;
@@ -21,10 +22,14 @@ export function init() {
y: 0,
zoom: 1
}
+
+ draw.text('Loading...', canvas.width / 2, canvas.height / 2,
+ { align: 'center', valign: 'middle' });
}
export function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
+ context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
context.save();
diff --git a/js/gui/button.mjs b/js/gui/button.mjs
index 6f5ed43..ce99954 100644
--- a/js/gui/button.mjs
+++ b/js/gui/button.mjs
@@ -4,5 +4,6 @@ export class GuiButton extends gui.GuiElement {
constructor(x, y, text, onclick) {
let textSize = gui.measureText(text, 'Arial 14pt');
super(x, y, ...textSize);
+ this.type = 'button';
}
}
diff --git a/js/gui/element.mjs b/js/gui/element.mjs
index ba13b2a..b6e62cd 100644
--- a/js/gui/element.mjs
+++ b/js/gui/element.mjs
@@ -3,7 +3,7 @@ const defaultOptions = {
}
export default class GuiElement {
- constructor(x, y, w, h, options) {
+ constructor(x, y, w, h, options = {}) {
this.x = x;
this.y = y;
this.w = w;
@@ -11,7 +11,9 @@ export default class GuiElement {
this.children = new Set();
this.parent = null;
- this.options = Object.assign(options, defaultOptions);
+ this.type = 'element';
+
+ this.options = Object.assign({}, defaultOptions, options);
}
append(element) {
@@ -22,4 +24,20 @@ export default class GuiElement {
clear() {
this.children.clear();
}
+
+ get shape() {
+ return [this.x, this.y, this.w, this.h];
+ }
+
+ 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);
+ }
+ if (y !== null)
+ this.y = (this.parent.h * y) - (this.h * yc);
+ if (w !== null)
+ this.w = this.parent.w * w;
+ if (h !== null)
+ this.h = this.parent.h * h;
+ }
}
diff --git a/js/gui/frame.mjs b/js/gui/frame.mjs
index 484933e..5fac4ce 100644
--- a/js/gui/frame.mjs
+++ b/js/gui/frame.mjs
@@ -4,5 +4,6 @@ import GuiElement from './element.mjs';
export default class GuiFrame extends GuiElement {
constructor(x, y, w, h, options) {
super(x, y, w, h, options);
+ this.type = 'frame';
}
}
diff --git a/js/gui/image.mjs b/js/gui/image.mjs
new file mode 100644
index 0000000..7f67a80
--- /dev/null
+++ b/js/gui/image.mjs
@@ -0,0 +1,26 @@
+import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
+
+export class GuiImage extends GuiElement {
+ constructor(src, x, y, w, h) {
+ w = w || src.width;
+ h = h || src.height;
+ super(x, y, w, h);
+ this.type = 'image';
+ this.image = src;
+ this.imgRatio = src.width / src.height;
+ }
+
+ scaleImage({ w = null, h = null }) {
+ if (w !== null && h === null) {
+ this.w = w;
+ this.h = w / this.imgRatio;
+ } else if (h !== null && w === null) {
+ this.h = h;
+ this.w = h / this.imgRatio;
+ } else if ( h !== null && w !== null) {
+ this.w = w;
+ this.h = h;
+ }
+ }
+}
diff --git a/js/gui/index.mjs b/js/gui/index.mjs
index 5ec1b48..86865b3 100644
--- a/js/gui/index.mjs
+++ b/js/gui/index.mjs
@@ -7,7 +7,15 @@ export let root;
export function init() {
elements.clear();
root = modules.root();
- console.log(root);
+ changeView('title');
+}
+
+export function changeView(view) {
+ root.clear();
+
+ if (view == 'title') {
+ root.append(modules.title());
+ }
}
export function measureText(msg, font) {
diff --git a/js/gui/misc.mjs b/js/gui/misc.mjs
index 9fd83a3..e69de29 100644
--- a/js/gui/misc.mjs
+++ b/js/gui/misc.mjs
@@ -1,11 +0,0 @@
-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
index 195b543..e2164ea 100644
--- a/js/gui/modules.mjs
+++ b/js/gui/modules.mjs
@@ -1,6 +1,8 @@
import * as gui from './index.mjs';
+import {images as assets} from '../assets.mjs';
import {canvas} from '../graphics/index.mjs';
import GuiFrame from './frame.mjs';
+import {GuiImage} from './image.mjs';
export function root() {
return new GuiFrame(0, 0, canvas.width, canvas.height, {
@@ -8,6 +10,13 @@ export function root() {
});
}
-export function titleScreen() {
-
+export function title() {
+ let shadow = root();
+ let logo = new GuiImage(assets.title.logo);
+ shadow.append(logo);
+ logo.scaleImage({ w: shadow.w * 0.7 });
+ logo.posRelative({ x: 0.5, xc: 0.5, y: 0.2 });
+ console.log(logo);
+
+ return shadow;
}