git.iko.soy/astrolabe
on main help sign in
sigil update, astrolabe v1!
commit24c43ab20fb02da1a0255e90e8f0dee443e3fb96 authorJohn Hyde <johnhydefour@gmail.com> dateThu 15 Dec 2022, 04:31 (4 years ago) parent1e69bbd
5 files changed+48−44
compare with main
unifiedsplit
desk/desk.docket-0+3−3 ui/package-lock.json+3−3 ui/src/components/common/Sigil.svelte+27−27 ui/src/lib/sigil.ts+4 ui/src/styles/tailwind-output.css+11−11
desk/desk.docket-0+3−3
@@ -1,10 +1,10 @@
11:~ 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.'
33 color+0x1f.243c
44 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]
66 base+'astrolabe'
7− version+[0 3 8]
7+ version+[1 0 0]
88 website+'https://github.com/johnhyde/astrolabe'
99 license+'MIT'
1010==
ui/package-lock.json+3−3
@@ -174,7 +174,7 @@
174174 },
175175 "node_modules/@johnhyde/sigil-js": {
176176 "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",
178178 "license": "MIT",
179179 "dependencies": {
180180 "invariant": "^2.2.4",
@@ -3155,8 +3155,8 @@
31553155 }
31563156 },
31573157 "@johnhyde/sigil-js": {
3158− "version": "git+ssh://git@github.com/johnhyde/sigil-js.git#35f71ac00b54dd56d010b6fccfa48c6f75c48ee8",
3159− "from": "@johnhyde/sigil-js@github:johnhyde/sigil-js",
3158+ "version": "git+ssh://git@github.com/johnhyde/sigil-js.git#f89ce78c34b5811ea19ddea4a6964ea8360e7b4d",
3159+ "from": "@johnhyde/sigil-js@git+ssh://git@github.com:johnhyde/sigil-js.git",
31603160 "requires": {
31613161 "invariant": "^2.2.4",
31623162 "svgson": "^4.0.0",
ui/src/components/common/Sigil.svelte+27−27
@@ -1,8 +1,8 @@
11<script lang="ts">
22 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';
44 import { sigil as sigil2, stringRenderer as sr2 } from '@johnhyde/sigil-js';
5− import { sigilScalingFunction } from 'lib/sigil';
5+ import { sigilScalingFunction, crowdedSigilScalingFunction } from 'lib/sigil';
66 import moonPng from 'assets/moon.png';
77 import cometSvg from 'assets/comet.svg';
88
@@ -20,46 +20,46 @@
2020 $: noShrinkWidth = noShrink ? size+'px' : 'initial';
2121
2222 $: shipClass = clan(patp);
23− $: displaySigil = ['galaxy', 'star', 'planet'].includes(shipClass);
23+ $: crowded = ['comet', 'moon'].includes(shipClass);
2424 $: {
25− if (displaySigil) {
26− let sigil = sigil1;
27− let sr = sr1;
28− let svgAST;
29− if (useNew) {
30− sigil = sigil2;
31− sr = sr2;
32− svgAST = sigil({
25+ // if (displaySigil) {
26+ // let sigil = sigil1;
27+ // let sr = sr1;
28+ // let svgAST;
29+ // if (useNew) {
30+ let sigil = sigil2;
31+ let sr = sr2;
32+ let svgAST = sigil({
3333 patp: patp,
3434 size,
3535 colors: [bgColor, fgColor],
3636 autoScaleStrokes: true,
37− strokeScalingFunctionV2: sigilScalingFunction,
37+ strokeScalingFunctionV2: crowded ? crowdedSigilScalingFunction : sigilScalingFunction,
3838 });
39− } else {
40− svgAST = sigil({
41− patp: patp,
42− size,
43− colors: [bgColor, fgColor],
44− });
45− }
39+ // } else {
40+ // svgAST = sigil({
41+ // patp: patp,
42+ // size,
43+ // colors: [bgColor, fgColor],
44+ // });
45+ // }
4646 svgAST.attributes.preserveAspectRatio = 'xMidYMin slice';
4747 svgString = sr(svgAST);
4848 if (altBgColor) {
4949 svgString = svgString.replace(/rect fill="[^"]+"/, `rect fill="${altBgColor}"`);
5050 }
51− } else if (shipClass === 'moon') {
52− imgSrc = moonPng;
53− } else {
54− imgSrc = cometSvg;
55− }
51+ // } else if (shipClass === 'moon') {
52+ // imgSrc = moonPng;
53+ // } else {
54+ // imgSrc = cometSvg;
55+ // }
5656 }
5757</script>
5858
5959<div class="grow {noShrinkClasses}" style:max-width="{size}px" style:width={noShrinkWidth}>
60− {#if displaySigil}
60+ <!-- {#if displaySigil} -->
6161 {@html svgString}
62− {:else}
62+ <!-- {:else}
6363 <img src={imgSrc} alt={shipClass} class="mx-auto" />
64− {/if}
64+ {/if} -->
6565</div>
ui/src/lib/sigil.ts+4
@@ -11,6 +11,10 @@ export function sigilScalingFunction(size: number): number {
1111 return 3.5 * Math.sqrt(51 / size);
1212}
1313
14+export function crowdedSigilScalingFunction(size: number): number {
15+ return 2.8 * Math.sqrt(51 / size);
16+}
17+
1418export class SigilQuery {
1519 clan: Clan;
1620 symbols: SymbolQuery[];
ui/src/styles/tailwind-output.css+11−11
@@ -1032,6 +1032,10 @@ Ensure the default browser behavior of the `hidden` attribute.
10321032 --tw-translate-y: -25%;
10331033 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));
10341034}
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+}
10351039.rotate-45 {
10361040 --tw-rotate: 45deg;
10371041 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.
10401044 --tw-rotate: -45deg;
10411045 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));
10421046}
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−}
10471047.scale-150 {
10481048 --tw-scale-x: 1.5;
10491049 --tw-scale-y: 1.5;
@@ -1896,6 +1896,13 @@ Ensure the default browser behavior of the `hidden` attribute.
18961896.filter {
18971897 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);
18981898}
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+}
18991906.transition-opacity {
19001907 transition-property: opacity;
19011908 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1911,13 +1918,6 @@ Ensure the default browser behavior of the `hidden` attribute.
19111918 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
19121919 transition-duration: 150ms;
19131920}
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−}
19211921.duration-150 {
19221922 transition-duration: 150ms;
19231923}