Switch to rollup for bundling
This commit is contained in:
parent
fc8d282509
commit
cfe9c55c9a
16 changed files with 131 additions and 7 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1,2 +1,2 @@
|
|||
.cache/
|
||||
dist/
|
||||
*.min.js
|
||||
|
|
|
@ -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.
|
||||
|
|
16
dist/index.html
vendored
Normal file
16
dist/index.html
vendored
Normal file
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="/dist/dd2922ce6bb581a5f22cc6eb6de8fbe5.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/dist/97e037a117f43629cc2bc6aefab64b3e.css">
|
||||
<script src="/dist/97e037a117f43629cc2bc6aefab64b3e.js"></script></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<canvas id="main"></canvas>
|
||||
<canvas id="temp"></canvas>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
0
styles.css → dist/styles.css
vendored
0
styles.css → dist/styles.css
vendored
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<script src="js/index.mjs"></script>
|
||||
<script src="improcket.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
|
||||
|
|
13
js/game.mjs
13
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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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() {
|
||||
|
|
8
js/gui/button.mjs
Normal file
8
js/gui/button.mjs
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
25
js/gui/element.mjs
Normal file
25
js/gui/element.mjs
Normal file
|
@ -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();
|
||||
}
|
||||
}
|
8
js/gui/frame.mjs
Normal file
8
js/gui/frame.mjs
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
17
js/gui/index.mjs
Normal file
17
js/gui/index.mjs
Normal file
|
@ -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];
|
||||
}
|
11
js/gui/misc.mjs
Normal file
11
js/gui/misc.mjs
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
13
js/gui/modules.mjs
Normal file
13
js/gui/modules.mjs
Normal file
|
@ -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() {
|
||||
|
||||
}
|
|
@ -1,3 +1,3 @@
|
|||
import * as sector from './sector.mjs';
|
||||
|
||||
export {sectorFromPoint, getContainedSectors} from './sector.mjs';
|
||||
export {getSectorFromWorld, getContainedSectors} from './sector.mjs';
|
||||
|
|
2
rollup
Executable file
2
rollup
Executable file
|
@ -0,0 +1,2 @@
|
|||
#!/bin/bash
|
||||
rollup js/index.mjs --o dist/improcket.min.js --f es --watch
|
Loading…
Add table
Add a link
Reference in a new issue