ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-15 01:52:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: sped up sigil implementation

Browse Source
This commit is contained in:
Tyler Brown Cifu Shuster 2020-08-23 20:05:59 -07:00
parent 94151b4a8f
commit 4cec8f481a
2 changed files with 37 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
pkg/interface/src/logic/lib/sigil.js
View File

@ -1,48 +1,39 @@
import React, { Component } from 'react'; import React, { memo } from 'react';
import { sigil, reactRenderer } from 'urbit-sigil-js'; import { sigil, reactRenderer } from 'urbit-sigil-js';
export class Sigil extends Component { export const foregroundFromBackground = (background) => {
static foregroundFromBackground(background) { const rgb = {
const rgb = { r: parseInt(background.slice(1, 3), 16),
r: parseInt(background.slice(1, 3), 16), g: parseInt(background.slice(3, 5), 16),
g: parseInt(background.slice(3, 5), 16), b: parseInt(background.slice(5, 7), 16)
b: parseInt(background.slice(5, 7), 16) };
}; const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000; const whiteBrightness = 255;
const whiteBrightness = 255;
return ((whiteBrightness - brightness) < 50) ? 'black' : 'white'; return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
}
render() {
const { props } = this;
const classes = props.classes || '';
const foreground = Sigil.foregroundFromBackground(props.color);
if (props.ship.length > 14) {
return (
<div
className={'bg-black dib ' + classes}
style={{ width: props.size, height: props.size }}
></div>
);
} else {
return (
<div
className={'dib ' + classes}
style={{ flexBasis: props.size, backgroundColor: props.color }}
>
{sigil({
patp: props.ship,
renderer: reactRenderer,
size: props.size,
colors: [props.color, foreground],
class: props.svgClass
})}
</div>
);
}
}
} }
export const Sigil = memo(({ classes = '', color, ship, size }) => {
return ship.length > 14
? (<div
className={'bg-black dib ' + classes}
style={{ width: size, height: size }}>
</div>)
: (<div
className={'dib ' + classes}
style={{ flexBasis: size, backgroundColor: color }}
>
{sigil({
patp: ship,
renderer: reactRenderer,
size: size,
colors: [
color,
foregroundFromBackground(color)
],
class: classes
})}
</div>)
})
export default Sigil;

4
pkg/interface/src/views/App.js
View File

@ -22,7 +22,7 @@ import GlobalStore from '~/logic/store/store';
import GlobalSubscription from '~/logic/subscription/global'; import GlobalSubscription from '~/logic/subscription/global';
import GlobalApi from '~/logic/api/global'; import GlobalApi from '~/logic/api/global';
import { uxToHex } from '~/logic/lib/util'; import { uxToHex } from '~/logic/lib/util';
import { Sigil } from '~/logic/lib/sigil'; import { foregroundFromBackground } from '~/logic/lib/sigil';
const Root = styled.div` const Root = styled.div`
font-family: ${p => p.theme.fonts.sans}; font-family: ${p => p.theme.fonts.sans};
@ -85,7 +85,7 @@ class App extends React.Component {
if (this.state.contacts.hasOwnProperty('/~/default')) { if (this.state.contacts.hasOwnProperty('/~/default')) {
background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`; background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
} }
const foreground = Sigil.foregroundFromBackground(background); const foreground = foregroundFromBackground(background);
const svg = sigiljs({ const svg = sigiljs({
patp: window.ship, patp: window.ship,
renderer: stringRenderer, renderer: stringRenderer,