introduce prettierrc formatting

.prettierignore

@@ -0,0 +1,16 @@
+*.ice
+node_modules
+dist
+*.min.js
+*.wasm
+*.data
+
+archive/
+tutorials/
+projects/game_of_life.html
+projects/oscillations_in_3d.html
+
+thin_ice/fs
+thin_ice/obj
+flocking/pkg
+cellular_automata/static

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": true,
+  "trailingComma": "es5"
+}

404.css

@@ -17,7 +17,7 @@ body {
 }
 
 .nf-code {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
   font-size: clamp(7rem, 22vw, 16rem);
   font-weight: 600;
   line-height: 1;
@@ -44,7 +44,7 @@ body {
 
 .nf-eyebrow::before,
 .nf-eyebrow::after {
-  content: "";
+  content: '';
   display: block;
   height: 1px;
   width: 3rem;
@@ -53,7 +53,7 @@ body {
 }
 
 .nf-heading {
-  font-family: "Fraunces", serif;
+  font-family: 'Fraunces', serif;
   font-size: clamp(1.6rem, 4vw, 2.8rem);
   font-weight: 600;
   color: var(--text);

404.js

@@ -1,22 +1,22 @@
 (function () {
-    const pathEl = document.getElementById('typed-path');
-    const responseEl = document.getElementById('nf-response');
-    const hintEl = document.getElementById('nf-hint');
-    const href = globalThis.location.href;
-    const path = (href.length >= 45) ? href.substring(0, 45) : href;
+  const pathEl = document.getElementById('typed-path');
+  const responseEl = document.getElementById('nf-response');
+  const hintEl = document.getElementById('nf-hint');
+  const href = globalThis.location.href;
+  const path = href.length >= 45 ? href.substring(0, 45) : href;
 
-    let i = 0;
-    const interval = setInterval(() => {
-        if (i < path.length) {
-            pathEl.textContent += path[i++];
-        } else {
-            clearInterval(interval);
-            setTimeout(() => {
-                responseEl.style.opacity = '1';
-                setTimeout(() => {
-                    hintEl.style.opacity = '1';
-                }, 400);
-            }, 300);
-        }
-    }, 45);
+  let i = 0;
+  const interval = setInterval(() => {
+    if (i < path.length) {
+      pathEl.textContent += path[i++];
+    } else {
+      clearInterval(interval);
+      setTimeout(() => {
+        responseEl.style.opacity = '1';
+        setTimeout(() => {
+          hintEl.style.opacity = '1';
+        }, 400);
+      }, 300);
+    }
+  }, 45);
 })();

node_modules/.bin/prettier

@@ -0,0 +1 @@
+../prettier/bin/prettier.cjs

node_modules/.package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "havox",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    }
+  }
+}

node_modules/prettier/LICENSE

@@ -0,0 +1,7 @@
+Copyright © James Long and contributors
+
+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.

node_modules/prettier/README.md

@@ -0,0 +1,104 @@
+[![Prettier Banner](https://unpkg.com/prettier-logo@1.0.3/images/prettier-banner-light.svg)](https://prettier.io)
+
+<h2 align="center">Opinionated Code Formatter</h2>
+
+<p align="center">
+  <em>
+    JavaScript
+    · TypeScript
+    · Flow
+    · JSX
+    · JSON
+  </em>
+  <br />
+  <em>
+    CSS
+    · SCSS
+    · Less
+  </em>
+  <br />
+  <em>
+    HTML
+    · Vue
+    · Angular
+  </em>
+  <br />
+  <em>
+    GraphQL
+    · Markdown
+    · YAML
+  </em>
+  <br />
+  <em>
+    <a href="https://prettier.io/docs/plugins">
+      Your favorite language?
+    </a>
+  </em>
+</p>
+
+<p align="center">
+  <a href="https://github.com/prettier/prettier/actions?query=branch%3Amain">
+    <img alt="CI Status" src="https://img.shields.io/github/check-runs/prettier/prettier/main?style=flat-square&label=CI"></a>
+  <a href="https://codecov.io/gh/prettier/prettier">
+    <img alt="Coverage Status" src="https://img.shields.io/codecov/c/github/prettier/prettier.svg?style=flat-square"></a>
+  <a href="https://x.com/acdlite/status/974390255393505280">
+    <img alt="Blazing Fast" src="https://img.shields.io/badge/speed-blazing%20%F0%9F%94%A5-brightgreen.svg?style=flat-square"></a>
+  <br/>
+  <a href="https://www.npmjs.com/package/prettier">
+    <img alt="npm version" src="https://img.shields.io/npm/v/prettier.svg?style=flat-square"></a>
+  <a href="https://www.npmjs.com/package/prettier">
+    <img alt="weekly downloads from npm" src="https://img.shields.io/npm/dw/prettier.svg?style=flat-square"></a>
+  <a href="https://github.com/prettier/prettier#badge">
+    <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"></a>
+  <a href="https://x.com/intent/follow?screen_name=PrettierCode">
+    <img alt="Follow Prettier on X" src="https://img.shields.io/badge/%40PrettierCode-9f9f9f?style=flat-square&logo=x&labelColor=555"></a>
+</p>
+
+## Intro
+
+Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
+
+### Input
+
+<!-- prettier-ignore -->
+```js
+foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
+```
+
+### Output
+
+```js
+foo(
+  reallyLongArg(),
+  omgSoManyParameters(),
+  IShouldRefactorThis(),
+  isThereSeriouslyAnotherOne(),
+);
+```
+
+Prettier can be run [in your editor](https://prettier.io/docs/editors) on-save, in a [pre-commit hook](https://prettier.io/docs/precommit), or in [CI environments](https://prettier.io/docs/cli#list-different) to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!
+
+---
+
+**[Documentation](https://prettier.io/docs/)**
+
+[Install](https://prettier.io/docs/install) ·
+[Options](https://prettier.io/docs/options) ·
+[CLI](https://prettier.io/docs/cli) ·
+[API](https://prettier.io/docs/api)
+
+**[Playground](https://prettier.io/playground/)**
+
+---
+
+## Badge
+
+Show the world you're using _Prettier_ → [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+
+```md
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).

node_modules/prettier/bin/prettier.cjs

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+"use strict";
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = function(cb, mod) {
+  return function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+};
+
+// node_modules/semver-compare/index.js
+var require_semver_compare = __commonJS({
+  "node_modules/semver-compare/index.js": function(exports2, module2) {
+    module2.exports = function cmp(a, b) {
+      var pa = a.split(".");
+      var pb = b.split(".");
+      for (var i = 0; i < 3; i++) {
+        var na = Number(pa[i]);
+        var nb = Number(pb[i]);
+        if (na > nb) return 1;
+        if (nb > na) return -1;
+        if (!isNaN(na) && isNaN(nb)) return 1;
+        if (isNaN(na) && !isNaN(nb)) return -1;
+      }
+      return 0;
+    };
+  }
+});
+
+// node_modules/please-upgrade-node/index.js
+var require_please_upgrade_node = __commonJS({
+  "node_modules/please-upgrade-node/index.js": function(exports2, module2) {
+    var semverCompare = require_semver_compare();
+    module2.exports = function pleaseUpgradeNode2(pkg, opts) {
+      var opts = opts || {};
+      var requiredVersion = pkg.engines.node.replace(">=", "");
+      var currentVersion = process.version.replace("v", "");
+      if (semverCompare(currentVersion, requiredVersion) === -1) {
+        if (opts.message) {
+          console.error(opts.message(requiredVersion));
+        } else {
+          console.error(
+            pkg.name + " requires at least version " + requiredVersion + " of Node, please upgrade"
+          );
+        }
+        if (opts.hasOwnProperty("exitCode")) {
+          process.exit(opts.exitCode);
+        } else {
+          process.exit(1);
+        }
+      }
+    };
+  }
+});
+
+// bin/prettier.cjs
+var nodeModule = require("module");
+if (typeof nodeModule.enableCompileCache === "function") {
+  nodeModule.enableCompileCache();
+}
+var pleaseUpgradeNode = require_please_upgrade_node();
+var packageJson = require("../package.json");
+pleaseUpgradeNode(packageJson);
+var dynamicImport = new Function("module", "return import(module)");
+var promise;
+var index = process.argv.indexOf("--experimental-cli");
+if (process.env.PRETTIER_EXPERIMENTAL_CLI || index !== -1) {
+  if (index !== -1) {
+    process.argv.splice(index, 1);
+  }
+  promise = dynamicImport("../internal/experimental-cli.mjs").then(
+    function(cli) {
+      return cli.__promise;
+    }
+  );
+} else {
+  promise = dynamicImport("../internal/legacy-cli.mjs").then(function runCli(cli) {
+    return cli.run();
+  });
+}
+module.exports.__promise = promise;

node_modules/prettier/doc.d.ts

@@ -0,0 +1,254 @@
+// https://github.com/prettier/prettier/blob/next/src/document/public.js
+export namespace builders {
+  type DocCommand =
+    | Align
+    | BreakParent
+    | Cursor
+    | Fill
+    | Group
+    | IfBreak
+    | Indent
+    | IndentIfBreak
+    | Label
+    | Line
+    | LineSuffix
+    | LineSuffixBoundary
+    | Trim;
+  type Doc = string | Doc[] | DocCommand;
+
+  interface Align {
+    type: "align";
+    contents: Doc;
+    n: number | string | { type: "root" };
+  }
+
+  interface BreakParent {
+    type: "break-parent";
+  }
+
+  interface Cursor {
+    type: "cursor";
+    placeholder: symbol;
+  }
+
+  interface Fill {
+    type: "fill";
+    parts: Doc[];
+  }
+
+  interface Group {
+    type: "group";
+    id?: symbol;
+    contents: Doc;
+    break: boolean;
+    expandedStates: Doc[];
+  }
+
+  interface HardlineWithoutBreakParent extends Line {
+    hard: true;
+  }
+
+  interface IfBreak {
+    type: "if-break";
+    breakContents: Doc;
+    flatContents: Doc;
+  }
+
+  interface Indent {
+    type: "indent";
+    contents: Doc;
+  }
+
+  interface IndentIfBreak {
+    type: "indent-if-break";
+  }
+
+  interface Label {
+    type: "label";
+    label: any;
+    contents: Doc;
+  }
+
+  interface Line {
+    type: "line";
+    soft?: boolean | undefined;
+    hard?: boolean | undefined;
+    literal?: boolean | undefined;
+  }
+
+  interface LineSuffix {
+    type: "line-suffix";
+    contents: Doc;
+  }
+
+  interface LineSuffixBoundary {
+    type: "line-suffix-boundary";
+  }
+
+  interface LiterallineWithoutBreakParent extends Line {
+    hard: true;
+    literal: true;
+  }
+
+  type LiteralLine = [LiterallineWithoutBreakParent, BreakParent];
+
+  interface Softline extends Line {
+    soft: true;
+  }
+
+  type Hardline = [HardlineWithoutBreakParent, BreakParent];
+
+  interface Trim {
+    type: "trim";
+  }
+
+  interface GroupOptions {
+    shouldBreak?: boolean | undefined;
+    id?: symbol | undefined;
+  }
+
+  function addAlignmentToDoc(doc: Doc, size: number, tabWidth: number): Doc;
+
+  /** @see [align](https://github.com/prettier/prettier/blob/main/commands.md#align) */
+  function align(widthOrString: Align["n"], doc: Doc): Align;
+
+  /** @see [breakParent](https://github.com/prettier/prettier/blob/main/commands.md#breakparent) */
+  const breakParent: BreakParent;
+
+  /** @see [conditionalGroup](https://github.com/prettier/prettier/blob/main/commands.md#conditionalgroup) */
+  function conditionalGroup(alternatives: Doc[], options?: GroupOptions): Group;
+
+  /** @see [dedent](https://github.com/prettier/prettier/blob/main/commands.md#dedent) */
+  function dedent(doc: Doc): Align;
+
+  /** @see [dedentToRoot](https://github.com/prettier/prettier/blob/main/commands.md#dedenttoroot) */
+  function dedentToRoot(doc: Doc): Align;
+
+  /** @see [fill](https://github.com/prettier/prettier/blob/main/commands.md#fill) */
+  function fill(docs: Doc[]): Fill;
+
+  /** @see [group](https://github.com/prettier/prettier/blob/main/commands.md#group) */
+  function group(doc: Doc, opts?: GroupOptions): Group;
+
+  /** @see [hardline](https://github.com/prettier/prettier/blob/main/commands.md#hardline) */
+  const hardline: Hardline;
+
+  /** @see [hardlineWithoutBreakParent](https://github.com/prettier/prettier/blob/main/commands.md#hardlinewithoutbreakparent-and-literallinewithoutbreakparent) */
+  const hardlineWithoutBreakParent: HardlineWithoutBreakParent;
+
+  /** @see [ifBreak](https://github.com/prettier/prettier/blob/main/commands.md#ifbreak) */
+  function ifBreak(
+    ifBreak: Doc,
+    noBreak?: Doc,
+    options?: { groupId?: symbol | undefined },
+  ): IfBreak;
+
+  /** @see [indent](https://github.com/prettier/prettier/blob/main/commands.md#indent) */
+  function indent(doc: Doc): Indent;
+
+  /** @see [indentIfBreak](https://github.com/prettier/prettier/blob/main/commands.md#indentifbreak) */
+  function indentIfBreak(
+    doc: Doc,
+    opts: { groupId: symbol; negate?: boolean | undefined },
+  ): IndentIfBreak;
+
+  /** @see [join](https://github.com/prettier/prettier/blob/main/commands.md#join) */
+  function join(sep: Doc, docs: Doc[]): Doc[];
+
+  /** @see [label](https://github.com/prettier/prettier/blob/main/commands.md#label) */
+  function label(label: any | undefined, contents: Doc): Doc;
+
+  /** @see [line](https://github.com/prettier/prettier/blob/main/commands.md#line) */
+  const line: Line;
+
+  /** @see [lineSuffix](https://github.com/prettier/prettier/blob/main/commands.md#linesuffix) */
+  function lineSuffix(suffix: Doc): LineSuffix;
+
+  /** @see [lineSuffixBoundary](https://github.com/prettier/prettier/blob/main/commands.md#linesuffixboundary) */
+  const lineSuffixBoundary: LineSuffixBoundary;
+
+  /** @see [literalline](https://github.com/prettier/prettier/blob/main/commands.md#literalline) */
+  const literalline: LiteralLine;
+
+  /** @see [literallineWithoutBreakParent](https://github.com/prettier/prettier/blob/main/commands.md#hardlinewithoutbreakparent-and-literallinewithoutbreakparent) */
+  const literallineWithoutBreakParent: LiterallineWithoutBreakParent;
+
+  /** @see [markAsRoot](https://github.com/prettier/prettier/blob/main/commands.md#markasroot) */
+  function markAsRoot(doc: Doc): Align;
+
+  /** @see [softline](https://github.com/prettier/prettier/blob/main/commands.md#softline) */
+  const softline: Softline;
+
+  /** @see [trim](https://github.com/prettier/prettier/blob/main/commands.md#trim) */
+  const trim: Trim;
+
+  /** @see [cursor](https://github.com/prettier/prettier/blob/main/commands.md#cursor) */
+  const cursor: Cursor;
+}
+
+export namespace printer {
+  function printDocToString(
+    doc: builders.Doc,
+    options: Options,
+  ): {
+    formatted: string;
+    /**
+     * This property is a misnomer, and has been since the changes in
+     * https://github.com/prettier/prettier/pull/15709.
+     * The region of the document indicated by `cursorNodeStart` and `cursorNodeText` will
+     * sometimes actually be what lies BETWEEN a pair of leaf nodes in the AST, rather than a node.
+     */
+    cursorNodeStart?: number | undefined;
+
+    /**
+     * Note that, like cursorNodeStart, this is a misnomer and may actually be the text between two
+     * leaf nodes in the AST instead of the text of a node.
+     */
+    cursorNodeText?: string | undefined;
+  };
+  interface Options {
+    /**
+     * Specify the line length that the printer will wrap on.
+     * @default 80
+     */
+    printWidth: number;
+    /**
+     * Specify the number of spaces per indentation-level.
+     * @default 2
+     */
+    tabWidth: number;
+    /**
+     * Indent lines with tabs instead of spaces
+     * @default false
+     */
+    useTabs?: boolean;
+    parentParser?: string | undefined;
+    __embeddedInHtml?: boolean | undefined;
+  }
+}
+
+export namespace utils {
+  function willBreak(doc: builders.Doc): boolean;
+  function traverseDoc(
+    doc: builders.Doc,
+    onEnter?: (doc: builders.Doc) => void | boolean,
+    onExit?: (doc: builders.Doc) => void,
+    shouldTraverseConditionalGroups?: boolean,
+  ): void;
+  function findInDoc<T = builders.Doc>(
+    doc: builders.Doc,
+    callback: (doc: builders.Doc) => T,
+    defaultValue: T,
+  ): T;
+  function mapDoc<T = builders.Doc>(
+    doc: builders.Doc,
+    callback: (doc: builders.Doc) => T,
+  ): T;
+  function removeLines(doc: builders.Doc): builders.Doc;
+  function stripTrailingHardline(doc: builders.Doc): builders.Doc;
+  function replaceEndOfLine(
+    doc: builders.Doc,
+    replacement?: builders.Doc,
+  ): builders.Doc;
+  function canBreak(doc: builders.Doc): boolean;
+}

node_modules/prettier/index.d.ts

@@ -0,0 +1,968 @@
+// Copied from `@types/prettier`
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/5bb07fc4b087cb7ee91084afa6fe750551a7bbb1/types/prettier/index.d.ts
+
+// Minimum TypeScript Version: 4.2
+
+// Add `export {}` here to shut off automatic exporting from index.d.ts. There
+// are quite a few utility types here that don't need to be shipped with the
+// exported module.
+export {};
+
+import { builders, printer, utils } from "./doc.js";
+
+export namespace doc {
+  export { builders, printer, utils };
+}
+
+// This utility is here to handle the case where you have an explicit union
+// between string literals and the generic string type. It would normally
+// resolve out to just the string type, but this generic LiteralUnion maintains
+// the intellisense of the original union.
+//
+// It comes from this issue: microsoft/TypeScript#29729:
+//   https://github.com/microsoft/TypeScript/issues/29729#issuecomment-700527227
+export type LiteralUnion<T extends U, U = string> =
+  | T
+  | (Pick<U, never> & { _?: never | undefined });
+
+export type AST = any;
+export type Doc = doc.builders.Doc;
+
+// The type of elements that make up the given array T.
+type ArrayElement<T> = T extends Array<infer E> ? E : never;
+
+// A union of the properties of the given object that are arrays.
+type ArrayProperties<T> = {
+  [K in keyof T]: NonNullable<T[K]> extends readonly any[] ? K : never;
+}[keyof T];
+
+// A union of the properties of the given array T that can be used to index it.
+// If the array is a tuple, then that's going to be the explicit indices of the
+// array, otherwise it's going to just be number.
+type IndexProperties<T extends { length: number }> =
+  IsTuple<T> extends true ? Exclude<Partial<T>["length"], T["length"]> : number;
+
+// Effectively performing T[P], except that it's telling TypeScript that it's
+// safe to do this for tuples, arrays, or objects.
+type IndexValue<T, P> = T extends any[]
+  ? P extends number
+    ? T[P]
+    : never
+  : P extends keyof T
+    ? T[P]
+    : never;
+
+// Determines if an object T is an array like string[] (in which case this
+// evaluates to false) or a tuple like [string] (in which case this evaluates to
+// true).
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type IsTuple<T> = T extends []
+  ? true
+  : T extends [infer First, ...infer Remain]
+    ? IsTuple<Remain>
+    : false;
+
+type CallProperties<T> = T extends any[] ? IndexProperties<T> : keyof T;
+type IterProperties<T> = T extends any[]
+  ? IndexProperties<T>
+  : ArrayProperties<T>;
+
+type CallCallback<T, U> = (path: AstPath<T>, index: number, value: any) => U;
+type EachCallback<T> = (
+  path: AstPath<ArrayElement<T>>,
+  index: number,
+  value: any,
+) => void;
+type MapCallback<T, U> = (
+  path: AstPath<ArrayElement<T>>,
+  index: number,
+  value: any,
+) => U;
+
+// https://github.com/prettier/prettier/blob/next/src/common/ast-path.js
+export class AstPath<T = any> {
+  constructor(value: T);
+
+  get key(): string | null;
+  get index(): number | null;
+  get node(): T;
+  get parent(): T | null;
+  get grandparent(): T | null;
+  get isInArray(): boolean;
+  get siblings(): T[] | null;
+  get next(): T | null;
+  get previous(): T | null;
+  get isFirst(): boolean;
+  get isLast(): boolean;
+  get isRoot(): boolean;
+  get root(): T;
+  get ancestors(): T[];
+
+  stack: T[];
+
+  callParent<U>(callback: (path: this) => U, count?: number): U;
+
+  /**
+   * @deprecated Please use `AstPath#key` or `AstPath#index`
+   */
+  getName(): PropertyKey | null;
+
+  /**
+   * @deprecated Please use `AstPath#node` or  `AstPath#siblings`
+   */
+  getValue(): T;
+
+  getNode(count?: number): T | null;
+
+  getParentNode(count?: number): T | null;
+
+  match(
+    ...predicates: Array<
+      (node: any, name: string | null, number: number | null) => boolean
+    >
+  ): boolean;
+
+  // For each of the tree walk functions (call, each, and map) this provides 5
+  // strict type signatures, along with a fallback at the end if you end up
+  // calling more than 5 properties deep. This helps a lot with typing because
+  // for the majority of cases you're calling fewer than 5 properties, so the
+  // tree walk functions have a clearer understanding of what you're doing.
+  //
+  // Note that resolving these types is somewhat complicated, and it wasn't
+  // even supported until TypeScript 4.2 (before it would just say that the
+  // type instantiation was excessively deep and possibly infinite).
+
+  call<U>(callback: CallCallback<T, U>): U;
+  call<U, P1 extends CallProperties<T>>(
+    callback: CallCallback<IndexValue<T, P1>, U>,
+    prop1: P1,
+  ): U;
+  call<U, P1 extends keyof T, P2 extends CallProperties<T[P1]>>(
+    callback: CallCallback<IndexValue<IndexValue<T, P1>, P2>, U>,
+    prop1: P1,
+    prop2: P2,
+  ): U;
+  call<
+    U,
+    P1 extends keyof T,
+    P2 extends CallProperties<T[P1]>,
+    P3 extends CallProperties<IndexValue<T[P1], P2>>,
+  >(
+    callback: CallCallback<
+      IndexValue<IndexValue<IndexValue<T, P1>, P2>, P3>,
+      U
+    >,
+    prop1: P1,
+    prop2: P2,
+    prop3: P3,
+  ): U;
+  call<
+    U,
+    P1 extends keyof T,
+    P2 extends CallProperties<T[P1]>,
+    P3 extends CallProperties<IndexValue<T[P1], P2>>,
+    P4 extends CallProperties<IndexValue<IndexValue<T[P1], P2>, P3>>,
+  >(
+    callback: CallCallback<
+      IndexValue<IndexValue<IndexValue<IndexValue<T, P1>, P2>, P3>, P4>,
+      U
+    >,
+    prop1: P1,
+    prop2: P2,
+    prop3: P3,
+    prop4: P4,
+  ): U;
+  call<U, P extends PropertyKey>(
+    callback: CallCallback<any, U>,
+    prop1: P,
+    prop2: P,
+    prop3: P,
+    prop4: P,
+    ...props: P[]
+  ): U;
+
+  each(callback: EachCallback<T>): void;
+  each<P1 extends IterProperties<T>>(
+    callback: EachCallback<IndexValue<T, P1>>,
+    prop1: P1,
+  ): void;
+  each<P1 extends keyof T, P2 extends IterProperties<T[P1]>>(
+    callback: EachCallback<IndexValue<IndexValue<T, P1>, P2>>,
+    prop1: P1,
+    prop2: P2,
+  ): void;
+  each<
+    P1 extends keyof T,
+    P2 extends IterProperties<T[P1]>,
+    P3 extends IterProperties<IndexValue<T[P1], P2>>,
+  >(
+    callback: EachCallback<IndexValue<IndexValue<IndexValue<T, P1>, P2>, P3>>,
+    prop1: P1,
+    prop2: P2,
+    prop3: P3,
+  ): void;
+  each<
+    P1 extends keyof T,
+    P2 extends IterProperties<T[P1]>,
+    P3 extends IterProperties<IndexValue<T[P1], P2>>,
+    P4 extends IterProperties<IndexValue<IndexValue<T[P1], P2>, P3>>,
+  >(
+    callback: EachCallback<
+      IndexValue<IndexValue<IndexValue<IndexValue<T, P1>, P2>, P3>, P4>
+    >,
+    prop1: P1,
+    prop2: P2,
+    prop3: P3,
+    prop4: P4,
+  ): void;
+  each(
+    callback: EachCallback<any[]>,
+    prop1: PropertyKey,
+    prop2: PropertyKey,
+    prop3: PropertyKey,
+    prop4: PropertyKey,
+    ...props: PropertyKey[]
+  ): void;
+
+  map<U>(callback: MapCallback<T, U>): U[];
+  map<U, P1 extends IterProperties<T>>(
+    callback: MapCallback<IndexValue<T, P1>, U>,
+    prop1: P1,
+  ): U[];
+  map<U, P1 extends keyof T, P2 extends IterProperties<T[P1]>>(
+    callback: MapCallback<IndexValue<IndexValue<T, P1>, P2>, U>,
+    prop1: P1,
+    prop2: P2,
+  ): U[];
+  map<
+    U,
+    P1 extends keyof T,
+    P2 extends IterProperties<T[P1]>,
+    P3 extends IterProperties<IndexValue<T[P1], P2>>,
+  >(
+    callback: MapCallback<IndexValue<IndexValue<IndexValue<T, P1>, P2>, P3>, U>,
+    prop1: P1,
+    prop2: P2,
+    prop3: P3,
+  ): U[];
+  map<
+    U,
+    P1 extends keyof T,
+    P2 extends IterProperties<T[P1]>,
+    P3 extends IterProperties<IndexValue<T[P1], P2>>,
+    P4 extends IterProperties<IndexValue<IndexValue<T[P1], P2>, P3>>,
+  >(
+    callback: MapCallback<
+      IndexValue<IndexValue<IndexValue<IndexValue<T, P1>, P2>, P3>, P4>,
+      U
+    >,
+    prop1: P1,
+    prop2: P2,
+    prop3: P3,
+    prop4: P4,
+  ): U[];
+  map<U>(
+    callback: MapCallback<any[], U>,
+    prop1: PropertyKey,
+    prop2: PropertyKey,
+    prop3: PropertyKey,
+    prop4: PropertyKey,
+    ...props: PropertyKey[]
+  ): U[];
+}
+
+/** @deprecated `FastPath` was renamed to `AstPath` */
+export type FastPath<T = any> = AstPath<T>;
+
+export type BuiltInParser = (text: string, options?: any) => AST;
+export type BuiltInParserName =
+  | "acorn"
+  | "angular"
+  | "babel-flow"
+  | "babel-ts"
+  | "babel"
+  | "css"
+  | "espree"
+  | "flow"
+  | "glimmer"
+  | "graphql"
+  | "html"
+  | "json-stringify"
+  | "json"
+  | "json5"
+  | "jsonc"
+  | "less"
+  | "lwc"
+  | "markdown"
+  | "mdx"
+  | "meriyah"
+  | "mjml"
+  | "scss"
+  | "typescript"
+  | "vue"
+  | "yaml";
+export type BuiltInParsers = Record<BuiltInParserName, BuiltInParser>;
+
+/**
+ * For use in `.prettierrc.js`, `.prettierrc.ts`, `.prettierrc.cjs`, `.prettierrc.cts`, `prettierrc.mjs`, `prettierrc.mts`, `prettier.config.js`, `prettier.config.ts`, `prettier.config.cjs`, `prettier.config.cts`, `prettier.config.mjs`, `prettier.config.mts`
+ */
+export interface Config extends Options {
+  overrides?: Array<{
+    files: string | string[];
+    excludeFiles?: string | string[];
+    options?: Options;
+  }>;
+}
+
+export interface Options extends Partial<RequiredOptions> {}
+
+export interface RequiredOptions extends doc.printer.Options {
+  /**
+   * Print semicolons at the ends of statements.
+   * @default true
+   */
+  semi: boolean;
+  /**
+   * Use single quotes instead of double quotes.
+   * @default false
+   */
+  singleQuote: boolean;
+  /**
+   * Use single quotes in JSX.
+   * @default false
+   */
+  jsxSingleQuote: boolean;
+  /**
+   * Print trailing commas wherever possible.
+   * @default "all"
+   */
+  trailingComma: "none" | "es5" | "all";
+  /**
+   * Print spaces between brackets in object literals.
+   * @default true
+   */
+  bracketSpacing: boolean;
+  /**
+   * How to wrap object literals.
+   * @default "preserve"
+   */
+  objectWrap: "preserve" | "collapse";
+  /**
+   * Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being
+   * alone on the next line (does not apply to self closing elements).
+   * @default false
+   */
+  bracketSameLine: boolean;
+  /**
+   * Format only a segment of a file.
+   * @default 0
+   */
+  rangeStart: number;
+  /**
+   * Format only a segment of a file.
+   * @default Number.POSITIVE_INFINITY
+   */
+  rangeEnd: number;
+  /**
+   * Specify which parser to use.
+   */
+  parser: LiteralUnion<BuiltInParserName>;
+  /**
+   * Specify the input filepath. This will be used to do parser inference.
+   */
+  filepath: string;
+  /**
+   * Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file.
+   * This is very useful when gradually transitioning large, unformatted codebases to prettier.
+   * @default false
+   */
+  requirePragma: boolean;
+  /**
+   * Prettier can insert a special @format marker at the top of files specifying that
+   * the file has been formatted with prettier. This works well when used in tandem with
+   * the --require-pragma option. If there is already a docblock at the top of
+   * the file then this option will add a newline to it with the @format marker.
+   * @default false
+   */
+  insertPragma: boolean;
+  /**
+   * Prettier can allow individual files to opt out of formatting if they contain a special comment, called a pragma, at the top of the file.
+   * @default false
+   */
+  checkIgnorePragma: boolean;
+  /**
+   * By default, Prettier will wrap markdown text as-is since some services use a linebreak-sensitive renderer.
+   * In some cases you may want to rely on editor/viewer soft wrapping instead, so this option allows you to opt out.
+   * @default "preserve"
+   */
+  proseWrap: "always" | "never" | "preserve";
+  /**
+   * Include parentheses around a sole arrow function parameter.
+   * @default "always"
+   */
+  arrowParens: "avoid" | "always";
+  /**
+   * Provide ability to support new languages to prettier.
+   */
+  plugins: Array<string | URL | Plugin>;
+  /**
+   * How to handle whitespaces in HTML.
+   * @default "css"
+   */
+  htmlWhitespaceSensitivity: "css" | "strict" | "ignore";
+  /**
+   * Which end of line characters to apply.
+   * @default "lf"
+   */
+  endOfLine: "auto" | "lf" | "crlf" | "cr";
+  /**
+   * Change when properties in objects are quoted.
+   * @default "as-needed"
+   */
+  quoteProps: "as-needed" | "consistent" | "preserve";
+  /**
+   * Whether or not to indent the code inside <script> and <style> tags in Vue files.
+   * @default false
+   */
+  vueIndentScriptAndStyle: boolean;
+  /**
+   * Control whether Prettier formats quoted code embedded in the file.
+   * @default "auto"
+   */
+  embeddedLanguageFormatting: "auto" | "off";
+  /**
+   * Enforce single attribute per line in HTML, Vue and JSX.
+   * @default false
+   */
+  singleAttributePerLine: boolean;
+  /**
+   * Where to print operators when binary expressions wrap lines.
+   * @default "end"
+   */
+  experimentalOperatorPosition: "start" | "end";
+  /**
+   * Use curious ternaries, with the question mark after the condition, instead
+   * of on the same line as the consequent.
+   * @default false
+   */
+  experimentalTernaries: boolean;
+  /**
+   * Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line.
+   * @default false
+   * @deprecated use bracketSameLine instead
+   */
+  jsxBracketSameLine?: boolean;
+  /**
+   * Arbitrary additional values on an options object are always allowed.
+   */
+  [_: string]: unknown;
+}
+
+export interface ParserOptions<T = any> extends RequiredOptions {
+  locStart: (node: T) => number;
+  locEnd: (node: T) => number;
+  originalText: string;
+}
+
+export interface Plugin<T = any> {
+  languages?: SupportLanguage[] | undefined;
+  parsers?: { [parserName: string]: Parser<T> } | undefined;
+  printers?: { [astFormat: string]: Printer<T> } | undefined;
+  options?: SupportOptions | undefined;
+  defaultOptions?: Partial<RequiredOptions> | undefined;
+}
+
+export interface Parser<T = any> {
+  parse: (text: string, options: ParserOptions<T>) => T | Promise<T>;
+  astFormat: string;
+  hasPragma?: ((text: string) => boolean) | undefined;
+  hasIgnorePragma?: ((text: string) => boolean) | undefined;
+  locStart: (node: T) => number;
+  locEnd: (node: T) => number;
+  preprocess?:
+    | ((text: string, options: ParserOptions<T>) => string | Promise<string>)
+    | undefined;
+}
+
+export interface Printer<T = any> {
+  print(
+    path: AstPath<T>,
+    options: ParserOptions<T>,
+    print: (path: AstPath<T>) => Doc,
+    args?: unknown,
+  ): Doc;
+  printPrettierIgnored?(
+    path: AstPath<T>,
+    options: ParserOptions<T>,
+    print: (path: AstPath<T>) => Doc,
+    args?: unknown,
+  ): Doc;
+  embed?:
+    | ((
+        path: AstPath,
+        options: Options,
+      ) =>
+        | ((
+            textToDoc: (text: string, options: Options) => Promise<Doc>,
+            print: (
+              selector?: string | number | Array<string | number> | AstPath,
+            ) => Doc,
+            path: AstPath,
+            options: Options,
+          ) => Promise<Doc | undefined> | Doc | undefined)
+        | Doc
+        | null)
+    | undefined;
+  preprocess?:
+    | ((ast: T, options: ParserOptions<T>) => T | Promise<T>)
+    | undefined;
+  insertPragma?: (text: string) => string;
+  /**
+   * @returns `null` if you want to remove this node
+   * @returns `void` if you want to use modified `cloned`
+   * @returns anything if you want to replace the node with it
+   */
+  massageAstNode?:
+    | ((original: any, cloned: any, parent: any) => any)
+    | undefined;
+  hasPrettierIgnore?: ((path: AstPath<T>) => boolean) | undefined;
+  canAttachComment?: ((node: T, ancestors: T[]) => boolean) | undefined;
+  isBlockComment?: ((node: T) => boolean) | undefined;
+  willPrintOwnComments?: ((path: AstPath<T>) => boolean) | undefined;
+  printComment?:
+    | ((commentPath: AstPath<T>, options: ParserOptions<T>) => Doc)
+    | undefined;
+  /**
+   * By default, Prettier searches all object properties (except for a few predefined ones) of each node recursively.
+   * This function can be provided to override that behavior.
+   * @param node The node whose children should be returned.
+   * @param options Current options.
+   * @returns `[]` if the node has no children or `undefined` to fall back on the default behavior.
+   */
+  getCommentChildNodes?:
+    | ((node: T, options: ParserOptions<T>) => T[] | undefined)
+    | undefined;
+  handleComments?:
+    | {
+        ownLine?:
+          | ((
+              commentNode: any,
+              text: string,
+              options: ParserOptions<T>,
+              ast: T,
+              isLastComment: boolean,
+            ) => boolean)
+          | undefined;
+        endOfLine?:
+          | ((
+              commentNode: any,
+              text: string,
+              options: ParserOptions<T>,
+              ast: T,
+              isLastComment: boolean,
+            ) => boolean)
+          | undefined;
+        remaining?:
+          | ((
+              commentNode: any,
+              text: string,
+              options: ParserOptions<T>,
+              ast: T,
+              isLastComment: boolean,
+            ) => boolean)
+          | undefined;
+      }
+    | undefined;
+  getVisitorKeys?:
+    | ((node: T, nonTraversableKeys: Set<string>) => string[])
+    | undefined;
+}
+
+export interface CursorOptions extends Options {
+  /**
+   * Specify where the cursor is.
+   */
+  cursorOffset: number;
+}
+
+export interface CursorResult {
+  formatted: string;
+  cursorOffset: number;
+}
+
+/**
+ * `format` is used to format text using Prettier. [Options](https://prettier.io/docs/options) may be provided to override the defaults.
+ */
+export function format(source: string, options?: Options): Promise<string>;
+
+/**
+ * `check` checks to see if the file has been formatted with Prettier given those options and returns a `Boolean`.
+ * This is similar to the `--list-different` parameter in the CLI and is useful for running Prettier in CI scenarios.
+ */
+export function check(source: string, options?: Options): Promise<boolean>;
+
+/**
+ * `formatWithCursor` both formats the code, and translates a cursor position from unformatted code to formatted code.
+ * This is useful for editor integrations, to prevent the cursor from moving when code is formatted.
+ *
+ * The `cursorOffset` option should be provided, to specify where the cursor is.
+ */
+export function formatWithCursor(
+  source: string,
+  options: CursorOptions,
+): Promise<CursorResult>;
+
+export interface ResolveConfigOptions {
+  /**
+   * If set to `false`, all caching will be bypassed.
+   */
+  useCache?: boolean | undefined;
+  /**
+   * Pass directly the path of the config file if you don't wish to search for it.
+   */
+  config?: string | URL | undefined;
+  /**
+   * If set to `true` and an `.editorconfig` file is in your project,
+   * Prettier will parse it and convert its properties to the corresponding prettier configuration.
+   * This configuration will be overridden by `.prettierrc`, etc. Currently,
+   * the following EditorConfig properties are supported:
+   * - indent_style
+   * - indent_size/tab_width
+   * - max_line_length
+   */
+  editorconfig?: boolean | undefined;
+}
+
+/**
+ * `resolveConfig` can be used to resolve configuration for a given source file,
+ * passing its path or url as the first argument. The config search will start at
+ * the directory of the file location and continue to search up the directory.
+ *
+ * A promise is returned which will resolve to:
+ *
+ *  - An options object, providing a [config file](https://prettier.io/docs/configuration) was found.
+ *  - `null`, if no file was found.
+ *
+ * The promise will be rejected if there was an error parsing the configuration file.
+ */
+export function resolveConfig(
+  fileUrlOrPath: string | URL,
+  options?: ResolveConfigOptions,
+): Promise<Options | null>;
+
+/**
+ * `resolveConfigFile` can be used to find the path of the Prettier configuration file,
+ * that will be used when resolving the config (i.e. when calling `resolveConfig`).
+ *
+ * A promise is returned which will resolve to:
+ *
+ * - The path of the configuration file.
+ * - `null`, if no file was found.
+ *
+ * The promise will be rejected if there was an error parsing the configuration file.
+ */
+export function resolveConfigFile(
+  fileUrlOrPath?: string | URL,
+): Promise<string | null>;
+
+/**
+ * As you repeatedly call `resolveConfig`, the file system structure will be cached for performance. This function will clear the cache.
+ * Generally this is only needed for editor integrations that know that the file system has changed since the last format took place.
+ */
+export function clearConfigCache(): Promise<void>;
+
+export interface SupportLanguage {
+  name: string;
+  parsers: BuiltInParserName[] | string[];
+  group?: string | undefined;
+  tmScope?: string | undefined;
+  aceMode?: string | undefined;
+  codemirrorMode?: string | undefined;
+  codemirrorMimeType?: string | undefined;
+  aliases?: string[] | undefined;
+  extensions?: string[] | undefined;
+  filenames?: string[] | undefined;
+  linguistLanguageId?: number | undefined;
+  vscodeLanguageIds?: string[] | undefined;
+  interpreters?: string[] | undefined;
+  isSupported?: ((options: { filepath: string }) => boolean) | undefined;
+}
+
+export interface SupportOptionRange {
+  start: number;
+  end: number;
+  step: number;
+}
+
+export type SupportOptionType =
+  | "int"
+  | "string"
+  | "boolean"
+  | "choice"
+  | "path";
+
+export type CoreCategoryType =
+  | "Config"
+  | "Editor"
+  | "Format"
+  | "Other"
+  | "Output"
+  | "Global"
+  | "Special";
+
+export interface BaseSupportOption<Type extends SupportOptionType> {
+  readonly name?: string | undefined;
+  /**
+   * Usually you can use {@link CoreCategoryType}
+   */
+  category: string;
+  /**
+   * The type of the option.
+   *
+   * When passing a type other than the ones listed below, the option is
+   * treated as taking any string as argument, and `--option <${type}>` will
+   * be displayed in --help.
+   */
+  type: Type;
+  /**
+   * Indicate that the option is deprecated.
+   *
+   * Use a string to add an extra message to --help for the option,
+   * for example to suggest a replacement option.
+   */
+  deprecated?: true | string | undefined;
+  /**
+   * Description to be displayed in --help. If omitted, the option won't be
+   * shown at all in --help.
+   */
+  description?: string | undefined;
+}
+
+export interface IntSupportOption extends BaseSupportOption<"int"> {
+  default?: number | undefined;
+  array?: false | undefined;
+  range?: SupportOptionRange | undefined;
+}
+
+export interface IntArraySupportOption extends BaseSupportOption<"int"> {
+  default?: Array<{ value: number[] }> | undefined;
+  array: true;
+}
+
+export interface StringSupportOption extends BaseSupportOption<"string"> {
+  default?: string | undefined;
+  array?: false | undefined;
+}
+
+export interface StringArraySupportOption extends BaseSupportOption<"string"> {
+  default?: Array<{ value: string[] }> | undefined;
+  array: true;
+}
+
+export interface BooleanSupportOption extends BaseSupportOption<"boolean"> {
+  default?: boolean | undefined;
+  array?: false | undefined;
+  description: string;
+  oppositeDescription?: string | undefined;
+}
+
+export interface BooleanArraySupportOption extends BaseSupportOption<"boolean"> {
+  default?: Array<{ value: boolean[] }> | undefined;
+  array: true;
+}
+
+export interface ChoiceSupportOption<
+  Value = any,
+> extends BaseSupportOption<"choice"> {
+  default?: Value | Array<{ value: Value }> | undefined;
+  description: string;
+  choices: Array<{
+    value: Value;
+    description: string;
+  }>;
+}
+
+export interface PathSupportOption extends BaseSupportOption<"path"> {
+  default?: string | undefined;
+  array?: false | undefined;
+}
+
+export interface PathArraySupportOption extends BaseSupportOption<"path"> {
+  default?: Array<{ value: string[] }> | undefined;
+  array: true;
+}
+
+export type SupportOption =
+  | IntSupportOption
+  | IntArraySupportOption
+  | StringSupportOption
+  | StringArraySupportOption
+  | BooleanSupportOption
+  | BooleanArraySupportOption
+  | ChoiceSupportOption
+  | PathSupportOption
+  | PathArraySupportOption;
+
+export interface SupportOptions extends Record<string, SupportOption> {}
+
+export interface SupportInfo {
+  languages: SupportLanguage[];
+  options: SupportOption[];
+}
+
+export interface FileInfoOptions {
+  ignorePath?: string | URL | (string | URL)[] | undefined;
+  withNodeModules?: boolean | undefined;
+  plugins?: Array<string | URL | Plugin> | undefined;
+  resolveConfig?: boolean | undefined;
+}
+
+export interface FileInfoResult {
+  ignored: boolean;
+  inferredParser: string | null;
+}
+
+export function getFileInfo(
+  file: string | URL,
+  options?: FileInfoOptions,
+): Promise<FileInfoResult>;
+
+export interface SupportInfoOptions {
+  plugins?: Array<string | URL | Plugin> | undefined;
+  showDeprecated?: boolean | undefined;
+}
+
+/**
+ * Returns an object representing the parsers, languages and file types Prettier supports for the current version.
+ */
+export function getSupportInfo(
+  options?: SupportInfoOptions,
+): Promise<SupportInfo>;
+
+/**
+ * `version` field in `package.json`
+ */
+export const version: string;
+
+// https://github.com/prettier/prettier/blob/main/src/utilities/public.js
+export namespace util {
+  interface SkipOptions {
+    backwards?: boolean | undefined;
+  }
+
+  type Quote = "'" | '"';
+
+  function getMaxContinuousCount(text: string, searchString: string): number;
+
+  function getStringWidth(text: string): number;
+
+  function getAlignmentSize(
+    text: string,
+    tabWidth: number,
+    startIndex?: number | undefined,
+  ): number;
+
+  function getIndentSize(value: string, tabWidth: number): number;
+
+  function skipNewline(
+    text: string,
+    startIndex: number | false,
+    options?: SkipOptions | undefined,
+  ): number | false;
+
+  function skipInlineComment(
+    text: string,
+    startIndex: number | false,
+  ): number | false;
+
+  function skipTrailingComment(
+    text: string,
+    startIndex: number | false,
+  ): number | false;
+
+  function skipTrailingComment(
+    text: string,
+    startIndex: number | false,
+  ): number | false;
+
+  function hasNewline(
+    text: string,
+    startIndex: number,
+    options?: SkipOptions | undefined,
+  ): boolean;
+
+  function hasNewlineInRange(
+    text: string,
+    startIndex: number,
+    endIndex: number,
+  ): boolean;
+
+  function hasSpaces(
+    text: string,
+    startIndex: number,
+    options?: SkipOptions | undefined,
+  ): boolean;
+
+  function getNextNonSpaceNonCommentCharacterIndex(
+    text: string,
+    startIndex: number,
+  ): number | false;
+
+  function getNextNonSpaceNonCommentCharacter(
+    text: string,
+    startIndex: number,
+  ): string;
+
+  function isNextLineEmpty(text: string, startIndex: number): boolean;
+
+  function isPreviousLineEmpty(text: string, startIndex: number): boolean;
+
+  function makeString(
+    rawText: string,
+    enclosingQuote: Quote,
+    unescapeUnnecessaryEscapes?: boolean | undefined,
+  ): string;
+
+  function skip(
+    characters: string | RegExp,
+  ): (
+    text: string,
+    startIndex: number | false,
+    options?: SkipOptions,
+  ) => number | false;
+
+  const skipWhitespace: (
+    text: string,
+    startIndex: number | false,
+    options?: SkipOptions,
+  ) => number | false;
+
+  const skipSpaces: (
+    text: string,
+    startIndex: number | false,
+    options?: SkipOptions,
+  ) => number | false;
+
+  const skipToLineEnd: (
+    text: string,
+    startIndex: number | false,
+    options?: SkipOptions,
+  ) => number | false;
+
+  const skipEverythingButNewLine: (
+    text: string,
+    startIndex: number | false,
+    options?: SkipOptions,
+  ) => number | false;
+
+  function addLeadingComment(node: any, comment: any): void;
+
+  function addDanglingComment(node: any, comment: any, marker: any): void;
+
+  function addTrailingComment(node: any, comment: any): void;
+
+  function getPreferredQuote(
+    text: string,
+    preferredQuoteOrPreferSingleQuote: Quote | boolean,
+  ): Quote;
+}

node_modules/prettier/package.json

@@ -0,0 +1,203 @@
+{
+  "name": "prettier",
+  "version": "3.8.1",
+  "description": "Prettier is an opinionated code formatter",
+  "bin": "./bin/prettier.cjs",
+  "repository": "prettier/prettier",
+  "funding": "https://github.com/prettier/prettier?sponsor=1",
+  "homepage": "https://prettier.io",
+  "author": "James Long",
+  "license": "MIT",
+  "main": "./index.cjs",
+  "browser": "./standalone.js",
+  "unpkg": "./standalone.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./index.cjs",
+      "browser": {
+        "import": "./standalone.mjs",
+        "default": "./standalone.js"
+      },
+      "default": "./index.mjs"
+    },
+    "./*": "./*",
+    "./doc": {
+      "types": "./doc.d.ts",
+      "require": "./doc.js",
+      "default": "./doc.mjs"
+    },
+    "./standalone": {
+      "types": "./standalone.d.ts",
+      "require": "./standalone.js",
+      "default": "./standalone.mjs"
+    },
+    "./plugins/estree": {
+      "types": "./plugins/estree.d.ts",
+      "require": "./plugins/estree.js",
+      "default": "./plugins/estree.mjs"
+    },
+    "./plugins/babel": {
+      "types": "./plugins/babel.d.ts",
+      "require": "./plugins/babel.js",
+      "default": "./plugins/babel.mjs"
+    },
+    "./plugins/flow": {
+      "types": "./plugins/flow.d.ts",
+      "require": "./plugins/flow.js",
+      "default": "./plugins/flow.mjs"
+    },
+    "./plugins/typescript": {
+      "types": "./plugins/typescript.d.ts",
+      "require": "./plugins/typescript.js",
+      "default": "./plugins/typescript.mjs"
+    },
+    "./plugins/acorn": {
+      "types": "./plugins/acorn.d.ts",
+      "require": "./plugins/acorn.js",
+      "default": "./plugins/acorn.mjs"
+    },
+    "./plugins/meriyah": {
+      "types": "./plugins/meriyah.d.ts",
+      "require": "./plugins/meriyah.js",
+      "default": "./plugins/meriyah.mjs"
+    },
+    "./plugins/angular": {
+      "types": "./plugins/angular.d.ts",
+      "require": "./plugins/angular.js",
+      "default": "./plugins/angular.mjs"
+    },
+    "./plugins/postcss": {
+      "types": "./plugins/postcss.d.ts",
+      "require": "./plugins/postcss.js",
+      "default": "./plugins/postcss.mjs"
+    },
+    "./plugins/graphql": {
+      "types": "./plugins/graphql.d.ts",
+      "require": "./plugins/graphql.js",
+      "default": "./plugins/graphql.mjs"
+    },
+    "./plugins/markdown": {
+      "types": "./plugins/markdown.d.ts",
+      "require": "./plugins/markdown.js",
+      "default": "./plugins/markdown.mjs"
+    },
+    "./plugins/glimmer": {
+      "types": "./plugins/glimmer.d.ts",
+      "require": "./plugins/glimmer.js",
+      "default": "./plugins/glimmer.mjs"
+    },
+    "./plugins/html": {
+      "types": "./plugins/html.d.ts",
+      "require": "./plugins/html.js",
+      "default": "./plugins/html.mjs"
+    },
+    "./plugins/yaml": {
+      "types": "./plugins/yaml.d.ts",
+      "require": "./plugins/yaml.js",
+      "default": "./plugins/yaml.mjs"
+    },
+    "./esm/standalone.mjs": "./standalone.mjs",
+    "./parser-babel": "./plugins/babel.js",
+    "./parser-babel.js": "./plugins/babel.js",
+    "./esm/parser-babel.mjs": "./plugins/babel.mjs",
+    "./parser-flow": "./plugins/flow.js",
+    "./parser-flow.js": "./plugins/flow.js",
+    "./esm/parser-flow.mjs": "./plugins/flow.mjs",
+    "./parser-typescript": "./plugins/typescript.js",
+    "./parser-typescript.js": "./plugins/typescript.js",
+    "./esm/parser-typescript.mjs": "./plugins/typescript.mjs",
+    "./parser-espree": "./plugins/acorn.js",
+    "./parser-espree.js": "./plugins/acorn.js",
+    "./esm/parser-espree.mjs": "./plugins/acorn.mjs",
+    "./parser-meriyah": "./plugins/meriyah.js",
+    "./parser-meriyah.js": "./plugins/meriyah.js",
+    "./esm/parser-meriyah.mjs": "./plugins/meriyah.mjs",
+    "./parser-angular": "./plugins/angular.js",
+    "./parser-angular.js": "./plugins/angular.js",
+    "./esm/parser-angular.mjs": "./plugins/angular.mjs",
+    "./parser-postcss": "./plugins/postcss.js",
+    "./parser-postcss.js": "./plugins/postcss.js",
+    "./esm/parser-postcss.mjs": "./plugins/postcss.mjs",
+    "./parser-graphql": "./plugins/graphql.js",
+    "./parser-graphql.js": "./plugins/graphql.js",
+    "./esm/parser-graphql.mjs": "./plugins/graphql.mjs",
+    "./parser-markdown": "./plugins/markdown.js",
+    "./parser-markdown.js": "./plugins/markdown.js",
+    "./esm/parser-markdown.mjs": "./plugins/markdown.mjs",
+    "./parser-glimmer": "./plugins/glimmer.js",
+    "./parser-glimmer.js": "./plugins/glimmer.js",
+    "./esm/parser-glimmer.mjs": "./plugins/glimmer.mjs",
+    "./parser-html": "./plugins/html.js",
+    "./parser-html.js": "./plugins/html.js",
+    "./esm/parser-html.mjs": "./plugins/html.mjs",
+    "./parser-yaml": "./plugins/yaml.js",
+    "./parser-yaml.js": "./plugins/yaml.js",
+    "./esm/parser-yaml.mjs": "./plugins/yaml.mjs"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "THIRD-PARTY-NOTICES.md",
+    "bin/prettier.cjs",
+    "doc.d.ts",
+    "doc.js",
+    "doc.mjs",
+    "index.cjs",
+    "index.d.ts",
+    "index.d.ts",
+    "index.mjs",
+    "internal/experimental-cli-worker.mjs",
+    "internal/experimental-cli.mjs",
+    "internal/legacy-cli.mjs",
+    "package.json",
+    "plugins/acorn.d.ts",
+    "plugins/acorn.js",
+    "plugins/acorn.mjs",
+    "plugins/angular.d.ts",
+    "plugins/angular.js",
+    "plugins/angular.mjs",
+    "plugins/babel.d.ts",
+    "plugins/babel.js",
+    "plugins/babel.mjs",
+    "plugins/estree.d.ts",
+    "plugins/estree.js",
+    "plugins/estree.mjs",
+    "plugins/flow.d.ts",
+    "plugins/flow.js",
+    "plugins/flow.mjs",
+    "plugins/glimmer.d.ts",
+    "plugins/glimmer.js",
+    "plugins/glimmer.mjs",
+    "plugins/graphql.d.ts",
+    "plugins/graphql.js",
+    "plugins/graphql.mjs",
+    "plugins/html.d.ts",
+    "plugins/html.js",
+    "plugins/html.mjs",
+    "plugins/markdown.d.ts",
+    "plugins/markdown.js",
+    "plugins/markdown.mjs",
+    "plugins/meriyah.d.ts",
+    "plugins/meriyah.js",
+    "plugins/meriyah.mjs",
+    "plugins/postcss.d.ts",
+    "plugins/postcss.js",
+    "plugins/postcss.mjs",
+    "plugins/typescript.d.ts",
+    "plugins/typescript.js",
+    "plugins/typescript.mjs",
+    "plugins/yaml.d.ts",
+    "plugins/yaml.js",
+    "plugins/yaml.mjs",
+    "standalone.d.ts",
+    "standalone.js",
+    "standalone.mjs"
+  ],
+  "preferUnplugged": true,
+  "sideEffects": false,
+  "type": "commonjs"
+}

node_modules/prettier/plugins/acorn.d.ts

@@ -0,0 +1,6 @@
+import { Parser } from "../index.js";
+
+export declare const parsers: {
+  acorn: Parser;
+  espree: Parser;
+};

node_modules/prettier/plugins/angular.d.ts

@@ -0,0 +1,8 @@
+import { Parser } from "../index.js";
+
+export declare const parsers: {
+  __ng_action: Parser;
+  __ng_binding: Parser;
+  __ng_directive: Parser;
+  __ng_interpolation: Parser;
+};

node_modules/prettier/plugins/babel.d.ts

@@ -0,0 +1,18 @@
+import { Parser } from "../index.js";
+
+export declare const parsers: {
+  __babel_estree: Parser;
+  __js_expression: Parser;
+  __ts_expression: Parser;
+  __vue_event_binding: Parser;
+  __vue_expression: Parser;
+  __vue_ts_event_binding: Parser;
+  __vue_ts_expression: Parser;
+  babel: Parser;
+  "babel-flow": Parser;
+  "babel-ts": Parser;
+  json: Parser;
+  "json-stringify": Parser;
+  json5: Parser;
+  jsonc: Parser;
+};

node_modules/prettier/plugins/estree.d.ts

@@ -0,0 +1,6 @@
+import { Printer } from "../index.js";
+
+export declare const printers: {
+  estree: Printer;
+  "estree-json": Printer;
+};

node_modules/prettier/plugins/flow.d.ts

@@ -0,0 +1,5 @@
+import { Parser } from "../index.js";
+
+export declare const parsers: {
+  flow: Parser;
+};

node_modules/prettier/plugins/glimmer.d.ts

@@ -0,0 +1,9 @@
+import { Parser, Printer } from "../index.js";
+
+export declare const parsers: {
+  glimmer: Parser;
+};
+
+export declare const printers: {
+  glimmer: Printer;
+};

node_modules/prettier/plugins/graphql.d.ts

@@ -0,0 +1,9 @@
+import { Parser, Printer } from "../index.js";
+
+export declare const parsers: {
+  graphql: Parser;
+};
+
+export declare const printers: {
+  graphql: Printer;
+};

node_modules/prettier/plugins/html.d.ts

@@ -0,0 +1,13 @@
+import { Parser, Printer } from "../index.js";
+
+export declare const parsers: {
+  angular: Parser;
+  html: Parser;
+  lwc: Parser;
+  mjml: Parser;
+  vue: Parser;
+};
+
+export declare const printers: {
+  html: Printer;
+};

node_modules/prettier/plugins/markdown.d.ts

@@ -0,0 +1,11 @@
+import { Parser, Printer } from "../index.js";
+
+export declare const parsers: {
+  markdown: Parser;
+  mdx: Parser;
+  remark: Parser;
+};
+
+export declare const printers: {
+  mdast: Printer;
+};

node_modules/prettier/plugins/meriyah.d.ts

@@ -0,0 +1,5 @@
+import { Parser } from "../index.js";
+
+export declare const parsers: {
+  meriyah: Parser;
+};

node_modules/prettier/plugins/postcss.d.ts

@@ -0,0 +1,11 @@
+import { Parser, Printer } from "../index.js";
+
+export declare const parsers: {
+  css: Parser;
+  less: Parser;
+  scss: Parser;
+};
+
+export declare const printers: {
+  postcss: Printer;
+};

node_modules/prettier/plugins/typescript.d.ts

@@ -0,0 +1,5 @@
+import { Parser } from "../index.js";
+
+export declare const parsers: {
+  typescript: Parser;
+};

node_modules/prettier/plugins/yaml.d.ts

@@ -0,0 +1,9 @@
+import { Parser, Printer } from "../index.js";
+
+export declare const parsers: {
+  yaml: Parser;
+};
+
+export declare const printers: {
+  yaml: Printer;
+};

node_modules/prettier/standalone.d.ts

@@ -0,0 +1,33 @@
+import { CursorOptions, CursorResult, Options, SupportInfo } from "./index.js";
+
+/**
+ * formatWithCursor both formats the code, and translates a cursor position from unformatted code to formatted code.
+ * This is useful for editor integrations, to prevent the cursor from moving when code is formatted
+ *
+ * The cursorOffset option should be provided, to specify where the cursor is.
+ *
+ * ```js
+ * await prettier.formatWithCursor(" 1", { cursorOffset: 2, parser: "babel" });
+ * ```
+ * `-> { formatted: "1;\n", cursorOffset: 1 }`
+ */
+export function formatWithCursor(
+  source: string,
+  options: CursorOptions,
+): Promise<CursorResult>;
+
+/**
+ * `format` is used to format text using Prettier. [Options](https://prettier.io/docs/options) may be provided to override the defaults.
+ */
+export function format(source: string, options?: Options): Promise<string>;
+
+/**
+ * `check` checks to see if the file has been formatted with Prettier given those options and returns a `Boolean`.
+ * This is similar to the `--list-different` parameter in the CLI and is useful for running Prettier in CI scenarios.
+ */
+export function check(source: string, options?: Options): Promise<boolean>;
+
+/**
+ * Returns an object representing the parsers, languages and file types Prettier supports for the current version.
+ */
+export function getSupportInfo(): Promise<SupportInfo>;

package-lock.json

@@ -0,0 +1,32 @@
+{
+  "name": "havox",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "havox",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "prettier": "^3.8.1"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "havox",
+  "version": "1.0.0",
+  "description": "",
+  "main": "404.js",
+  "scripts": {
+    "format": "prettier --write ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.umbra.mom:jay/havox.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "prettier": "^3.8.1"
+  }
+}

projects/cellular_automata/asset-manifest.json

@@ -6,8 +6,5 @@
     "main.5cae1eb5.css.map": "/projects/cellular_automata/static/css/main.5cae1eb5.css.map",
     "main.608a23ae.js.map": "/projects/cellular_automata/static/js/main.608a23ae.js.map"
   },
-  "entrypoints": [
-    "static/css/main.5cae1eb5.css",
-    "static/js/main.608a23ae.js"
-  ]
+  "entrypoints": ["static/css/main.5cae1eb5.css", "static/js/main.608a23ae.js"]
 }

projects/cellular_automata/index.html

@@ -1 +1,31 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/projects/cellular_automata/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/projects/cellular_automata/logo192.png"/><link rel="manifest" href="/projects/cellular_automata/manifest.json"/><title>React App</title><script defer="defer" src="/projects/cellular_automata/static/js/main.608a23ae.js"></script><link href="/projects/cellular_automata/static/css/main.5cae1eb5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/projects/cellular_automata/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="/projects/cellular_automata/logo192.png"
+    />
+    <link rel="manifest" href="/projects/cellular_automata/manifest.json" />
+    <title>React App</title>
+    <script
+      defer="defer"
+      src="/projects/cellular_automata/static/js/main.608a23ae.js"
+    ></script>
+    <link
+      href="/projects/cellular_automata/static/css/main.5cae1eb5.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

projects/cellular_automata/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

projects/cellular_automata/static/css/main.5cae1eb5.css

@@ -1,2 +1,173 @@
-#root,body,html{margin:0;min-height:100%}body{background:radial-gradient(circle at top,#eef4ff 0,#f8fbff 55%,#eef2f7 100%);color:#0f172a;font-family:Segoe UI,sans-serif}.cell{border:1px solid #1f2937;box-sizing:border-box;margin:0;padding:0}.dead{background:#000}.alive{background:#fff}.board{border:1px solid #94a3b8;cursor:crosshair;display:inline-block;-webkit-user-select:none;user-select:none}.row{display:flex}.horizontal-slider{margin:auto;width:100%}.example-thumb{background:#fff;border:5px solid #3774ff;border-radius:100%;box-shadow:0 0 2px 0 #00000070;cursor:pointer;display:block;position:absolute;z-index:100}.example-thumb.active{background-color:grey}.example-track{background:#ddd;position:relative}.example-track.example-track-0{background:#83a9ff}.horizontal-slider .example-track{height:4px;top:20px}.horizontal-slider .example-thumb{height:10px;line-height:38px;outline:none;top:12px;width:10px}.radioGroup{grid-gap:.45rem;display:grid;gap:.45rem}.radioOption{align-items:center;color:#1e293b;cursor:pointer;display:flex;font-size:.92rem;gap:.5rem}.radioOption input{accent-color:#2f7df6;margin:0}.title{margin:2rem 0 1.25rem;text-align:center}.title h1{color:#0f172a;font-size:2.2rem;letter-spacing:.03em;margin:0}.title p{color:#475569;font-size:.95rem;margin:.35rem 0 0}.body{align-items:flex-start;display:flex;gap:1.25rem;justify-content:center;margin:0 auto 1.75rem;max-width:980px;padding:0 1rem}.gameBoard{padding:.6rem}.controlPanel,.gameBoard{background:#fff;border:1px solid #d5deea;border-radius:12px;box-shadow:0 12px 28px #0f172a1a}.controlPanel{color:#1e293b;padding:1rem;width:270px}.panelSection{margin-bottom:1rem}.panelSection h3{color:#334155;font-size:.95rem;margin:0 0 .5rem}.buttonRow{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);margin-bottom:1.1rem}.controlButton{background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;color:#1e293b;cursor:pointer;font-weight:500;padding:.45rem .35rem}.controlButton:hover{background:#eef2f8}.sliderContainer{grid-gap:.25rem;display:grid;gap:.25rem}.sliderContainer span{color:#334155;font-size:.95rem}.fpsValue{color:#64748b;font-size:.85rem;margin:.3rem 0 0}
+#root,
+body,
+html {
+  margin: 0;
+  min-height: 100%;
+}
+body {
+  background: radial-gradient(
+    circle at top,
+    #eef4ff 0,
+    #f8fbff 55%,
+    #eef2f7 100%
+  );
+  color: #0f172a;
+  font-family:
+    Segoe UI,
+    sans-serif;
+}
+.cell {
+  border: 1px solid #1f2937;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+.dead {
+  background: #000;
+}
+.alive {
+  background: #fff;
+}
+.board {
+  border: 1px solid #94a3b8;
+  cursor: crosshair;
+  display: inline-block;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.row {
+  display: flex;
+}
+.horizontal-slider {
+  margin: auto;
+  width: 100%;
+}
+.example-thumb {
+  background: #fff;
+  border: 5px solid #3774ff;
+  border-radius: 100%;
+  box-shadow: 0 0 2px 0 #00000070;
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  z-index: 100;
+}
+.example-thumb.active {
+  background-color: grey;
+}
+.example-track {
+  background: #ddd;
+  position: relative;
+}
+.example-track.example-track-0 {
+  background: #83a9ff;
+}
+.horizontal-slider .example-track {
+  height: 4px;
+  top: 20px;
+}
+.horizontal-slider .example-thumb {
+  height: 10px;
+  line-height: 38px;
+  outline: none;
+  top: 12px;
+  width: 10px;
+}
+.radioGroup {
+  grid-gap: 0.45rem;
+  display: grid;
+  gap: 0.45rem;
+}
+.radioOption {
+  align-items: center;
+  color: #1e293b;
+  cursor: pointer;
+  display: flex;
+  font-size: 0.92rem;
+  gap: 0.5rem;
+}
+.radioOption input {
+  accent-color: #2f7df6;
+  margin: 0;
+}
+.title {
+  margin: 2rem 0 1.25rem;
+  text-align: center;
+}
+.title h1 {
+  color: #0f172a;
+  font-size: 2.2rem;
+  letter-spacing: 0.03em;
+  margin: 0;
+}
+.title p {
+  color: #475569;
+  font-size: 0.95rem;
+  margin: 0.35rem 0 0;
+}
+.body {
+  align-items: flex-start;
+  display: flex;
+  gap: 1.25rem;
+  justify-content: center;
+  margin: 0 auto 1.75rem;
+  max-width: 980px;
+  padding: 0 1rem;
+}
+.gameBoard {
+  padding: 0.6rem;
+}
+.controlPanel,
+.gameBoard {
+  background: #fff;
+  border: 1px solid #d5deea;
+  border-radius: 12px;
+  box-shadow: 0 12px 28px #0f172a1a;
+}
+.controlPanel {
+  color: #1e293b;
+  padding: 1rem;
+  width: 270px;
+}
+.panelSection {
+  margin-bottom: 1rem;
+}
+.panelSection h3 {
+  color: #334155;
+  font-size: 0.95rem;
+  margin: 0 0 0.5rem;
+}
+.buttonRow {
+  grid-gap: 0.5rem;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(3, 1fr);
+  margin-bottom: 1.1rem;
+}
+.controlButton {
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  color: #1e293b;
+  cursor: pointer;
+  font-weight: 500;
+  padding: 0.45rem 0.35rem;
+}
+.controlButton:hover {
+  background: #eef2f8;
+}
+.sliderContainer {
+  grid-gap: 0.25rem;
+  display: grid;
+  gap: 0.25rem;
+}
+.sliderContainer span {
+  color: #334155;
+  font-size: 0.95rem;
+}
+.fpsValue {
+  color: #64748b;
+  font-size: 0.85rem;
+  margin: 0.3rem 0 0;
+}
 /*# sourceMappingURL=main.5cae1eb5.css.map*/

projects/cubic_bezier_curve/cLine.js

@@ -1,13 +1,13 @@
 class cLine {
-    constructor(a, b, col = color(180, 180, 180, 140), w = 2) {
-        this.a = a;
-        this.b = b;
-        this.col = col;
-        this.w = w;
-    }
-    drawLine() {
-        stroke(this.col);
-        strokeWeight(this.w);
-        line(this.a.x, this.a.y, this.b.x, this.b.y);
-    }
+  constructor(a, b, col = color(180, 180, 180, 140), w = 2) {
+    this.a = a;
+    this.b = b;
+    this.col = col;
+    this.w = w;
+  }
+  drawLine() {
+    stroke(this.col);
+    strokeWeight(this.w);
+    line(this.a.x, this.a.y, this.b.x, this.b.y);
+  }
 }

projects/cubic_bezier_curve/cPoint.js

@@ -1,44 +1,52 @@
 class cPoint {
-    constructor(x, y, kind = 'control') {
-        this.x = x;
-        this.y = y;
-        this.kind = kind;
-        this.r = 9;
-    }
-    set changeX(nx) { this.x = nx; }
-    set changeY(ny) { this.y = ny; }
-    get changeX() { return this.x; }
-    get changeY() { return this.y; }
+  constructor(x, y, kind = 'control') {
+    this.x = x;
+    this.y = y;
+    this.kind = kind;
+    this.r = 9;
+  }
+  set changeX(nx) {
+    this.x = nx;
+  }
+  set changeY(ny) {
+    this.y = ny;
+  }
+  get changeX() {
+    return this.x;
+  }
+  get changeY() {
+    return this.y;
+  }
 
-    isHit(mx, my, r = HIT_R) {
-        return dist(mx, my, this.x, this.y) <= r;
+  isHit(mx, my, r = HIT_R) {
+    return dist(mx, my, this.x, this.y) <= r;
+  }
+
+  drawPoint(hovered = false, selected = false, styleOverride = null) {
+    strokeWeight(2);
+    if (styleOverride) {
+      stroke(...styleOverride.stroke);
+      fill(...styleOverride.fill);
+    } else {
+      if (this.kind === 'end') {
+        stroke(0, 220, 90, 240);
+        fill(40, 240, 120, 200);
+      } else if (this.kind === 'control') {
+        stroke(240, 140, 0, 240);
+        fill(255, 180, 40, 200);
+      } else {
+        stroke(140, 160);
+        fill(190, 160);
+      }
     }
 
-    drawPoint(hovered = false, selected = false, styleOverride = null) {
-        strokeWeight(2);
-        if (styleOverride) {
-            stroke(...styleOverride.stroke);
-            fill(...styleOverride.fill);
-        } else {
-            if (this.kind === 'end') {
-                stroke(0, 220, 90, 240);
-                fill(40, 240, 120, 200);
-            } else if (this.kind === 'control') {
-                stroke(240, 140, 0, 240);
-                fill(255, 180, 40, 200);
-            } else {
-                stroke(140, 160);
-                fill(190, 160);
-            }
-        }
-
-        if (selected) {
-            stroke(255, 255, 0);
-            strokeWeight(3);
-        } else if (hovered) {
-            stroke(255);
-        }
-
-        circle(this.x, this.y, this.r * 2);
+    if (selected) {
+      stroke(255, 255, 0);
+      strokeWeight(3);
+    } else if (hovered) {
+      stroke(255);
     }
+
+    circle(this.x, this.y, this.r * 2);
+  }
 }

projects/cubic_bezier_curve/sketch.js

@@ -1,6 +1,8 @@
-let p = [], v = [];
+let p = [],
+  v = [];
 let lines = [];
-let theta = (3 / 2) * Math.PI, t = 0;
+let theta = (3 / 2) * Math.PI,
+  t = 0;
 let paused = false;
 let showLabels = false;
 let showInterPoints = true;
@@ -13,227 +15,236 @@ const HIT_R = 10;
 const MAX_TRAIL = 1000;
 
 function setup() {
-    createCanvas(1000, 800);
-    initCubicCurve(true);
+  createCanvas(1000, 800);
+  initCubicCurve(true);
 }
 
 function draw() {
-    background(32);
+  background(32);
 
-    stroke(120, 120, 120, 180);
-    strokeWeight(2);
-    noFill();
-    beginShape();
-    vertex(p[0].x, p[0].y);
-    vertex(p[1].x, p[1].y);
-    vertex(p[2].x, p[2].y);
-    vertex(p[3].x, p[3].y);
-    endShape();
+  stroke(120, 120, 120, 180);
+  strokeWeight(2);
+  noFill();
+  beginShape();
+  vertex(p[0].x, p[0].y);
+  vertex(p[1].x, p[1].y);
+  vertex(p[2].x, p[2].y);
+  vertex(p[3].x, p[3].y);
+  endShape();
 
-    if (!paused) {
-        if (theta > TWO_PI) theta = 0;
-        theta += 0.01;
-        t = (sin(theta) + 1) / 2; // 0..1
-    }
+  if (!paused) {
+    if (theta > TWO_PI) theta = 0;
+    theta += 0.01;
+    t = (sin(theta) + 1) / 2; // 0..1
+  }
 
-    lerpCubicCurve();
+  lerpCubicCurve();
 
-    for (let i = 0; i < lines.length; i++) {
-        lines[i].drawLine();
-    }
+  for (let i = 0; i < lines.length; i++) {
+    lines[i].drawLine();
+  }
 
-    drawCurve();
-    drawPointsAndLabels();
-    drawHUD();
+  drawCurve();
+  drawPointsAndLabels();
+  drawHUD();
 }
 
 function drawCurve() {
-    if (v.length > MAX_TRAIL) v.splice(0, v.length - MAX_TRAIL);
+  if (v.length > MAX_TRAIL) v.splice(0, v.length - MAX_TRAIL);
 
-    stroke(0, 255, 0, 200);
-    strokeWeight(5);
-    noFill();
-    beginShape();
-    for (let i = 0; i < v.length; i++) {
-        vertex(v[i].x, v[i].y);
-    }
-    endShape();
+  stroke(0, 255, 0, 200);
+  strokeWeight(5);
+  noFill();
+  beginShape();
+  for (let i = 0; i < v.length; i++) {
+    vertex(v[i].x, v[i].y);
+  }
+  endShape();
 }
 
 function drawPointsAndLabels() {
-    push();
-    noStroke();
-    fill(255, 70, 70, 230);
-    circle(p[9].x, p[9].y, 14);
-    pop();
-
-    for (let i = 0; i < 4; i++) {
-        const hovered = (i === hoverIndex);
-        const selected = (i === selectedIndex);
-        p[i].drawPoint(hovered, selected);
-        if (showLabels) {
-            noStroke();
-            fill(255);
-            textSize(14);
-            textAlign(LEFT, BOTTOM);
-            text(`P${i}`, p[i].x + 10, p[i].y - 10);
-        }
-    }
+  push();
+  noStroke();
+  fill(255, 70, 70, 230);
+  circle(p[9].x, p[9].y, 14);
+  pop();
 
+  for (let i = 0; i < 4; i++) {
+    const hovered = i === hoverIndex;
+    const selected = i === selectedIndex;
+    p[i].drawPoint(hovered, selected);
     if (showLabels) {
-        noStroke(); fill(220);
-        textSize(12); textAlign(LEFT, BOTTOM);
-        text(`P4`, p[4].x + 8, p[4].y - 8);
+      noStroke();
+      fill(255);
+      textSize(14);
+      textAlign(LEFT, BOTTOM);
+      text(`P${i}`, p[i].x + 10, p[i].y - 10);
     }
+  }
 
-    if (showInterPoints) {
-        const styleMid = {
-            stroke: [80, 180, 255, 100],
-            fill: [80, 180, 255, 50]
-        };
-        for (let i = 4; i <= 8; i++) {
-            p[i].drawPoint(false, false, styleMid);
-            if (showLabels) {
-                noStroke(); fill(200);
-                textSize(12); textAlign(LEFT, BOTTOM);
-                text(`P${i}`, p[i].x + 8, p[i].y - 8);
-            }
-        }
+  if (showLabels) {
+    noStroke();
+    fill(220);
+    textSize(12);
+    textAlign(LEFT, BOTTOM);
+    text(`P4`, p[4].x + 8, p[4].y - 8);
+  }
+
+  if (showInterPoints) {
+    const styleMid = {
+      stroke: [80, 180, 255, 100],
+      fill: [80, 180, 255, 50],
+    };
+    for (let i = 4; i <= 8; i++) {
+      p[i].drawPoint(false, false, styleMid);
+      if (showLabels) {
+        noStroke();
+        fill(200);
+        textSize(12);
+        textAlign(LEFT, BOTTOM);
+        text(`P${i}`, p[i].x + 8, p[i].y - 8);
+      }
     }
+  }
 }
 
 function drawHUD() {
-    noStroke();
-    fill(255);
-    textSize(14);
-    textAlign(LEFT, TOP);
-    const hud = [
-        `t = ${t.toFixed(3)}`,
-        `Space = ${paused ? 'Resume' : 'Pause'}`,
-        `H = Toggle points 5..8  |  L = Toggle labels  |  R = Reset`,
-        `Drag a handle (P0..P3). Hold Shift to move the entire curve.`
-    ];
-    for (let i = 0; i < hud.length; i++) {
-        text(hud[i], 12, 12 + i * 18);
-    }
+  noStroke();
+  fill(255);
+  textSize(14);
+  textAlign(LEFT, TOP);
+  const hud = [
+    `t = ${t.toFixed(3)}`,
+    `Space = ${paused ? 'Resume' : 'Pause'}`,
+    `H = Toggle points 5..8  |  L = Toggle labels  |  R = Reset`,
+    `Drag a handle (P0..P3). Hold Shift to move the entire curve.`,
+  ];
+  for (let i = 0; i < hud.length; i++) {
+    text(hud[i], 12, 12 + i * 18);
+  }
 }
 
 function initCubicCurve(resetPositions = true) {
-    p.length = 0;
-    v.length = 0;
-    lines.length = 0;
-    theta = (3 / 2) * Math.PI;
-    t = 0;
+  p.length = 0;
+  v.length = 0;
+  lines.length = 0;
+  theta = (3 / 2) * Math.PI;
+  t = 0;
 
-    if (resetPositions) {
-        p[0] = new cPoint(width * 0.15, height * 0.75, 'end');
-        p[1] = new cPoint(width * 0.35, height * 0.20, 'control');
-        p[2] = new cPoint(width * 0.65, height * 0.20, 'control');
-        p[3] = new cPoint(width * 0.85, height * 0.75, 'end');
-    } else {
-        for (let i = 0; i < 4; i++) {
-            if (!p[i]) p[i] = new cPoint(width * (0.15 + i * 0.2), height / 2, i === 0 || i === 3 ? 'end' : 'control');
-        }
+  if (resetPositions) {
+    p[0] = new cPoint(width * 0.15, height * 0.75, 'end');
+    p[1] = new cPoint(width * 0.35, height * 0.2, 'control');
+    p[2] = new cPoint(width * 0.65, height * 0.2, 'control');
+    p[3] = new cPoint(width * 0.85, height * 0.75, 'end');
+  } else {
+    for (let i = 0; i < 4; i++) {
+      if (!p[i])
+        p[i] = new cPoint(
+          width * (0.15 + i * 0.2),
+          height / 2,
+          i === 0 || i === 3 ? 'end' : 'control'
+        );
     }
+  }
 
-    // Derived points
-    p[4] = new cPoint(0, 0, 'derived');
-    p[5] = new cPoint(0, 0, 'derived');
-    p[6] = new cPoint(0, 0, 'derived');
-    p[7] = new cPoint(0, 0, 'derived');
-    p[8] = new cPoint(0, 0, 'derived');
-    p[9] = new cPoint(0, 0, 'derived');
+  // Derived points
+  p[4] = new cPoint(0, 0, 'derived');
+  p[5] = new cPoint(0, 0, 'derived');
+  p[6] = new cPoint(0, 0, 'derived');
+  p[7] = new cPoint(0, 0, 'derived');
+  p[8] = new cPoint(0, 0, 'derived');
+  p[9] = new cPoint(0, 0, 'derived');
 
-    lines[0] = new cLine(p[4], p[5], color(160, 160, 160, 200), 2);
-    lines[1] = new cLine(p[5], p[6], color(160, 160, 160, 200), 2);
+  lines[0] = new cLine(p[4], p[5], color(160, 160, 160, 200), 2);
+  lines[1] = new cLine(p[5], p[6], color(160, 160, 160, 200), 2);
 
-    lines[2] = new cLine(p[7], p[8], color(200, 200, 200, 220), 3);
+  lines[2] = new cLine(p[7], p[8], color(200, 200, 200, 220), 3);
 }
 
 function lerpCubicCurve() {
-    // Level 1
-    p[4].changeX = (1 - t) * p[0].x + t * p[1].x;
-    p[4].changeY = (1 - t) * p[0].y + t * p[1].y;
+  // Level 1
+  p[4].changeX = (1 - t) * p[0].x + t * p[1].x;
+  p[4].changeY = (1 - t) * p[0].y + t * p[1].y;
 
-    p[5].changeX = (1 - t) * p[1].x + t * p[2].x;
-    p[5].changeY = (1 - t) * p[1].y + t * p[2].y;
+  p[5].changeX = (1 - t) * p[1].x + t * p[2].x;
+  p[5].changeY = (1 - t) * p[1].y + t * p[2].y;
 
-    p[6].changeX = (1 - t) * p[2].x + t * p[3].x;
-    p[6].changeY = (1 - t) * p[2].y + t * p[3].y;
+  p[6].changeX = (1 - t) * p[2].x + t * p[3].x;
+  p[6].changeY = (1 - t) * p[2].y + t * p[3].y;
 
-    // Level 2
-    p[7].changeX = (1 - t) * p[4].x + t * p[5].x;
-    p[7].changeY = (1 - t) * p[4].y + t * p[5].y;
+  // Level 2
+  p[7].changeX = (1 - t) * p[4].x + t * p[5].x;
+  p[7].changeY = (1 - t) * p[4].y + t * p[5].y;
 
-    p[8].changeX = (1 - t) * p[5].x + t * p[6].x;
-    p[8].changeY = (1 - t) * p[5].y + t * p[6].y;
+  p[8].changeX = (1 - t) * p[5].x + t * p[6].x;
+  p[8].changeY = (1 - t) * p[5].y + t * p[6].y;
 
-    // Final on-curve
-    p[9].changeX = (1 - t) * p[7].x + t * p[8].x;
-    p[9].changeY = (1 - t) * p[7].y + t * p[8].y;
+  // Final on-curve
+  p[9].changeX = (1 - t) * p[7].x + t * p[8].x;
+  p[9].changeY = (1 - t) * p[7].y + t * p[8].y;
 
-    v.push(new cPoint(p[9].x, p[9].y, 'derived'));
+  v.push(new cPoint(p[9].x, p[9].y, 'derived'));
 }
 
 function mouseMoved() {
-    hoverIndex = -1;
-    for (let i = 0; i < 4; i++) {
-        if (p[i].isHit(mouseX, mouseY)) {
-            hoverIndex = i;
-            break;
-        }
+  hoverIndex = -1;
+  for (let i = 0; i < 4; i++) {
+    if (p[i].isHit(mouseX, mouseY)) {
+      hoverIndex = i;
+      break;
     }
+  }
 }
 
 function mousePressed() {
-    prevMouse.x = mouseX;
-    prevMouse.y = mouseY;
+  prevMouse.x = mouseX;
+  prevMouse.y = mouseY;
 
-    selectedIndex = -1;
-    for (let i = 0; i < 4; i++) {
-        if (p[i].isHit(mouseX, mouseY)) {
-            selectedIndex = i;
-            break;
-        }
+  selectedIndex = -1;
+  for (let i = 0; i < 4; i++) {
+    if (p[i].isHit(mouseX, mouseY)) {
+      selectedIndex = i;
+      break;
     }
+  }
 
-    draggingAll = keyIsDown(SHIFT) && selectedIndex === -1;
+  draggingAll = keyIsDown(SHIFT) && selectedIndex === -1;
 }
 
 function mouseDragged() {
-    const dx = mouseX - prevMouse.x;
-    const dy = mouseY - prevMouse.y;
+  const dx = mouseX - prevMouse.x;
+  const dy = mouseY - prevMouse.y;
 
-    if (selectedIndex >= 0) {
-        p[selectedIndex].changeX = mouseX;
-        p[selectedIndex].changeY = mouseY;
-        v.length = 0;
-    } else if (draggingAll) {
-        for (let i = 0; i < 4; i++) {
-            p[i].changeX = p[i].x + dx;
-            p[i].changeY = p[i].y + dy;
-        }
-        v.length = 0;
+  if (selectedIndex >= 0) {
+    p[selectedIndex].changeX = mouseX;
+    p[selectedIndex].changeY = mouseY;
+    v.length = 0;
+  } else if (draggingAll) {
+    for (let i = 0; i < 4; i++) {
+      p[i].changeX = p[i].x + dx;
+      p[i].changeY = p[i].y + dy;
     }
+    v.length = 0;
+  }
 
-    prevMouse.x = mouseX;
-    prevMouse.y = mouseY;
-    return false;
+  prevMouse.x = mouseX;
+  prevMouse.y = mouseY;
+  return false;
 }
 
 function mouseReleased() {
-    selectedIndex = -1;
-    draggingAll = false;
+  selectedIndex = -1;
+  draggingAll = false;
 }
 
 function keyPressed() {
-    if (key === ' ') {
-        paused = !paused;
-    } else if (key === 'R' || key === 'r') {
-        initCubicCurve(true);
-    } else if (key === 'H' || key === 'h') {
-        showInterPoints = !showInterPoints;
-    } else if (key === 'L' || key === 'l') {
-        showLabels = !showLabels;
-    }
+  if (key === ' ') {
+    paused = !paused;
+  } else if (key === 'R' || key === 'r') {
+    initCubicCurve(true);
+  } else if (key === 'H' || key === 'h') {
+    showInterPoints = !showInterPoints;
+  } else if (key === 'L' || key === 'l') {
+    showLabels = !showLabels;
+  }
 }

projects/flocking/pkg/flocking.d.ts

@@ -2,46 +2,51 @@
 /* eslint-disable */
 
 export class SimulationWasm {
-    free(): void;
-    [Symbol.dispose](): void;
-    add_boid(): void;
-    boid_buffer_len(): number;
-    boid_buffer_ptr(): number;
-    boid_buffer_stride(): number;
-    get_align_mult(): number;
-    get_boid_count(): number;
-    get_cohesion_mult(): number;
-    get_separation_mult(): number;
-    constructor(width: number, height: number, num_boids: number);
-    remove_boid(): void;
-    resize(width: number, height: number): void;
-    set_align_mult(value: number): void;
-    set_cohesion_mult(value: number): void;
-    set_separation_mult(value: number): void;
-    step(): void;
+  free(): void;
+  [Symbol.dispose](): void;
+  add_boid(): void;
+  boid_buffer_len(): number;
+  boid_buffer_ptr(): number;
+  boid_buffer_stride(): number;
+  get_align_mult(): number;
+  get_boid_count(): number;
+  get_cohesion_mult(): number;
+  get_separation_mult(): number;
+  constructor(width: number, height: number, num_boids: number);
+  remove_boid(): void;
+  resize(width: number, height: number): void;
+  set_align_mult(value: number): void;
+  set_cohesion_mult(value: number): void;
+  set_separation_mult(value: number): void;
+  step(): void;
 }
 
-export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+export type InitInput =
+  | RequestInfo
+  | URL
+  | Response
+  | BufferSource
+  | WebAssembly.Module;
 
 export interface InitOutput {
-    readonly memory: WebAssembly.Memory;
-    readonly __wbg_simulationwasm_free: (a: number, b: number) => void;
-    readonly simulationwasm_add_boid: (a: number) => void;
-    readonly simulationwasm_boid_buffer_len: (a: number) => number;
-    readonly simulationwasm_boid_buffer_ptr: (a: number) => number;
-    readonly simulationwasm_boid_buffer_stride: (a: number) => number;
-    readonly simulationwasm_get_align_mult: (a: number) => number;
-    readonly simulationwasm_get_boid_count: (a: number) => number;
-    readonly simulationwasm_get_cohesion_mult: (a: number) => number;
-    readonly simulationwasm_get_separation_mult: (a: number) => number;
-    readonly simulationwasm_new: (a: number, b: number, c: number) => number;
-    readonly simulationwasm_remove_boid: (a: number) => void;
-    readonly simulationwasm_resize: (a: number, b: number, c: number) => void;
-    readonly simulationwasm_set_align_mult: (a: number, b: number) => void;
-    readonly simulationwasm_set_cohesion_mult: (a: number, b: number) => void;
-    readonly simulationwasm_set_separation_mult: (a: number, b: number) => void;
-    readonly simulationwasm_step: (a: number) => void;
-    readonly __wbindgen_export: (a: number) => void;
+  readonly memory: WebAssembly.Memory;
+  readonly __wbg_simulationwasm_free: (a: number, b: number) => void;
+  readonly simulationwasm_add_boid: (a: number) => void;
+  readonly simulationwasm_boid_buffer_len: (a: number) => number;
+  readonly simulationwasm_boid_buffer_ptr: (a: number) => number;
+  readonly simulationwasm_boid_buffer_stride: (a: number) => number;
+  readonly simulationwasm_get_align_mult: (a: number) => number;
+  readonly simulationwasm_get_boid_count: (a: number) => number;
+  readonly simulationwasm_get_cohesion_mult: (a: number) => number;
+  readonly simulationwasm_get_separation_mult: (a: number) => number;
+  readonly simulationwasm_new: (a: number, b: number, c: number) => number;
+  readonly simulationwasm_remove_boid: (a: number) => void;
+  readonly simulationwasm_resize: (a: number, b: number, c: number) => void;
+  readonly simulationwasm_set_align_mult: (a: number, b: number) => void;
+  readonly simulationwasm_set_cohesion_mult: (a: number, b: number) => void;
+  readonly simulationwasm_set_separation_mult: (a: number, b: number) => void;
+  readonly simulationwasm_step: (a: number) => void;
+  readonly __wbindgen_export: (a: number) => void;
 }
 
 export type SyncInitInput = BufferSource | WebAssembly.Module;
@@ -54,7 +59,9 @@ export type SyncInitInput = BufferSource | WebAssembly.Module;
  *
  * @returns {InitOutput}
  */
-export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+export function initSync(
+  module: { module: SyncInitInput } | SyncInitInput
+): InitOutput;
 
 /**
  * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
@@ -64,4 +71,9 @@ export function initSync(module: { module: SyncInitInput } | SyncInitInput): Ini
  *
  * @returns {Promise<InitOutput>}
  */
-export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;
+export default function __wbg_init(
+  module_or_path?:
+    | { module_or_path: InitInput | Promise<InitInput> }
+    | InitInput
+    | Promise<InitInput>
+): Promise<InitOutput>;

projects/flocking/pkg/flocking.js

@@ -1,270 +1,290 @@
 /* @ts-self-types="./flocking.d.ts" */
 
 export class SimulationWasm {
-    __destroy_into_raw() {
-        const ptr = this.__wbg_ptr;
-        this.__wbg_ptr = 0;
-        SimulationWasmFinalization.unregister(this);
-        return ptr;
-    }
-    free() {
-        const ptr = this.__destroy_into_raw();
-        wasm.__wbg_simulationwasm_free(ptr, 0);
-    }
-    add_boid() {
-        wasm.simulationwasm_add_boid(this.__wbg_ptr);
-    }
-    /**
-     * @returns {number}
-     */
-    boid_buffer_len() {
-        const ret = wasm.simulationwasm_boid_buffer_len(this.__wbg_ptr);
-        return ret >>> 0;
-    }
-    /**
-     * @returns {number}
-     */
-    boid_buffer_ptr() {
-        const ret = wasm.simulationwasm_boid_buffer_ptr(this.__wbg_ptr);
-        return ret >>> 0;
-    }
-    /**
-     * @returns {number}
-     */
-    boid_buffer_stride() {
-        const ret = wasm.simulationwasm_boid_buffer_stride(this.__wbg_ptr);
-        return ret >>> 0;
-    }
-    /**
-     * @returns {number}
-     */
-    get_align_mult() {
-        const ret = wasm.simulationwasm_get_align_mult(this.__wbg_ptr);
-        return ret;
-    }
-    /**
-     * @returns {number}
-     */
-    get_boid_count() {
-        const ret = wasm.simulationwasm_get_boid_count(this.__wbg_ptr);
-        return ret >>> 0;
-    }
-    /**
-     * @returns {number}
-     */
-    get_cohesion_mult() {
-        const ret = wasm.simulationwasm_get_cohesion_mult(this.__wbg_ptr);
-        return ret;
-    }
-    /**
-     * @returns {number}
-     */
-    get_separation_mult() {
-        const ret = wasm.simulationwasm_get_separation_mult(this.__wbg_ptr);
-        return ret;
-    }
-    /**
-     * @param {number} width
-     * @param {number} height
-     * @param {number} num_boids
-     */
-    constructor(width, height, num_boids) {
-        const ret = wasm.simulationwasm_new(width, height, num_boids);
-        this.__wbg_ptr = ret >>> 0;
-        SimulationWasmFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
-    remove_boid() {
-        wasm.simulationwasm_remove_boid(this.__wbg_ptr);
-    }
-    /**
-     * @param {number} width
-     * @param {number} height
-     */
-    resize(width, height) {
-        wasm.simulationwasm_resize(this.__wbg_ptr, width, height);
-    }
-    /**
-     * @param {number} value
-     */
-    set_align_mult(value) {
-        wasm.simulationwasm_set_align_mult(this.__wbg_ptr, value);
-    }
-    /**
-     * @param {number} value
-     */
-    set_cohesion_mult(value) {
-        wasm.simulationwasm_set_cohesion_mult(this.__wbg_ptr, value);
-    }
-    /**
-     * @param {number} value
-     */
-    set_separation_mult(value) {
-        wasm.simulationwasm_set_separation_mult(this.__wbg_ptr, value);
-    }
-    step() {
-        wasm.simulationwasm_step(this.__wbg_ptr);
-    }
+  __destroy_into_raw() {
+    const ptr = this.__wbg_ptr;
+    this.__wbg_ptr = 0;
+    SimulationWasmFinalization.unregister(this);
+    return ptr;
+  }
+  free() {
+    const ptr = this.__destroy_into_raw();
+    wasm.__wbg_simulationwasm_free(ptr, 0);
+  }
+  add_boid() {
+    wasm.simulationwasm_add_boid(this.__wbg_ptr);
+  }
+  /**
+   * @returns {number}
+   */
+  boid_buffer_len() {
+    const ret = wasm.simulationwasm_boid_buffer_len(this.__wbg_ptr);
+    return ret >>> 0;
+  }
+  /**
+   * @returns {number}
+   */
+  boid_buffer_ptr() {
+    const ret = wasm.simulationwasm_boid_buffer_ptr(this.__wbg_ptr);
+    return ret >>> 0;
+  }
+  /**
+   * @returns {number}
+   */
+  boid_buffer_stride() {
+    const ret = wasm.simulationwasm_boid_buffer_stride(this.__wbg_ptr);
+    return ret >>> 0;
+  }
+  /**
+   * @returns {number}
+   */
+  get_align_mult() {
+    const ret = wasm.simulationwasm_get_align_mult(this.__wbg_ptr);
+    return ret;
+  }
+  /**
+   * @returns {number}
+   */
+  get_boid_count() {
+    const ret = wasm.simulationwasm_get_boid_count(this.__wbg_ptr);
+    return ret >>> 0;
+  }
+  /**
+   * @returns {number}
+   */
+  get_cohesion_mult() {
+    const ret = wasm.simulationwasm_get_cohesion_mult(this.__wbg_ptr);
+    return ret;
+  }
+  /**
+   * @returns {number}
+   */
+  get_separation_mult() {
+    const ret = wasm.simulationwasm_get_separation_mult(this.__wbg_ptr);
+    return ret;
+  }
+  /**
+   * @param {number} width
+   * @param {number} height
+   * @param {number} num_boids
+   */
+  constructor(width, height, num_boids) {
+    const ret = wasm.simulationwasm_new(width, height, num_boids);
+    this.__wbg_ptr = ret >>> 0;
+    SimulationWasmFinalization.register(this, this.__wbg_ptr, this);
+    return this;
+  }
+  remove_boid() {
+    wasm.simulationwasm_remove_boid(this.__wbg_ptr);
+  }
+  /**
+   * @param {number} width
+   * @param {number} height
+   */
+  resize(width, height) {
+    wasm.simulationwasm_resize(this.__wbg_ptr, width, height);
+  }
+  /**
+   * @param {number} value
+   */
+  set_align_mult(value) {
+    wasm.simulationwasm_set_align_mult(this.__wbg_ptr, value);
+  }
+  /**
+   * @param {number} value
+   */
+  set_cohesion_mult(value) {
+    wasm.simulationwasm_set_cohesion_mult(this.__wbg_ptr, value);
+  }
+  /**
+   * @param {number} value
+   */
+  set_separation_mult(value) {
+    wasm.simulationwasm_set_separation_mult(this.__wbg_ptr, value);
+  }
+  step() {
+    wasm.simulationwasm_step(this.__wbg_ptr);
+  }
 }
-if (Symbol.dispose) SimulationWasm.prototype[Symbol.dispose] = SimulationWasm.prototype.free;
+if (Symbol.dispose)
+  SimulationWasm.prototype[Symbol.dispose] = SimulationWasm.prototype.free;
 
 function __wbg_get_imports() {
-    const import0 = {
-        __proto__: null,
-        __wbg___wbindgen_is_function_3c846841762788c1: function(arg0) {
-            const ret = typeof(getObject(arg0)) === 'function';
-            return ret;
-        },
-        __wbg___wbindgen_is_object_781bc9f159099513: function(arg0) {
-            const val = getObject(arg0);
-            const ret = typeof(val) === 'object' && val !== null;
-            return ret;
-        },
-        __wbg___wbindgen_is_string_7ef6b97b02428fae: function(arg0) {
-            const ret = typeof(getObject(arg0)) === 'string';
-            return ret;
-        },
-        __wbg___wbindgen_is_undefined_52709e72fb9f179c: function(arg0) {
-            const ret = getObject(arg0) === undefined;
-            return ret;
-        },
-        __wbg___wbindgen_throw_6ddd609b62940d55: function(arg0, arg1) {
-            throw new Error(getStringFromWasm0(arg0, arg1));
-        },
-        __wbg_call_2d781c1f4d5c0ef8: function() { return handleError(function (arg0, arg1, arg2) {
-            const ret = getObject(arg0).call(getObject(arg1), getObject(arg2));
-            return addHeapObject(ret);
-        }, arguments); },
-        __wbg_crypto_38df2bab126b63dc: function(arg0) {
-            const ret = getObject(arg0).crypto;
-            return addHeapObject(ret);
-        },
-        __wbg_getRandomValues_c44a50d8cfdaebeb: function() { return handleError(function (arg0, arg1) {
-            getObject(arg0).getRandomValues(getObject(arg1));
-        }, arguments); },
-        __wbg_length_ea16607d7b61445b: function(arg0) {
-            const ret = getObject(arg0).length;
-            return ret;
-        },
-        __wbg_msCrypto_bd5a034af96bcba6: function(arg0) {
-            const ret = getObject(arg0).msCrypto;
-            return addHeapObject(ret);
-        },
-        __wbg_new_with_length_825018a1616e9e55: function(arg0) {
-            const ret = new Uint8Array(arg0 >>> 0);
-            return addHeapObject(ret);
-        },
-        __wbg_node_84ea875411254db1: function(arg0) {
-            const ret = getObject(arg0).node;
-            return addHeapObject(ret);
-        },
-        __wbg_process_44c7a14e11e9f69e: function(arg0) {
-            const ret = getObject(arg0).process;
-            return addHeapObject(ret);
-        },
-        __wbg_prototypesetcall_d62e5099504357e6: function(arg0, arg1, arg2) {
-            Uint8Array.prototype.set.call(getArrayU8FromWasm0(arg0, arg1), getObject(arg2));
-        },
-        __wbg_randomFillSync_6c25eac9869eb53c: function() { return handleError(function (arg0, arg1) {
-            getObject(arg0).randomFillSync(takeObject(arg1));
-        }, arguments); },
-        __wbg_require_b4edbdcf3e2a1ef0: function() { return handleError(function () {
-            const ret = module.require;
-            return addHeapObject(ret);
-        }, arguments); },
-        __wbg_static_accessor_GLOBAL_8adb955bd33fac2f: function() {
-            const ret = typeof global === 'undefined' ? null : global;
-            return isLikeNone(ret) ? 0 : addHeapObject(ret);
-        },
-        __wbg_static_accessor_GLOBAL_THIS_ad356e0db91c7913: function() {
-            const ret = typeof globalThis === 'undefined' ? null : globalThis;
-            return isLikeNone(ret) ? 0 : addHeapObject(ret);
-        },
-        __wbg_static_accessor_SELF_f207c857566db248: function() {
-            const ret = typeof self === 'undefined' ? null : self;
-            return isLikeNone(ret) ? 0 : addHeapObject(ret);
-        },
-        __wbg_static_accessor_WINDOW_bb9f1ba69d61b386: function() {
-            const ret = typeof window === 'undefined' ? null : window;
-            return isLikeNone(ret) ? 0 : addHeapObject(ret);
-        },
-        __wbg_subarray_a068d24e39478a8a: function(arg0, arg1, arg2) {
-            const ret = getObject(arg0).subarray(arg1 >>> 0, arg2 >>> 0);
-            return addHeapObject(ret);
-        },
-        __wbg_versions_276b2795b1c6a219: function(arg0) {
-            const ret = getObject(arg0).versions;
-            return addHeapObject(ret);
-        },
-        __wbindgen_cast_0000000000000001: function(arg0, arg1) {
-            // Cast intrinsic for `Ref(Slice(U8)) -> NamedExternref("Uint8Array")`.
-            const ret = getArrayU8FromWasm0(arg0, arg1);
-            return addHeapObject(ret);
-        },
-        __wbindgen_cast_0000000000000002: function(arg0, arg1) {
-            // Cast intrinsic for `Ref(String) -> Externref`.
-            const ret = getStringFromWasm0(arg0, arg1);
-            return addHeapObject(ret);
-        },
-        __wbindgen_object_clone_ref: function(arg0) {
-            const ret = getObject(arg0);
-            return addHeapObject(ret);
-        },
-        __wbindgen_object_drop_ref: function(arg0) {
-            takeObject(arg0);
-        },
-    };
-    return {
-        __proto__: null,
-        "./flocking_bg.js": import0,
-    };
+  const import0 = {
+    __proto__: null,
+    __wbg___wbindgen_is_function_3c846841762788c1: function (arg0) {
+      const ret = typeof getObject(arg0) === 'function';
+      return ret;
+    },
+    __wbg___wbindgen_is_object_781bc9f159099513: function (arg0) {
+      const val = getObject(arg0);
+      const ret = typeof val === 'object' && val !== null;
+      return ret;
+    },
+    __wbg___wbindgen_is_string_7ef6b97b02428fae: function (arg0) {
+      const ret = typeof getObject(arg0) === 'string';
+      return ret;
+    },
+    __wbg___wbindgen_is_undefined_52709e72fb9f179c: function (arg0) {
+      const ret = getObject(arg0) === undefined;
+      return ret;
+    },
+    __wbg___wbindgen_throw_6ddd609b62940d55: function (arg0, arg1) {
+      throw new Error(getStringFromWasm0(arg0, arg1));
+    },
+    __wbg_call_2d781c1f4d5c0ef8: function () {
+      return handleError(function (arg0, arg1, arg2) {
+        const ret = getObject(arg0).call(getObject(arg1), getObject(arg2));
+        return addHeapObject(ret);
+      }, arguments);
+    },
+    __wbg_crypto_38df2bab126b63dc: function (arg0) {
+      const ret = getObject(arg0).crypto;
+      return addHeapObject(ret);
+    },
+    __wbg_getRandomValues_c44a50d8cfdaebeb: function () {
+      return handleError(function (arg0, arg1) {
+        getObject(arg0).getRandomValues(getObject(arg1));
+      }, arguments);
+    },
+    __wbg_length_ea16607d7b61445b: function (arg0) {
+      const ret = getObject(arg0).length;
+      return ret;
+    },
+    __wbg_msCrypto_bd5a034af96bcba6: function (arg0) {
+      const ret = getObject(arg0).msCrypto;
+      return addHeapObject(ret);
+    },
+    __wbg_new_with_length_825018a1616e9e55: function (arg0) {
+      const ret = new Uint8Array(arg0 >>> 0);
+      return addHeapObject(ret);
+    },
+    __wbg_node_84ea875411254db1: function (arg0) {
+      const ret = getObject(arg0).node;
+      return addHeapObject(ret);
+    },
+    __wbg_process_44c7a14e11e9f69e: function (arg0) {
+      const ret = getObject(arg0).process;
+      return addHeapObject(ret);
+    },
+    __wbg_prototypesetcall_d62e5099504357e6: function (arg0, arg1, arg2) {
+      Uint8Array.prototype.set.call(
+        getArrayU8FromWasm0(arg0, arg1),
+        getObject(arg2)
+      );
+    },
+    __wbg_randomFillSync_6c25eac9869eb53c: function () {
+      return handleError(function (arg0, arg1) {
+        getObject(arg0).randomFillSync(takeObject(arg1));
+      }, arguments);
+    },
+    __wbg_require_b4edbdcf3e2a1ef0: function () {
+      return handleError(function () {
+        const ret = module.require;
+        return addHeapObject(ret);
+      }, arguments);
+    },
+    __wbg_static_accessor_GLOBAL_8adb955bd33fac2f: function () {
+      const ret = typeof global === 'undefined' ? null : global;
+      return isLikeNone(ret) ? 0 : addHeapObject(ret);
+    },
+    __wbg_static_accessor_GLOBAL_THIS_ad356e0db91c7913: function () {
+      const ret = typeof globalThis === 'undefined' ? null : globalThis;
+      return isLikeNone(ret) ? 0 : addHeapObject(ret);
+    },
+    __wbg_static_accessor_SELF_f207c857566db248: function () {
+      const ret = typeof self === 'undefined' ? null : self;
+      return isLikeNone(ret) ? 0 : addHeapObject(ret);
+    },
+    __wbg_static_accessor_WINDOW_bb9f1ba69d61b386: function () {
+      const ret = typeof window === 'undefined' ? null : window;
+      return isLikeNone(ret) ? 0 : addHeapObject(ret);
+    },
+    __wbg_subarray_a068d24e39478a8a: function (arg0, arg1, arg2) {
+      const ret = getObject(arg0).subarray(arg1 >>> 0, arg2 >>> 0);
+      return addHeapObject(ret);
+    },
+    __wbg_versions_276b2795b1c6a219: function (arg0) {
+      const ret = getObject(arg0).versions;
+      return addHeapObject(ret);
+    },
+    __wbindgen_cast_0000000000000001: function (arg0, arg1) {
+      // Cast intrinsic for `Ref(Slice(U8)) -> NamedExternref("Uint8Array")`.
+      const ret = getArrayU8FromWasm0(arg0, arg1);
+      return addHeapObject(ret);
+    },
+    __wbindgen_cast_0000000000000002: function (arg0, arg1) {
+      // Cast intrinsic for `Ref(String) -> Externref`.
+      const ret = getStringFromWasm0(arg0, arg1);
+      return addHeapObject(ret);
+    },
+    __wbindgen_object_clone_ref: function (arg0) {
+      const ret = getObject(arg0);
+      return addHeapObject(ret);
+    },
+    __wbindgen_object_drop_ref: function (arg0) {
+      takeObject(arg0);
+    },
+  };
+  return {
+    __proto__: null,
+    './flocking_bg.js': import0,
+  };
 }
 
-const SimulationWasmFinalization = (typeof FinalizationRegistry === 'undefined')
+const SimulationWasmFinalization =
+  typeof FinalizationRegistry === 'undefined'
     ? { register: () => {}, unregister: () => {} }
-    : new FinalizationRegistry(ptr => wasm.__wbg_simulationwasm_free(ptr >>> 0, 1));
+    : new FinalizationRegistry((ptr) =>
+        wasm.__wbg_simulationwasm_free(ptr >>> 0, 1)
+      );
 
 function addHeapObject(obj) {
-    if (heap_next === heap.length) heap.push(heap.length + 1);
-    const idx = heap_next;
-    heap_next = heap[idx];
+  if (heap_next === heap.length) heap.push(heap.length + 1);
+  const idx = heap_next;
+  heap_next = heap[idx];
 
-    heap[idx] = obj;
-    return idx;
+  heap[idx] = obj;
+  return idx;
 }
 
 function dropObject(idx) {
-    if (idx < 1028) return;
-    heap[idx] = heap_next;
-    heap_next = idx;
+  if (idx < 1028) return;
+  heap[idx] = heap_next;
+  heap_next = idx;
 }
 
 function getArrayU8FromWasm0(ptr, len) {
-    ptr = ptr >>> 0;
-    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+  ptr = ptr >>> 0;
+  return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
 }
 
 function getStringFromWasm0(ptr, len) {
-    ptr = ptr >>> 0;
-    return decodeText(ptr, len);
+  ptr = ptr >>> 0;
+  return decodeText(ptr, len);
 }
 
 let cachedUint8ArrayMemory0 = null;
 function getUint8ArrayMemory0() {
-    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
-        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
-    }
-    return cachedUint8ArrayMemory0;
+  if (
+    cachedUint8ArrayMemory0 === null ||
+    cachedUint8ArrayMemory0.byteLength === 0
+  ) {
+    cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+  }
+  return cachedUint8ArrayMemory0;
 }
 
-function getObject(idx) { return heap[idx]; }
+function getObject(idx) {
+  return heap[idx];
+}
 
 function handleError(f, args) {
-    try {
-        return f.apply(this, args);
-    } catch (e) {
-        wasm.__wbindgen_export(addHeapObject(e));
-    }
+  try {
+    return f.apply(this, args);
+  } catch (e) {
+    wasm.__wbindgen_export(addHeapObject(e));
+  }
 }
 
 let heap = new Array(1024).fill(undefined);
@@ -273,116 +293,140 @@ heap.push(undefined, null, true, false);
 let heap_next = heap.length;
 
 function isLikeNone(x) {
-    return x === undefined || x === null;
+  return x === undefined || x === null;
 }
 
 function takeObject(idx) {
-    const ret = getObject(idx);
-    dropObject(idx);
-    return ret;
+  const ret = getObject(idx);
+  dropObject(idx);
+  return ret;
 }
 
-let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+let cachedTextDecoder = new TextDecoder('utf-8', {
+  ignoreBOM: true,
+  fatal: true,
+});
 cachedTextDecoder.decode();
 const MAX_SAFARI_DECODE_BYTES = 2146435072;
 let numBytesDecoded = 0;
 function decodeText(ptr, len) {
-    numBytesDecoded += len;
-    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
-        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
-        cachedTextDecoder.decode();
-        numBytesDecoded = len;
-    }
-    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+  numBytesDecoded += len;
+  if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+    cachedTextDecoder = new TextDecoder('utf-8', {
+      ignoreBOM: true,
+      fatal: true,
+    });
+    cachedTextDecoder.decode();
+    numBytesDecoded = len;
+  }
+  return cachedTextDecoder.decode(
+    getUint8ArrayMemory0().subarray(ptr, ptr + len)
+  );
 }
 
 let wasmModule, wasm;
 function __wbg_finalize_init(instance, module) {
-    wasm = instance.exports;
-    wasmModule = module;
-    cachedUint8ArrayMemory0 = null;
-    return wasm;
+  wasm = instance.exports;
+  wasmModule = module;
+  cachedUint8ArrayMemory0 = null;
+  return wasm;
 }
 
 async function __wbg_load(module, imports) {
-    if (typeof Response === 'function' && module instanceof Response) {
-        if (typeof WebAssembly.instantiateStreaming === 'function') {
-            try {
-                return await WebAssembly.instantiateStreaming(module, imports);
-            } catch (e) {
-                const validResponse = module.ok && expectedResponseType(module.type);
+  if (typeof Response === 'function' && module instanceof Response) {
+    if (typeof WebAssembly.instantiateStreaming === 'function') {
+      try {
+        return await WebAssembly.instantiateStreaming(module, imports);
+      } catch (e) {
+        const validResponse = module.ok && expectedResponseType(module.type);
 
-                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
-                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
-
-                } else { throw e; }
-            }
-        }
-
-        const bytes = await module.arrayBuffer();
-        return await WebAssembly.instantiate(bytes, imports);
-    } else {
-        const instance = await WebAssembly.instantiate(module, imports);
-
-        if (instance instanceof WebAssembly.Instance) {
-            return { instance, module };
+        if (
+          validResponse &&
+          module.headers.get('Content-Type') !== 'application/wasm'
+        ) {
+          console.warn(
+            '`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n',
+            e
+          );
         } else {
-            return instance;
+          throw e;
         }
+      }
     }
 
-    function expectedResponseType(type) {
-        switch (type) {
-            case 'basic': case 'cors': case 'default': return true;
-        }
-        return false;
+    const bytes = await module.arrayBuffer();
+    return await WebAssembly.instantiate(bytes, imports);
+  } else {
+    const instance = await WebAssembly.instantiate(module, imports);
+
+    if (instance instanceof WebAssembly.Instance) {
+      return { instance, module };
+    } else {
+      return instance;
     }
+  }
+
+  function expectedResponseType(type) {
+    switch (type) {
+      case 'basic':
+      case 'cors':
+      case 'default':
+        return true;
+    }
+    return false;
+  }
 }
 
 function initSync(module) {
-    if (wasm !== undefined) return wasm;
+  if (wasm !== undefined) return wasm;
 
-
-    if (module !== undefined) {
-        if (Object.getPrototypeOf(module) === Object.prototype) {
-            ({module} = module)
-        } else {
-            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
-        }
+  if (module !== undefined) {
+    if (Object.getPrototypeOf(module) === Object.prototype) {
+      ({ module } = module);
+    } else {
+      console.warn(
+        'using deprecated parameters for `initSync()`; pass a single object instead'
+      );
     }
+  }
 
-    const imports = __wbg_get_imports();
-    if (!(module instanceof WebAssembly.Module)) {
-        module = new WebAssembly.Module(module);
-    }
-    const instance = new WebAssembly.Instance(module, imports);
-    return __wbg_finalize_init(instance, module);
+  const imports = __wbg_get_imports();
+  if (!(module instanceof WebAssembly.Module)) {
+    module = new WebAssembly.Module(module);
+  }
+  const instance = new WebAssembly.Instance(module, imports);
+  return __wbg_finalize_init(instance, module);
 }
 
 async function __wbg_init(module_or_path) {
-    if (wasm !== undefined) return wasm;
+  if (wasm !== undefined) return wasm;
 
-
-    if (module_or_path !== undefined) {
-        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
-            ({module_or_path} = module_or_path)
-        } else {
-            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
-        }
+  if (module_or_path !== undefined) {
+    if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+      ({ module_or_path } = module_or_path);
+    } else {
+      console.warn(
+        'using deprecated parameters for the initialization function; pass a single object instead'
+      );
     }
+  }
 
-    if (module_or_path === undefined) {
-        module_or_path = new URL('flocking_bg.wasm', import.meta.url);
-    }
-    const imports = __wbg_get_imports();
+  if (module_or_path === undefined) {
+    module_or_path = new URL('flocking_bg.wasm', import.meta.url);
+  }
+  const imports = __wbg_get_imports();
 
-    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
-        module_or_path = fetch(module_or_path);
-    }
+  if (
+    typeof module_or_path === 'string' ||
+    (typeof Request === 'function' && module_or_path instanceof Request) ||
+    (typeof URL === 'function' && module_or_path instanceof URL)
+  ) {
+    module_or_path = fetch(module_or_path);
+  }
 
-    const { instance, module } = await __wbg_load(await module_or_path, imports);
+  const { instance, module } = await __wbg_load(await module_or_path, imports);
 
-    return __wbg_finalize_init(instance, module);
+  return __wbg_finalize_init(instance, module);
 }
 
 export { initSync, __wbg_init as default };

projects/flocking/script.js

@@ -19,223 +19,227 @@ let displayHeight = 1;
 let resizeAnimationFrame = 0;
 
 function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
+  return Math.min(Math.max(value, min), max);
 }
 
 function getInitialBoidCount(width, height) {
-    const areaScale = (width * height) / (1920 * 1080);
-    const targetCount = Math.round(BOIDS_PER_1920X1080 * areaScale);
-    const clampedCount = clamp(targetCount, MIN_INITIAL_BOIDS, MAX_INITIAL_BOIDS);
-    return Math.round(clampedCount / BOID_STEP) * BOID_STEP;
+  const areaScale = (width * height) / (1920 * 1080);
+  const targetCount = Math.round(BOIDS_PER_1920X1080 * areaScale);
+  const clampedCount = clamp(targetCount, MIN_INITIAL_BOIDS, MAX_INITIAL_BOIDS);
+  return Math.round(clampedCount / BOID_STEP) * BOID_STEP;
 }
 
 function syncBoidCountToViewport(width, height) {
-    const targetCount = getInitialBoidCount(width, height);
-    let currentCount = sim.get_boid_count();
+  const targetCount = getInitialBoidCount(width, height);
+  let currentCount = sim.get_boid_count();
 
-    while (currentCount < targetCount) {
-        sim.add_boid();
-        currentCount = sim.get_boid_count();
-    }
+  while (currentCount < targetCount) {
+    sim.add_boid();
+    currentCount = sim.get_boid_count();
+  }
 
-    while (currentCount > targetCount) {
-        sim.remove_boid();
-        currentCount = sim.get_boid_count();
-    }
+  while (currentCount > targetCount) {
+    sim.remove_boid();
+    currentCount = sim.get_boid_count();
+  }
 
-    updateBoidCount();
+  updateBoidCount();
 }
 
 function updateControlsCollapsedState(isCollapsed) {
-    if (controls === null || controlsToggle === null) {
-        return;
-    }
+  if (controls === null || controlsToggle === null) {
+    return;
+  }
 
-    controls.classList.toggle('collapsed', isCollapsed);
-    controls.setAttribute('aria-expanded', String(!isCollapsed));
-    controlsToggle.setAttribute('aria-expanded', String(!isCollapsed));
-    controlsToggle.setAttribute('aria-label', isCollapsed ? 'Expand controls' : 'Collapse controls');
-    controlsToggle.textContent = isCollapsed ? '‹' : '›';
+  controls.classList.toggle('collapsed', isCollapsed);
+  controls.setAttribute('aria-expanded', String(!isCollapsed));
+  controlsToggle.setAttribute('aria-expanded', String(!isCollapsed));
+  controlsToggle.setAttribute(
+    'aria-label',
+    isCollapsed ? 'Expand controls' : 'Collapse controls'
+  );
+  controlsToggle.textContent = isCollapsed ? '‹' : '›';
 }
 
 function sizeCanvasToViewport() {
-    const dpr = window.devicePixelRatio || 1;
-    const nextDisplayWidth = Math.max(1, Math.floor(canvas.clientWidth));
-    const nextDisplayHeight = Math.max(1, Math.floor(canvas.clientHeight));
-    const nextBufferWidth = Math.max(1, Math.round(nextDisplayWidth * dpr));
-    const nextBufferHeight = Math.max(1, Math.round(nextDisplayHeight * dpr));
+  const dpr = window.devicePixelRatio || 1;
+  const nextDisplayWidth = Math.max(1, Math.floor(canvas.clientWidth));
+  const nextDisplayHeight = Math.max(1, Math.floor(canvas.clientHeight));
+  const nextBufferWidth = Math.max(1, Math.round(nextDisplayWidth * dpr));
+  const nextBufferHeight = Math.max(1, Math.round(nextDisplayHeight * dpr));
 
-    if (canvas.width !== nextBufferWidth || canvas.height !== nextBufferHeight) {
-        canvas.width = nextBufferWidth;
-        canvas.height = nextBufferHeight;
-    }
+  if (canvas.width !== nextBufferWidth || canvas.height !== nextBufferHeight) {
+    canvas.width = nextBufferWidth;
+    canvas.height = nextBufferHeight;
+  }
 
-    displayWidth = nextDisplayWidth;
-    displayHeight = nextDisplayHeight;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    document.getElementById('canvasSize').textContent = `${displayWidth}x${displayHeight}`;
+  displayWidth = nextDisplayWidth;
+  displayHeight = nextDisplayHeight;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  document.getElementById('canvasSize').textContent =
+    `${displayWidth}x${displayHeight}`;
 
-    return { width: displayWidth, height: displayHeight };
+  return { width: displayWidth, height: displayHeight };
 }
 
 function scheduleResize() {
-    if (resizeAnimationFrame !== 0) {
-        return;
-    }
+  if (resizeAnimationFrame !== 0) {
+    return;
+  }
 
-    resizeAnimationFrame = window.requestAnimationFrame(() => {
-        resizeAnimationFrame = 0;
-        const { width, height } = sizeCanvasToViewport();
-        if (sim !== null) {
-            sim.resize(width, height);
-            syncBoidCountToViewport(width, height);
-        }
-    });
+  resizeAnimationFrame = window.requestAnimationFrame(() => {
+    resizeAnimationFrame = 0;
+    const { width, height } = sizeCanvasToViewport();
+    if (sim !== null) {
+      sim.resize(width, height);
+      syncBoidCountToViewport(width, height);
+    }
+  });
 }
 
 function setupResizeObserver() {
-    controlsResizeObserver = new ResizeObserver(() => {
-        scheduleResize();
-    });
-    controlsResizeObserver.observe(document.getElementById('container'));
-    controlsResizeObserver.observe(controls);
+  controlsResizeObserver = new ResizeObserver(() => {
+    scheduleResize();
+  });
+  controlsResizeObserver.observe(document.getElementById('container'));
+  controlsResizeObserver.observe(controls);
 }
 
 async function run() {
-    wasm = await init();
+  wasm = await init();
 
-    canvas = document.getElementById('canvas');
-    ctx = canvas.getContext('2d');
-    controls = document.getElementById('controls');
-    controlsToggle = document.getElementById('controlsToggle');
-    updateControlsCollapsedState(false);
+  canvas = document.getElementById('canvas');
+  ctx = canvas.getContext('2d');
+  controls = document.getElementById('controls');
+  controlsToggle = document.getElementById('controlsToggle');
+  updateControlsCollapsedState(false);
 
-    const { width, height } = sizeCanvasToViewport();
-    sim = new SimulationWasm(width, height, getInitialBoidCount(width, height));
+  const { width, height } = sizeCanvasToViewport();
+  sim = new SimulationWasm(width, height, getInitialBoidCount(width, height));
 
-    setupControls();
-    setupResizeObserver();
-    updateBoidCount();
-    window.addEventListener('resize', scheduleResize);
+  setupControls();
+  setupResizeObserver();
+  updateBoidCount();
+  window.addEventListener('resize', scheduleResize);
 
-    animate();
+  animate();
 }
 
 function setupControls() {
-    const alignSlider = document.getElementById('alignSlider');
-    const cohesionSlider = document.getElementById('cohesionSlider');
-    const separationSlider = document.getElementById('separationSlider');
-    const addBtn = document.getElementById('addBtn');
-    const removeBtn = document.getElementById('removeBtn');
+  const alignSlider = document.getElementById('alignSlider');
+  const cohesionSlider = document.getElementById('cohesionSlider');
+  const separationSlider = document.getElementById('separationSlider');
+  const addBtn = document.getElementById('addBtn');
+  const removeBtn = document.getElementById('removeBtn');
 
-    controlsToggle.addEventListener('click', () => {
-        const isCollapsed = !controls.classList.contains('collapsed');
-        updateControlsCollapsedState(isCollapsed);
-        scheduleResize();
-    });
+  controlsToggle.addEventListener('click', () => {
+    const isCollapsed = !controls.classList.contains('collapsed');
+    updateControlsCollapsedState(isCollapsed);
+    scheduleResize();
+  });
 
-    alignSlider.addEventListener('input', (e) => {
-        const value = Number.parseFloat(e.target.value);
-        sim.set_align_mult(value);
-        document.getElementById('alignValue').textContent = value.toFixed(2);
-    });
+  alignSlider.addEventListener('input', (e) => {
+    const value = Number.parseFloat(e.target.value);
+    sim.set_align_mult(value);
+    document.getElementById('alignValue').textContent = value.toFixed(2);
+  });
 
-    cohesionSlider.addEventListener('input', (e) => {
-        const value = Number.parseFloat(e.target.value);
-        sim.set_cohesion_mult(value);
-        document.getElementById('cohesionValue').textContent = value.toFixed(2);
-    });
+  cohesionSlider.addEventListener('input', (e) => {
+    const value = Number.parseFloat(e.target.value);
+    sim.set_cohesion_mult(value);
+    document.getElementById('cohesionValue').textContent = value.toFixed(2);
+  });
 
-    separationSlider.addEventListener('input', (e) => {
-        const value = Number.parseFloat(e.target.value);
-        sim.set_separation_mult(value);
-        document.getElementById('separationValue').textContent = value.toFixed(2);
-    });
+  separationSlider.addEventListener('input', (e) => {
+    const value = Number.parseFloat(e.target.value);
+    sim.set_separation_mult(value);
+    document.getElementById('separationValue').textContent = value.toFixed(2);
+  });
 
-    addBtn.addEventListener('click', () => {
-        sim.add_boid();
-        updateBoidCount();
-    });
+  addBtn.addEventListener('click', () => {
+    sim.add_boid();
+    updateBoidCount();
+  });
 
-    removeBtn.addEventListener('click', () => {
-        sim.remove_boid();
-        updateBoidCount();
-    });
+  removeBtn.addEventListener('click', () => {
+    sim.remove_boid();
+    updateBoidCount();
+  });
 }
 
 function updateBoidCount() {
-    document.getElementById('boidCount').textContent = sim.get_boid_count();
+  document.getElementById('boidCount').textContent = sim.get_boid_count();
 }
 
 function getBoidView() {
-    const ptr = sim.boid_buffer_ptr();
-    const len = sim.boid_buffer_len();
-    return new Float32Array(wasm.memory.buffer, ptr, len);
+  const ptr = sim.boid_buffer_ptr();
+  const len = sim.boid_buffer_len();
+  return new Float32Array(wasm.memory.buffer, ptr, len);
 }
 
 function animate() {
-    ctx.fillStyle = '#121212';
-    ctx.fillRect(0, 0, displayWidth, displayHeight);
+  ctx.fillStyle = '#121212';
+  ctx.fillRect(0, 0, displayWidth, displayHeight);
 
-    sim.step();
-    const boidData = getBoidView();
-    const stride = sim.boid_buffer_stride();
+  sim.step();
+  const boidData = getBoidView();
+  const stride = sim.boid_buffer_stride();
 
-    for (let i = 0; i < boidData.length; i += stride) {
-        const x = boidData[i];
-        const y = boidData[i + 1];
-        const vx = boidData[i + 2];
-        const vy = boidData[i + 3];
-        const r = boidData[i + 4];
-        const g = boidData[i + 5];
-        const b = boidData[i + 6];
-        const a = boidData[i + 7];
+  for (let i = 0; i < boidData.length; i += stride) {
+    const x = boidData[i];
+    const y = boidData[i + 1];
+    const vx = boidData[i + 2];
+    const vy = boidData[i + 3];
+    const r = boidData[i + 4];
+    const g = boidData[i + 5];
+    const b = boidData[i + 6];
+    const a = boidData[i + 7];
 
-        const speedSq = vx * vx + vy * vy;
-        let dx;
-        let dy;
-        if (speedSq > 1e-6) {
-            const invSpeed = 1 / Math.sqrt(speedSq);
-            dx = vx * invSpeed;
-            dy = vy * invSpeed;
-        } else {
-            dx = 0;
-            dy = -1;
-        }
-
-        const size = 5;
-        const headMult = 3;
-        const px = -dy;
-        const py = dx;
-
-        const tipX = x + dx * size * headMult;
-        const tipY = y + dy * size * headMult;
-        const baseX = x - dx * size;
-        const baseY = y - dy * size;
-        const leftX = baseX + px * size;
-        const leftY = baseY + py * size;
-        const rightX = baseX - px * size;
-        const rightY = baseY - py * size;
-
-        ctx.strokeStyle = `rgba(${r},${g},${b},${a / 255})`;
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(tipX, tipY);
-        ctx.lineTo(leftX, leftY);
-        ctx.lineTo(rightX, rightY);
-        ctx.closePath();
-        ctx.stroke();
+    const speedSq = vx * vx + vy * vy;
+    let dx;
+    let dy;
+    if (speedSq > 1e-6) {
+      const invSpeed = 1 / Math.sqrt(speedSq);
+      dx = vx * invSpeed;
+      dy = vy * invSpeed;
+    } else {
+      dx = 0;
+      dy = -1;
     }
 
-    frameCount += 1;
-    const now = Date.now();
-    if (now - lastFpsUpdate >= 1000) {
-        document.getElementById('fps').textContent = frameCount;
-        frameCount = 0;
-        lastFpsUpdate = now;
-    }
+    const size = 5;
+    const headMult = 3;
+    const px = -dy;
+    const py = dx;
 
-    requestAnimationFrame(animate);
+    const tipX = x + dx * size * headMult;
+    const tipY = y + dy * size * headMult;
+    const baseX = x - dx * size;
+    const baseY = y - dy * size;
+    const leftX = baseX + px * size;
+    const leftY = baseY + py * size;
+    const rightX = baseX - px * size;
+    const rightY = baseY - py * size;
+
+    ctx.strokeStyle = `rgba(${r},${g},${b},${a / 255})`;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(tipX, tipY);
+    ctx.lineTo(leftX, leftY);
+    ctx.lineTo(rightX, rightY);
+    ctx.closePath();
+    ctx.stroke();
+  }
+
+  frameCount += 1;
+  const now = Date.now();
+  if (now - lastFpsUpdate >= 1000) {
+    document.getElementById('fps').textContent = frameCount;
+    frameCount = 0;
+    lastFpsUpdate = now;
+  }
+
+  requestAnimationFrame(animate);
 }
 
 await run();

projects/flocking/style.css

@@ -1,239 +1,244 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 :root {
-    --panel-width: 280px;
-    --panel-collapsed-width: 44px;
-    --panel-transition: 180ms ease;
+  --panel-width: 280px;
+  --panel-collapsed-width: 44px;
+  --panel-transition: 180ms ease;
 }
 
-html, body {
-    width: 100%;
-    height: 100%;
+html,
+body {
+  width: 100%;
+  height: 100%;
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background: #121212;
-    color: #d9d9d9;
-    overflow: hidden;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+  background: #121212;
+  color: #d9d9d9;
+  overflow: hidden;
 }
 
 #container {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
 }
 
 #canvas {
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    display: block;
-    background: #121212;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: block;
+  background: #121212;
 }
 
 #controls {
-    width: var(--panel-width);
-    background: #1e1e1e;
-    border-left: 1px solid #333;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    transition: width var(--panel-transition), min-width var(--panel-transition);
-    min-width: var(--panel-width);
+  width: var(--panel-width);
+  background: #1e1e1e;
+  border-left: 1px solid #333;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition:
+    width var(--panel-transition),
+    min-width var(--panel-transition);
+  min-width: var(--panel-width);
 }
 
 #controls.collapsed {
-    width: var(--panel-collapsed-width);
-    min-width: var(--panel-collapsed-width);
+  width: var(--panel-collapsed-width);
+  min-width: var(--panel-collapsed-width);
 }
 
 #controlsHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 14px 12px 12px 16px;
-    border-bottom: 1px solid #333;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 12px 12px 16px;
+  border-bottom: 1px solid #333;
 }
 
 #controlsTitle {
-    font-size: 16px;
-    color: #d9d9d9;
-    white-space: nowrap;
+  font-size: 16px;
+  color: #d9d9d9;
+  white-space: nowrap;
 }
 
 #controlsToggle {
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
-    padding: 0;
-    border: 1px solid #333;
-    background: #2a2a2a;
-    color: #d9d9d9;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 1;
-    transition: all 0.2s;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid #333;
+  background: #2a2a2a;
+  color: #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  transition: all 0.2s;
 }
 
 #controlsToggle:hover {
-    background: #3a3a3a;
-    border-color: #4a9eff;
+  background: #3a3a3a;
+  border-color: #4a9eff;
 }
 
 #controlsBody {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    opacity: 1;
-    transition: opacity 120ms ease;
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  opacity: 1;
+  transition: opacity 120ms ease;
 }
 
 #controls.collapsed #controlsBody {
-    opacity: 0;
-    pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
 }
 
 #controls.collapsed #controlsTitle {
-    display: none;
+  display: none;
 }
 
 .control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 label {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: #a0a0a0;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #a0a0a0;
 }
 
-input[type="range"] {
-    width: 100%;
-    height: 6px;
-    border-radius: 3px;
-    background: #333;
-    outline: none;
-    -webkit-appearance: none;
-    appearance: none;
+input[type='range'] {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #333;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: #4a9eff;
-    cursor: pointer;
-    transition: background 0.2s;
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #4a9eff;
+  cursor: pointer;
+  transition: background 0.2s;
 }
 
-input[type="range"]::-webkit-slider-thumb:hover {
-    background: #2196f3;
+input[type='range']::-webkit-slider-thumb:hover {
+  background: #2196f3;
 }
 
-input[type="range"]::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: #4a9eff;
-    cursor: pointer;
-    border: none;
-    transition: background 0.2s;
+input[type='range']::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #4a9eff;
+  cursor: pointer;
+  border: none;
+  transition: background 0.2s;
 }
 
-input[type="range"]::-moz-range-thumb:hover {
-    background: #2196f3;
+input[type='range']::-moz-range-thumb:hover {
+  background: #2196f3;
 }
 
 .value-display {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
 }
 
 .value-display strong {
-    color: #4a9eff;
-    font-weight: 600;
+  color: #4a9eff;
+  font-weight: 600;
 }
 
 .button-group {
-    display: flex;
-    gap: 10px;
+  display: flex;
+  gap: 10px;
 }
 
 button {
-    flex: 1;
-    padding: 10px 16px;
-    border: 1px solid #333;
-    background: #2a2a2a;
-    color: #d9d9d9;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 13px;
-    font-weight: 500;
-    transition: all 0.2s;
+  flex: 1;
+  padding: 10px 16px;
+  border: 1px solid #333;
+  background: #2a2a2a;
+  color: #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s;
 }
 
 button:hover {
-    background: #3a3a3a;
-    border-color: #4a9eff;
+  background: #3a3a3a;
+  border-color: #4a9eff;
 }
 
 button:active {
-    background: #1a1a1a;
+  background: #1a1a1a;
 }
 
 .stats {
-    padding: 12px;
-    background: #252525;
-    border-radius: 4px;
-    border-left: 3px solid #4a9eff;
-    font-size: 13px;
+  padding: 12px;
+  background: #252525;
+  border-radius: 4px;
+  border-left: 3px solid #4a9eff;
+  font-size: 13px;
 }
 
 .stat-item {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
 }
 
 .stat-item:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .stat-label {
-    color: #a0a0a0;
+  color: #a0a0a0;
 }
 
 .stat-value {
-    color: #4a9eff;
-    font-weight: 600;
-    font-family: 'Courier New', monospace;
+  color: #4a9eff;
+  font-weight: 600;
+  font-family: 'Courier New', monospace;
 }
 
 #fps {
-    color: #4a9eff;
-    font-size: 13px;
-    font-family: 'Courier New', monospace;
+  color: #4a9eff;
+  font-size: 13px;
+  font-family: 'Courier New', monospace;
 }
 
 .divider {
-    height: 1px;
-    background: #333;
+  height: 1px;
+  background: #333;
 }

projects/fourier_series.html

@@ -24,7 +24,7 @@
         margin: 10px 0;
       }
 
-      input[type="range"] {
+      input[type='range'] {
         display: block;
         margin: 10px auto 0;
         width: 260px;

projects/marching_squares.html

@@ -113,7 +113,7 @@
             field[i],
             field[i + 1],
             field[i + cols + 1],
-            field[i + cols],
+            field[i + cols]
           );
           noStroke();
 

projects/maze_generation/cells.js

@@ -4,13 +4,13 @@ function Cell(i, j) {
   this.walls = [true, true, true, true];
   this.visited = false;
 
-  this.checkNeighbors = function() {
+  this.checkNeighbors = function () {
     var neighbors = [];
 
-    var top    = grid[index(i, j -1)];
-    var right  = grid[index(i+1, j)];
-    var bottom = grid[index(i, j+1)];
-    var left   = grid[index(i-1, j)];
+    var top = grid[index(i, j - 1)];
+    var right = grid[index(i + 1, j)];
+    var bottom = grid[index(i, j + 1)];
+    var left = grid[index(i - 1, j)];
 
     if (top && !top.visited) {
       neighbors.push(top);
@@ -31,32 +31,30 @@ function Cell(i, j) {
     } else {
       return undefined;
     }
-
-
-  }
-  this.highlight = function() {
-    var x = this.i*w;
-    var y = this.j*w;
+  };
+  this.highlight = function () {
+    var x = this.i * w;
+    var y = this.j * w;
     noStroke();
     fill(252, 106, 2, 100);
     rect(x, y, w, w);
-  }
+  };
 
-  this.show = function() {
-    var x = this.i*w;
-    var y = this.j*w;
+  this.show = function () {
+    var x = this.i * w;
+    var y = this.j * w;
     stroke(0);
     if (this.walls[0]) {
-      line(x    , y    , x + w, y);
+      line(x, y, x + w, y);
     }
     if (this.walls[1]) {
-      line(x + w, y    , x + w, y + w);
+      line(x + w, y, x + w, y + w);
     }
     if (this.walls[2]) {
-      line(x + w, y + w, x    , y + w);
+      line(x + w, y + w, x, y + w);
     }
     if (this.walls[3]) {
-      line(x    , y + w, x    , y);
+      line(x, y + w, x, y);
     }
 
     if (this.visited) {
@@ -64,5 +62,5 @@ function Cell(i, j) {
       fill(242, 255, 28, 125);
       rect(x, y, w, w);
     }
-  }
+  };
 }

projects/maze_generation/sketch.js

@@ -4,134 +4,129 @@ var grid = [];
 var current;
 var stack = [];
 
-function setup(){
-    createCanvas(800, 800);
-    cols = floor(width/w)
-    rows = floor(height/w)
-    //frameRate(6);
+function setup() {
+  createCanvas(800, 800);
+  cols = floor(width / w);
+  rows = floor(height / w);
+  //frameRate(6);
 
-    for (var j = 0; j < rows; j++){
-    	for (var i = 0; i < cols; i++){
-    		var cell = new Cell(i,j);
-    		grid.push(cell);
-    	}
+  for (var j = 0; j < rows; j++) {
+    for (var i = 0; i < cols; i++) {
+      var cell = new Cell(i, j);
+      grid.push(cell);
     }
-    current = grid[0];
+  }
+  current = grid[0];
 }
 
-function draw(){
-	background(150);
-	for (var i = 0; i < grid.length; i++){
-		grid[i].show();
+function draw() {
+  background(150);
+  for (var i = 0; i < grid.length; i++) {
+    grid[i].show();
+  }
+  current.visited = true;
+  current.highlight();
+  var next = current.checkNeighbors();
+  if (next) {
+    next.visited = true;
+    stack.push(current);
 
-	}
-	current.visited = true;
-	current.highlight();
-	var next = current.checkNeighbors();
-	if (next) {
-		next.visited = true;
-		stack.push(current);
-
-		removeWalls(current, next);
-
-		current = next;
-	} else if (stack.length > 0){
-		current = stack.pop();
-	}
+    removeWalls(current, next);
 
+    current = next;
+  } else if (stack.length > 0) {
+    current = stack.pop();
+  }
 }
 
+function index(i, j) {
+  if (i < 0 || j < 0 || i > cols - 1 || j > rows - 1) {
+    return -1;
+  }
 
-function index(i, j){
-	if(i < 0 || j < 0 || i > cols-1 || j > rows-1){
-		return -1
-	}
-
-	return i + j * cols;
+  return i + j * cols;
 }
 
-function cell(i, j){
-	this.i = i;
-	this.j = j;
-	this.walls = [true, true, true, true];
-	this.visited = false;
+function cell(i, j) {
+  this.i = i;
+  this.j = j;
+  this.walls = [true, true, true, true];
+  this.visited = false;
 
-	this.checkNeighbors = function(){
-		var neighbors = [];
+  this.checkNeighbors = function () {
+    var neighbors = [];
 
-		var top = grid[index(i, j-1)];
-		var right = grid[index(i+1, j)];
-		var bottom = grid[index(i, j + 1)];
-		var left = grid[index(i-1, j)];
+    var top = grid[index(i, j - 1)];
+    var right = grid[index(i + 1, j)];
+    var bottom = grid[index(i, j + 1)];
+    var left = grid[index(i - 1, j)];
 
-		if (top && !top.visited){
-			neighbors.push(top);
-		}
-		if (right && !right.visited){
-			neighbors.push(right);
-		}
-		if (bottom && !bottom.visited){
-			neighbors.push(bottom);
-		}
-		if (left && !left.visited){
-			neighbors.push(left);
-		}
-		if (neighbors.length > 0){
-			var r = floor(random(0, neighbors.length));
-			return neighbor[r];
-		} else {
-				return undefined;
-			}
-		this.highlight = function(){
-				var x = this.i*w;
-				var y  = this.j*w;
-				noStroke();
-				fill(0, 0, 255, 125);
-				rect(x,y,w,w);
-		}
+    if (top && !top.visited) {
+      neighbors.push(top);
+    }
+    if (right && !right.visited) {
+      neighbors.push(right);
+    }
+    if (bottom && !bottom.visited) {
+      neighbors.push(bottom);
+    }
+    if (left && !left.visited) {
+      neighbors.push(left);
+    }
+    if (neighbors.length > 0) {
+      var r = floor(random(0, neighbors.length));
+      return neighbor[r];
+    } else {
+      return undefined;
+    }
+    this.highlight = function () {
+      var x = this.i * w;
+      var y = this.j * w;
+      noStroke();
+      fill(0, 0, 255, 125);
+      rect(x, y, w, w);
+    };
+  };
 
-	}
-
-	this.show = function(){
-		var x = this.i*w;
-		var y  = this.j*w;
-		stroke(255);
-		if (this.walls[0]){
-			line(x,y,x+w,y);
-		}
-		if (this.walls[1]){
-			line(x+w,y,x+w,y+w);
-		}
-		if (this.walls[2]){
-			line(x+w,y+w,x,y+w);
-		}
-		if (this.walls[3]){
-			line(x,y+w,x,y);
-		}
-		if (this.visited){
-			fill(255, 0, 255, 125);
-			rect(x,y,w,w);
-		}
-	}
+  this.show = function () {
+    var x = this.i * w;
+    var y = this.j * w;
+    stroke(255);
+    if (this.walls[0]) {
+      line(x, y, x + w, y);
+    }
+    if (this.walls[1]) {
+      line(x + w, y, x + w, y + w);
+    }
+    if (this.walls[2]) {
+      line(x + w, y + w, x, y + w);
+    }
+    if (this.walls[3]) {
+      line(x, y + w, x, y);
+    }
+    if (this.visited) {
+      fill(255, 0, 255, 125);
+      rect(x, y, w, w);
+    }
+  };
 }
 
-function removeWalls(a, b){
-	var x = a.i - b.i;
-	if (x === 1){
-		a.walls[3] = false;
-		b.walls[1] = false;
-	} else if (x === -1){
-		a.walls[1] = false;
-		b.walls[3] = false;
-	}
-	
-	var y = a.j - b.j;
-	if (y === 1){
-		a.walls[0] = false;
-		b.walls[2] = false;
-	} else if (y === -1){
-		a.walls[2] = false;
-		b.walls[0] = false;
-	}
+function removeWalls(a, b) {
+  var x = a.i - b.i;
+  if (x === 1) {
+    a.walls[3] = false;
+    b.walls[1] = false;
+  } else if (x === -1) {
+    a.walls[1] = false;
+    b.walls[3] = false;
+  }
 
+  var y = a.j - b.j;
+  if (y === 1) {
+    a.walls[0] = false;
+    b.walls[2] = false;
+  } else if (y === -1) {
+    a.walls[2] = false;
+    b.walls[0] = false;
+  }
 }

projects/percolation/script.js

@@ -6,73 +6,81 @@ const fullscreenButton = document.getElementById('fullscreenButton');
 
 outputElement.value = '';
 
-canvasElement.addEventListener('webglcontextlost', (event) => {
+canvasElement.addEventListener(
+  'webglcontextlost',
+  (event) => {
     event.preventDefault();
     setStatus('WebGL context lost. Reload the page to restart the simulation.');
-}, false);
+  },
+  false
+);
 
 function setStatus(text) {
-    if (!setStatus.last) {
-        setStatus.last = { time: Date.now(), text: '' };
-    }
-
-    if (text === setStatus.last.text) {
-        return;
-    }
-
-    const match = text && text.match(/([^(]+)\((\d+(?:\.\d+)?)\/(\d+)\)/);
-    const now = Date.now();
-
-    if (match && now - setStatus.last.time < 30) {
-        return;
-    }
-
-    setStatus.last.time = now;
-    setStatus.last.text = text;
-
-    if (match) {
-        statusElement.textContent = match[1].trim();
-        progressElement.value = Number.parseInt(match[2], 10) * 100;
-        progressElement.max = Number.parseInt(match[3], 10) * 100;
-        progressElement.hidden = false;
-    } else {
-        statusElement.textContent = text || '';
-        progressElement.hidden = !text;
-        if (!text) {
-            progressElement.removeAttribute('value');
-        }
+  if (!setStatus.last) {
+    setStatus.last = { time: Date.now(), text: '' };
+  }
+
+  if (text === setStatus.last.text) {
+    return;
+  }
+
+  const match = text && text.match(/([^(]+)\((\d+(?:\.\d+)?)\/(\d+)\)/);
+  const now = Date.now();
+
+  if (match && now - setStatus.last.time < 30) {
+    return;
+  }
+
+  setStatus.last.time = now;
+  setStatus.last.text = text;
+
+  if (match) {
+    statusElement.textContent = match[1].trim();
+    progressElement.value = Number.parseInt(match[2], 10) * 100;
+    progressElement.max = Number.parseInt(match[3], 10) * 100;
+    progressElement.hidden = false;
+  } else {
+    statusElement.textContent = text || '';
+    progressElement.hidden = !text;
+    if (!text) {
+      progressElement.removeAttribute('value');
     }
+  }
 }
 
 var Module = {
-    canvas: canvasElement,
-    print: (...args) => {
-        console.log(...args);
-        outputElement.value += `${args.join(' ')}\n`;
-        outputElement.scrollTop = outputElement.scrollHeight;
-    },
-    printErr: (...args) => {
-        console.error(...args);
-        outputElement.value += `[err] ${args.join(' ')}\n`;
-        outputElement.scrollTop = outputElement.scrollHeight;
-    },
-    setStatus,
-    totalDependencies: 0,
-    monitorRunDependencies(left) {
-        this.totalDependencies = Math.max(this.totalDependencies, left);
-        setStatus(left ? `Preparing... (${this.totalDependencies - left}/${this.totalDependencies})` : 'Running...');
-        if (!left) {
-            setTimeout(() => setStatus(''), 250);
-        }
+  canvas: canvasElement,
+  print: (...args) => {
+    console.log(...args);
+    outputElement.value += `${args.join(' ')}\n`;
+    outputElement.scrollTop = outputElement.scrollHeight;
+  },
+  printErr: (...args) => {
+    console.error(...args);
+    outputElement.value += `[err] ${args.join(' ')}\n`;
+    outputElement.scrollTop = outputElement.scrollHeight;
+  },
+  setStatus,
+  totalDependencies: 0,
+  monitorRunDependencies(left) {
+    this.totalDependencies = Math.max(this.totalDependencies, left);
+    setStatus(
+      left
+        ? `Preparing... (${this.totalDependencies - left}/${this.totalDependencies})`
+        : 'Running...'
+    );
+    if (!left) {
+      setTimeout(() => setStatus(''), 250);
     }
+  },
 };
 
 fullscreenButton.addEventListener('click', () => {
-    if (typeof Module.requestFullscreen === 'function') {
-        Module.requestFullscreen(false, false);
-    }
+  if (typeof Module.requestFullscreen === 'function') {
+    Module.requestFullscreen(false, false);
+  }
 });
 
 globalThis.onerror = () => {
-    setStatus('Exception thrown, see JavaScript console');
+  setStatus('Exception thrown, see JavaScript console');
 };

projects/percolation/style.css

@@ -162,7 +162,7 @@ textarea {
   margin-top: 10px;
   padding: 10px;
   border: 1px solid #ddd;
-  font-family: "Courier New", monospace;
+  font-family: 'Courier New', monospace;
   font-size: 0.9rem;
   resize: vertical;
   background: white;

projects/pi_approximation.html

@@ -44,7 +44,7 @@
     var circleCount, total;
     var x, y;
     var calcPI;
-    var DisplayPI = "a";
+    var DisplayPI = 'a';
     const PI = 3.1415926535;
     var BestPI = 50;
 
@@ -84,15 +84,15 @@
         DisplayPI = calcPI;
         BestPI = calcPI;
 
-        var PIDisplay = document.getElementById("PIbox");
+        var PIDisplay = document.getElementById('PIbox');
         PIDisplay.innerHTML = DisplayPI;
 
-        var ErrorDisplay = document.getElementById("percentage");
-        var DisplayError = "a";
+        var ErrorDisplay = document.getElementById('percentage');
+        var DisplayError = 'a';
         var Perror = (calcPI - PI) / PI;
         Perror *= 100;
         DisplayError = nfc(Perror, 10);
-        ErrorDisplay.innerHTML = DisplayError + "%";
+        ErrorDisplay.innerHTML = DisplayError + '%';
       }
     }
   </script>

projects/thin_ice/script.js

@@ -7,83 +7,94 @@ const resizeCheckbox = document.getElementById('resize');
 const pointerLockCheckbox = document.getElementById('pointerLock');
 
 if (outputElement) {
-    outputElement.value = '';
+  outputElement.value = '';
 }
 
-canvasElement.addEventListener('webglcontextlost', (event) => {
+canvasElement.addEventListener(
+  'webglcontextlost',
+  (event) => {
     event.preventDefault();
     setStatus('WebGL context lost. Reload the page to restart the game.');
-}, false);
+  },
+  false
+);
 
 function setStatus(text) {
-    if (!setStatus.last) {
-        setStatus.last = { time: Date.now(), text: '' };
-    }
-
-    if (text === setStatus.last.text) {
-        return;
-    }
-
-    const match = text?.match(/([^(]+)\((\d+(?:\.\d+)?)\/(\d+)\)/);
-    const now = Date.now();
-
-    if (match && now - setStatus.last.time < 30) {
-        return;
-    }
-
-    setStatus.last.time = now;
-    setStatus.last.text = text;
-
-    if (match) {
-        statusElement.textContent = match[1].trim();
-        progressElement.value = Number.parseInt(match[2], 10) * 100;
-        progressElement.max = Number.parseInt(match[3], 10) * 100;
-        progressElement.hidden = false;
-    } else {
-        statusElement.textContent = text || '';
-        progressElement.hidden = !text;
-        if (!text) {
-            progressElement.removeAttribute('value');
-        }
+  if (!setStatus.last) {
+    setStatus.last = { time: Date.now(), text: '' };
+  }
+
+  if (text === setStatus.last.text) {
+    return;
+  }
+
+  const match = text?.match(/([^(]+)\((\d+(?:\.\d+)?)\/(\d+)\)/);
+  const now = Date.now();
+
+  if (match && now - setStatus.last.time < 30) {
+    return;
+  }
+
+  setStatus.last.time = now;
+  setStatus.last.text = text;
+
+  if (match) {
+    statusElement.textContent = match[1].trim();
+    progressElement.value = Number.parseInt(match[2], 10) * 100;
+    progressElement.max = Number.parseInt(match[3], 10) * 100;
+    progressElement.hidden = false;
+  } else {
+    statusElement.textContent = text || '';
+    progressElement.hidden = !text;
+    if (!text) {
+      progressElement.removeAttribute('value');
     }
+  }
 }
 
 globalThis.Module = globalThis.Module || {};
 globalThis.Module.canvas = canvasElement;
 globalThis.Module.print = (...args) => {
-    console.log(...args);
-    if (!outputElement) {
-        return;
-    }
-    outputElement.value += `${args.join(' ')}\n`;
-    outputElement.scrollTop = outputElement.scrollHeight;
+  console.log(...args);
+  if (!outputElement) {
+    return;
+  }
+  outputElement.value += `${args.join(' ')}\n`;
+  outputElement.scrollTop = outputElement.scrollHeight;
 };
 globalThis.Module.printErr = (...args) => {
-    console.error(...args);
-    if (!outputElement) {
-        return;
-    }
-    outputElement.value += `[err] ${args.join(' ')}\n`;
-    outputElement.scrollTop = outputElement.scrollHeight;
+  console.error(...args);
+  if (!outputElement) {
+    return;
+  }
+  outputElement.value += `[err] ${args.join(' ')}\n`;
+  outputElement.scrollTop = outputElement.scrollHeight;
 };
 globalThis.Module.setStatus = setStatus;
 globalThis.Module.totalDependencies = 0;
 globalThis.Module.monitorRunDependencies = function (left) {
-    this.totalDependencies = Math.max(this.totalDependencies, left);
-    setStatus(left ? `Preparing... (${this.totalDependencies - left}/${this.totalDependencies})` : 'Running...');
-    if (!left) {
-        setTimeout(() => setStatus(''), 250);
-    }
+  this.totalDependencies = Math.max(this.totalDependencies, left);
+  setStatus(
+    left
+      ? `Preparing... (${this.totalDependencies - left}/${this.totalDependencies})`
+      : 'Running...'
+  );
+  if (!left) {
+    setTimeout(() => setStatus(''), 250);
+  }
 };
 
 fullscreenButton.addEventListener('click', () => {
-    if (typeof globalThis.Module.requestFullscreen === 'function') {
-        globalThis.Module.requestFullscreen(pointerLockCheckbox.checked, resizeCheckbox.checked);
-    }
+  if (typeof globalThis.Module.requestFullscreen === 'function') {
+    globalThis.Module.requestFullscreen(
+      pointerLockCheckbox.checked,
+      resizeCheckbox.checked
+    );
+  }
 });
 
 setStatus('Downloading...');
 
 globalThis.onerror = () => {
-    setStatus('Exception thrown, see JavaScript console');
+  setStatus('Exception thrown, see JavaScript console');
 };

projects/thin_ice/style.css

@@ -1,41 +1,41 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 :root {
-    --bg: #fffdf7;
-    --text: #0f172a;
-    --muted: #475569;
-    --border: #0f172a;
-    --panel: #dff4ff;
-    --panel-2: #ffffff;
-    --accent: #00a6fb;
-    --accent-strong: #0077b6;
-    --highlight: #ffd23f;
-    --danger: #ff5d73;
+  --bg: #fffdf7;
+  --text: #0f172a;
+  --muted: #475569;
+  --border: #0f172a;
+  --panel: #dff4ff;
+  --panel-2: #ffffff;
+  --accent: #00a6fb;
+  --accent-strong: #0077b6;
+  --highlight: #ffd23f;
+  --danger: #ff5d73;
 }
 
 body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 18px;
-    line-height: 1.6;
-    padding: 20px;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 1.6;
+  padding: 20px;
 }
 
 .container {
-    max-width: 920px;
-    margin: 0 auto;
+  max-width: 920px;
+  margin: 0 auto;
 }
 
 header {
-    text-align: center;
-    margin-bottom: 30px;
-    border-bottom: 3px solid var(--border);
-    padding-bottom: 20px;
+  text-align: center;
+  margin-bottom: 30px;
+  border-bottom: 3px solid var(--border);
+  padding-bottom: 20px;
 }
 
 h1,
@@ -44,216 +44,216 @@ h3,
 button,
 summary,
 .back-button {
-    font-family: "Arial Black", Arial, Helvetica, sans-serif;
-    font-weight: 900;
-    letter-spacing: 0.02em;
+  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
+  font-weight: 900;
+  letter-spacing: 0.02em;
 }
 
 h1 {
-    font-size: clamp(2.4rem, 5vw, 3.6rem);
-    margin-bottom: 10px;
-    line-height: 1;
-    text-transform: uppercase;
+  font-size: clamp(2.4rem, 5vw, 3.6rem);
+  margin-bottom: 10px;
+  line-height: 1;
+  text-transform: uppercase;
 }
 
 h2 {
-    font-size: 1.8rem;
-    margin: 0 0 16px;
+  font-size: 1.8rem;
+  margin: 0 0 16px;
 }
 
 h3 {
-    font-size: 1.35rem;
-    margin: 0 0 14px;
+  font-size: 1.35rem;
+  margin: 0 0 14px;
 }
 
 p,
 ul {
-    margin-bottom: 16px;
+  margin-bottom: 16px;
 }
 
 .subtitle {
-    color: var(--accent-strong);
-    font-size: 1rem;
+  color: var(--accent-strong);
+  font-size: 1rem;
 }
 
 .back-button {
-    display: inline-block;
-    margin-bottom: 20px;
-    padding: 10px 15px;
-    background: var(--highlight);
-    color: var(--text);
-    text-decoration: none;
-    border: 3px solid var(--border);
+  display: inline-block;
+  margin-bottom: 20px;
+  padding: 10px 15px;
+  background: var(--highlight);
+  color: var(--text);
+  text-decoration: none;
+  border: 3px solid var(--border);
 }
 
 .back-button:hover,
 .action-button:hover {
-    background: var(--text);
-    color: #fff;
+  background: var(--text);
+  color: #fff;
 }
 
 .info-box {
-    background: var(--highlight);
-    border: 3px solid var(--border);
-    padding: 16px;
-    margin: 20px 0;
+  background: var(--highlight);
+  border: 3px solid var(--border);
+  padding: 16px;
+  margin: 20px 0;
 }
 
 .canvas-container {
-    background: var(--panel);
-    border: 3px solid var(--border);
-    padding: 20px;
-    margin: 30px 0;
+  background: var(--panel);
+  border: 3px solid var(--border);
+  padding: 20px;
+  margin: 30px 0;
 }
 
 .canvas-toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 15px;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
 }
 
 .canvas-toolbar p {
-    margin: 0;
-    color: var(--muted);
-    font-size: 0.95rem;
-    text-transform: uppercase;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.95rem;
+  text-transform: uppercase;
 }
 
 .action-button {
-    padding: 10px 14px;
-    background: var(--danger);
-    color: white;
-    border: 3px solid var(--border);
-    cursor: pointer;
-    font: inherit;
+  padding: 10px 14px;
+  background: var(--danger);
+  color: white;
+  border: 3px solid var(--border);
+  cursor: pointer;
+  font: inherit;
 }
 
 .canvas-shell {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 520px;
-    overflow: auto;
-    background: var(--panel-2);
-    border: 3px solid var(--border);
-    padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 520px;
+  overflow: auto;
+  background: var(--panel-2);
+  border: 3px solid var(--border);
+  padding: 12px;
 }
 
 #canvas {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
-    height: auto;
-    background: #000;
-    outline: none;
-    image-rendering: pixelated;
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  height: auto;
+  background: #000;
+  outline: none;
+  image-rendering: pixelated;
 }
 
 .canvas-options {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 14px;
-    margin-top: 15px;
-    font-size: 0.95rem;
-    color: var(--muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 15px;
+  font-size: 0.95rem;
+  color: var(--muted);
 }
 
 .canvas-options label {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .canvas-options input {
-    accent-color: var(--accent-strong);
+  accent-color: var(--accent-strong);
 }
 
 .status {
-    margin-top: 15px;
-    min-height: 24px;
-    color: var(--accent-strong);
-    font-weight: 700;
+  margin-top: 15px;
+  min-height: 24px;
+  color: var(--accent-strong);
+  font-weight: 700;
 }
 
 progress {
-    width: 100%;
-    height: 18px;
-    margin-top: 10px;
-    border: 3px solid var(--border);
+  width: 100%;
+  height: 18px;
+  margin-top: 10px;
+  border: 3px solid var(--border);
 }
 
 progress[hidden] {
-    display: none;
+  display: none;
 }
 
 details {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 summary {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .feature-list {
-    padding-left: 24px;
+  padding-left: 24px;
 }
 
 .feature-list li {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 textarea {
-    width: 100%;
-    min-height: 120px;
-    margin-top: 10px;
-    padding: 10px;
-    border: 3px solid var(--border);
-    font-family: "Courier New", monospace;
-    font-size: 0.9rem;
-    resize: vertical;
-    background: white;
-    color: var(--text);
+  width: 100%;
+  min-height: 120px;
+  margin-top: 10px;
+  padding: 10px;
+  border: 3px solid var(--border);
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  resize: vertical;
+  background: white;
+  color: var(--text);
 }
 
 footer {
-    text-align: center;
-    margin-top: 40px;
-    padding-top: 20px;
-    border-top: 3px solid var(--border);
-    font-size: 0.9rem;
-    color: var(--muted);
+  text-align: center;
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 3px solid var(--border);
+  font-size: 0.9rem;
+  color: var(--muted);
 }
 
 @media (max-width: 768px) {
-    body {
-        padding: 16px;
-        font-size: 16px;
-    }
+  body {
+    padding: 16px;
+    font-size: 16px;
+  }
 
-    h1 {
-        font-size: 2.2rem;
-    }
+  h1 {
+    font-size: 2.2rem;
+  }
 
-    .canvas-container {
-        padding: 15px;
-    }
+  .canvas-container {
+    padding: 15px;
+  }
 
-    .canvas-shell {
-        min-height: 360px;
-    }
+  .canvas-shell {
+    min-height: 360px;
+  }
 }

projects/tsp/canvas.js

@@ -6,7 +6,7 @@ export function setupCanvas(gl, canvas) {
   return {
     canvas,
     gl,
-    aspectRatio: canvas.width / canvas.height
+    aspectRatio: canvas.width / canvas.height,
   };
 }
 
@@ -15,5 +15,9 @@ export function resizeCanvas(gl, canvas, program) {
   canvas.height = canvas.clientHeight * window.devicePixelRatio;
   gl.viewport(0, 0, canvas.width, canvas.height);
   gl.useProgram(program);
-  gl.uniform2f(gl.getUniformLocation(program, "u_resolution"), canvas.width, canvas.height);
+  gl.uniform2f(
+    gl.getUniformLocation(program, 'u_resolution'),
+    canvas.width,
+    canvas.height
+  );
 }

projects/tsp/main.js

@@ -1,8 +1,8 @@
-import { initWasm } from "./wasm.js";
-import { setupCanvas, resizeCanvas } from "./canvas.js";
-import { createShaderProgram } from "./shaders.js";
-import { draw } from "./tsp-gl.js";
-import { initPoints } from "./utils.js";
+import { initWasm } from './wasm.js';
+import { setupCanvas, resizeCanvas } from './canvas.js';
+import { createShaderProgram } from './shaders.js';
+import { draw } from './tsp-gl.js';
+import { initPoints } from './utils.js';
 
 const DEFAULT_POINT_COUNT = 36;
 const MIN_POINTS = 4;
@@ -57,28 +57,31 @@ function createLineFragmentShader() {
 }
 
 async function run() {
-  const canvas = document.getElementById("tsp-canvas");
-  const pointCountInput = document.getElementById("pointCountInput");
-  const applyPointCountButton = document.getElementById("applyPointCountButton");
-  const pointCountStatus = document.getElementById("pointCountStatus");
+  const canvas = document.getElementById('tsp-canvas');
+  const pointCountInput = document.getElementById('pointCountInput');
+  const applyPointCountButton = document.getElementById(
+    'applyPointCountButton'
+  );
+  const pointCountStatus = document.getElementById('pointCountStatus');
 
-  if (!canvas || !pointCountInput || !applyPointCountButton || !pointCountStatus) {
+  if (
+    !canvas ||
+    !pointCountInput ||
+    !applyPointCountButton ||
+    !pointCountStatus
+  ) {
     return;
   }
 
-  const gl = canvas.getContext("webgl2");
+  const gl = canvas.getContext('webgl2');
   if (!gl) {
-    pointCountStatus.textContent = "WebGL2 unavailable in this browser.";
+    pointCountStatus.textContent = 'WebGL2 unavailable in this browser.';
     return;
   }
 
   gl.clearColor(0.1, 0.1, 0.1, 1);
 
-  const {
-    initialisePoints,
-    getPointOrder,
-    memory
-  } = await initWasm();
+  const { initialisePoints, getPointOrder, memory } = await initWasm();
 
   const vertexCode = `
   attribute vec2 a_position;
@@ -93,7 +96,7 @@ async function run() {
   const lineBuffer = gl.createBuffer();
 
   if (!positionBuffer || !lineBuffer) {
-    pointCountStatus.textContent = "Unable to initialise WebGL buffers.";
+    pointCountStatus.textContent = 'Unable to initialise WebGL buffers.';
     return;
   }
 
@@ -103,20 +106,26 @@ async function run() {
 
   const state = {
     scene: null,
-    draggingIndex: -1
+    draggingIndex: -1,
   };
 
   function updateStatus(pointCount) {
-    pointCountStatus.textContent = `${pointCount} point${pointCount === 1 ? "" : "s"}`;
+    pointCountStatus.textContent = `${pointCount} point${pointCount === 1 ? '' : 's'}`;
   }
 
   function recalculateRoute(scene) {
     const pointOrderPtr = getPointOrder(scene.pointsPtr, scene.pointCount);
-    scene.pointOrder = Array.from(new Uint32Array(memory.buffer, pointOrderPtr, scene.pointCount));
+    scene.pointOrder = Array.from(
+      new Uint32Array(memory.buffer, pointOrderPtr, scene.pointCount)
+    );
   }
 
   function syncPointsToMemory(scene) {
-    scene.pointArray = new Float32Array(memory.buffer, scene.pointsPtr, scene.pointCount * 2);
+    scene.pointArray = new Float32Array(
+      memory.buffer,
+      scene.pointsPtr,
+      scene.pointCount * 2
+    );
 
     for (let i = 0; i < scene.points.length; i++) {
       scene.pointArray[i * 2] = scene.points[i].cx;
@@ -133,10 +142,22 @@ async function run() {
     }
 
     const pointsPtr = initialisePoints(pointCount, Date.now());
-    const pointArray = new Float32Array(memory.buffer, pointsPtr, pointCount * 2);
+    const pointArray = new Float32Array(
+      memory.buffer,
+      pointsPtr,
+      pointCount * 2
+    );
     const points = initPoints(pointArray);
-    const program = createShaderProgram(gl, vertexCode, createPointFragmentShader(pointCount));
-    const lineProgram = createShaderProgram(gl, vertexCode, createLineFragmentShader());
+    const program = createShaderProgram(
+      gl,
+      vertexCode,
+      createPointFragmentShader(pointCount)
+    );
+    const lineProgram = createShaderProgram(
+      gl,
+      vertexCode,
+      createLineFragmentShader()
+    );
 
     state.scene = {
       pointCount,
@@ -145,7 +166,7 @@ async function run() {
       points,
       pointOrder: [],
       program,
-      lineProgram
+      lineProgram,
     };
 
     recalculateRoute(state.scene);
@@ -154,7 +175,7 @@ async function run() {
     pointCountInput.value = String(pointCount);
   }
 
-  canvas.addEventListener("mousedown", (e) => {
+  canvas.addEventListener('mousedown', (e) => {
     if (!state.scene) {
       return;
     }
@@ -165,8 +186,8 @@ async function run() {
 
     for (let i = 0; i < state.scene.points.length; i++) {
       const point = state.scene.points[i];
-      const dx = (0.5 * x + 0.5) - point.cx;
-      const dy = (0.5 * y + 0.5) - point.cy;
+      const dx = 0.5 * x + 0.5 - point.cx;
+      const dy = 0.5 * y + 0.5 - point.cy;
       const distance = Math.hypot(dx, dy);
 
       if (distance <= RADIUS_SIZE) {
@@ -176,14 +197,16 @@ async function run() {
     }
   });
 
-  canvas.addEventListener("mousemove", (e) => {
+  canvas.addEventListener('mousemove', (e) => {
     if (!state.scene || state.draggingIndex === -1) {
       return;
     }
 
     const rect = canvas.getBoundingClientRect();
-    state.scene.points[state.draggingIndex].cx = (e.clientX - rect.left) / rect.width;
-    state.scene.points[state.draggingIndex].cy = 1 - (e.clientY - rect.top) / rect.height;
+    state.scene.points[state.draggingIndex].cx =
+      (e.clientX - rect.left) / rect.width;
+    state.scene.points[state.draggingIndex].cy =
+      1 - (e.clientY - rect.top) / rect.height;
 
     syncPointsToMemory(state.scene);
     recalculateRoute(state.scene);
@@ -193,26 +216,30 @@ async function run() {
     state.draggingIndex = -1;
   }
 
-  canvas.addEventListener("mouseup", stopDragging);
-  canvas.addEventListener("mouseleave", stopDragging);
+  canvas.addEventListener('mouseup', stopDragging);
+  canvas.addEventListener('mouseleave', stopDragging);
 
   function applyPointCount() {
-    const nextPointCount = clampPointCount(Number.parseInt(pointCountInput.value, 10));
+    const nextPointCount = clampPointCount(
+      Number.parseInt(pointCountInput.value, 10)
+    );
     initialiseScene(nextPointCount);
   }
 
-  applyPointCountButton.addEventListener("click", applyPointCount);
-  pointCountInput.addEventListener("keydown", (event) => {
-    if (event.key === "Enter") {
+  applyPointCountButton.addEventListener('click', applyPointCount);
+  pointCountInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
       applyPointCount();
     }
   });
 
-  pointCountInput.addEventListener("blur", () => {
-    pointCountInput.value = String(clampPointCount(Number.parseInt(pointCountInput.value, 10)));
+  pointCountInput.addEventListener('blur', () => {
+    pointCountInput.value = String(
+      clampPointCount(Number.parseInt(pointCountInput.value, 10))
+    );
   });
 
-  window.addEventListener("resize", () => {
+  window.addEventListener('resize', () => {
     if (!state.scene) {
       return;
     }

projects/tsp/shaders.js

@@ -17,4 +17,3 @@ export function createShaderProgram(gl, vertexCode, fragCode) {
 
   return program;
 }
-

projects/tsp/tsp-gl.js

@@ -1,7 +1,16 @@
 // tsp-gl.js
-import { updateLines } from "./utils.js";
+import { updateLines } from './utils.js';
 
-export function draw(gl, points, program, lineProgram, positionBuffer, lineBuffer, pointOrder, aspectRatio) {
+export function draw(
+  gl,
+  points,
+  program,
+  lineProgram,
+  positionBuffer,
+  lineBuffer,
+  pointOrder,
+  aspectRatio
+) {
   gl.clear(gl.COLOR_BUFFER_BIT);
 
   // Draw Circles
@@ -22,10 +31,10 @@ function updateCircleUniforms(gl, points, program, positionBuffer) {
 
   gl.useProgram(program);
 
-  gl.uniform2fv(gl.getUniformLocation(program, "u_centers"), centerArray);
+  gl.uniform2fv(gl.getUniformLocation(program, 'u_centers'), centerArray);
 
   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-  const positionAttribLoc = gl.getAttribLocation(program, "a_position");
+  const positionAttribLoc = gl.getAttribLocation(program, 'a_position');
   gl.enableVertexAttribArray(positionAttribLoc);
   gl.vertexAttribPointer(positionAttribLoc, 2, gl.FLOAT, false, 0, 0);
 
@@ -38,7 +47,7 @@ function drawLines(gl, program, buffer, lineVertices) {
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.bufferData(gl.ARRAY_BUFFER, lineVertices, gl.DYNAMIC_DRAW);
 
-  const positionAttribLoc = gl.getAttribLocation(program, "a_position");
+  const positionAttribLoc = gl.getAttribLocation(program, 'a_position');
   gl.enableVertexAttribArray(positionAttribLoc);
   gl.vertexAttribPointer(positionAttribLoc, 2, gl.FLOAT, false, 0, 0);
 

projects/tsp/wasm.js

@@ -1,24 +1,27 @@
 export async function initWasm() {
-
   let wasmMemory = new WebAssembly.Memory({
     initial: 256,
-    maximum: 256
+    maximum: 256,
   });
 
   let importObject = {
     env: {
       memory: wasmMemory,
-    }
+    },
   };
 
-  const response = await fetch("./main.wasm");
-  const wasmModule = await WebAssembly.instantiateStreaming(response, importObject);
-  const { initialisePoints, getPointOrder, memory } = wasmModule.instance.exports;
+  const response = await fetch('./main.wasm');
+  const wasmModule = await WebAssembly.instantiateStreaming(
+    response,
+    importObject
+  );
+  const { initialisePoints, getPointOrder, memory } =
+    wasmModule.instance.exports;
 
   return {
     initialisePoints,
     getPointOrder,
     memory,
-    wasmMemory
-  }
+    wasmMemory,
+  };
 }

projects/warping_lines.html

@@ -142,7 +142,7 @@
       function draw() {
         background(43);
         angleMode(DEGREES);
-        lineNum = document.getElementById("myRange").value;
+        lineNum = document.getElementById('myRange').value;
 
         drawLine(hMargin, lineNum + 1);
 
@@ -169,7 +169,7 @@
             width / 2,
             (j * height) / vm,
             ((hm - 1) * width) / hm,
-            (j * height) / vm,
+            (j * height) / vm
           ); //blue line
 
           stroke(255);
@@ -177,39 +177,39 @@
             width / hm,
             (j * height) / vm,
             width / hm + changex,
-            (j * height) / vm - arrowHeight,
+            (j * height) / vm - arrowHeight
           ); //left top
           line(
             width / hm + changex,
             (j * height) / vm + arrowHeight,
             width / hm,
-            (j * height) / vm,
+            (j * height) / vm
           ); //left bottom
 
           line(
             ((hm - 1) * width) / hm + changex,
             (j * height) / vm + arrowHeight,
             ((hm - 1) * width) / hm,
-            (j * height) / vm,
+            (j * height) / vm
           ); //right bottom
           line(
             width / 2 - changex,
             (j * height) / vm + arrowHeight,
             width / 2,
-            (j * height) / vm,
+            (j * height) / vm
           ); //center bottom
 
           line(
             ((hm - 1) * width) / hm,
             (j * height) / vm,
             ((hm - 1) * width) / hm + changex,
-            (j * height) / vm - arrowHeight,
+            (j * height) / vm - arrowHeight
           ); //right bottom
           line(
             width / 2,
             (j * height) / vm,
             width / 2 - changex,
-            (j * height) / vm - arrowHeight,
+            (j * height) / vm - arrowHeight
           ); //center top
         }
       }

script.js

@@ -1,6 +1,7 @@
 const NAV_OFFSET = 120;
 const DEFAULT_VISIBLE_PROJECTS = 9;
-const INTERACTIVE_SELECTOR = 'a, button, input, textarea, select, summary, [role="button"]';
+const INTERACTIVE_SELECTOR =
+  'a, button, input, textarea, select, summary, [role="button"]';
 
 initRevealOnScroll();
 initActiveNavLink();
@@ -8,168 +9,184 @@ initProjectCardLinks();
 initProjectFilters();
 
 function initRevealOnScroll() {
-    const revealTargets = document.querySelectorAll('.reveal');
-    if (revealTargets.length === 0) {
-        return;
-    }
+  const revealTargets = document.querySelectorAll('.reveal');
+  if (revealTargets.length === 0) {
+    return;
+  }
 
-    const observer = new IntersectionObserver((entries, currentObserver) => {
-        entries.forEach((entry) => {
-            if (!entry.isIntersecting) {
-                return;
-            }
+  const observer = new IntersectionObserver(
+    (entries, currentObserver) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) {
+          return;
+        }
 
-            entry.target.classList.add('visible');
-            currentObserver.unobserve(entry.target);
-        });
-    }, {threshold: 0.1, rootMargin: '0px 0px -40px 0px'});
+        entry.target.classList.add('visible');
+        currentObserver.unobserve(entry.target);
+      });
+    },
+    { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
+  );
 
-    revealTargets.forEach((target) => observer.observe(target));
+  revealTargets.forEach((target) => observer.observe(target));
 }
 
 function initActiveNavLink() {
-    const sections = Array.from(document.querySelectorAll('section[id]'));
-    const navLinks = Array.from(document.querySelectorAll('.nav-links a'));
-    if (sections.length === 0 || navLinks.length === 0) {
-        return;
-    }
+  const sections = Array.from(document.querySelectorAll('section[id]'));
+  const navLinks = Array.from(document.querySelectorAll('.nav-links a'));
+  if (sections.length === 0 || navLinks.length === 0) {
+    return;
+  }
 
-    const updateActiveNavLink = () => {
-        let currentSectionId = '';
+  const updateActiveNavLink = () => {
+    let currentSectionId = '';
 
-        sections.forEach((section) => {
-            if (window.scrollY >= section.offsetTop - NAV_OFFSET) {
-                currentSectionId = section.id;
-            }
-        });
+    sections.forEach((section) => {
+      if (window.scrollY >= section.offsetTop - NAV_OFFSET) {
+        currentSectionId = section.id;
+      }
+    });
 
-        navLinks.forEach((link) => {
-            link.classList.toggle('is-active', link.getAttribute('href') === `#${currentSectionId}`);
-        });
-    };
+    navLinks.forEach((link) => {
+      link.classList.toggle(
+        'is-active',
+        link.getAttribute('href') === `#${currentSectionId}`
+      );
+    });
+  };
 
-    window.addEventListener('scroll', updateActiveNavLink, {passive: true});
-    updateActiveNavLink();
+  window.addEventListener('scroll', updateActiveNavLink, { passive: true });
+  updateActiveNavLink();
 }
 
 function initProjectCardLinks() {
-    const cardLinks = document.querySelectorAll('.card-link[data-href]');
-    if (cardLinks.length === 0) {
+  const cardLinks = document.querySelectorAll('.card-link[data-href]');
+  if (cardLinks.length === 0) {
+    return;
+  }
+
+  cardLinks.forEach((card) => {
+    card.setAttribute('role', 'link');
+    card.setAttribute('tabindex', '0');
+
+    card.addEventListener('click', (event) => {
+      if (shouldIgnoreCardActivation(card, event.target)) {
         return;
-    }
+      }
 
-    cardLinks.forEach((card) => {
-        card.setAttribute('role', 'link');
-        card.setAttribute('tabindex', '0');
-
-        card.addEventListener('click', (event) => {
-            if (shouldIgnoreCardActivation(card, event.target)) {
-                return;
-            }
-
-            navigateToCard(card, event);
-        });
-
-        card.addEventListener('keydown', (event) => {
-            if (event.key !== 'Enter' && event.key !== ' ') {
-                return;
-            }
-
-            if (shouldIgnoreCardActivation(card, event.target)) {
-                return;
-            }
-
-            event.preventDefault();
-            navigateToCard(card, event);
-        });
+      navigateToCard(card, event);
     });
+
+    card.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      if (shouldIgnoreCardActivation(card, event.target)) {
+        return;
+      }
+
+      event.preventDefault();
+      navigateToCard(card, event);
+    });
+  });
 }
 
 function shouldIgnoreCardActivation(card, target) {
-    if (!(target instanceof Element)) {
-        return false;
-    }
+  if (!(target instanceof Element)) {
+    return false;
+  }
 
-    const interactiveAncestor = target.closest(INTERACTIVE_SELECTOR);
-    return interactiveAncestor !== null && interactiveAncestor !== card;
+  const interactiveAncestor = target.closest(INTERACTIVE_SELECTOR);
+  return interactiveAncestor !== null && interactiveAncestor !== card;
 }
 
 function navigateToCard(card, event) {
-    const href = card.dataset.href;
-    if (!href) {
-        return;
-    }
+  const href = card.dataset.href;
+  if (!href) {
+    return;
+  }
 
-    if (event.metaKey || event.ctrlKey || event.button === 1) {
-        window.open(href, '_blank', 'noopener');
-        return;
-    }
+  if (event.metaKey || event.ctrlKey || event.button === 1) {
+    window.open(href, '_blank', 'noopener');
+    return;
+  }
 
-    window.location.assign(href);
+  window.location.assign(href);
 }
 
 function initProjectFilters() {
-    const filterChips = Array.from(document.querySelectorAll('.filter-chip'));
-    const projectCards = Array.from(document.querySelectorAll('#project-grid .project-card'));
-    if (filterChips.length === 0 || projectCards.length === 0) {
+  const filterChips = Array.from(document.querySelectorAll('.filter-chip'));
+  const projectCards = Array.from(
+    document.querySelectorAll('#project-grid .project-card')
+  );
+  if (filterChips.length === 0 || projectCards.length === 0) {
+    return;
+  }
+
+  const seeMoreButton = document.querySelector('#projects-see-more');
+  const techByCard = new Map(
+    projectCards.map((card) => [
+      card,
+      (card.dataset.tech || '').split(/\s+/).filter(Boolean),
+    ])
+  );
+
+  let selectedFilter = 'all';
+  let isExpanded = false;
+
+  const applyFilter = () => {
+    let visibleCount = 0;
+
+    projectCards.forEach((card) => {
+      const tech = techByCard.get(card) || [];
+      const matchesFilter =
+        selectedFilter === 'all' || tech.includes(selectedFilter);
+
+      card.classList.toggle('is-hidden', !matchesFilter);
+      if (!matchesFilter) {
+        card.classList.remove('is-collapsed');
         return;
-    }
+      }
 
-    const seeMoreButton = document.querySelector('#projects-see-more');
-    const techByCard = new Map(
-        projectCards.map((card) => [card, (card.dataset.tech || '').split(/\s+/).filter(Boolean)]),
-    );
-
-    let selectedFilter = 'all';
-    let isExpanded = false;
-
-    const applyFilter = () => {
-        let visibleCount = 0;
-
-        projectCards.forEach((card) => {
-            const tech = techByCard.get(card) || [];
-            const matchesFilter = selectedFilter === 'all' || tech.includes(selectedFilter);
-
-            card.classList.toggle('is-hidden', !matchesFilter);
-            if (!matchesFilter) {
-                card.classList.remove('is-collapsed');
-                return;
-            }
-
-            const isCollapsed = !isExpanded && visibleCount >= DEFAULT_VISIBLE_PROJECTS;
-            card.classList.toggle('is-collapsed', isCollapsed);
-            visibleCount += 1;
-        });
-
-        if (!seeMoreButton) {
-            return;
-        }
-
-        const canExpand = visibleCount > DEFAULT_VISIBLE_PROJECTS;
-        seeMoreButton.hidden = !canExpand;
-        seeMoreButton.setAttribute('aria-expanded', canExpand && isExpanded ? 'true' : 'false');
-        seeMoreButton.textContent = isExpanded ? 'See less' : 'See more';
-    };
-
-    filterChips.forEach((chip) => {
-        chip.addEventListener('click', () => {
-            selectedFilter = chip.dataset.filter || 'all';
-            isExpanded = false;
-
-            filterChips.forEach((otherChip) => {
-                otherChip.classList.toggle('active', otherChip === chip);
-            });
-
-            applyFilter();
-        });
+      const isCollapsed =
+        !isExpanded && visibleCount >= DEFAULT_VISIBLE_PROJECTS;
+      card.classList.toggle('is-collapsed', isCollapsed);
+      visibleCount += 1;
     });
 
-    if (seeMoreButton) {
-        seeMoreButton.addEventListener('click', () => {
-            isExpanded = !isExpanded;
-            applyFilter();
-        });
+    if (!seeMoreButton) {
+      return;
     }
 
-    applyFilter();
+    const canExpand = visibleCount > DEFAULT_VISIBLE_PROJECTS;
+    seeMoreButton.hidden = !canExpand;
+    seeMoreButton.setAttribute(
+      'aria-expanded',
+      canExpand && isExpanded ? 'true' : 'false'
+    );
+    seeMoreButton.textContent = isExpanded ? 'See less' : 'See more';
+  };
+
+  filterChips.forEach((chip) => {
+    chip.addEventListener('click', () => {
+      selectedFilter = chip.dataset.filter || 'all';
+      isExpanded = false;
+
+      filterChips.forEach((otherChip) => {
+        otherChip.classList.toggle('active', otherChip === chip);
+      });
+
+      applyFilter();
+    });
+  });
+
+  if (seeMoreButton) {
+    seeMoreButton.addEventListener('click', () => {
+      isExpanded = !isExpanded;
+      applyFilter();
+    });
+  }
+
+  applyFilter();
 }