git.iko.soy/astrolabe
on main help sign in
add legils to test page
bf4ad58John Hyde
ui/package-lock.json+40−1
compare with main
unifiedsplit
@@ -8,6 +8,7 @@
8 "name": "urbit-astrolabe",
8 "name": "urbit-astrolabe",
9 "version": "0.3.0",
9 "version": "0.3.0",
10 "dependencies": {
10 "dependencies": {
11+ "@johnhyde/legil-js": "file:../../legil-js",
11 "@johnhyde/sigil-js": "github:johnhyde/sigil-js",
12 "@johnhyde/sigil-js": "github:johnhyde/sigil-js",
12 "@tlon/phonemes-js": "^1.0.0",
13 "@tlon/phonemes-js": "^1.0.0",
13 "@tlon/sigil-js": "^1.4.5",
14 "@tlon/sigil-js": "^1.4.5",
@@ -41,6 +42,26 @@
41 "vite": "^2.7.2"
42 "vite": "^2.7.2"
42 }
43 }
43 },
44 },
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+ },
44 "../../sigil-js": {
65 "../../sigil-js": {
45 "name": "@johnhyde/sigil-js",
66 "name": "@johnhyde/sigil-js",
46 "version": "1.4.6",
67 "version": "1.4.6",
@@ -171,6 +192,10 @@
171 "node": ">=6.9.0"
192 "node": ">=6.9.0"
172 }
193 }
173 },
194 },
195+ "node_modules/@johnhyde/legil-js": {
196+ "resolved": "../../legil-js",
197+ "link": true
198+ },
174 "node_modules/@johnhyde/sigil-js": {
199 "node_modules/@johnhyde/sigil-js": {
175 "version": "1.4.6",
200 "version": "1.4.6",
176 "resolved": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
201 "resolved": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
@@ -3126,9 +3151,23 @@
3126 "regenerator-runtime": "^0.13.4"
3151 "regenerator-runtime": "^0.13.4"
3127 }
3152 }
3128 },
3153 },
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+ },
3129 "@johnhyde/sigil-js": {
3168 "@johnhyde/sigil-js": {
3130 "version": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
3169 "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",
3132 "requires": {
3171 "requires": {
3133 "invariant": "^2.2.4",
3172 "invariant": "^2.2.4",
3134 "svgson": "^4.0.0",
3173 "svgson": "^4.0.0",
ui/package.json+1
@@ -43,6 +43,7 @@
43 "vite": "^2.7.2"
43 "vite": "^2.7.2"
44 },
44 },
45 "dependencies": {
45 "dependencies": {
46+ "@johnhyde/legil-js": "file:../../legil-js",
46 "@johnhyde/sigil-js": "github:johnhyde/sigil-js",
47 "@johnhyde/sigil-js": "github:johnhyde/sigil-js",
47 "@tlon/phonemes-js": "^1.0.0",
48 "@tlon/phonemes-js": "^1.0.0",
48 "@tlon/sigil-js": "^1.4.5",
49 "@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 @@
1<script lang="ts">
1<script lang="ts">
2 import { prefixes, suffixes } from 'lib/id';
2 import { prefixes, suffixes } from 'lib/id';
3 import Sigil from "@/Sigil.svelte";
3 import Sigil from "@/Sigil.svelte";
4+ import Legil from "@/Legil.svelte";
4
5
5 let index: number = undefined;
6 let index: number = undefined;
6 let altBgColor = 'red';
7 let altBgColor = 'red';
@@ -37,6 +38,7 @@
37 <div class="flex">
38 <div class="flex">
38 <Sigil patp={phoneme} size={64} {altBgColor} />
39 <Sigil patp={phoneme} size={64} {altBgColor} />
39 <Sigil patp={phoneme} size={64} {altBgColor} useNew />
40 <Sigil patp={phoneme} size={64} {altBgColor} useNew />
41+ <Legil patp={phoneme} size={64} {altBgColor} />
40 </div>
42 </div>
41 </div>
43 </div>
42 {/each}
44 {/each}
@@ -53,6 +55,7 @@
53 <div class="flex w-full">
55 <div class="flex w-full">
54 <Sigil patp={phonemes[index]} size={400} {altBgColor} />
56 <Sigil patp={phonemes[index]} size={400} {altBgColor} />
55 <Sigil patp={phonemes[index]} size={400} {altBgColor} useNew />
57 <Sigil patp={phonemes[index]} size={400} {altBgColor} useNew />
58+ <Legil patp={phonemes[index]} size={400} {altBgColor} />
56 </div>
59 </div>
57 {/if}
60 {/if}
58</div>
61</div>