git.typable

A place for commonly used code snippets.

Overview

JavaScript

Game(width, height, { fps })

By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.

import { Game } from 'https://git.typable.dev/std/js/game.js';
 
class DinoGame extends Game {
	constructor() {
		super(900, 600);
		this.point = { x: 100, y: 100 };
	}
	update() {
		this.point.x += 1;
	}
	render(g) {
		super.render(); // screen clear
		const { x, y } = this.point;
		g.fillRect(x, y, 50, 50);
	}
}

const game = new DinoGame();
document.body.append(game.canvas);

game.start();
 
Group()

Can be used to group specific elements for update and rendering purposes.

import { Group } from 'https://git.typable.dev/std/js/game.js';
 
const group = new Group();
group.add(...);

group.update();
group.render(g);
 
Surface(x, y, width, height)

Represents a rectangular surface with its own update and render method.

import { Surface } from 'https://git.typable.dev/std/js/game.js';
 
class Player extends Surface {
	constructor(x, y) {
		super(x, y, 50, 50);
	}
	update() {
		this.rect.x += 1;
	}
	render(g) {
		const { x, y, width, height } = this.rect;
		g.fillRect(x, y, width, height);
	}
}
 
Rect(x, y, width, height)

Represents a rectangular hitbox.

import { Rect } from 'https://git.typable.dev/std/js/game.js';
 
scaleCanvas(canvas, width, height)

Scales a canvas to the device related pixel ratio.

import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';
 
const canvas = document.createElement('canvas');
scaleCanvas(canvas, 900, 600); // (width, height)
document.body.append(canvas);

CSS

Normalizes spacing and interactive elements and adds additional alignment classes.

@import url('https://git.typable.dev/std/less/normalize.less');

Following variables are required (insert before import):

@gap: px - Space between column elements
@full-width: px - Maximum width for centered container elements

Additional alignment classes:

.col - Horizontal spacing
.row - Inverts horziontal spacing
.container - Align centered with horizontal spacing
.container-fluid - Align full width with horizontal spacing

Structure:

.container-fluid {
	.row {
		.container {
			...
		}
	}
}
 
@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]

A collection of material colors inspired by the Google Material Colors.

@import url('https://git.typable.dev/std/less/color.less');
 
@color-black;
@color-teal-50;
@color-blue-500;
 
.ico

Imports the Google Material Icons Fonts.

@import url('https://git.typable.dev/std/less/icons.less');
 
<span class="ico">close</span>