From cfe9c55c9afa892e09ef51a0c6c3e3dfd0efa905 Mon Sep 17 00:00:00 2001 From: asraelite Date: Fri, 2 Mar 2018 17:23:19 +0000 Subject: [PATCH] Switch to rollup for bundling --- .gitignore | 2 +- README.md | 6 ++++++ dist/index.html | 16 ++++++++++++++++ styles.css => dist/styles.css | 0 index.html | 2 +- js/game.mjs | 13 +++++++++---- js/graphics/gui.mjs | 10 ++++++++++ js/graphics/index.mjs | 3 +++ js/gui/button.mjs | 8 ++++++++ js/gui/element.mjs | 25 +++++++++++++++++++++++++ js/gui/frame.mjs | 8 ++++++++ js/gui/index.mjs | 17 +++++++++++++++++ js/gui/misc.mjs | 11 +++++++++++ js/gui/modules.mjs | 13 +++++++++++++ js/world/index.mjs | 2 +- rollup | 2 ++ 16 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 dist/index.html rename styles.css => dist/styles.css (100%) create mode 100644 js/gui/button.mjs create mode 100644 js/gui/element.mjs create mode 100644 js/gui/frame.mjs create mode 100644 js/gui/index.mjs create mode 100644 js/gui/misc.mjs create mode 100644 js/gui/modules.mjs create mode 100755 rollup 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