so://phie

blob: b3ad31daae7ac85c7147c2570ed65b076dafe164 (5866 bytes)[doc][blame][raw]

  1<!DOCTYPE html>
  2<html lang="en" dir="ltr">
  3	<head>
  4		<meta charset="utf-8">
  5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6		<meta name="author" content="typable">
  7		<meta name="keywords" content="">
  8		<meta name="description" content="">
  9		<meta name="robots" content="noindex, nofollow">
 10		<meta name="google" content="notranslate">
 11		<title>git.typable</title>
 12		<link href="/asset/favicon.png" rel="shortcut icon" type="image/png">
 13		<link href="/css/style.css" rel="stylesheet">
 14		<script src="/js/index.js" type="module"></script>
 15	</head>
 16	<body>
 17		<header class="container-fluid">
 18			<div class="row">
 19				<div class="container">
 20					<h1>git.typable</h1>
 21					<p>A place for commonly used code snippets.</p>
 22				</div>
 23			</div>
 24		</header>
 25		<main class="container-fluid">
 26			<div class="row">
 27				<div class="container">
 28					<h3>Overview</h3>
 29					<ul class="overview">
 30						<li>
 31							<p>JavaScript</p>
 32							<ul>
 33								<li>
 34									<a href="#game">Game</a>
 35								</li>
 36								<li>
 37									<a href="#group">Group</a>
 38								</li>
 39								<li>
 40									<a href="#surface">Surface</a>
 41								</li>
 42								<li>
 43									<a href="#rect">Rect</a>
 44								</li>
 45								<li>
 46									<a href="#scaleCanvas">scaleCanvas</a>
 47								</li>
 48							</ul>
 49						</li>
 50						<li>
 51							<p>CSS</p>
 52							<ul>
 53								<li>
 54									<a href="#normalize">Normalize</a>
 55								</li>
 56								<li>
 57									<a href="#color">Color</a>
 58								</li>
 59								<li>
 60									<a href="#icons">Icons</a>
 61								</li>
 62							</ul>
 63						</li>
 64					</ul>
 65					<h2>JavaScript</h2>
 66					<article>
 67						<label><a name="game">Game</a></label>
 68						<pre>Game(width, height, { fps })</pre>
 69						<p>By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.</p>
 70						<code><pre>import { Game } from 'https://git.typable.dev/std/js/game.js';</pre></code>
 71						<code><pre>class DinoGame extends Game {
 72	constructor() {
 73		super(900, 600);
 74		this.point = { x: 100, y: 100 };
 75	}
 76	update() {
 77		this.point.x += 1;
 78	}
 79	render(g) {
 80		super.render(); // screen clear
 81		const { x, y } = this.point;
 82		g.fillRect(x, y, 50, 50);
 83	}
 84}
 85
 86const game = new DinoGame();
 87document.body.append(game.canvas);
 88
 89game.start();</pre></code>
 90					</article>
 91					<article>
 92						<label><a name="group">Group</a></label>
 93						<pre>Group()</pre>
 94						<p>Can be used to group specific elements for update and rendering purposes.</p>
 95						<code><pre>import { Group } from 'https://git.typable.dev/std/js/game.js';</pre></code>
 96						<code><pre>const group = new Group();
 97group.add(...);
 98
 99group.update();
100group.render(g);</pre></code>
101					</article>
102					<article>
103						<label><a name="surface">Surface</a></label>
104						<pre>Surface(x, y, width, height)</pre>
105						<p>Represents a rectangular surface with its own update and render method.</p>
106						<code><pre>import { Surface } from 'https://git.typable.dev/std/js/game.js';</pre></code>
107						<code><pre>class Player extends Surface {
108	constructor(x, y) {
109		super(x, y, 50, 50);
110	}
111	update() {
112		this.rect.x += 1;
113	}
114	render(g) {
115		const { x, y, width, height } = this.rect;
116		g.fillRect(x, y, width, height);
117	}
118}</pre></code>
119					</article>
120					<article>
121						<label><a name="rect">Rect</a></label>
122						<pre>Rect(x, y, width, height)</pre>
123						<p>Represents a rectangular hitbox.</p>
124						<code><pre>import { Rect } from 'https://git.typable.dev/std/js/game.js';</pre></code>
125					</article>
126					<article>
127						<label><a name="scaleCanvas">scaleCanvas</a></label>
128						<pre>scaleCanvas(canvas, width, height)</pre>
129						<p>Scales a canvas to the device related pixel ratio.</p>
130						<code><pre>import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';</pre></code>
131						<code><pre>const canvas = document.createElement('canvas');
132scaleCanvas(canvas, 900, 600); // (width, height)
133document.body.append(canvas);</pre></code>
134					</article>
135					<h2>CSS</h2>
136					<article>
137						<label><a name="normalize">Normalize</a></label>
138						<p>Normalizes spacing and interactive elements and adds additional alignment classes.</p>
139						<code><pre>@import url('https://git.typable.dev/std/less/normalize.less');</pre></code>
140						<p>Following variables are required (insert before import):</p>
141						<code><pre>@gap: px - Space between column elements
142@full-width: px - Maximum width for centered container elements</pre></code>
143						<p>Additional alignment classes:</p>
144						<code><pre>.col - Horizontal spacing
145.row - Inverts horziontal spacing
146.container - Align centered with horizontal spacing
147.container-fluid - Align full width with horizontal spacing</pre></code>
148<p>Structure:</p>
149<code><pre>.container-fluid {
150	.row {
151		.container {
152			...
153		}
154	}
155}</pre></code>
156					</article>
157					<article>
158						<label><a name="color">Color</a></label>
159						<pre>@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]</pre>
160						<p>A collection of material colors inspired by the Google Material Colors.</p>
161						<code><pre>@import url('https://git.typable.dev/std/less/color.less');</pre></code>
162						<code><pre>@color-black;
163@color-teal-50;
164@color-blue-500;</pre></code>
165					</article>
166					<article>
167						<label><a name="icons">Icons</a></label>
168						<pre>.ico</pre>
169						<p>Imports the Google Material Icons Fonts.</p>
170						<code><pre>@import url('https://git.typable.dev/std/less/icons.less');</pre></code>
171						<code><pre>&lt;span class="ico"&gt;close&lt;/span&gt;</pre></code>
172					</article>
173				</div>
174			</div>
175		</main>
176		<footer class="container-fluid">
177			<div class="row">
178				<div class="container">
179					<span>&copy; typable 2021</span>
180					<a href="https://typable.dev/imprint">Imprint</a>
181					<a href="https://typable.dev/terms">Terms</a>
182				</div>
183			</div>
184		</footer>
185	</body>
186</html>