git.iko.soy/astrolabe
on main help sign in
add legils to test page
commitbf4ad587c34167261623648d675d392649a3d863 authorJohn Hyde <johnhydefour@gmail.com> dateFri 30 Sep 2022, 16:47 (4 years ago) parent1ee2551
4 files changed+91−1
compare with main
unifiedsplit
ui/package-lock.json+40−1 ui/package.json+1 ui/src/components/Legil.svelte+47 ui/src/routes/SigilPage.svelte+3
ui/package-lock.json+40−1
@@ -8,6 +8,7 @@
88 "name": "urbit-astrolabe",
99 "version": "0.3.0",
1010 "dependencies": {
11+ "@johnhyde/legil-js": "file:../../legil-js",
1112 "@johnhyde/sigil-js": "github:johnhyde/sigil-js",
1213 "@tlon/phonemes-js": "^1.0.0",
1314 "@tlon/sigil-js": "^1.4.5",
@@ -41,6 +42,26 @@
4142 "vite": "^2.7.2"
4243 }
4344 },
45+ "../../legil-js": {
46+ "version": "0.0.0",
47+ "license": "MIT",
48+ "dependencies": {
49+ "invariant": "^2.2.4",
50+ "svgson": "^4.0.0",
51+ "transformation-matrix": "2.1.1"
52+ },
53+ "devDependencies": {
54+ "@types/invariant": "^2.2.31",
55+ "@types/react": "^17.0.20",
56+ "husky": "^4.2.3",
57+ "prettier": "^1.19.1",
58+ "tsdx": "^0.14.1",
59+ "typescript": "^3.8.3"
60+ },
61+ "peerDependencies": {
62+ "react": "^16 || ^17"
63+ }
64+ },
4465 "../../sigil-js": {
4566 "name": "@johnhyde/sigil-js",
4667 "version": "1.4.6",
@@ -171,6 +192,10 @@
171192 "node": ">=6.9.0"
172193 }
173194 },
195+ "node_modules/@johnhyde/legil-js": {
196+ "resolved": "../../legil-js",
197+ "link": true
198+ },
174199 "node_modules/@johnhyde/sigil-js": {
175200 "version": "1.4.6",
176201 "resolved": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
@@ -3126,9 +3151,23 @@
31263151 "regenerator-runtime": "^0.13.4"
31273152 }
31283153 },
3154+ "@johnhyde/legil-js": {
3155+ "version": "file:../../legil-js",
3156+ "requires": {
3157+ "@types/invariant": "^2.2.31",
3158+ "@types/react": "^17.0.20",
3159+ "husky": "^4.2.3",
3160+ "invariant": "^2.2.4",
3161+ "prettier": "^1.19.1",
3162+ "svgson": "^4.0.0",
3163+ "transformation-matrix": "2.1.1",
3164+ "tsdx": "^0.14.1",
3165+ "typescript": "^3.8.3"
3166+ }
3167+ },
31293168 "@johnhyde/sigil-js": {
31303169 "version": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
3131− "from": "@johnhyde/sigil-js@git+ssh://git@github.com:johnhyde/sigil-js.git",
3170+ "from": "@johnhyde/sigil-js@github:johnhyde/sigil-js",
31323171 "requires": {
31333172 "invariant": "^2.2.4",
31343173 "svgson": "^4.0.0",
ui/package.json+1
@@ -43,6 +43,7 @@
4343 "vite": "^2.7.2"
4444 },
4545 "dependencies": {
46+ "@johnhyde/legil-js": "file:../../legil-js",
4647 "@johnhyde/sigil-js": "github:johnhyde/sigil-js",
4748 "@tlon/phonemes-js": "^1.0.0",
4849 "@tlon/sigil-js": "^1.4.5",
ui/src/components/Legil.sveltenew file+47
@@ -0,0 +1,47 @@
1+<script lang="ts">
2+ import { clan } from 'urbit-ob';
3+ import { legil, stringRenderer } from '@johnhyde/legil-js';
4+ import { sigilScalingFunction } from 'lib/sigil';
5+ import moonPng from 'assets/moon.png';
6+ import cometSvg from 'assets/comet.svg';
7+
8+ export let patp: string;
9+ export let size: number;
10+ export let fgColor: string = 'white';
11+ export let bgColor: string = 'black';
12+ export let altBgColor: string = undefined;
13+ let svgString: any;
14+ let imgSrc: any;
15+
16+ $: shipClass = clan(patp);
17+ $: displaySigil = ['galaxy', 'star', 'planet'].includes(shipClass);
18+ $: {
19+ if (displaySigil) {
20+ let svgAST;
21+ svgAST = legil({
22+ patp: patp,
23+ size,
24+ colors: [bgColor, fgColor],
25+ autoScaleStrokes: true,
26+ strokeScalingFunctionV2: sigilScalingFunction,
27+ });
28+ svgAST.attributes.preserveAspectRatio = 'xMidYMin slice';
29+ svgString = stringRenderer(svgAST);
30+ if (altBgColor) {
31+ svgString = svgString.replace(/rect fill="[^"]+"/, `rect fill="${altBgColor}"`);
32+ }
33+ } else if (shipClass === 'moon') {
34+ imgSrc = moonPng;
35+ } else {
36+ imgSrc = cometSvg;
37+ }
38+ }
39+</script>
40+
41+<div class="grow" style:max-width="{size}px">
42+ {#if displaySigil}
43+ {@html svgString}
44+ {:else}
45+ <img src={imgSrc} alt={shipClass} class="mx-auto" />
46+ {/if}
47+</div>
ui/src/routes/SigilPage.svelte+3
@@ -1,6 +1,7 @@
11<script lang="ts">
22 import { prefixes, suffixes } from 'lib/id';
33 import Sigil from "@/Sigil.svelte";
4+ import Legil from "@/Legil.svelte";
45
56 let index: number = undefined;
67 let altBgColor = 'red';
@@ -37,6 +38,7 @@
3738 <div class="flex">
3839 <Sigil patp={phoneme} size={64} {altBgColor} />
3940 <Sigil patp={phoneme} size={64} {altBgColor} useNew />
41+ <Legil patp={phoneme} size={64} {altBgColor} />
4042 </div>
4143 </div>
4244 {/each}
@@ -53,6 +55,7 @@
5355 <div class="flex w-full">
5456 <Sigil patp={phonemes[index]} size={400} {altBgColor} />
5557 <Sigil patp={phonemes[index]} size={400} {altBgColor} useNew />
58+ <Legil patp={phonemes[index]} size={400} {altBgColor} />
5659 </div>
5760 {/if}
5861</div>