mascully/improcket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add logo to main menu

Browse source
This commit is contained in:
asraelite 2018-03-02 19:37:24 +00:00
parent cfe9c55c9a
commit 435b24cb6a
15 changed files with 135 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
dist/img/logo.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

6
dist/index.html vendored
View file

@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<script src="/dist/dd2922ce6bb581a5f22cc6eb6de8fbe5.js"></script> <script src="improcket.min.js"></script>
<link rel="stylesheet" type="text/css" href="/dist/97e037a117f43629cc2bc6aefab64b3e.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="/dist/97e037a117f43629cc2bc6aefab64b3e.js"></script></head> </head>
<body> <body>
<div id="container"> <div id="container">

16
index.html
View file

@ -1,16 +0,0 @@
<!doctype html>
<html>
<head>
<script src="improcket.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<canvas id="main"></canvas>
<canvas id="temp"></canvas>
</div>
</body>
</html>

28
js/assets.mjs
View file

@ -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);
}

4
js/game.mjs
View file

@ -1,5 +1,6 @@
import * as graphics from './graphics/index.mjs'; import * as graphics from './graphics/index.mjs';
import * as gui from './gui/index.mjs'; import * as gui from './gui/index.mjs';
import * as assets from './assets.mjs';
export let game; export let game;
@ -12,12 +13,13 @@ export async function init() {
}; };
graphics.init(); graphics.init();
await assets.init();
gui.init(); gui.init();
// Recursive `requestAnimationFrame` can cause problems with Parcel. // Recursive `requestAnimationFrame` can cause problems with Parcel.
while(true) { while(true) {
await tick(); await tick();
await new Promise(res => requestAnimationFrame(res)); await new Promise(res => requestAnimationFrame(()=>{}));
} }
} }

10
js/graphics/draw.mjs Normal file
View file

@ -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);
}

22
js/graphics/gui.mjs
View file

@ -1,10 +1,24 @@
import {canvas, context} from './index.mjs';
import * as gui from '../gui/index.mjs'; import * as gui from '../gui/index.mjs';
export function render() { export function render() {
renderElement(gui.root);
} }
export function renderFrame(frame) { function renderElement(element) {
context.fillStyle = '#eb9'; //console.log(element.options);
context.fillRect(frame.x, frame.y, frame.w, frame.h); 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);
} }

5
js/graphics/index.mjs
View file

@ -2,6 +2,7 @@ import {game} from '../game.mjs';
import {getContainedSectors} from '../world/index.mjs'; import {getContainedSectors} from '../world/index.mjs';
import * as background from './background.mjs'; import * as background from './background.mjs';
import * as gui from './gui.mjs'; import * as gui from './gui.mjs';
import * as draw from './draw.mjs';
export let canvas, context, tempCanvas, tempContext; export let canvas, context, tempCanvas, tempContext;
export let view; export let view;
@ -21,10 +22,14 @@ export function init() {
y: 0, y: 0,
zoom: 1 zoom: 1
} }
draw.text('Loading...', canvas.width / 2, canvas.height / 2,
{ align: 'center', valign: 'middle' });
} }
export function render() { export function render() {
context.clearRect(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height); context.fillRect(0, 0, canvas.width, canvas.height);
context.save(); context.save();

1
js/gui/button.mjs
View file

@ -4,5 +4,6 @@ export class GuiButton extends gui.GuiElement {
constructor(x, y, text, onclick) { constructor(x, y, text, onclick) {
let textSize = gui.measureText(text, 'Arial 14pt'); let textSize = gui.measureText(text, 'Arial 14pt');
super(x, y, ...textSize); super(x, y, ...textSize);
this.type = 'button';
} }
} }

22
js/gui/element.mjs
View file

@ -3,7 +3,7 @@ const defaultOptions = {
} }
export default class GuiElement { export default class GuiElement {
constructor(x, y, w, h, options) { constructor(x, y, w, h, options = {}) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.w = w; this.w = w;
@ -11,7 +11,9 @@ export default class GuiElement {
this.children = new Set(); this.children = new Set();
this.parent = null; this.parent = null;
this.options = Object.assign(options, defaultOptions); this.type = 'element';
this.options = Object.assign({}, defaultOptions, options);
} }
append(element) { append(element) {
@ -22,4 +24,20 @@ export default class GuiElement {
clear() { clear() {
this.children.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;
}
} }

1
js/gui/frame.mjs
View file

@ -4,5 +4,6 @@ import GuiElement from './element.mjs';
export default class GuiFrame extends GuiElement { export default class GuiFrame extends GuiElement {
constructor(x, y, w, h, options) { constructor(x, y, w, h, options) {
super(x, y, w, h, options); super(x, y, w, h, options);
this.type = 'frame';
} }
} }

26
js/gui/image.mjs Normal file
View file

@ -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;
}
}
}

10
js/gui/index.mjs
View file

@ -7,7 +7,15 @@ export let root;
export function init() { export function init() {
elements.clear(); elements.clear();
root = modules.root(); 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) { export function measureText(msg, font) {

11
js/gui/misc.mjs
View file

@ -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;
}
}

13
js/gui/modules.mjs
View file

@ -1,6 +1,8 @@
import * as gui from './index.mjs'; import * as gui from './index.mjs';
import {images as assets} from '../assets.mjs';
import {canvas} from '../graphics/index.mjs'; import {canvas} from '../graphics/index.mjs';
import GuiFrame from './frame.mjs'; import GuiFrame from './frame.mjs';
import {GuiImage} from './image.mjs';
export function root() { export function root() {
return new GuiFrame(0, 0, canvas.width, canvas.height, { 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;
} }