Converts to TypeScript

dzucconi · May 29, 2021 · 0583b61 · 0583b61
1 parent c315016
commit 0583b61
Show file tree

Hide file tree

Showing 19 changed files with 6,110 additions and 218 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
-# Numerous always-ignore extensions
 *.diff
 *.err
 *.orig
@@ -9,22 +8,13 @@
 *.vi
 *~
 *.sass-cache
-
-# OS or Editor folders
 .DS_Store
 .cache
 .project
 .settings
 .tmproj
 nbproject
 Thumbs.db
-
-# NPM packages folder.
 node_modules/
-
-# Brunch output folder.
-public/
-
-# Secrets
-.env
-.s3config
+dist/
+.parcel-cache/
diff --git a/.s3config.sample b/.s3config.sample
diff --git a/app/assets/index.html b/app/assets/index.html
diff --git a/app/initialize.js b/app/initialize.js
diff --git a/app/javascripts/index.js b/app/javascripts/index.js
diff --git a/app/javascripts/lib/rand.js b/app/javascripts/lib/rand.js
diff --git a/app/javascripts/lib/uid.js b/app/javascripts/lib/uid.js
diff --git a/brunch-config.js b/brunch-config.js
diff --git a/package.json b/package.json
@@ -8,33 +8,14 @@
     "url": "https://github.com/dzucconi/interpolated-sequence"
   },
   "scripts": {
-    "test": "mocha test",
-    "start": "brunch watch --server",
-    "prod": "brunch build --production",
-    "sync": "s3-cli --config .s3config sync --delete-removed --acl-public public/ s3://work.damonzucconi.com/$npm_package_name",
-    "deploy": "npm run prod && npm run sync"
+    "start": "parcel src/index.html --open",
+    "build": "parcel build src/index.html"
   },
   "devDependencies": {
-    "auto-reload-brunch": "^2.0.0",
-    "autoprefixer": "^6.5.0",
-    "babel-brunch": "~6.0.0",
-    "babel-core": "^6.17.0",
-    "babel-preset-es2015": "~6.3.13",
-    "brunch": "^2.4.0",
-    "clean-css-brunch": "^2.0.0",
-    "css-brunch": "^2.0.0",
-    "digest-brunch": "^1.6.0",
-    "eslint": "^3.7.1",
-    "javascript-brunch": "^2.0.0",
-    "mocha": "^3.1.0",
-    "postcss-brunch": "^2.0.3",
-    "s3-cli": "^0.13.0",
-    "should": "^11.1.0",
-    "uglify-js-brunch": "^2.0.0"
+    "parcel": "^2.0.0-beta.2"
   },
   "dependencies": {
-    "frame-interval": "0.0.1",
-    "pixi.js": "^4.3.0",
-    "queryparams": "0.0.6"
+    "frame-interval": "1.0.47",
+    "queryparams": "1.2.2"
   }
 }
diff --git a/app/stylesheets/index.css → src/index.css b/app/stylesheets/index.css → src/index.css
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" value="Damon Zucconi" />
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+    <title>Interpolated Sequence</title>
+
+    <link rel="stylesheet" type="text/css" href="./index.css" />
+  </head>
+  <body>
+    <div id="root" class="app"></div>
+
+    <script src="./javascripts/index.ts"></script>
+
+    <script>
+      // TODO
+    </script>
+  </body>
+</html>
diff --git a/src/javascripts/index.ts b/src/javascripts/index.ts
@@ -0,0 +1,75 @@
+import { FrameInterval } from "frame-interval";
+import { configure } from "queryparams";
+import { uid } from "./lib/uid";
+import { rand } from "./lib/rand";
+import { tag } from "./lib/dom";
+
+const DOM = {
+  app: document.getElementById("root"),
+};
+
+const STATE: Record<string, number> = {};
+
+const creator =
+  (size: number) =>
+  (n: number, randomize: boolean): [string, CanvasRenderingContext2D] => {
+    const id = `canvas_${uid()}`;
+
+    const node = tag(
+      "div",
+      { klass: "container" },
+      ` <canvas id='${id}' width='${n}' height='${n}'></canvas>
+  `
+    );
+
+    if (size) {
+      node.style.width = `${size}px`;
+      node.style.height = `${size}px`;
+    }
+
+    DOM.app.appendChild(node);
+
+    DOM[id] = document.getElementById(id);
+    STATE[id] = randomize ? rand(-1, 9) : -1;
+
+    const ctx = (DOM[id] as HTMLCanvasElement).getContext("2d");
+
+    ctx.font = `${n}px 'Helvetica Neue', sans-serif`;
+    ctx.fillStyle = "white";
+    ctx.textBaseline = "middle";
+    ctx.textAlign = "center";
+
+    return [id, ctx];
+  };
+
+const update = ([id, ctx]: [string, CanvasRenderingContext2D]) => {
+  if (STATE[id] === 9) STATE[id] = 0;
+
+  STATE[id]++;
+
+  ctx.clearRect(0, 0, DOM[id].width, DOM[id].height);
+  ctx.fillText(String(STATE[id]), DOM[id].width / 2, DOM[id].height / 2);
+};
+
+const { params } = configure({
+  fps: 60,
+  amount: 10,
+  offset: 1,
+  step: 1,
+  randomize: false,
+});
+
+const create = creator(
+  Math.min(window.innerWidth / params.amount, window.innerHeight)
+);
+
+const handles = Array(params.amount)
+  .fill(undefined)
+  .map((_, n) => {
+    const step = n === 0 ? 1 : params.step;
+    return create((n + params.offset) * step, params.randomize);
+  });
+
+const fi = new FrameInterval(params.fps, () => handles.forEach(update));
+
+fi.start();
diff --git a/app/javascripts/lib/dom.js → src/javascripts/lib/dom.ts b/app/javascripts/lib/dom.js → src/javascripts/lib/dom.ts
@@ -1,9 +1,12 @@
-export const tag = (type, { id, klass } = {}, html) => {
+export const tag = (
+  type: string,
+  { id, klass }: { id?: string; klass?: string } = {},
+  html?: string
+) => {
   const el = document.createElement(type);
 
   if (id) el.id = id;
   if (klass) el.className = klass;
-
   if (html) el.innerHTML = html;
 
   return el;

diff --git a/src/javascripts/lib/rand.ts b/src/javascripts/lib/rand.ts
@@ -0,0 +1,2 @@
+export const rand = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min) + min);
diff --git a/src/javascripts/lib/uid.ts b/src/javascripts/lib/uid.ts
@@ -0,0 +1,2 @@
+export const uid = () =>
+  ("0000" + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)).slice(-4);
diff --git a/test/mocha.opts b/test/mocha.opts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const rand = (min: number, max: number) =>
		Math.floor(Math.random() * (max - min) + min);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const uid = () =>
		("0000" + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)).slice(-4);