git.iko.soy/astrolabe
on main help sign in
sigil update, astrolabe v1!
24c43abJohn Hyde
desk/desk.docket-0+3−3
compare with main
unifiedsplit
@@ -1,10 +1,10 @@
1:~ title+'Astrolabe'
1:~ title+'Astrolabe'
2− info+'Your guide to the Urbit constellations'
2+ info+'Your guide to the Urbit constellations. Search for ships, view their info, and explore the Star Chart.'
3 color+0x1f.243c
3 color+0x1f.243c
4 image+'https://raw.githubusercontent.com/johnhyde/astrolabe/main/ui/src/assets/astrolabe-tile.svg'
4 image+'https://raw.githubusercontent.com/johnhyde/astrolabe/main/ui/src/assets/astrolabe-tile.svg'
5− glob-http+['https://s3.us-east-2.amazonaws.com/warkgnall.com/urbit/astrolabe/globs/glob-0v6.g0rdr.d6ja2.qomtg.hqt4o.i0i83.glob' 0v6.g0rdr.d6ja2.qomtg.hqt4o.i0i83]
5+ glob-http+['https://s3.us-east-2.amazonaws.com/warkgnall.com/urbit/astrolabe/globs/glob-0v4.88rt1.guqn5.nnatp.lca68.ej9aj.glob' 0v4.88rt1.guqn5.nnatp.lca68.ej9aj]
6 base+'astrolabe'
6 base+'astrolabe'
7− version+[0 3 8]
7+ version+[1 0 0]
8 website+'https://github.com/johnhyde/astrolabe'
8 website+'https://github.com/johnhyde/astrolabe'
9 license+'MIT'
9 license+'MIT'
10==
10==
ui/package-lock.json+3−3
@@ -174,7 +174,7 @@
174 },
174 },
175 "node_modules/@johnhyde/sigil-js": {
175 "node_modules/@johnhyde/sigil-js": {
176 "version": "1.4.6",
176 "version": "1.4.6",
177− "resolved": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
177+ "resolved": "git+ssh://git@github.com/johnhyde/sigil-js.git#f89ce78c34b5811ea19ddea4a6964ea8360e7b4d",
178 "license": "MIT",
178 "license": "MIT",
179 "dependencies": {
179 "dependencies": {
180 "invariant": "^2.2.4",
180 "invariant": "^2.2.4",
@@ -3155,8 +3155,8 @@
3155 }
3155 }
3156 },
3156 },
3157 "@johnhyde/sigil-js": {
3157 "@johnhyde/sigil-js": {
3158− "version": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
3158+ "version": "git+ssh://git@github.com/johnhyde/sigil-js.git#f89ce78c34b5811ea19ddea4a6964ea8360e7b4d",
3159− "from": "@johnhyde/sigil-js@github:johnhyde/sigil-js",
3159+ "from": "@johnhyde/sigil-js@git+ssh://git@github.com:johnhyde/sigil-js.git",
3160 "requires": {
3160 "requires": {
3161 "invariant": "^2.2.4",
3161 "invariant": "^2.2.4",
3162 "svgson": "^4.0.0",
3162 "svgson": "^4.0.0",
ui/src/components/common/Sigil.svelte+27−27
@@ -1,8 +1,8 @@
1<script lang="ts">
1<script lang="ts">
2 import { clan } from 'urbit-ob';
2 import { clan } from 'urbit-ob';
3− import { sigil as sigil1, stringRenderer as sr1 } from '@tlon/sigil-js';
3+ // import { sigil as sigil1, stringRenderer as sr1 } from '@tlon/sigil-js';
4 import { sigil as sigil2, stringRenderer as sr2 } from '@johnhyde/sigil-js';
4 import { sigil as sigil2, stringRenderer as sr2 } from '@johnhyde/sigil-js';
5− import { sigilScalingFunction } from 'lib/sigil';
5+ import { sigilScalingFunction, crowdedSigilScalingFunction } from 'lib/sigil';
6 import moonPng from 'assets/moon.png';
6 import moonPng from 'assets/moon.png';
7 import cometSvg from 'assets/comet.svg';
7 import cometSvg from 'assets/comet.svg';
8
8
@@ -20,46 +20,46 @@
20 $: noShrinkWidth = noShrink ? size+'px' : 'initial';
20 $: noShrinkWidth = noShrink ? size+'px' : 'initial';
21
21
22 $: shipClass = clan(patp);
22 $: shipClass = clan(patp);
23− $: displaySigil = ['galaxy', 'star', 'planet'].includes(shipClass);
23+ $: crowded = ['comet', 'moon'].includes(shipClass);
24 $: {
24 $: {
25− if (displaySigil) {
25+ // if (displaySigil) {
26− let sigil = sigil1;
26+ // let sigil = sigil1;
27− let sr = sr1;
27+ // let sr = sr1;
28− let svgAST;
28+ // let svgAST;
29− if (useNew) {
29+ // if (useNew) {
30− sigil = sigil2;
30+ let sigil = sigil2;
31− sr = sr2;
31+ let sr = sr2;
32− svgAST = sigil({
32+ let svgAST = sigil({
33 patp: patp,
33 patp: patp,
34 size,
34 size,
35 colors: [bgColor, fgColor],
35 colors: [bgColor, fgColor],
36 autoScaleStrokes: true,
36 autoScaleStrokes: true,
37− strokeScalingFunctionV2: sigilScalingFunction,
37+ strokeScalingFunctionV2: crowded ? crowdedSigilScalingFunction : sigilScalingFunction,
38 });
38 });
39− } else {
39+ // } else {
40− svgAST = sigil({
40+ // svgAST = sigil({
41− patp: patp,
41+ // patp: patp,
42− size,
42+ // size,
43− colors: [bgColor, fgColor],
43+ // colors: [bgColor, fgColor],
44− });
44+ // });
45− }
45+ // }
46 svgAST.attributes.preserveAspectRatio = 'xMidYMin slice';
46 svgAST.attributes.preserveAspectRatio = 'xMidYMin slice';
47 svgString = sr(svgAST);
47 svgString = sr(svgAST);
48 if (altBgColor) {
48 if (altBgColor) {
49 svgString = svgString.replace(/rect fill="[^"]+"/, `rect fill="${altBgColor}"`);
49 svgString = svgString.replace(/rect fill="[^"]+"/, `rect fill="${altBgColor}"`);
50 }
50 }
51− } else if (shipClass === 'moon') {
51+ // } else if (shipClass === 'moon') {
52− imgSrc = moonPng;
52+ // imgSrc = moonPng;
53− } else {
53+ // } else {
54− imgSrc = cometSvg;
54+ // imgSrc = cometSvg;
55− }
55+ // }
56 }
56 }
57</script>
57</script>
58
58
59<div class="grow {noShrinkClasses}" style:max-width="{size}px" style:width={noShrinkWidth}>
59<div class="grow {noShrinkClasses}" style:max-width="{size}px" style:width={noShrinkWidth}>
60− {#if displaySigil}
60+ <!-- {#if displaySigil} -->
61 {@html svgString}
61 {@html svgString}
62− {:else}
62+ <!-- {:else}
63 <img src={imgSrc} alt={shipClass} class="mx-auto" />
63 <img src={imgSrc} alt={shipClass} class="mx-auto" />
64− {/if}
64+ {/if} -->
65</div>
65</div>
ui/src/lib/sigil.ts+4
@@ -11,6 +11,10 @@ export function sigilScalingFunction(size: number): number {
11 return 3.5 * Math.sqrt(51 / size);
11 return 3.5 * Math.sqrt(51 / size);
12}
12}
13
13
14+export function crowdedSigilScalingFunction(size: number): number {
15+ return 2.8 * Math.sqrt(51 / size);
16+}
17+
14export class SigilQuery {
18export class SigilQuery {
15 clan: Clan;
19 clan: Clan;
16 symbols: SymbolQuery[];
20 symbols: SymbolQuery[];
ui/src/styles/tailwind-output.css+11−11
@@ -1032,6 +1032,10 @@ Ensure the default browser behavior of the `hidden` attribute.
1032 --tw-translate-y: -25%;
1032 --tw-translate-y: -25%;
1033 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1033 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1034}
1034}
1035+.rotate-90 {
1036+ --tw-rotate: 90deg;
1037+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1038+}
1035.rotate-45 {
1039.rotate-45 {
1036 --tw-rotate: 45deg;
1040 --tw-rotate: 45deg;
1037 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1041 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1040,10 +1044,6 @@ Ensure the default browser behavior of the `hidden` attribute.
1040 --tw-rotate: -45deg;
1044 --tw-rotate: -45deg;
1041 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1045 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1042}
1046}
1043−.rotate-90 {
1044− --tw-rotate: 90deg;
1045− transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1046−}
1047.scale-150 {
1047.scale-150 {
1048 --tw-scale-x: 1.5;
1048 --tw-scale-x: 1.5;
1049 --tw-scale-y: 1.5;
1049 --tw-scale-y: 1.5;
@@ -1896,6 +1896,13 @@ Ensure the default browser behavior of the `hidden` attribute.
1896.filter {
1896.filter {
1897 filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1897 filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1898}
1898}
1899+.transition {
1900+ transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1901+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1902+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1903+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1904+ transition-duration: 150ms;
1905+}
1899.transition-opacity {
1906.transition-opacity {
1900 transition-property: opacity;
1907 transition-property: opacity;
1901 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1908 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1911,13 +1918,6 @@ Ensure the default browser behavior of the `hidden` attribute.
1911 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1918 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1912 transition-duration: 150ms;
1919 transition-duration: 150ms;
1913}
1920}
1914−.transition {
1915− transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1916− transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1917− transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1918− transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1919− transition-duration: 150ms;
1920−}
1921.duration-150 {
1921.duration-150 {
1922 transition-duration: 150ms;
1922 transition-duration: 150ms;
1923}
1923}