A lightweight JavaScript game engine
git clone git://soophie.de/game-engine
9
"name": "html",10
"syntax": "html`...`",11
"description": "Creates a DOM element from the given template literal.",12
"url": "/js/render.js",12
"import": "import { html } from 'https://git.typable.dev/std/js/render.js';",13
"code": [14
"const Message = props => {",15
"\treturn html`<h1>${props.text}</h1>`;",
24
"name": "escape",25
"syntax": "escape(...)",26
"description": "Returns escape xml from the given string.",27
"url": "/js/render.js",27
"import": "import { escape } from 'https://git.typable.dev/std/js/render.js';",28
"code": [29
"escape(`<h1>Hello World!</h1>`);"30
]
34
"name": "Game",35
"syntax": "Game(width, height, { fps })",36
"description": "By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.",37
"url": "/js/game.js",37
"import": "import { Game } from 'https://git.typable.dev/std/js/game.js';",38
"code": [39
"class DinoGame extends Game {",40
"\tconstructor() {",
62
"name": "Surface",63
"syntax": "Surface(x, y, width, height)",64
"description": "Represents a rectangular surface with its own update and render method.",65
"url": "/js/game.js",65
"import": "import { Surface } from 'https://git.typable.dev/std/js/game.js';",66
"code": [67
"class Player extends Surface {",68
"\tconstructor(x, y) {",
83
"name": "Group",84
"syntax": "Group()",85
"description": "Can be used to group specific elements for update and rendering purposes.",86
"url": "/js/game.js",86
"import": "import { Group } from 'https://git.typable.dev/std/js/game.js';",87
"code": [88
"const group = new Group();",89
"group.add(...);",
97
"name": "Rect",98
"syntax": "Rect(x, y, width, height)",99
"description": "Represents a rectangular hitbox.",100
"url": "/js/game.js"100
"import": "import { Rect } from 'https://git.typable.dev/std/js/game.js';"101
},102
{103
"id": "js.scalecanvas",104
"name": "scaleCanvas",105
"syntax": "scaleCanvas(canvas, width, height)",106
"description": "Scales a canvas to the device related pixel ratio.",107
"url": "/js/canvas.js"107
"import": "import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';"108
}109
]110
},
117
"id": "less.normalize",118
"name": "Normalize",119
"description": "Normalizes spacing and interactive elements and adds additional alignment classes.",120
"url": "/less/normalize.less",120
"import": "@import url('https://git.typable.dev/std/less/normalize.less');",121
"code": [122
"// Required variables (define before import)",123
"@gap: px - Space between column elements",
144
"name": "Color",145
"syntax": "@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]",146
"description": "A collection of material colors inspired by the Google Material Colors.",147
"url": "/less/color.less",147
"import": "@import url('https://git.typable.dev/std/less/color.less');",148
"code": [149
"@color-black;",150
"@color-teal-50;",
156
"name": "Icons",157
"syntax": ".ico",158
"description": "Imports the Google Material Icons Fonts.",159
"url": "/less/icons.less",159
"import": "@import url('https://git.typable.dev/std/less/icons.less');",160
"code": [161
"<span class=\"ico\">close</span>"162
]
41
};43
export const Post = props => {44
const url = 'https://git.typable.dev/std' + props.url;44
return html`<article data-id="${props.id}">45
<label>${props.name}</label>46
${props.syntax ? `<pre>${escape(props.syntax)}</pre>` : ''}47
<p>${props.description}</p>48
<code>50
<pre>${escape(url)}</pre>51
${CopyButton({ value: url })}49
<pre>${escape(props.import)}</pre>50
${CopyButton({ value: props.import })}51
</code>52
${props.code ? (53
html`<code>
20
if(props[i] instanceof Array) {21
for(const item of props[i]) {22
if(item instanceof HTMLElement) {23
code += `<div data-child-ref="${children.length}"></div>`;23
const tag = item.tagName.toLowerCase();24
code += `<${tag} data-child-ref="${children.length}"></${tag}>`;25
children.push(item);26
continue;27
}
30
continue;31
}32
if(props[i] instanceof HTMLElement) {32
code += `<div data-child-ref="${children.length}"></div>`;33
const tag = props[i].tagName.toLowerCase();34
code += `<${tag} data-child-ref="${children.length}"></${tag}>`;35
children.push(props[i]);36
continue;37
}
50
else {51
target = element.querySelector(`[data-event-ref="${id}"]`);52
}51
target.addEventListener(type, handler);52
target.removeAttribute('data-event-ref');53
if(target) {54
target.addEventListener(type, handler);55
target.removeAttribute('data-event-ref');56
}57
else {58
console.warn(`Unable to bind ${type} event to element with id: ${id}`);59
}60
}61
for(const [id, child] of Object.entries(children)) {55
element.querySelector(`[data-child-ref="${id}"]`).replaceWith(child);62
const target = element.querySelector(`[data-child-ref="${id}"]`);63
if(target) {64
target.replaceWith(child);65
}66
else {67
console.warn(`Unable to reference <${child.tagName.toLowerCase()}> tag with id: ${id}`);68
}69
}70
return element;71
}