feat: initial import

thi-ng · Nov 15, 2022 · 807bc8d · 807bc8d
commit 807bc8d
Show file tree

Hide file tree

Showing 24 changed files with 1,695 additions and 0 deletions.
diff --git a/01-hello/.gitignore b/01-hello/.gitignore
@@ -0,0 +1,2 @@
+/dist
+/export
diff --git a/01-hello/.prettierrc b/01-hello/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "useTabs": true,
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+}
diff --git a/01-hello/LICENSE.txt b/01-hello/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Karsten Schmidt / thi.ng / @toxi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/01-hello/assets/css/tachyons.min.css b/01-hello/assets/css/tachyons.min.css
diff --git a/01-hello/index.html b/01-hello/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link
+            rel="icon"
+            href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>'
+        />
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>@thi.ng/ws-hsa-2022</title>
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/[email protected]/css/tachyons.min.css"
+        />
+        <style></style>
+    </head>
+    <body class="sans-serif">
+        <div id="app"></div>
+        <script type="module" src="/src/index.ts"></script>
+    </body>
+</html>
diff --git a/01-hello/package.json b/01-hello/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "@thi.ng/ws-hsa-2022",
+	"version": "0.0.1",
+	"description": "TODO",
+	"repository": "https://github.com/thi-ng/ws-hsa-2022",
+	"author": "Karsten Schmidt <[email protected]>",
+	"license": "MIT",
+	"scripts": {
+		"start": "vite --open",
+		"build": "tsc && vite build --base='./'",
+		"preview": "vite preview --host --open"
+	},
+	"devDependencies": {
+		"typescript": "^4.8.4",
+		"vite": "^3.2.2"
+	},
+	"dependencies": {
+		"@thi.ng/color": "^5.2.9",
+		"@thi.ng/geom": "^3.4.20",
+		"@thi.ng/random": "^3.3.14",
+		"@thi.ng/rdom": "^0.9.18",
+		"@thi.ng/transducers": "^8.3.22",
+		"@thi.ng/vectors": "^7.5.23"
+	},
+	"browser": {
+		"process": false
+	}
+}
diff --git a/01-hello/src/confetti.ts b/01-hello/src/confetti.ts
@@ -0,0 +1,110 @@
+import { Color, colorFromRange } from "@thi.ng/color";
+import { asSvg, circle, group } from "@thi.ng/geom";
+import { SYSTEM } from "@thi.ng/random";
+import { Component, NumOrElement } from "@thi.ng/rdom";
+import { repeatedly } from "@thi.ng/transducers";
+import { add2, rotate, Vec } from "@thi.ng/vectors";
+
+interface Particle {
+	/**
+	 * Particle position
+	 */
+	pos: Vec;
+	/**
+	 * Velocity vector
+	 */
+	vel: Vec;
+	/**
+	 * Color (LCH + alpha)
+	 */
+	color: Color;
+	/**
+	 * Particle radius/size
+	 */
+	radius: number;
+	/**
+	 * Decay factor, [0..1) range
+	 */
+	decay: number;
+}
+
+/**
+ * Custom rdom component showing a little SVG particle system animation
+ */
+export class Confetti extends Component {
+	particles!: Particle[];
+
+	constructor(numParticles = 50) {
+		super();
+		// initialize particles
+		this.particles = [...repeatedly(defParticle, numParticles)];
+	}
+
+	async mount(parent: Element, index?: NumOrElement) {
+		this.el = this.$el(
+			"svg",
+			{
+				style: {
+					position: "fixed",
+					left: 0,
+					top: 0,
+					"z-index": 1,
+					"pointer-events": "none",
+				},
+				width: "100%",
+				height: "100%",
+				viewBox: "0 0 100 100",
+			},
+			null,
+			parent,
+			index
+		);
+		// particle system update
+		const updateParticles = () => {
+			const particles = this.particles;
+			for (let i = particles.length; i-- > 0; ) {
+				const p = particles[i];
+				// fade out color (alpha channel)
+				p.color[3] *= p.decay;
+				// remove old/invisible particles
+				if (p.color[3] < 0.05 || p.pos[1] > 100) {
+					particles.splice(i, 1);
+				} else {
+					// apply gravity to velocity
+					add2(null, p.vel, [0, 0.1]);
+					// apply new velocity to position
+					add2(null, p.pos, p.vel);
+				}
+			}
+			// update SVG inners by creating a circle element for each particle
+			// and then serializing entire group to SVG string (there're better
+			// ways of doing animation, but keeping it short & sweet here!)
+			this.$html(
+				asSvg(
+					group(
+						{},
+						particles.map((p) =>
+							circle(p.pos, p.radius, { fill: p.color })
+						)
+					)
+				)
+			);
+			// only animate whilst there're remaining particles
+			if (particles.length) requestAnimationFrame(updateParticles);
+			else this.unmount();
+		};
+		requestAnimationFrame(updateParticles);
+		return this.el;
+	}
+}
+
+/**
+ * Creates a new random particle
+ */
+const defParticle = (): Particle => ({
+	pos: [50, 25],
+	vel: rotate([], [0, -SYSTEM.minmax(0.5, 2)], SYSTEM.norm(Math.PI / 3)),
+	color: colorFromRange("warm"),
+	radius: SYSTEM.minmax(1, 2),
+	decay: SYSTEM.minmax(0.95, 0.99),
+});
diff --git a/01-hello/src/index.ts b/01-hello/src/index.ts
@@ -0,0 +1,25 @@
+import { $compile } from "@thi.ng/rdom";
+import { Confetti } from "./confetti";
+
+// HTML (DOM) creation via plain JS data structures (arrays)
+// See: thi.ng/hiccup and related packages for further details
+$compile([
+	"main.ma3",
+	{},
+	["h1", {}, "Hello Augsburg Crew! 👋"],
+	[
+		"p.bg-light-yellow.pa3",
+		{},
+		"Our workshop repo is here: ",
+		[
+			"a",
+			{
+				class: "link b black hover-hot-pink",
+				href: "https://github.com/thi-ng/ws-hsa-2022",
+			},
+			"github.com/thi-ng/ws-hsa-2022",
+		],
+	],
+	// custom UI component
+	new Confetti(100),
+]).mount(document.body);
diff --git a/01-hello/src/vite-env.d.ts b/01-hello/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/01-hello/tsconfig.json b/01-hello/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "include": ["src/**/*"],
+    "exclude": ["./**/node_modules"],
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "esnext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "importsNotUsedAsValues": "error",
+        "isolatedModules": true,
+        "noEmit": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "useDefineForClassFields": true,
+        "experimentalDecorators": true
+    }
+}