so://phie

game-engine

A lightweight JavaScript game engine
git clone git://soophie.de/game-engine

• log
• tree
• refs
• README
• LICENSE

branch:main tag:v0.1

• asset/less/theme.less [new file] [old file]

  249	padding-top: @space-4x;
  250	display: none;
  251
  252	@media(min-width: @screen-lg) {
  252	@media(min-width: 1500px) {
  253		display: block;
  254	}
  255
  

• blog/index.html [new file] [old file]

  26					<div class="space-1"></div>
  27					<p class="link-list">
  28						<span>--> <a href="/blog/spring-framework">Spring Framework</a></span>
  29						<span>--> <a href="/blog/javascript-es6-features">JavaScript ES6 Features</a></span>
  30					</p>
  31				</div>
  32			</div>
  

• blog/javascript-es6-features.html [new file]

  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/img/favicon.png" rel="shortcut icon" type="image/png">
  13		<link href="/asset/css/style.css" rel="stylesheet">
  14		<script src="/asset/js/index.js" type="module"></script>
  15	</head>
  16	<body>
  17		<main class="container-fluid">
  18			<div class="row">
  19				<div class="container">
  20					<aside>
  21						<h4 data-rel="top">JavaScript ES6 Features</h4>
  22						<ul>
  23							<li data-rel="introduction">Introduction</li>
  24							<li data-rel="scoping">Scoping</li>
  25							<li data-rel="constants">Constants</li>
  26							<li data-rel="extended-parameter-handling">Extended Parameter Handling</li>
  27							<li data-rel="template-literals">Template Literals</li>
  28							<li data-rel="enhanced-object-properties">Enhanced Object Properties</li>
  29							<li data-rel="destructuring-assignment">Destructuring Assignment</li>
  30							<li data-rel="modules">Modules</li>
  31							<li data-rel="classes">Classes</li>
  32							<li data-rel="promises">Promises</li>
  33							<li data-rel="internationalization-localization">Internationalization & Localization</li>
  34						</ul>
  35					</aside>
  36					<ul class="breadcrumb">
  37						<li><a href="/">Home</a></li>
  38						<li><a href="/blog">Blog</a></li>
  39						<li>JavaScript ES6 Features</li>
  40					</ul>
  41					<h1>JavaScript ES6 Features</h1>
  42					<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  43					<h2 data-ref="introduction">Introduction</h2>
  44					<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  45					<p>Source: <a href="http://es6-features.org">ES6 Features</a></p>
  46					<h2 data-ref="scoping">Scoping</h2>
  47					<code><pre><span class="c">for</span>(<span class="c">let</span> <span class="n">item</span> <span class="c">of</span> <span class="n">document</span>.<span class="p">querySelectorAll</span>(<span class="s">'.item'</span>)) {
  48	<span class="n">item</span>.<span class="n">onclick</span> = <span class="c">function</span>() {
  49		<span class="n">console</span>.<span class="p">log</span>(<span class="s">'Index: '</span> + <span class="n">item</span>.<span class="n">dataset</span>.<span class="n">index</span>);
  50	}
  51}</pre></code>
  52					<h2 data-ref="constants">Constants</h2>
  53					<code><pre><span class="c">const</span> <span class="n">id</span> = <span class="s">'cache.custom'</span>;</pre></code>
  54					<h2 data-ref="extended-parameter-handling">Extended Parameter Handling</h2>
  55					<h4>Default Parameter Values</h4>
  56					<code><pre><span class="c">function</span> <span class="n">f</span>(<span class="n">x</span> = <span class="n">5</span>, <span class="n">b</span> = <span class="c">true</span>) { ... }</pre></code>
  57					<div class="space-1"></div>
  58					<h4>Rest Parameter</h4>
  59					<code><pre><span class="c">function</span> <span class="n">f</span>(<span class="n">x</span>, <span class="n">y</span>, ...<span class="n">a</span>) { ... }</pre></code>
  60					<div class="space-1"></div>
  61					<h4>Spread Parameter</h4>
  62					<code><pre><span class="c">const</span> <span class="n">a</span> = [<span class="n">1</span>, <span class="n">2</span>, ...<span class="n">params</span>];</pre></code>
  63					<code><pre><span class="n">f</span>(...<span class="n">a</span>);</pre></code>
  64					<h2 data-ref="template-literals">Template Literals</h2>
  65					<h4>String Interpolation</h4>
  66					<code><pre><span class="c">const</span> <span class="n">s</span> = <span class="s">`Hello </span><span class="c">${</span><span class="n">user</span>.<span class="n">name</span><span class="c">}</span><span class="s">!`</span>;</pre></code>
  67					<div class="space-1"></div>
  68					<h4>Custom Interpolation</h4>
  69					<code><pre><span class="n">foo</span><span class="s">`Hello </span><span class="c">${</span><span class="n">user</span>.<span class="n">name</span><span class="c">}</span><span class="s">!`</span>;
  70					
  71<span class="c">function</span> <span class="n">foo</span>(<span class="n">strings</span>, ...<span class="n">props</span>) {
  72	<span class="x">// Handle interpolation</span>
  73}</pre></code>
  74					<h2 data-ref="enhanced-object-properties">Enhanced Object Properties</h2>
  75					<h4>Property Shorthand</h4>
  76					<code><pre><span class="c">const</span> <span class="n">x</span> = <span class="n">5</span>, <span class="n">y</span> = <span class="n">0</span>;
  77<span class="c">const</span> <span class="n">p</span> = { <span class="n">x</span>, <span class="n">y</span> };</pre></code>
  78					<h2 data-ref="destructuring-assignment">Destructuring Assignment</h2>
  79					<h4>Array Matching</h4>
  80					<code><pre><span class="c">const</span> [<span class="n">a</span>, , <span class="n">c</span>] = [<span class="n">1</span>, <span class="n">2</span>, <span class="n">3</span>];</pre></code>
  81					<div class="space-1"></div>
  82					<h4>Object Matching & Deep Matching</h4>
  83					<code><pre><span class="c">const</span> { <span class="n">x</span>, <span class="n">y</span> } = { <span class="n">x</span>: <span class="n">5</span>, <span class="n">y</span>: <span class="n">0</span>, <span class="n">b</span>: <span class="c">false</span> };
  84<span class="c">const</span> { <span class="n">event</span>: { <span class="n">type</span> }, <span class="n">b</span>: <span class="n">valid</span> } = { <span class="n">event</span>: { <span class="n">type</span>: <span class="s">'click'</span> }, <span class="n">b</span>: <span class="c">true</span> };</pre></code>
  85					<div class="space-1"></div>
  86					<h4>Parameter Context Matching</h4>
  87					<code><pre><span class="c">function</span> <span class="n">f</span>({ <span class="n">name</span>, <span class="n">email</span> }) { ... }</pre></code>
  88					<h2 data-ref="modules">Modules</h2>
  89					<h4>Value Export & Import</h4>
  90					<div class="space-1"></div>
  91					<h4>Default & Wildcard</h4>
  92					<h2 data-ref="classes">Classes</h2>
  93					<h4>Static Members</h4>
  94					<div class="space-1"></div>
  95					<h4>Getter & Setter</h4>
  96					<h2 data-ref="promises">Promises</h2>
  97					<h4>async & await</h4>
  98					<div class="space-1"></div>
  99					<h4>Promise Combination</h4>
  100					<h2 data-ref="internationalization-localization">Internationalization & Localization</h2>
  101					<h4>Number Formatting</h4>
  102					<div class="space-1"></div>
  103					<h4>Currency Formatting</h4>
  104					<div class="space-1"></div>
  105					<h4>Date & Time Formatting</h4>
  106				</div>
  107			</div>
  108		</main>
  109		<footer class="container-fluid">
  110			<div class="row">
  111				<div class="container">
  112					<p>&copy; typable 2021</p>
  113					<a href="https://www.buymeacoffee.com/typable">Donate</a>
  114					<a href="https://typable.dev/imprint">Imprint</a>
  115					<a href="https://typable.dev/terms">Terms</a>
  116				</div>
  117			</div>
  118		</footer>
  119	</body>
  120</html>
  

• component-rendering/index.html [new file] [old file]

  34					<code><pre><span class="c">import</span> { <span class="n ref">html</span> } <span class="c">from</span> <span class="s">'<span class="ref ref-link">https://git.typable.dev/std/js/render.js</span>'</span>;
  35
  36<span class="c">const</span> <span class="n">Message</span> = <span class="n">props</span> => {
  37	<span class="c">return</span> <span class="p ref">html</span><span class="s">`&lt;h1&gt;Hello <span class="c">${</span><span class="n">props</span>.<span class="n">text</span><span class="c">}</span>&lt;/h1&gt;`</span>;
  37	<span class="c">return</span> <span class="p ref">html</span><span class="s">`&lt;h1&gt;Hello </span><span class="c">${</span><span class="n">props</span>.<span class="n">text</span><span class="c">}</span><span class="s">&lt;/h1&gt;`</span>;
  38};</pre></code>
  39				</div>
  40			</div>