4 | 11 | { 16 | console.log('TRANSITIONED!') 17 | }}> 18 | 26 | 27 | 28 |

29 | props (hit 'enter' to update) 30 |

{
33 |         const { value } = e.target
34 |         if (e.keyCode !== 13) return
35 |         e.preventDefault()
36 |         setState(JSON.parse(value))
37 |       }}
38 |       style={{
39 |         display: 'block',
40 |         width: '100%',
41 |         maxWidth: 512,
42 |         height: 108,
43 |       }}
44 |     />
45 |   </div>
46 | </div>
47 | ```

--------------------------------------------------------------------------------
/src/createElement.js:
--------------------------------------------------------------------------------
 1 | import Animation from './elements/Animation'
 2 | import Circle from './elements/Circle'
 3 | import PixelBuffer from './elements/PixelBuffer'
 4 | import Rectangle from './elements/Rectangle'
 5 | import Sprite from './elements/Sprite'
 6 | import Text from './elements/Text'
 7 | import Transition from './elements/Transition'
 8 | 
 9 | export default function createElement (type, props, root) {
10 |   // console.log(type, props, root)
11 |   switch (type) {
12 |     /**
13 |      * Shapes
14 |      */
15 |     case 'px':
16 |     case 'pixel': {
17 |       if (props.children) {
18 |         throw new Error(
19 |           '<pixel> cannot have children. Try using a different shape like <rect> or <circ>.',
20 |         )
21 |       }
22 |       return new Rectangle({ ...props, width: 1, height: 1 }, [], root)
23 |     }
24 |     case 'circ':
25 |     case 'circle': {
26 |       return new Circle(props, [], root)
27 |     }
28 |     case 'rect':
29 |     case 'rectangle': {
30 |       return new Rectangle(props, [], root)
31 |     }
32 |     /**
33 |      * Transition
34 |      */
35 |     case 'trans':
36 |     case 'transition': {
37 |       return new Transition(props, [], root)
38 |     }
39 |     /**
40 |      * Animation
41 |      */
42 |     case 'anim':
43 |     case 'animation': {
44 |       return new Animation(props, [], root)
45 |     }
46 |     /**
47 |      * Text
48 |      */
49 |     case 'text': {
50 |       if (props.children) {
51 |         throw new Error(
52 |           '<text> cannot have children. Try using a different shape like <rect> or <circ>.',
53 |         )
54 |       }
55 |       return new Text(props, [], root)
56 |     }
57 |     /**
58 |      * Sprite
59 |      */
60 |     case 'sprite': {
61 |       if (props.children) {
62 |         throw new Error(
63 |           '<sprite> cannot have children. Try using a different shape like <rect> or <circ>.',
64 |         )
65 |       }
66 |       return new Sprite(props, [], root)
67 |     }
68 |     /**
69 |      * Buffer
70 |      */
71 |     case 'buf':
72 |     case 'buffer': {
73 |       if (props.children) {
74 |         throw new Error(
75 |           '<buffer> cannot have children. Try using a different shape like <rect> or <circ>.',
76 |         )
77 |       }
78 |       return new PixelBuffer(props, [], root)
79 |     }
80 |     /**
81 |      * Not supported
82 |      * @desc Ignore all children without a `type` property (functions, nulls, etc)
83 |      */
84 |     default:
85 |       return
86 |   }
87 | }

--------------------------------------------------------------------------------
/src/easing.js:
--------------------------------------------------------------------------------
 1 | export const linear = t => t
 2 | export const easeInQuad = t => t * t
 3 | export const easeOutQuad = t => t * (2 - t)
 4 | export const easeInOutQuad = t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)
 5 | export const easeInCubic = t => t * t * t
 6 | export const easeOutCubic = t => --t * t * t + 1
 7 | export const easeInOutCubic = t =>
 8 |   t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
 9 | export const easeInQuart = t => t * t * t * t
10 | export const easeOutQuart = t => 1 - --t * t * t * t
11 | export const easeInOutQuart = t =>
12 |   t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t
13 | export const easeInQuint = t => t * t * t * t * t
14 | export const easeOutQuint = t => 1 + --t * t * t * t * t
15 | export const easeInOutQuint = t =>
16 |   t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
17 | 
18 | export default {
19 |   linear,
20 |   easeInQuad,
21 |   easeOutQuad,
22 |   easeInOutQuad,
23 |   easeInCubic,
24 |   easeOutCubic,
25 |   easeInOutCubic,
26 |   easeInQuint,
27 |   easeOutQuint,
28 |   easeInOutQuint,
29 | }
30 |

--------------------------------------------------------------------------------
/src/elements/Animation.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import * as easing from '../easing'
 3 | 
 4 | export default class Animation extends Pixel8Element {
 5 |   static defaultProps = {
 6 |     frames: 8,
 7 |     delay: 0,
 8 |     loops: Infinity,
 9 |     alternate: true,
10 |     ease: x => x,
11 |   }
12 |   init() {
13 |     this.setState({
14 |       iter: 0,
15 |       tick: 0,
16 |       n: 1,
17 |       t: 0,
18 |       wait: this.props.delay,
19 |     })
20 |   }
21 |   draw(f = x => x) {
22 |     // only draw children
23 |     for (const child of this.children) {
24 |       child.draw(x => this.mapChildProps(f(x)))
25 |     }
26 |     this.update()
27 |   }
28 |   update() {
29 |     const { delay, frames, alternate, loops } = this.props
30 |     // end animation once iteration count is reached
31 |     if (this.state.iter === loops * (frames - 1)) {
32 |       this.state.wait = Infinity
33 |     }
34 |     // delay animation loop
35 |     if (this.state.wait > 0) {
36 |       this.state.wait--
37 |     } else {
38 |       // increment the iteration count
39 |       this.state.iter++
40 |       // update tick counter (forward)
41 |       if (!alternate) {
42 |         this.state.tick = (this.state.tick + 1) % frames
43 |         if (this.state.tick === 0) {
44 |           this.state.wait = delay ? delay - 1 : 0
45 |         }
46 |       } else {
47 |         // update tick counter (alternate)
48 |         this.state.tick = this.state.tick + this.state.n
49 |         if (this.state.tick === frames) {
50 |           this.state.n *= -1
51 |           this.state.tick += this.state.n * (delay ? 1 : 2)
52 |           this.state.wait = delay ? delay - 1 : 0
53 |         }
54 |         if (this.state.tick === 0) {
55 |           this.state.n *= -1
56 |           this.state.wait = delay
57 |         }
58 |       }
59 |     }
60 |   }
61 |   mapChildProps(childProps) {
62 |     const { ease, foo, frames, use } = this.props
63 |     const f = 'function' === typeof ease ? ease : easing[ease]
64 |     if ('function' !== typeof f)
65 |       throw new Error(`<Animation> received invalid easing function: ${ease}`)
66 |     // linear progress
67 |     const t0 = this.state.tick / (frames - 1)
68 |     // eased progress
69 |     const t1 = f(t0)
70 |     // tick based on eased progress
71 |     const t = Math.round(t1 * (frames - 1))
72 |     return use(t, childProps)
73 |   }
74 | }
75 |

--------------------------------------------------------------------------------
/src/elements/Circle.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import { drawRect, toUint32 } from '../utils'
 3 | 
 4 | export default class Circle extends Pixel8Element {
 5 |   static defaultProps = {
 6 |     x: 0,
 7 |     y: 0,
 8 |     radius: 0,
 9 |     fill: 0,
10 |   }
11 |   draw(f = x => x) {
12 |     this.computedProps = f(this.props)
13 |     const { x, y, radius, fill } = this.computedProps
14 |     const { pixels, hitmap, imageData } = this.root
15 |     drawRect({
16 |       id: this.id,
17 |       x: Math.round(x) - 1,
18 |       y: Math.round(y) - 1,
19 |       w: Math.round((radius + 1) * 2),
20 |       h: Math.round((radius + 1) * 2),
21 |       radius: Math.round(radius + 2),
22 |       fill: toUint32(fill),
23 |       pixels,
24 |       hitmap,
25 |       imageData,
26 |     })
27 |     for (const child of this.children) {
28 |       child.draw(x => this.mapChildProps(f(x)))
29 |     }
30 |   }
31 | }
32 |

--------------------------------------------------------------------------------
/src/elements/Pixel8Element.js:
--------------------------------------------------------------------------------
 1 | let ID = 1 // start at 1 since 0 in hitmap means no hit
 2 | export default class Pixel8Element {
 3 |   static defaultProps = {
 4 |     x: 0,
 5 |     y: 0,
 6 |   }
 7 |   constructor(props, children, root) {
 8 |     this.id = ID++
 9 |     this.props = this.mapProps(null, {
10 |       ...this.constructor.defaultProps,
11 |       ...props,
12 |     })
13 |     this.state = {}
14 |     this.children = new Set(children)
15 |     this.root = root
16 |     this.init()
17 |   }
18 |   setProps(nextProps) {
19 |     this.props = this.mapProps(this.props, nextProps)
20 |   }
21 |   setState(nextState) {
22 |     this.state = { ...this.state, ...nextState }
23 |   }
24 |   init() {}
25 |   draw() {}
26 |   update() {
27 |     for (const child of this.children) child.update()
28 |   }
29 |   mapProps(props, nextProps) {
30 |     return {
31 |       ...props,
32 |       ...nextProps,
33 |     }
34 |   }
35 |   mapChildProps(childProps) {
36 |     // relative positioning
37 |     return {
38 |       ...childProps,
39 |       x: childProps.x + this.computedProps.x,
40 |       y: childProps.y + this.computedProps.y,
41 |     }
42 |   }
43 |   appendChild(child) {
44 |     this.children.add(child)
45 |     this.root.registerChild(child)
46 |   }
47 |   removeChild(child) {
48 |     this.children.delete(child)
49 |     this.root.unregisterChild(child)
50 |   }
51 | }
52 |

--------------------------------------------------------------------------------
/src/elements/PixelBuffer.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import { drawUint32 } from '../utils'
 3 | 
 4 | export default class PixelBuffer extends Pixel8Element {
 5 |   static defaultProps = {
 6 |     x: 0,
 7 |     y: 0,
 8 |     width: 0,
 9 |     height: 0,
10 |     data: new ArrayBuffer(),
11 |   }
12 |   draw(f = x => x) {
13 |     this.computedProps = f(this.props)
14 |     const { type, x, y, width, height, data, map, name, palette } = this.computedProps
15 |     const { pixels, hitmap, imageData } = this.root
16 |     drawUint32({
17 |       id: this.id,
18 |       x: Math.round(x),
19 |       y: Math.round(y),
20 |       w: Math.round(width),
21 |       h: Math.round(height),
22 |       data:
23 |         data instanceof Uint32Array
24 |           ? // Uint32Array
25 |             data
26 |           : Array.isArray(data)
27 |             ? // Array
28 |               Uint32Array.from(data, map)
29 |             : // ArrayBuffer or TypedArray
30 |               new Uint32Array(data.buffer || data, map),
31 |       pixels,
32 |       hitmap,
33 |       imageData,
34 |     })
35 |   }
36 | }
37 |

--------------------------------------------------------------------------------
/src/elements/Rectangle.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import { drawRect, toUint32 } from '../utils'
 3 | 
 4 | export default class Rectangle extends Pixel8Element {
 5 |   static defaultProps = {
 6 |     x: 0,
 7 |     y: 0,
 8 |     width: 0,
 9 |     height: 0,
10 |     fill: 0,
11 |     borderRadius: 0,
12 |   }
13 |   draw(f = x => x) {
14 |     this.computedProps = f(this.props)
15 |     const { x, y, width, height, fill, borderRadius } = this.computedProps
16 |     const { pixels, hitmap, imageData } = this.root
17 |     drawRect({
18 |       id: this.id,
19 |       x: Math.round(x),
20 |       y: Math.round(y),
21 |       w: Math.round(width),
22 |       h: Math.round(height),
23 |       fill: toUint32(fill),
24 |       radius: Math.round(borderRadius),
25 |       pixels,
26 |       hitmap,
27 |       imageData,
28 |     })
29 |     for (const child of this.children) {
30 |       child.draw(x => this.mapChildProps(f(x)))
31 |     }
32 |   }
33 | }
34 |

--------------------------------------------------------------------------------
/src/elements/Sprite.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import { drawUint32 } from '../utils'
 3 | 
 4 | export default class Sprite extends Pixel8Element {
 5 |   static defaultProps = {
 6 |     x: 0,
 7 |     y: 0,
 8 |     width: 0,
 9 |     height: 0,
10 |     index: 0,
11 |   }
12 |   draw(f = x => x) {
13 |     this.computedProps = f(this.props)
14 |     const { x, y, width, height, index, map, source } = this.computedProps
15 |     const { pixels, hitmap, imageData } = this.root
16 |     const size = width * height
17 |     const data = new Uint32Array(
18 |       (source || new ImageData(width, height)).data.buffer,
19 |       index * size * Uint32Array.BYTES_PER_ELEMENT,
20 |       size,
21 |     )
22 |     drawUint32({
23 |       id: this.id,
24 |       x: Math.round(x),
25 |       y: Math.round(y),
26 |       w: Math.round(width),
27 |       h: Math.round(height),
28 |       data: map
29 |         // map uint32 pixels
30 |         ? data.map(map)
31 |         // or pass in as-is
32 |         : data,
33 |       pixels,
34 |       hitmap,
35 |       imageData,
36 |     })
37 |   }
38 | }
39 |

--------------------------------------------------------------------------------
/src/elements/Text.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import { drawUint32, stringToBytes } from '../utils'
 3 | import fonts from '../fonts'
 4 | 
 5 | export default class Text extends Pixel8Element {
 6 |   static defaultProps = {
 7 |     x: 0,
 8 |     y: 0,
 9 |     width: 0,
10 |     height: 0,
11 |     text: '',
12 |     fill: 0,
13 |     font: 'micro',
14 |     yOffset: 0,
15 |   }
16 |   draw(f = x => x) {
17 |     this.computedProps = f(this.props)
18 |     const { x, y, text, lineHeight, font, fill, width, height, yOffset } = this.computedProps
19 |     const data = stringToBytes(text, {
20 |       lineHeight: lineHeight || font.height,
21 |       font:
22 |         'string' === typeof font
23 |           ? // font is string
24 |             fonts[font]
25 |           : // font is object
26 |             font,
27 |       fill,
28 |       boxWidth: width,
29 |       boxHeight: height,
30 |       yOffset,
31 |     })
32 |     const { pixels, hitmap, imageData } = this.root
33 |     drawUint32({
34 |       id: this.id,
35 |       x: Math.round(x),
36 |       y: Math.round(y),
37 |       w: Math.round(width),
38 |       h: Math.round(height),
39 |       data,
40 |       pixels,
41 |       hitmap,
42 |       imageData,
43 |     })
44 |   }
45 | }
46 |

--------------------------------------------------------------------------------
/src/elements/Transition.js:
--------------------------------------------------------------------------------
 1 | import Pixel8Element from './Pixel8Element'
 2 | import easing from '../easing'
 3 | 
 4 | const once = f => {
 5 |   let n = 0
 6 |   return x => (n > 0 ? x : (n++, f(x)))
 7 | }
 8 | 
 9 | export default class Transition extends Pixel8Element {
10 |   static defaultProps = {
11 |     frames: 8,
12 |     delay: 0,
13 |     ease: x => x,
14 |     use: (from, to, t) => {
15 |       const next = { ...to }
16 |       // default transition props whitelist
17 |       const keys = ['x', 'y', 'width', 'height', 'radius', 'borderRadius']
18 |       for (const k of keys) {
19 |         const hasProp = k in to
20 |         const hasDiff = from[k] !== to[k]
21 |         if (!hasProp || !hasDiff) continue
22 |         next[k] = from[k] + Math.round((to[k] - from[k]) * t)
23 |       }
24 |       return next
25 |     },
26 |   }
27 |   init() {
28 |     this.setState({
29 |       tick: 0,
30 |       wait: this.props.delay,
31 |       next: new WeakMap(),
32 |       prev: new WeakMap(),
33 |       childStates: new WeakMap(),
34 |     })
35 |   }
36 |   draw(f = x => x) {
37 |     const { next, tick } = this.state
38 |     this.update()
39 |     // only draw children
40 |     for (const child of this.children) {
41 |       child.draw(
42 |         // using `once` means mapping only applies to immediate children
43 |         once(x => {
44 |           const props = next.get(child) || x
45 |           return f(props)
46 |         }),
47 |       )
48 |     }
49 |   }
50 |   update() {
51 |     const { state } = this
52 |     for (const child of this.children) {
53 |       const { props } = child
54 |       const prev = state.prev.get(child) || props
55 |       const next = state.next.get(child) || props
56 |       const same = Object.keys(next).every(k => next[k] === props[k])
57 |       if (same) {
58 |         if (state.tick !== 0 && this.props.onTransitionEnd) {
59 |           this.props.onTransitionEnd()
60 |         }
61 |         // already transitioned
62 |         this.setState({
63 |           tick: 0,
64 |           wait: this.props.delay,
65 |         })
66 |         state.prev.set(child, props)
67 |         state.next.set(child, props)
68 |       } else if (state.wait) {
69 |         // handle delay
70 |         state.wait--
71 |       } else {
72 |         // transition!
73 |         state.tick++
74 |         const { ease, frames, use } = this.props
75 |         const f = 'function' === typeof ease ? ease : easing[ease]
76 |         // linear progress
77 |         const t0 = state.tick / frames
78 |         // eased progress
79 |         const t1 = f(t0)
80 |         // calculate transitions
81 |         const nextProps = use(prev, props, t1)
82 |         // set next props
83 |         state.next.set(child, nextProps)
84 |       }
85 |     }
86 |   }
87 | }
88 |

--------------------------------------------------------------------------------
/src/elements/__snapshots__/index.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`[0, 0] 1x1 1`] = `
 4 | "
 5 | 1 0 0 0 0 0 0 0
 6 | 0 0 0 0 0 0 0 0
 7 | 0 0 0 0 0 0 0 0
 8 | 0 0 0 0 0 0 0 0
 9 | 0 0 0 0 0 0 0 0
10 | 0 0 0 0 0 0 0 0
11 | 0 0 0 0 0 0 0 0
12 | 0 0 0 0 0 0 0 0"
13 | `;
14 | 
15 | exports[`elements nested in transition 1`] = `
16 | "
17 | 2 2 1 1 0 0 0 0
18 | 2 2 1 1 0 0 0 0
19 | 1 1 1 1 0 0 0 0
20 | 1 1 1 1 0 0 0 0
21 | 0 0 0 0 0 0 0 0
22 | 0 0 0 0 0 0 0 0
23 | 0 0 0 0 0 0 0 0
24 | 0 0 0 0 0 0 0 0"
25 | `;
26 | 
27 | exports[`elements nested in transition 2`] = `
28 | "
29 | 0 2 2 1 1 0 0 0
30 | 0 2 2 1 1 0 0 0
31 | 0 1 1 1 1 0 0 0
32 | 0 1 1 1 1 0 0 0
33 | 0 0 0 0 0 0 0 0
34 | 0 0 0 0 0 0 0 0
35 | 0 0 0 0 0 0 0 0
36 | 0 0 0 0 0 0 0 0"
37 | `;
38 | 
39 | exports[`elements nested in transition 3`] = `
40 | "
41 | 0 0 2 2 1 1 0 0
42 | 0 0 2 2 1 1 0 0
43 | 0 0 1 1 1 1 0 0
44 | 0 0 1 1 1 1 0 0
45 | 0 0 0 0 0 0 0 0
46 | 0 0 0 0 0 0 0 0
47 | 0 0 0 0 0 0 0 0
48 | 0 0 0 0 0 0 0 0"
49 | `;
50 | 
51 | exports[`elements nested in transition 4`] = `
52 | "
53 | 0 0 0 2 2 1 1 0
54 | 0 0 0 2 2 1 1 0
55 | 0 0 0 1 1 1 1 0
56 | 0 0 0 1 1 1 1 0
57 | 0 0 0 0 0 0 0 0
58 | 0 0 0 0 0 0 0 0
59 | 0 0 0 0 0 0 0 0
60 | 0 0 0 0 0 0 0 0"
61 | `;
62 | 
63 | exports[`elements nested in transition 5`] = `
64 | "
65 | 0 0 0 0 2 2 1 1
66 | 0 0 0 0 2 2 1 1
67 | 0 0 0 0 1 1 1 1
68 | 0 0 0 0 1 1 1 1
69 | 0 0 0 0 0 0 0 0
70 | 0 0 0 0 0 0 0 0
71 | 0 0 0 0 0 0 0 0
72 | 0 0 0 0 0 0 0 0"
73 | `;
74 |

--------------------------------------------------------------------------------
/src/elements/index.test.js:
--------------------------------------------------------------------------------
  1 | import Rectangle from './Rectangle'
  2 | import Transition from './Transition'
  3 | 
  4 | class ImageData {
  5 |   constructor(w, h) {
  6 |     this.width = w
  7 |     this.height = h
  8 |     this.data = new Uint8ClampedArray(new ArrayBuffer(w * h * 4))
  9 |   }
 10 | }
 11 | 
 12 | const createRoot = (width, height) => {
 13 |   const imageData = new ImageData(width, height)
 14 |   const pixels = new Uint32Array(imageData.data.buffer)
 15 |   const hitmap = new Uint32Array(new ArrayBuffer(imageData.data.length))
 16 |   const children = new Set()
 17 |   const childMap = new Map()
 18 |   const registerChild = () => {}
 19 |   const unregisterChild = () => {}
 20 |   const appendChild = child => {
 21 |     children.add(child)
 22 |     childMap.set(child.id, child)
 23 |   }
 24 |   const removeChild = child => {
 25 |     children.delete(child)
 26 |     childMap.delete(child.id)
 27 |   }
 28 |   const draw = () => {
 29 |     for (let i = 0; i < pixels.length; i++) {
 30 |       pixels[i] = hitmap[i] = 0
 31 |     }
 32 |     for (const child of children) {
 33 |       child.draw()
 34 |     }
 35 |   }
 36 |   const getPixel = (x, y) => pixels[y * width + x]
 37 |   const getChild = (x, y) => childMap.get(hitmap[y * width + x])
 38 |   return {
 39 |     imageData,
 40 |     pixels,
 41 |     hitmap,
 42 |     children,
 43 |     childMap,
 44 |     appendChild,
 45 |     removeChild,
 46 |     registerChild,
 47 |     unregisterChild,
 48 |     draw,
 49 |     getPixel,
 50 |     getChild,
 51 |   }
 52 | }
 53 | 
 54 | const pixelsToString = root => {
 55 |   let px = []
 56 |   let i = 0
 57 |   for (let y = 0; y < root.imageData.height; y++) {
 58 |     px.push([])
 59 |     for (let x = 0; x < root.imageData.width; x++) {
 60 |       px[y].push(root.pixels[i])
 61 |       i++
 62 |     }
 63 |   }
 64 |   return '\n' + px.map(x => x.join(' ')).join('\n')
 65 | }
 66 | 
 67 | it('[0, 0] 1x1', () => {
 68 |   const props = {
 69 |     x: 0,
 70 |     y: 0,
 71 |     width: 1,
 72 |     height: 1,
 73 |     fill: 1,
 74 |   }
 75 |   const children = null
 76 |   const root = createRoot(8, 8)
 77 |   const rect = new Rectangle(props, null, root)
 78 |   root.appendChild(rect)
 79 |   root.draw()
 80 |   expect(root.getPixel(0, 0)).toBe(1)
 81 |   expect(root.getChild(0, 0)).toBe(rect)
 82 |   expect(pixelsToString(root)).toMatchSnapshot()
 83 | })
 84 | 
 85 | it('elements nested in transition', () => {
 86 |   const props = {
 87 |     x: 0,
 88 |     y: 0,
 89 |     width: 1,
 90 |     height: 1,
 91 |     fill: 1,
 92 |   }
 93 |   const children = null
 94 |   const root = createRoot(8, 8)
 95 |   const tran = new Transition(
 96 |     {
 97 |       frames: 4,
 98 |     },
 99 |     null,
100 |     root,
101 |   )
102 |   const rect1 = new Rectangle(
103 |     {
104 |       x: 0,
105 |       y: 0,
106 |       width: 4,
107 |       height: 4,
108 |       fill: 1,
109 |     },
110 |     null,
111 |     root,
112 |   )
113 |   const rect2 = new Rectangle(
114 |     {
115 |       x: 0,
116 |       y: 0,
117 |       width: 2,
118 |       height: 2,
119 |       fill: 2,
120 |     },
121 |     null,
122 |     root,
123 |   )
124 |   root.appendChild(tran)
125 |   tran.appendChild(rect1)
126 |   rect1.appendChild(rect2)
127 |   root.draw()
128 |   expect(pixelsToString(root)).toMatchSnapshot()
129 |   rect1.setProps({ x: 4 })
130 |   for (let i = 0; i < 4; i++) {
131 |     root.draw()
132 |     expect(pixelsToString(root)).toMatchSnapshot()
133 |   }
134 | })
135 |

--------------------------------------------------------------------------------
/src/fonts.js:
--------------------------------------------------------------------------------
   1 | export const micro = {
   2 |   width: 5,
   3 |   height: 5,
   4 |   charmap: {
   5 |     '0': 0,
   6 |     '1': 1,
   7 |     '2': 2,
   8 |     '3': 3,
   9 |     '4': 4,
  10 |     '5': 5,
  11 |     '6': 6,
  12 |     '7': 7,
  13 |     '8': 8,
  14 |     '9': 9,
  15 |     ' ': 10,
  16 |     '!': 11,
  17 |     '"': 12,
  18 |     '#': 13,
  19 |     $: 14,
  20 |     '%': 15,
  21 |     '&': 16,
  22 |     "'": 17,
  23 |     '(': 18,
  24 |     ')': 19,
  25 |     '*': 20,
  26 |     '+': 21,
  27 |     ',': 22,
  28 |     '-': 23,
  29 |     '.': 24,
  30 |     '/': 25,
  31 |     ':': 26,
  32 |     ';': 27,
  33 |     '<': 28,
  34 |     '=': 29,
  35 |     '>': 30,
  36 |     '?': 31,
  37 |     '@': 32,
  38 |     A: 33,
  39 |     B: 34,
  40 |     C: 35,
  41 |     D: 36,
  42 |     E: 37,
  43 |     F: 38,
  44 |     G: 39,
  45 |     H: 40,
  46 |     I: 41,
  47 |     J: 42,
  48 |     K: 43,
  49 |     L: 44,
  50 |     M: 45,
  51 |     N: 46,
  52 |     O: 47,
  53 |     P: 48,
  54 |     Q: 49,
  55 |     R: 50,
  56 |     S: 51,
  57 |     T: 52,
  58 |     U: 53,
  59 |     V: 54,
  60 |     W: 55,
  61 |     X: 56,
  62 |     Y: 57,
  63 |     Z: 58,
  64 |     '[': 59,
  65 |     '\\': 60,
  66 |     ']': 61,
  67 |     '^': 62,
  68 |     _: 63,
  69 |     '`': 64,
  70 |     a: 65,
  71 |     b: 66,
  72 |     c: 67,
  73 |     d: 68,
  74 |     e: 69,
  75 |     f: 70,
  76 |     g: 71,
  77 |     h: 72,
  78 |     i: 73,
  79 |     j: 74,
  80 |     k: 75,
  81 |     l: 76,
  82 |     m: 77,
  83 |     n: 78,
  84 |     o: 79,
  85 |     p: 80,
  86 |     q: 81,
  87 |     r: 82,
  88 |     s: 83,
  89 |     t: 84,
  90 |     u: 85,
  91 |     v: 86,
  92 |     w: 87,
  93 |     x: 88,
  94 |     y: 89,
  95 |     z: 90,
  96 |     '{': 91,
  97 |     '|': 92,
  98 |     '}': 93,
  99 |     '~': 94,
 100 |   },
 101 |   data: [
 102 |     0,
 103 |     0,
 104 |     1,
 105 |     1,
 106 |     0,
 107 |     0,
 108 |     1,
 109 |     0,
 110 |     1,
 111 |     1,
 112 |     0,
 113 |     1,
 114 |     1,
 115 |     1,
 116 |     1,
 117 |     0,
 118 |     1,
 119 |     1,
 120 |     0,
 121 |     1,
 122 |     0,
 123 |     0,
 124 |     1,
 125 |     1,
 126 |     0,
 127 | 
 128 |     0,
 129 |     0,
 130 |     0,
 131 |     1,
 132 |     0,
 133 |     0,
 134 |     0,
 135 |     1,
 136 |     1,
 137 |     0,
 138 |     0,
 139 |     0,
 140 |     0,
 141 |     1,
 142 |     0,
 143 |     0,
 144 |     0,
 145 |     0,
 146 |     1,
 147 |     0,
 148 |     0,
 149 |     0,
 150 |     0,
 151 |     1,
 152 |     0,
 153 | 
 154 |     0,
 155 |     1,
 156 |     1,
 157 |     1,
 158 |     0,
 159 |     0,
 160 |     0,
 161 |     0,
 162 |     0,
 163 |     1,
 164 |     0,
 165 |     0,
 166 |     1,
 167 |     1,
 168 |     0,
 169 |     0,
 170 |     1,
 171 |     0,
 172 |     0,
 173 |     0,
 174 |     0,
 175 |     1,
 176 |     1,
 177 |     1,
 178 |     1,
 179 | 
 180 |     0,
 181 |     1,
 182 |     1,
 183 |     1,
 184 |     0,
 185 |     0,
 186 |     0,
 187 |     0,
 188 |     0,
 189 |     1,
 190 |     0,
 191 |     0,
 192 |     1,
 193 |     1,
 194 |     0,
 195 |     0,
 196 |     0,
 197 |     0,
 198 |     0,
 199 |     1,
 200 |     0,
 201 |     1,
 202 |     1,
 203 |     1,
 204 |     0,
 205 | 
 206 |     0,
 207 |     0,
 208 |     0,
 209 |     1,
 210 |     0,
 211 |     0,
 212 |     0,
 213 |     1,
 214 |     1,
 215 |     0,
 216 |     0,
 217 |     1,
 218 |     0,
 219 |     1,
 220 |     0,
 221 |     0,
 222 |     1,
 223 |     1,
 224 |     1,
 225 |     1,
 226 |     0,
 227 |     0,
 228 |     0,
 229 |     1,
 230 |     0,
 231 | 
 232 |     0,
 233 |     1,
 234 |     1,
 235 |     1,
 236 |     1,
 237 |     0,
 238 |     1,
 239 |     0,
 240 |     0,
 241 |     0,
 242 |     0,
 243 |     1,
 244 |     1,
 245 |     1,
 246 |     0,
 247 |     0,
 248 |     0,
 249 |     0,
 250 |     0,
 251 |     1,
 252 |     0,
 253 |     1,
 254 |     1,
 255 |     1,
 256 |     0,
 257 | 
 258 |     0,
 259 |     0,
 260 |     1,
 261 |     1,
 262 |     0,
 263 |     0,
 264 |     1,
 265 |     0,
 266 |     0,
 267 |     0,
 268 |     0,
 269 |     1,
 270 |     1,
 271 |     1,
 272 |     0,
 273 |     0,
 274 |     1,
 275 |     0,
 276 |     0,
 277 |     1,
 278 |     0,
 279 |     0,
 280 |     1,
 281 |     1,
 282 |     0,
 283 | 
 284 |     0,
 285 |     1,
 286 |     1,
 287 |     1,
 288 |     1,
 289 |     0,
 290 |     0,
 291 |     0,
 292 |     0,
 293 |     1,
 294 |     0,
 295 |     0,
 296 |     0,
 297 |     1,
 298 |     0,
 299 |     0,
 300 |     0,
 301 |     1,
 302 |     0,
 303 |     0,
 304 |     0,
 305 |     1,
 306 |     0,
 307 |     0,
 308 |     0,
 309 | 
 310 |     0,
 311 |     0,
 312 |     1,
 313 |     1,
 314 |     0,
 315 |     0,
 316 |     1,
 317 |     0,
 318 |     0,
 319 |     1,
 320 |     0,
 321 |     0,
 322 |     1,
 323 |     1,
 324 |     0,
 325 |     0,
 326 |     1,
 327 |     0,
 328 |     0,
 329 |     1,
 330 |     0,
 331 |     0,
 332 |     1,
 333 |     1,
 334 |     0,
 335 | 
 336 |     0,
 337 |     0,
 338 |     1,
 339 |     1,
 340 |     0,
 341 |     0,
 342 |     1,
 343 |     0,
 344 |     0,
 345 |     1,
 346 |     0,
 347 |     1,
 348 |     1,
 349 |     1,
 350 |     1,
 351 |     0,
 352 |     0,
 353 |     0,
 354 |     0,
 355 |     1,
 356 |     0,
 357 |     0,
 358 |     1,
 359 |     1,
 360 |     0,
 361 | 
 362 |     0,
 363 |     0,
 364 |     0,
 365 |     0,
 366 |     0,
 367 |     0,
 368 |     0,
 369 |     0,
 370 |     0,
 371 |     0,
 372 |     0,
 373 |     0,
 374 |     0,
 375 |     0,
 376 |     0,
 377 |     0,
 378 |     0,
 379 |     0,
 380 |     0,
 381 |     0,
 382 |     0,
 383 |     0,
 384 |     0,
 385 |     0,
 386 |     0,
 387 | 
 388 |     0,
 389 |     0,
 390 |     1,
 391 |     0,
 392 |     0,
 393 |     0,
 394 |     0,
 395 |     1,
 396 |     0,
 397 |     0,
 398 |     0,
 399 |     0,
 400 |     1,
 401 |     0,
 402 |     0,
 403 |     0,
 404 |     0,
 405 |     0,
 406 |     0,
 407 |     0,
 408 |     0,
 409 |     0,
 410 |     1,
 411 |     0,
 412 |     0,
 413 | 
 414 |     0,
 415 |     1,
 416 |     0,
 417 |     1,
 418 |     0,
 419 |     0,
 420 |     1,
 421 |     0,
 422 |     1,
 423 |     0,
 424 |     0,
 425 |     0,
 426 |     0,
 427 |     0,
 428 |     0,
 429 |     0,
 430 |     0,
 431 |     0,
 432 |     0,
 433 |     0,
 434 |     0,
 435 |     0,
 436 |     0,
 437 |     0,
 438 |     0,
 439 | 
 440 |     0,
 441 |     0,
 442 |     1,
 443 |     1,
 444 |     0,
 445 |     0,
 446 |     1,
 447 |     1,
 448 |     1,
 449 |     1,
 450 |     0,
 451 |     0,
 452 |     1,
 453 |     1,
 454 |     0,
 455 |     0,
 456 |     1,
 457 |     1,
 458 |     1,
 459 |     1,
 460 |     0,
 461 |     0,
 462 |     1,
 463 |     1,
 464 |     0,
 465 | 
 466 |     0,
 467 |     0,
 468 |     1,
 469 |     1,
 470 |     1,
 471 |     0,
 472 |     1,
 473 |     0,
 474 |     1,
 475 |     0,
 476 |     0,
 477 |     0,
 478 |     1,
 479 |     1,
 480 |     0,
 481 |     0,
 482 |     0,
 483 |     1,
 484 |     0,
 485 |     1,
 486 |     0,
 487 |     1,
 488 |     1,
 489 |     1,
 490 |     0,
 491 | 
 492 |     0,
 493 |     0,
 494 |     1,
 495 |     1,
 496 |     1,
 497 |     0,
 498 |     1,
 499 |     1,
 500 |     1,
 501 |     0,
 502 |     0,
 503 |     0,
 504 |     1,
 505 |     0,
 506 |     0,
 507 |     0,
 508 |     0,
 509 |     1,
 510 |     1,
 511 |     1,
 512 |     0,
 513 |     1,
 514 |     1,
 515 |     1,
 516 |     0,
 517 | 
 518 |     0,
 519 |     0,
 520 |     0,
 521 |     1,
 522 |     0,
 523 |     0,
 524 |     0,
 525 |     1,
 526 |     0,
 527 |     1,
 528 |     0,
 529 |     0,
 530 |     1,
 531 |     1,
 532 |     0,
 533 |     0,
 534 |     1,
 535 |     0,
 536 |     1,
 537 |     0,
 538 |     0,
 539 |     0,
 540 |     1,
 541 |     0,
 542 |     1,
 543 | 
 544 |     0,
 545 |     0,
 546 |     0,
 547 |     1,
 548 |     0,
 549 |     0,
 550 |     0,
 551 |     0,
 552 |     1,
 553 |     0,
 554 |     0,
 555 |     0,
 556 |     0,
 557 |     0,
 558 |     0,
 559 |     0,
 560 |     0,
 561 |     0,
 562 |     0,
 563 |     0,
 564 |     0,
 565 |     0,
 566 |     0,
 567 |     0,
 568 |     0,
 569 | 
 570 |     0,
 571 |     0,
 572 |     1,
 573 |     0,
 574 |     0,
 575 |     0,
 576 |     1,
 577 |     0,
 578 |     0,
 579 |     0,
 580 |     0,
 581 |     1,
 582 |     0,
 583 |     0,
 584 |     0,
 585 |     0,
 586 |     1,
 587 |     0,
 588 |     0,
 589 |     0,
 590 |     0,
 591 |     0,
 592 |     1,
 593 |     0,
 594 |     0,
 595 | 
 596 |     0,
 597 |     0,
 598 |     1,
 599 |     0,
 600 |     0,
 601 |     0,
 602 |     0,
 603 |     0,
 604 |     1,
 605 |     0,
 606 |     0,
 607 |     0,
 608 |     0,
 609 |     1,
 610 |     0,
 611 |     0,
 612 |     0,
 613 |     0,
 614 |     1,
 615 |     0,
 616 |     0,
 617 |     0,
 618 |     1,
 619 |     0,
 620 |     0,
 621 | 
 622 |     0,
 623 |     0,
 624 |     0,
 625 |     0,
 626 |     0,
 627 |     0,
 628 |     0,
 629 |     1,
 630 |     1,
 631 |     0,
 632 |     0,
 633 |     1,
 634 |     1,
 635 |     1,
 636 |     1,
 637 |     0,
 638 |     0,
 639 |     1,
 640 |     1,
 641 |     0,
 642 |     0,
 643 |     0,
 644 |     0,
 645 |     0,
 646 |     0,
 647 | 
 648 |     0,
 649 |     0,
 650 |     0,
 651 |     0,
 652 |     0,
 653 |     0,
 654 |     0,
 655 |     0,
 656 |     1,
 657 |     0,
 658 |     0,
 659 |     0,
 660 |     1,
 661 |     1,
 662 |     1,
 663 |     0,
 664 |     0,
 665 |     0,
 666 |     1,
 667 |     0,
 668 |     0,
 669 |     0,
 670 |     0,
 671 |     0,
 672 |     0,
 673 | 
 674 |     0,
 675 |     0,
 676 |     0,
 677 |     0,
 678 |     0,
 679 |     0,
 680 |     0,
 681 |     0,
 682 |     0,
 683 |     0,
 684 |     0,
 685 |     0,
 686 |     0,
 687 |     0,
 688 |     0,
 689 |     0,
 690 |     0,
 691 |     0,
 692 |     1,
 693 |     0,
 694 |     0,
 695 |     0,
 696 |     1,
 697 |     0,
 698 |     0,
 699 | 
 700 |     0,
 701 |     0,
 702 |     0,
 703 |     0,
 704 |     0,
 705 |     0,
 706 |     0,
 707 |     0,
 708 |     0,
 709 |     0,
 710 |     0,
 711 |     0,
 712 |     0,
 713 |     0,
 714 |     0,
 715 |     0,
 716 |     1,
 717 |     1,
 718 |     1,
 719 |     1,
 720 |     0,
 721 |     0,
 722 |     0,
 723 |     0,
 724 |     0,
 725 | 
 726 |     0,
 727 |     0,
 728 |     0,
 729 |     0,
 730 |     0,
 731 |     0,
 732 |     0,
 733 |     0,
 734 |     0,
 735 |     0,
 736 |     0,
 737 |     0,
 738 |     0,
 739 |     0,
 740 |     0,
 741 |     0,
 742 |     0,
 743 |     0,
 744 |     0,
 745 |     0,
 746 |     0,
 747 |     0,
 748 |     1,
 749 |     0,
 750 |     0,
 751 | 
 752 |     0,
 753 |     0,
 754 |     0,
 755 |     0,
 756 |     1,
 757 |     0,
 758 |     0,
 759 |     0,
 760 |     0,
 761 |     1,
 762 |     0,
 763 |     0,
 764 |     0,
 765 |     1,
 766 |     0,
 767 |     0,
 768 |     0,
 769 |     1,
 770 |     0,
 771 |     0,
 772 |     0,
 773 |     1,
 774 |     0,
 775 |     0,
 776 |     0,
 777 | 
 778 |     0,
 779 |     0,
 780 |     0,
 781 |     0,
 782 |     0,
 783 |     0,
 784 |     0,
 785 |     1,
 786 |     0,
 787 |     0,
 788 |     0,
 789 |     0,
 790 |     0,
 791 |     0,
 792 |     0,
 793 |     0,
 794 |     0,
 795 |     1,
 796 |     0,
 797 |     0,
 798 |     0,
 799 |     0,
 800 |     0,
 801 |     0,
 802 |     0,
 803 | 
 804 |     0,
 805 |     0,
 806 |     0,
 807 |     0,
 808 |     0,
 809 |     0,
 810 |     0,
 811 |     1,
 812 |     0,
 813 |     0,
 814 |     0,
 815 |     0,
 816 |     0,
 817 |     0,
 818 |     0,
 819 |     0,
 820 |     0,
 821 |     1,
 822 |     0,
 823 |     0,
 824 |     0,
 825 |     1,
 826 |     0,
 827 |     0,
 828 |     0,
 829 | 
 830 |     0,
 831 |     0,
 832 |     0,
 833 |     1,
 834 |     0,
 835 |     0,
 836 |     0,
 837 |     1,
 838 |     0,
 839 |     0,
 840 |     0,
 841 |     1,
 842 |     0,
 843 |     0,
 844 |     0,
 845 |     0,
 846 |     0,
 847 |     1,
 848 |     0,
 849 |     0,
 850 |     0,
 851 |     0,
 852 |     0,
 853 |     1,
 854 |     0,
 855 | 
 856 |     0,
 857 |     0,
 858 |     0,
 859 |     0,
 860 |     0,
 861 |     0,
 862 |     1,
 863 |     1,
 864 |     1,
 865 |     1,
 866 |     0,
 867 |     0,
 868 |     0,
 869 |     0,
 870 |     0,
 871 |     0,
 872 |     1,
 873 |     1,
 874 |     1,
 875 |     1,
 876 |     0,
 877 |     0,
 878 |     0,
 879 |     0,
 880 |     0,
 881 | 
 882 |     0,
 883 |     0,
 884 |     1,
 885 |     0,
 886 |     0,
 887 |     0,
 888 |     0,
 889 |     0,
 890 |     1,
 891 |     0,
 892 |     0,
 893 |     0,
 894 |     0,
 895 |     0,
 896 |     1,
 897 |     0,
 898 |     0,
 899 |     0,
 900 |     1,
 901 |     0,
 902 |     0,
 903 |     0,
 904 |     1,
 905 |     0,
 906 |     0,
 907 | 
 908 |     0,
 909 |     0,
 910 |     1,
 911 |     1,
 912 |     0,
 913 |     0,
 914 |     1,
 915 |     0,
 916 |     0,
 917 |     1,
 918 |     0,
 919 |     0,
 920 |     0,
 921 |     1,
 922 |     0,
 923 |     0,
 924 |     0,
 925 |     0,
 926 |     0,
 927 |     0,
 928 |     0,
 929 |     0,
 930 |     0,
 931 |     1,
 932 |     0,
 933 | 
 934 |     0,
 935 |     0,
 936 |     1,
 937 |     1,
 938 |     0,
 939 |     0,
 940 |     1,
 941 |     1,
 942 |     0,
 943 |     1,
 944 |     0,
 945 |     1,
 946 |     0,
 947 |     1,
 948 |     1,
 949 |     0,
 950 |     1,
 951 |     0,
 952 |     0,
 953 |     0,
 954 |     0,
 955 |     0,
 956 |     1,
 957 |     1,
 958 |     0,
 959 | 
 960 |     0,
 961 |     0,
 962 |     1,
 963 |     0,
 964 |     0,
 965 |     0,
 966 |     1,
 967 |     0,
 968 |     1,
 969 |     0,
 970 |     0,
 971 |     1,
 972 |     1,
 973 |     1,
 974 |     0,
 975 |     0,
 976 |     1,
 977 |     0,
 978 |     1,
 979 |     0,
 980 |     0,
 981 |     1,
 982 |     0,
 983 |     1,
 984 |     0,
 985 | 
 986 |     0,
 987 |     1,
 988 |     1,
 989 |     1,
 990 |     0,
 991 |     0,
 992 |     1,
 993 |     0,
 994 |     0,
 995 |     1,
 996 |     0,
 997 |     1,
 998 |     1,
 999 |     1,
1000 |     0,
1001 |     0,
1002 |     1,
1003 |     0,
1004 |     0,
1005 |     1,
1006 |     0,
1007 |     1,
1008 |     1,
1009 |     1,
1010 |     0,
1011 | 
1012 |     0,
1013 |     0,
1014 |     1,
1015 |     1,
1016 |     0,
1017 |     0,
1018 |     1,
1019 |     0,
1020 |     0,
1021 |     1,
1022 |     0,
1023 |     1,
1024 |     0,
1025 |     0,
1026 |     0,
1027 |     0,
1028 |     1,
1029 |     0,
1030 |     0,
1031 |     1,
1032 |     0,
1033 |     0,
1034 |     1,
1035 |     1,
1036 |     0,
1037 | 
1038 |     0,
1039 |     1,
1040 |     1,
1041 |     1,
1042 |     0,
1043 |     0,
1044 |     1,
1045 |     0,
1046 |     0,
1047 |     1,
1048 |     0,
1049 |     1,
1050 |     0,
1051 |     0,
1052 |     1,
1053 |     0,
1054 |     1,
1055 |     0,
1056 |     0,
1057 |     1,
1058 |     0,
1059 |     1,
1060 |     1,
1061 |     1,
1062 |     0,
1063 | 
1064 |     0,
1065 |     1,
1066 |     1,
1067 |     1,
1068 |     1,
1069 |     0,
1070 |     1,
1071 |     0,
1072 |     0,
1073 |     0,
1074 |     0,
1075 |     1,
1076 |     1,
1077 |     1,
1078 |     0,
1079 |     0,
1080 |     1,
1081 |     0,
1082 |     0,
1083 |     0,
1084 |     0,
1085 |     1,
1086 |     1,
1087 |     1,
1088 |     1,
1089 | 
1090 |     0,
1091 |     1,
1092 |     1,
1093 |     1,
1094 |     1,
1095 |     0,
1096 |     1,
1097 |     0,
1098 |     0,
1099 |     0,
1100 |     0,
1101 |     1,
1102 |     1,
1103 |     1,
1104 |     0,
1105 |     0,
1106 |     1,
1107 |     0,
1108 |     0,
1109 |     0,
1110 |     0,
1111 |     1,
1112 |     0,
1113 |     0,
1114 |     0,
1115 | 
1116 |     0,
1117 |     0,
1118 |     1,
1119 |     1,
1120 |     0,
1121 |     0,
1122 |     1,
1123 |     0,
1124 |     0,
1125 |     0,
1126 |     0,
1127 |     1,
1128 |     0,
1129 |     1,
1130 |     1,
1131 |     0,
1132 |     1,
1133 |     0,
1134 |     0,
1135 |     1,
1136 |     0,
1137 |     0,
1138 |     1,
1139 |     1,
1140 |     0,
1141 | 
1142 |     0,
1143 |     1,
1144 |     0,
1145 |     0,
1146 |     1,
1147 |     0,
1148 |     1,
1149 |     0,
1150 |     0,
1151 |     1,
1152 |     0,
1153 |     1,
1154 |     1,
1155 |     1,
1156 |     1,
1157 |     0,
1158 |     1,
1159 |     0,
1160 |     0,
1161 |     1,
1162 |     0,
1163 |     1,
1164 |     0,
1165 |     0,
1166 |     1,
1167 | 
1168 |     0,
1169 |     1,
1170 |     1,
1171 |     1,
1172 |     0,
1173 |     0,
1174 |     0,
1175 |     1,
1176 |     0,
1177 |     0,
1178 |     0,
1179 |     0,
1180 |     1,
1181 |     0,
1182 |     0,
1183 |     0,
1184 |     0,
1185 |     1,
1186 |     0,
1187 |     0,
1188 |     0,
1189 |     1,
1190 |     1,
1191 |     1,
1192 |     0,
1193 | 
1194 |     0,
1195 |     0,
1196 |     0,
1197 |     0,
1198 |     1,
1199 |     0,
1200 |     0,
1201 |     0,
1202 |     0,
1203 |     1,
1204 |     0,
1205 |     0,
1206 |     0,
1207 |     0,
1208 |     1,
1209 |     0,
1210 |     1,
1211 |     0,
1212 |     0,
1213 |     1,
1214 |     0,
1215 |     0,
1216 |     1,
1217 |     1,
1218 |     0,
1219 | 
1220 |     0,
1221 |     1,
1222 |     0,
1223 |     0,
1224 |     1,
1225 |     0,
1226 |     1,
1227 |     0,
1228 |     1,
1229 |     0,
1230 |     0,
1231 |     1,
1232 |     1,
1233 |     0,
1234 |     0,
1235 |     0,
1236 |     1,
1237 |     0,
1238 |     1,
1239 |     0,
1240 |     0,
1241 |     1,
1242 |     0,
1243 |     0,
1244 |     1,
1245 | 
1246 |     0,
1247 |     1,
1248 |     0,
1249 |     0,
1250 |     0,
1251 |     0,
1252 |     1,
1253 |     0,
1254 |     0,
1255 |     0,
1256 |     0,
1257 |     1,
1258 |     0,
1259 |     0,
1260 |     0,
1261 |     0,
1262 |     1,
1263 |     0,
1264 |     0,
1265 |     0,
1266 |     0,
1267 |     1,
1268 |     1,
1269 |     1,
1270 |     1,
1271 | 
1272 |     0,
1273 |     1,
1274 |     0,
1275 |     0,
1276 |     1,
1277 |     0,
1278 |     1,
1279 |     1,
1280 |     1,
1281 |     1,
1282 |     0,
1283 |     1,
1284 |     1,
1285 |     1,
1286 |     1,
1287 |     0,
1288 |     1,
1289 |     0,
1290 |     0,
1291 |     1,
1292 |     0,
1293 |     1,
1294 |     0,
1295 |     0,
1296 |     1,
1297 | 
1298 |     0,
1299 |     1,
1300 |     0,
1301 |     0,
1302 |     1,
1303 |     0,
1304 |     1,
1305 |     1,
1306 |     0,
1307 |     1,
1308 |     0,
1309 |     1,
1310 |     1,
1311 |     1,
1312 |     1,
1313 |     0,
1314 |     1,
1315 |     0,
1316 |     1,
1317 |     1,
1318 |     0,
1319 |     1,
1320 |     0,
1321 |     0,
1322 |     1,
1323 | 
1324 |     0,
1325 |     0,
1326 |     1,
1327 |     1,
1328 |     0,
1329 |     0,
1330 |     1,
1331 |     0,
1332 |     0,
1333 |     1,
1334 |     0,
1335 |     1,
1336 |     0,
1337 |     0,
1338 |     1,
1339 |     0,
1340 |     1,
1341 |     0,
1342 |     0,
1343 |     1,
1344 |     0,
1345 |     0,
1346 |     1,
1347 |     1,
1348 |     0,
1349 | 
1350 |     0,
1351 |     1,
1352 |     1,
1353 |     1,
1354 |     0,
1355 |     0,
1356 |     1,
1357 |     0,
1358 |     0,
1359 |     1,
1360 |     0,
1361 |     1,
1362 |     1,
1363 |     1,
1364 |     0,
1365 |     0,
1366 |     1,
1367 |     0,
1368 |     0,
1369 |     0,
1370 |     0,
1371 |     1,
1372 |     0,
1373 |     0,
1374 |     0,
1375 | 
1376 |     0,
1377 |     0,
1378 |     1,
1379 |     1,
1380 |     0,
1381 |     0,
1382 |     1,
1383 |     0,
1384 |     0,
1385 |     1,
1386 |     0,
1387 |     1,
1388 |     0,
1389 |     0,
1390 |     1,
1391 |     0,
1392 |     1,
1393 |     0,
1394 |     1,
1395 |     1,
1396 |     0,
1397 |     0,
1398 |     1,
1399 |     1,
1400 |     1,
1401 | 
1402 |     0,
1403 |     1,
1404 |     1,
1405 |     1,
1406 |     0,
1407 |     0,
1408 |     1,
1409 |     0,
1410 |     0,
1411 |     1,
1412 |     0,
1413 |     1,
1414 |     1,
1415 |     1,
1416 |     0,
1417 |     0,
1418 |     1,
1419 |     0,
1420 |     1,
1421 |     0,
1422 |     0,
1423 |     1,
1424 |     0,
1425 |     0,
1426 |     1,
1427 | 
1428 |     0,
1429 |     0,
1430 |     1,
1431 |     1,
1432 |     1,
1433 |     0,
1434 |     1,
1435 |     0,
1436 |     0,
1437 |     0,
1438 |     0,
1439 |     0,
1440 |     1,
1441 |     1,
1442 |     0,
1443 |     0,
1444 |     0,
1445 |     0,
1446 |     0,
1447 |     1,
1448 |     0,
1449 |     1,
1450 |     1,
1451 |     1,
1452 |     0,
1453 | 
1454 |     0,
1455 |     1,
1456 |     1,
1457 |     1,
1458 |     0,
1459 |     0,
1460 |     0,
1461 |     1,
1462 |     0,
1463 |     0,
1464 |     0,
1465 |     0,
1466 |     1,
1467 |     0,
1468 |     0,
1469 |     0,
1470 |     0,
1471 |     1,
1472 |     0,
1473 |     0,
1474 |     0,
1475 |     0,
1476 |     1,
1477 |     0,
1478 |     0,
1479 | 
1480 |     0,
1481 |     1,
1482 |     0,
1483 |     0,
1484 |     1,
1485 |     0,
1486 |     1,
1487 |     0,
1488 |     0,
1489 |     1,
1490 |     0,
1491 |     1,
1492 |     0,
1493 |     0,
1494 |     1,
1495 |     0,
1496 |     1,
1497 |     0,
1498 |     0,
1499 |     1,
1500 |     0,
1501 |     0,
1502 |     1,
1503 |     1,
1504 |     0,
1505 | 
1506 |     0,
1507 |     1,
1508 |     0,
1509 |     0,
1510 |     1,
1511 |     0,
1512 |     1,
1513 |     0,
1514 |     0,
1515 |     1,
1516 |     0,
1517 |     1,
1518 |     0,
1519 |     0,
1520 |     1,
1521 |     0,
1522 |     0,
1523 |     1,
1524 |     1,
1525 |     0,
1526 |     0,
1527 |     0,
1528 |     1,
1529 |     1,
1530 |     0,
1531 | 
1532 |     0,
1533 |     1,
1534 |     0,
1535 |     0,
1536 |     1,
1537 |     0,
1538 |     1,
1539 |     0,
1540 |     0,
1541 |     1,
1542 |     0,
1543 |     1,
1544 |     1,
1545 |     1,
1546 |     1,
1547 |     0,
1548 |     1,
1549 |     1,
1550 |     1,
1551 |     1,
1552 |     0,
1553 |     1,
1554 |     0,
1555 |     0,
1556 |     1,
1557 | 
1558 |     0,
1559 |     1,
1560 |     0,
1561 |     0,
1562 |     1,
1563 |     0,
1564 |     1,
1565 |     0,
1566 |     0,
1567 |     1,
1568 |     0,
1569 |     0,
1570 |     1,
1571 |     1,
1572 |     0,
1573 |     0,
1574 |     1,
1575 |     0,
1576 |     0,
1577 |     1,
1578 |     0,
1579 |     1,
1580 |     0,
1581 |     0,
1582 |     1,
1583 | 
1584 |     0,
1585 |     1,
1586 |     0,
1587 |     0,
1588 |     1,
1589 |     0,
1590 |     0,
1591 |     1,
1592 |     0,
1593 |     1,
1594 |     0,
1595 |     0,
1596 |     0,
1597 |     1,
1598 |     0,
1599 |     0,
1600 |     0,
1601 |     0,
1602 |     1,
1603 |     0,
1604 |     0,
1605 |     0,
1606 |     0,
1607 |     1,
1608 |     0,
1609 | 
1610 |     0,
1611 |     1,
1612 |     1,
1613 |     1,
1614 |     1,
1615 |     0,
1616 |     0,
1617 |     0,
1618 |     1,
1619 |     0,
1620 |     0,
1621 |     0,
1622 |     1,
1623 |     0,
1624 |     0,
1625 |     0,
1626 |     1,
1627 |     0,
1628 |     0,
1629 |     0,
1630 |     0,
1631 |     1,
1632 |     1,
1633 |     1,
1634 |     1,
1635 | 
1636 |     0,
1637 |     1,
1638 |     1,
1639 |     1,
1640 |     0,
1641 |     0,
1642 |     1,
1643 |     0,
1644 |     0,
1645 |     0,
1646 |     0,
1647 |     1,
1648 |     0,
1649 |     0,
1650 |     0,
1651 |     0,
1652 |     1,
1653 |     0,
1654 |     0,
1655 |     0,
1656 |     0,
1657 |     1,
1658 |     1,
1659 |     1,
1660 |     0,
1661 | 
1662 |     0,
1663 |     1,
1664 |     0,
1665 |     0,
1666 |     0,
1667 |     0,
1668 |     1,
1669 |     0,
1670 |     0,
1671 |     0,
1672 |     0,
1673 |     0,
1674 |     1,
1675 |     0,
1676 |     0,
1677 |     0,
1678 |     0,
1679 |     0,
1680 |     1,
1681 |     0,
1682 |     0,
1683 |     0,
1684 |     0,
1685 |     0,
1686 |     1,
1687 | 
1688 |     0,
1689 |     0,
1690 |     1,
1691 |     1,
1692 |     1,
1693 |     0,
1694 |     0,
1695 |     0,
1696 |     0,
1697 |     1,
1698 |     0,
1699 |     0,
1700 |     0,
1701 |     0,
1702 |     1,
1703 |     0,
1704 |     0,
1705 |     0,
1706 |     0,
1707 |     1,
1708 |     0,
1709 |     0,
1710 |     1,
1711 |     1,
1712 |     1,
1713 | 
1714 |     0,
1715 |     0,
1716 |     1,
1717 |     0,
1718 |     0,
1719 |     0,
1720 |     1,
1721 |     0,
1722 |     1,
1723 |     0,
1724 |     0,
1725 |     0,
1726 |     0,
1727 |     0,
1728 |     0,
1729 |     0,
1730 |     0,
1731 |     0,
1732 |     0,
1733 |     0,
1734 |     0,
1735 |     0,
1736 |     0,
1737 |     0,
1738 |     0,
1739 | 
1740 |     0,
1741 |     0,
1742 |     0,
1743 |     0,
1744 |     0,
1745 |     0,
1746 |     0,
1747 |     0,
1748 |     0,
1749 |     0,
1750 |     0,
1751 |     0,
1752 |     0,
1753 |     0,
1754 |     0,
1755 |     0,
1756 |     0,
1757 |     0,
1758 |     0,
1759 |     0,
1760 |     0,
1761 |     1,
1762 |     1,
1763 |     1,
1764 |     1,
1765 | 
1766 |     0,
1767 |     0,
1768 |     1,
1769 |     0,
1770 |     0,
1771 |     0,
1772 |     0,
1773 |     0,
1774 |     1,
1775 |     0,
1776 |     0,
1777 |     0,
1778 |     0,
1779 |     0,
1780 |     0,
1781 |     0,
1782 |     0,
1783 |     0,
1784 |     0,
1785 |     0,
1786 |     0,
1787 |     0,
1788 |     0,
1789 |     0,
1790 |     0,
1791 | 
1792 |     0,
1793 |     0,
1794 |     0,
1795 |     0,
1796 |     0,
1797 |     0,
1798 |     0,
1799 |     1,
1800 |     0,
1801 |     1,
1802 |     0,
1803 |     1,
1804 |     0,
1805 |     1,
1806 |     1,
1807 |     0,
1808 |     1,
1809 |     0,
1810 |     1,
1811 |     1,
1812 |     0,
1813 |     0,
1814 |     1,
1815 |     0,
1816 |     1,
1817 | 
1818 |     0,
1819 |     1,
1820 |     0,
1821 |     0,
1822 |     0,
1823 |     0,
1824 |     1,
1825 |     0,
1826 |     0,
1827 |     0,
1828 |     0,
1829 |     1,
1830 |     1,
1831 |     1,
1832 |     0,
1833 |     0,
1834 |     1,
1835 |     0,
1836 |     0,
1837 |     1,
1838 |     0,
1839 |     1,
1840 |     1,
1841 |     1,
1842 |     0,
1843 | 
1844 |     0,
1845 |     0,
1846 |     0,
1847 |     0,
1848 |     0,
1849 |     0,
1850 |     0,
1851 |     1,
1852 |     1,
1853 |     1,
1854 |     0,
1855 |     1,
1856 |     0,
1857 |     0,
1858 |     0,
1859 |     0,
1860 |     1,
1861 |     0,
1862 |     0,
1863 |     0,
1864 |     0,
1865 |     0,
1866 |     1,
1867 |     1,
1868 |     1,
1869 | 
1870 |     0,
1871 |     0,
1872 |     0,
1873 |     0,
1874 |     1,
1875 |     0,
1876 |     0,
1877 |     0,
1878 |     0,
1879 |     1,
1880 |     0,
1881 |     0,
1882 |     1,
1883 |     1,
1884 |     1,
1885 |     0,
1886 |     1,
1887 |     0,
1888 |     0,
1889 |     1,
1890 |     0,
1891 |     0,
1892 |     1,
1893 |     1,
1894 |     1,
1895 | 
1896 |     0,
1897 |     0,
1898 |     0,
1899 |     0,
1900 |     0,
1901 |     0,
1902 |     0,
1903 |     1,
1904 |     1,
1905 |     0,
1906 |     0,
1907 |     1,
1908 |     1,
1909 |     1,
1910 |     1,
1911 |     0,
1912 |     1,
1913 |     0,
1914 |     0,
1915 |     0,
1916 |     0,
1917 |     0,
1918 |     1,
1919 |     1,
1920 |     1,
1921 | 
1922 |     0,
1923 |     0,
1924 |     0,
1925 |     1,
1926 |     1,
1927 |     0,
1928 |     0,
1929 |     1,
1930 |     0,
1931 |     0,
1932 |     0,
1933 |     1,
1934 |     1,
1935 |     1,
1936 |     0,
1937 |     0,
1938 |     0,
1939 |     1,
1940 |     0,
1941 |     0,
1942 |     0,
1943 |     0,
1944 |     1,
1945 |     0,
1946 |     0,
1947 | 
1948 |     0,
1949 |     0,
1950 |     1,
1951 |     1,
1952 |     1,
1953 |     0,
1954 |     1,
1955 |     0,
1956 |     0,
1957 |     1,
1958 |     0,
1959 |     0,
1960 |     1,
1961 |     1,
1962 |     1,
1963 |     0,
1964 |     0,
1965 |     0,
1966 |     0,
1967 |     1,
1968 |     0,
1969 |     0,
1970 |     1,
1971 |     1,
1972 |     1,
1973 | 
1974 |     0,
1975 |     1,
1976 |     0,
1977 |     0,
1978 |     0,
1979 |     0,
1980 |     1,
1981 |     0,
1982 |     0,
1983 |     0,
1984 |     0,
1985 |     1,
1986 |     1,
1987 |     1,
1988 |     0,
1989 |     0,
1990 |     1,
1991 |     0,
1992 |     0,
1993 |     1,
1994 |     0,
1995 |     1,
1996 |     0,
1997 |     0,
1998 |     1,
1999 | 
2000 |     0,
2001 |     0,
2002 |     0,
2003 |     0,
2004 |     0,
2005 |     0,
2006 |     0,
2007 |     0,
2008 |     1,
2009 |     0,
2010 |     0,
2011 |     0,
2012 |     0,
2013 |     0,
2014 |     0,
2015 |     0,
2016 |     0,
2017 |     0,
2018 |     1,
2019 |     0,
2020 |     0,
2021 |     0,
2022 |     0,
2023 |     1,
2024 |     0,
2025 | 
2026 |     0,
2027 |     0,
2028 |     0,
2029 |     0,
2030 |     1,
2031 |     0,
2032 |     0,
2033 |     0,
2034 |     0,
2035 |     0,
2036 |     0,
2037 |     0,
2038 |     0,
2039 |     0,
2040 |     1,
2041 |     0,
2042 |     0,
2043 |     0,
2044 |     0,
2045 |     1,
2046 |     0,
2047 |     0,
2048 |     1,
2049 |     1,
2050 |     0,
2051 | 
2052 |     0,
2053 |     1,
2054 |     0,
2055 |     0,
2056 |     0,
2057 |     0,
2058 |     1,
2059 |     0,
2060 |     1,
2061 |     0,
2062 |     0,
2063 |     1,
2064 |     1,
2065 |     0,
2066 |     0,
2067 |     0,
2068 |     1,
2069 |     0,
2070 |     1,
2071 |     0,
2072 |     0,
2073 |     1,
2074 |     0,
2075 |     0,
2076 |     1,
2077 | 
2078 |     0,
2079 |     1,
2080 |     1,
2081 |     0,
2082 |     0,
2083 |     0,
2084 |     0,
2085 |     1,
2086 |     0,
2087 |     0,
2088 |     0,
2089 |     0,
2090 |     1,
2091 |     0,
2092 |     0,
2093 |     0,
2094 |     0,
2095 |     1,
2096 |     0,
2097 |     0,
2098 |     0,
2099 |     1,
2100 |     1,
2101 |     1,
2102 |     0,
2103 | 
2104 |     0,
2105 |     0,
2106 |     0,
2107 |     0,
2108 |     0,
2109 |     0,
2110 |     1,
2111 |     0,
2112 |     0,
2113 |     1,
2114 |     0,
2115 |     1,
2116 |     1,
2117 |     1,
2118 |     1,
2119 |     0,
2120 |     1,
2121 |     1,
2122 |     1,
2123 |     1,
2124 |     0,
2125 |     1,
2126 |     0,
2127 |     0,
2128 |     1,
2129 | 
2130 |     0,
2131 |     0,
2132 |     0,
2133 |     0,
2134 |     0,
2135 |     0,
2136 |     1,
2137 |     1,
2138 |     1,
2139 |     0,
2140 |     0,
2141 |     1,
2142 |     0,
2143 |     0,
2144 |     1,
2145 |     0,
2146 |     1,
2147 |     0,
2148 |     0,
2149 |     1,
2150 |     0,
2151 |     1,
2152 |     0,
2153 |     0,
2154 |     1,
2155 | 
2156 |     0,
2157 |     0,
2158 |     0,
2159 |     0,
2160 |     0,
2161 |     0,
2162 |     0,
2163 |     1,
2164 |     1,
2165 |     0,
2166 |     0,
2167 |     1,
2168 |     0,
2169 |     0,
2170 |     1,
2171 |     0,
2172 |     1,
2173 |     0,
2174 |     0,
2175 |     1,
2176 |     0,
2177 |     0,
2178 |     1,
2179 |     1,
2180 |     0,
2181 | 
2182 |     0,
2183 |     0,
2184 |     0,
2185 |     0,
2186 |     0,
2187 |     0,
2188 |     1,
2189 |     1,
2190 |     1,
2191 |     0,
2192 |     0,
2193 |     1,
2194 |     0,
2195 |     0,
2196 |     1,
2197 |     0,
2198 |     1,
2199 |     1,
2200 |     1,
2201 |     0,
2202 |     0,
2203 |     1,
2204 |     0,
2205 |     0,
2206 |     0,
2207 | 
2208 |     0,
2209 |     0,
2210 |     0,
2211 |     0,
2212 |     0,
2213 |     0,
2214 |     0,
2215 |     1,
2216 |     1,
2217 |     0,
2218 |     0,
2219 |     1,
2220 |     0,
2221 |     0,
2222 |     1,
2223 |     0,
2224 |     0,
2225 |     1,
2226 |     1,
2227 |     1,
2228 |     0,
2229 |     0,
2230 |     0,
2231 |     0,
2232 |     1,
2233 | 
2234 |     0,
2235 |     0,
2236 |     0,
2237 |     0,
2238 |     0,
2239 |     0,
2240 |     1,
2241 |     0,
2242 |     1,
2243 |     1,
2244 |     0,
2245 |     1,
2246 |     1,
2247 |     0,
2248 |     0,
2249 |     0,
2250 |     1,
2251 |     0,
2252 |     0,
2253 |     0,
2254 |     0,
2255 |     1,
2256 |     0,
2257 |     0,
2258 |     0,
2259 | 
2260 |     0,
2261 |     0,
2262 |     0,
2263 |     0,
2264 |     0,
2265 |     0,
2266 |     0,
2267 |     1,
2268 |     1,
2269 |     1,
2270 |     0,
2271 |     0,
2272 |     1,
2273 |     0,
2274 |     0,
2275 |     0,
2276 |     0,
2277 |     0,
2278 |     1,
2279 |     0,
2280 |     0,
2281 |     1,
2282 |     1,
2283 |     1,
2284 |     0,
2285 | 
2286 |     0,
2287 |     0,
2288 |     1,
2289 |     0,
2290 |     0,
2291 |     0,
2292 |     1,
2293 |     1,
2294 |     1,
2295 |     0,
2296 |     0,
2297 |     0,
2298 |     1,
2299 |     0,
2300 |     0,
2301 |     0,
2302 |     0,
2303 |     1,
2304 |     0,
2305 |     0,
2306 |     0,
2307 |     0,
2308 |     0,
2309 |     1,
2310 |     1,
2311 | 
2312 |     0,
2313 |     0,
2314 |     0,
2315 |     0,
2316 |     0,
2317 |     0,
2318 |     1,
2319 |     0,
2320 |     0,
2321 |     1,
2322 |     0,
2323 |     1,
2324 |     0,
2325 |     0,
2326 |     1,
2327 |     0,
2328 |     1,
2329 |     0,
2330 |     0,
2331 |     1,
2332 |     0,
2333 |     0,
2334 |     1,
2335 |     1,
2336 |     0,
2337 | 
2338 |     0,
2339 |     0,
2340 |     0,
2341 |     0,
2342 |     0,
2343 |     0,
2344 |     1,
2345 |     0,
2346 |     0,
2347 |     1,
2348 |     0,
2349 |     1,
2350 |     0,
2351 |     0,
2352 |     1,
2353 |     0,
2354 |     0,
2355 |     1,
2356 |     1,
2357 |     0,
2358 |     0,
2359 |     0,
2360 |     1,
2361 |     1,
2362 |     0,
2363 | 
2364 |     0,
2365 |     0,
2366 |     0,
2367 |     0,
2368 |     0,
2369 |     0,
2370 |     1,
2371 |     0,
2372 |     0,
2373 |     1,
2374 |     0,
2375 |     1,
2376 |     1,
2377 |     1,
2378 |     1,
2379 |     0,
2380 |     1,
2381 |     1,
2382 |     1,
2383 |     1,
2384 |     0,
2385 |     0,
2386 |     1,
2387 |     1,
2388 |     0,
2389 | 
2390 |     0,
2391 |     0,
2392 |     0,
2393 |     0,
2394 |     0,
2395 |     0,
2396 |     1,
2397 |     0,
2398 |     0,
2399 |     1,
2400 |     0,
2401 |     0,
2402 |     1,
2403 |     1,
2404 |     0,
2405 |     0,
2406 |     0,
2407 |     1,
2408 |     1,
2409 |     0,
2410 |     0,
2411 |     1,
2412 |     0,
2413 |     0,
2414 |     1,
2415 | 
2416 |     0,
2417 |     0,
2418 |     0,
2419 |     0,
2420 |     0,
2421 |     0,
2422 |     1,
2423 |     0,
2424 |     0,
2425 |     1,
2426 |     0,
2427 |     0,
2428 |     1,
2429 |     1,
2430 |     1,
2431 |     0,
2432 |     0,
2433 |     0,
2434 |     0,
2435 |     1,
2436 |     0,
2437 |     0,
2438 |     1,
2439 |     1,
2440 |     0,
2441 | 
2442 |     0,
2443 |     0,
2444 |     0,
2445 |     0,
2446 |     0,
2447 |     0,
2448 |     1,
2449 |     1,
2450 |     1,
2451 |     1,
2452 |     0,
2453 |     0,
2454 |     0,
2455 |     1,
2456 |     0,
2457 |     0,
2458 |     0,
2459 |     1,
2460 |     0,
2461 |     0,
2462 |     0,
2463 |     1,
2464 |     1,
2465 |     1,
2466 |     1,
2467 | 
2468 |     0,
2469 |     0,
2470 |     1,
2471 |     1,
2472 |     0,
2473 |     0,
2474 |     0,
2475 |     1,
2476 |     0,
2477 |     0,
2478 |     0,
2479 |     1,
2480 |     1,
2481 |     0,
2482 |     0,
2483 |     0,
2484 |     0,
2485 |     1,
2486 |     0,
2487 |     0,
2488 |     0,
2489 |     0,
2490 |     1,
2491 |     1,
2492 |     0,
2493 | 
2494 |     0,
2495 |     0,
2496 |     1,
2497 |     0,
2498 |     0,
2499 |     0,
2500 |     0,
2501 |     1,
2502 |     0,
2503 |     0,
2504 |     0,
2505 |     0,
2506 |     1,
2507 |     0,
2508 |     0,
2509 |     0,
2510 |     0,
2511 |     1,
2512 |     0,
2513 |     0,
2514 |     0,
2515 |     0,
2516 |     1,
2517 |     0,
2518 |     0,
2519 | 
2520 |     0,
2521 |     1,
2522 |     1,
2523 |     0,
2524 |     0,
2525 |     0,
2526 |     0,
2527 |     1,
2528 |     0,
2529 |     0,
2530 |     0,
2531 |     0,
2532 |     1,
2533 |     1,
2534 |     0,
2535 |     0,
2536 |     0,
2537 |     1,
2538 |     0,
2539 |     0,
2540 |     0,
2541 |     1,
2542 |     1,
2543 |     0,
2544 |     0,
2545 | 
2546 |     0,
2547 |     0,
2548 |     0,
2549 |     0,
2550 |     0,
2551 |     0,
2552 |     0,
2553 |     0,
2554 |     0,
2555 |     0,
2556 |     0,
2557 |     0,
2558 |     1,
2559 |     0,
2560 |     1,
2561 |     0,
2562 |     1,
2563 |     0,
2564 |     1,
2565 |     0,
2566 |     0,
2567 |     0,
2568 |     0,
2569 |     0,
2570 |     0,
2571 |   ],
2572 | }
2573 | 
2574 | export default {
2575 |   micro
2576 | }

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as createElement } from './createElement'
2 | export { default as easing } from './easing'
3 | export { default as fonts } from './fonts'
4 | export { default as transforms } from './transforms'
5 | export { default as utils } from './utils'
6 | export { default as Stage } from './components/Stage'

--------------------------------------------------------------------------------
/src/renderer.js:
--------------------------------------------------------------------------------
  1 | import Reconciler from 'react-reconciler'
  2 | 
  3 | export default createElement => {
  4 |   /** Reconciler */
  5 |   const PixelRenderer = Reconciler({
  6 |     /**
  7 |      * Host context getters
  8 |      */
  9 |     getRootHostContext: root => root,
 10 |     getChildHostContext: root => root,
 11 |     /**
 12 |      * Component instance creation
 13 |      */
 14 |     createInstance: function createInstance(type, props, root, host, fiber) {
 15 |       return createElement(type, props, root, null)
 16 |     },
 17 |     appendInitialChild: (parent, child) => {
 18 |       parent.appendChild(child)
 19 |     },
 20 |     /**
 21 |      * Manage prop updates
 22 |      */
 23 |     finalizeInitialChildren: (host, type, props) => {
 24 |       return false
 25 |     },
 26 |     prepareForCommit: () => {},
 27 |     resetAfterCommit: () => {},
 28 |     prepareUpdate: (instance, type, props, nextProps) => {
 29 |       return { ...props, ...nextProps }
 30 |     },
 31 |     /**
 32 |      * Text handling
 33 |      */
 34 |     createTextInstance: (text, root, fiber) => {
 35 |       throw new Error('Raw text children are not supported by <PixelCanvas>')
 36 |     },
 37 |     commitTextUpdate: () => {
 38 |       throw new Error('Raw text children are not supported by <PixelCanvas>')
 39 |     },
 40 |     resetTextContent: elem => {
 41 |       throw new Error('Raw text children are not supported by <PixelCanvas>')
 42 |     },
 43 |     shouldSetTextContent: () => false,
 44 |     /**
 45 |      * Other stuff
 46 |      */
 47 |     getPublicInstance: inst => inst,
 48 |     shouldDeprioritizeSubtree: (type, props) => false,
 49 |     now: () => {},
 50 |     useSyncScheduling: true,
 51 |     /**
 52 |      * Mutations
 53 |      */
 54 |     mutation: {
 55 |       appendChild: (parent, child) => {
 56 |         parent.appendChild(child)
 57 |       },
 58 |       appendChildToContainer: (parent, child) => {
 59 |         parent.appendChild(child)
 60 |       },
 61 |       insertBefore: (parent, child, beforeChild) => {
 62 |         parent.appendChild(child)
 63 |       },
 64 |       insertInContainerBefore: (parent, child, beforeChild) => {
 65 |         parent.appendChild(child)
 66 |       },
 67 |       removeChild: (parent, child) => {
 68 |         parent.removeChild(child)
 69 |       },
 70 |       removeChildFromContainer: (parent, child) => {
 71 |         parent.removeChild(child)
 72 |       },
 73 |       commitUpdate: (inst, payload, type, props, nextProps) => {
 74 |         inst.setProps(payload)
 75 |       },
 76 |       commitMount: (inst, payload, type, props, nextProps) => {},
 77 |       commitTextUpdate: (inst, text, nextText) => {
 78 |         throw new Error('Raw text children are not supported by <PixelCanvas>')
 79 |       },
 80 |     },
 81 |   })
 82 | 
 83 |   let injected = false
 84 |   const injectIntoDevTools = () => {
 85 |     if (injected) return
 86 |     injected = true
 87 |     PixelRenderer.injectIntoDevTools({
 88 |       bundleType: 1, // 0 for PROD, 1 for DEV
 89 |       version: '0.0.0', // version for your renderer
 90 |       rendererPackageName: 'pixel-renderer', // package name
 91 |       findHostInstanceByFiber: PixelRenderer.findHostInstance, // host instance (root)
 92 |     })
 93 |   }
 94 | 
 95 |   const render = pixelCanvas => {
 96 |     injectIntoDevTools()
 97 |     pixelCanvas.root =
 98 |       pixelCanvas.root ||
 99 |       PixelRenderer.createContainer(pixelCanvas, pixelCanvas.canvas)
100 |     PixelRenderer.updateContainer(
101 |       pixelCanvas.props.children,
102 |       pixelCanvas.root,
103 |       pixelCanvas,
104 |     )
105 |   }
106 | 
107 |   const unmount = pixelCanvas => {
108 |     PixelRenderer.updateContainer(null, pixelCanvas.root, pixelCanvas)
109 |   }
110 | 
111 |   return {
112 |     injectIntoDevTools,
113 |     render,
114 |     unmount,
115 |     PixelRenderer,
116 |   }
117 | }
118 |

--------------------------------------------------------------------------------
/src/transforms.js:
--------------------------------------------------------------------------------
 1 | import { toUint32 } from './utils'
 2 | 
 3 | export const crop = ({
 4 |   x,
 5 |   y,
 6 |   width,
 7 |   height,
 8 |   originalWidth,
 9 |   originalHeight,
10 | }) => (byte, i) => {
11 |   if (i % originalWidth < x) return 0
12 |   if (Math.floor(i / originalHeight) < y) return 0
13 |   if (i % originalWidth > x + (width - 1)) return 0
14 |   if (Math.floor(i / originalHeight) > y + (height - 1)) return 0
15 |   return byte
16 | }
17 | 
18 | let logged = 0
19 | export const palette = palette => {
20 |   const cmap = new Map(palette)
21 |   for (const [k, v] of cmap) {
22 |     cmap.set(toUint32(k), toUint32(v))
23 |   }
24 |   return byte => {
25 |     return cmap.has(byte) ? cmap.get(byte) : byte
26 |   }
27 | }
28 | 
29 | export default {
30 |   crop,
31 |   palette,
32 | }
33 |

--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | export const drawRect = ({
  2 |   id,
  3 |   pixels,
  4 |   hitmap,
  5 |   imageData,
  6 |   x,
  7 |   y,
  8 |   w,
  9 |   h,
 10 |   fill,
 11 |   radius,
 12 | }) => {
 13 |   const { width, height } = imageData
 14 |   // skip transparent fills
 15 |   if (fill === 0) return
 16 |   // calculate coordinates to skip due to border-radius
 17 |   // secret bonus: also useful for drawing circles
 18 |   const skips = calcBorderRadiusSkips(w, h, radius)
 19 |   for (let row = 0; row < h; row++) {
 20 |     const _y = row + y
 21 |     if (_y < 0 || _y >= height) continue // off-stage
 22 |     for (let col = 0; col < w; col++) {
 23 |       const _x = col + x
 24 |       if (_x < 0 || _x >= width) continue // off-stage
 25 |       // skip border-radius coords
 26 |       if (skips[row]) {
 27 |         const s = skips[row]
 28 |         if (col > s[0] || col < s[1]) continue
 29 |       }
 30 |       // pixel index
 31 |       const idx = _y * width + _x
 32 |       // write visible pixels to uint32 array
 33 |       pixels[idx] = fill
 34 |       // write id to hitmap
 35 |       hitmap[idx] = id
 36 |     }
 37 |   }
 38 | }
 39 | 
 40 | export const drawUint32 = ({
 41 |   id,
 42 |   pixels,
 43 |   hitmap,
 44 |   imageData,
 45 |   x,
 46 |   y,
 47 |   w,
 48 |   h,
 49 |   data,
 50 | }) => {
 51 |   const { width, height } = imageData
 52 |   for (let i = 0; i < h; i++) {
 53 |     const _y = y + i
 54 |     if (_y < 0 || _y >= height) continue
 55 |     for (let j = 0; j < w; j++) {
 56 |       const _x = x + j
 57 |       if (_x < 0 || _x >= width) continue
 58 |       // source index
 59 |       const idx0 = i * w + j
 60 |       // dest index
 61 |       const idx1 = _y * width + _x
 62 |       // uint32 color
 63 |       const color = data[idx0]
 64 |       if (color === 0) continue
 65 |       pixels[idx1] = color
 66 |       hitmap[idx1] = id
 67 |     }
 68 |   }
 69 | }
 70 | 
 71 | // hypotenuse, side => other side
 72 | export const chord = (a, b) => Math.sqrt(Math.pow(a, 2) + -Math.pow(b, 2)) * 2
 73 | 
 74 | export const calcBorderRadiusSkips = (w, h, br) => {
 75 |   let i = br
 76 |   const skips = []
 77 |   while (i) {
 78 |     const val = w + chord(br, i--) / 2 - (br + 1)
 79 |     const xs = [val, w - 1 - val]
 80 |     skips[br - (i + 1)] = xs
 81 |     skips[h - (br - i)] = xs
 82 |   }
 83 |   return skips
 84 | }
 85 | 
 86 | export const fromHex = hex => {
 87 |   const len = hex.length - 1
 88 |   let str = ''
 89 |   if (len === 3) {
 90 |     for (const x of hex.substr(1)) {
 91 |       // little-endian
 92 |       str = x.repeat(2) + str
 93 |       // big-endian
 94 |       // str += x.repeat(2)
 95 |     }
 96 |   } else {
 97 |     for (let i = len - 1; i > 0; i -= 2) {
 98 |       // little-endian
 99 |       str += hex[i] + hex[i + 1]
100 |       // big-endian
101 |       // str = hex[i] + hex[i + 1] + str
102 |     }
103 |   }
104 |   str = 'ff' + str.substr(0, 6)
105 |   return parseInt(str, 16)
106 | }
107 | 
108 | export const fromRGBA = rgba => {
109 |   const [red, green, blue, alpha = 1] = rgba
110 |     .split('(')[1]
111 |     .split(')')[0]
112 |     .split(',')
113 |     .map(Number)
114 |   const a = (alpha * 255) & 0xff
115 |   const b = blue & 0xff
116 |   const g = green & 0xff
117 |   const r = red & 0xff
118 |   return toABGR(r, g, b, a)
119 | }
120 | 
121 | export const modulo = (a, b) => a - Math.floor(a / b) * b
122 | 
123 | // for big-endian
124 | export const toRGBA = (r, g, b, a) => (r << 24) | (g << 16) | (b << 8) | a
125 | 
126 | // for little-endian
127 | export const toABGR = (r, g, b, a) => (a << 24) | (b << 16) | (g << 8) | r
128 | 
129 | export const toUint32 = (cache => x => {
130 |   if (x in cache) return cache[x]
131 |   let val = null
132 |   if (Number.isInteger(x)) val = x
133 |   else if ('string' === typeof x && x[0] === '#') val = fromHex(x)
134 |   else if ('string' === typeof x && x.substring(0, 3) === 'rgb')
135 |     val = fromRGBA(x)
136 |   if (val === null) throw new Error(`Unsupported format: ${x}`)
137 |   cache[x] = modulo(val, Math.pow(2, 32))
138 |   return cache[x]
139 | })({})
140 | 
141 | export const createContext = (w, h) => {
142 |   const canvas = document.createElement('canvas')
143 |   const ctx = canvas.getContext('2d')
144 |   canvas.width = w
145 |   canvas.height = h
146 |   return ctx
147 | }
148 | 
149 | export const loadImage = path =>
150 |   new Promise((okay, nope) => {
151 |     const img = new Image()
152 |     img.onload = () => okay(img)
153 |     img.onerror = x => nope(x)
154 |     img.src = path
155 |   })
156 | 
157 | export const toImageData = img => {
158 |   const ctx = createContext(img.width, img.height)
159 |   ctx.drawImage(img, 0, 0)
160 |   return ctx.getImageData(0, 0, img.width, img.height)
161 | }
162 | 
163 | export const loadImageData = async path => toImageData(await loadImage(path))
164 | 
165 | export const stringToLines = (words, charWidth, boxWidth) => {
166 |   const lines = ['']
167 |   for (const word of words) {
168 |     const line = lines[lines.length - 1]
169 |     const a = line.length * charWidth
170 |     // @TODO - support line-breaks properly
171 |     let n = 0 // word length
172 |     for (const char of word) {
173 |       if (char === '\n') break
174 |       n++
175 |     }
176 |     const b = n * charWidth + charWidth
177 |     const eol = a + b > boxWidth
178 |     let _word = eol ? '\n' + word + ' ' : word + ' '
179 |     while (_word.length) {
180 |       const [char] = _word
181 |       if (char === '\n') {
182 |         lines.push('')
183 |       } else {
184 |         lines[lines.length - 1] += char
185 |       }
186 |       _word = _word.substr(1)
187 |     }
188 |   }
189 |   return lines
190 | }
191 | 
192 | export const stringToBytes = (
193 |   text,
194 |   {
195 |     boxWidth,
196 |     boxHeight,
197 |     fill,
198 |     lineHeight,
199 |     yOffset,
200 |     font: { width, height, charmap, data },
201 |   },
202 | ) => {
203 |   const color = 'undefined' !== typeof fill ? toUint32(fill) : toUint32('#000')
204 |   const words = (Array.isArray(text) ? text.join('') : text).split(/[ ]/)
205 |   const lines = stringToLines(words, width, boxWidth)
206 |   // remove trailing space
207 |   if (lines[lines.length - 1] === ' ') lines[lines.length - 1].slice(0, -1)
208 |   // create pixel array
209 |   const bytes = new Uint32Array(boxWidth * boxHeight) // []
210 |   // iterate lines
211 |   for (let i = 0; i < lines.length; i++) {
212 |     const row = lines[i]
213 |     const y = i * lineHeight + yOffset
214 |     const chars = [...row]
215 |     if (y >= boxHeight) break
216 |     if (y < -height) {
217 |       continue
218 |     }
219 |     // iterate letters
220 |     for (let j = 0; j < chars.length; j++) {
221 |       const char = chars[j]
222 |       const x = (j % boxWidth) * width
223 |       const start = charmap[char] * width * height
224 |       const end = start + width * height
225 |       const pixels = data.slice(start, end)
226 |       let n = 0
227 |       pixels.forEach((px, i) => {
228 |         const eol = i % width === width - 1
229 |         const _y = y + n
230 |         const _x = x + i % width
231 |         bytes[_y * boxWidth + _x] = px ? color : px
232 |         if (eol) n++
233 |       })
234 |     }
235 |   }
236 |   return bytes
237 | }
238 | 
239 | export const clickToCoords = (e, scale, maxWidth, maxHeight) => {
240 |   const rect = e.target.getBoundingClientRect()
241 | 
242 |   const scaleX = scale * (rect.width / (maxWidth))
243 |   const scaleY = scale * (rect.height / (maxHeight))
244 |   const x = Math.floor((e.clientX - rect.left) / scaleX)
245 |   const y = Math.floor((e.clientY - rect.top) / scaleY)
246 |   return { x, y }
247 | }
248 | 
249 | export default {
250 |   drawRect,
251 |   drawUint32,
252 |   chord,
253 |   calcBorderRadiusSkips,
254 |   fromHex,
255 |   fromRGBA,
256 |   toUint32,
257 |   createContext,
258 |   loadImage,
259 |   toImageData,
260 |   loadImageData,
261 |   stringToLines,
262 |   stringToBytes,
263 |   clickToCoords,
264 | }
265 |

--------------------------------------------------------------------------------
/src/utils.test.js:
--------------------------------------------------------------------------------
 1 | import { clickToCoords } from './utils'
 2 | 
 3 | describe('clickToCoords', () => {
 4 |   const getNotScaledCoords = (clientX, clientY, rectWidth, rectHeight, scale) =>
 5 |     getCoords(clientX, clientY, rectWidth, rectHeight, scale, rectWidth, rectHeight)
 6 | 
 7 |   const getCoords = (clientX, clientY, rectWidth, rectHeight, scale, maxWidth, maxHeight) => {
 8 |     const e = {
 9 |       clientX,
10 |       clientY,
11 |       target: {
12 |         getBoundingClientRect: () => ({ left: 0, top:0, width: rectWidth, height: rectHeight }),
13 |       },
14 |     }
15 |     return clickToCoords(e, scale, maxWidth, maxHeight)
16 |   }
17 | 
18 |   it('get top left', () => {
19 |     const { x, y } = getNotScaledCoords(0, 0, 100, 100, 1)
20 | 
21 |     expect(x).toBe(0)
22 |     expect(y).toBe(0)
23 |   })
24 | 
25 |   it('get bottom right', () => {
26 |     const { x, y } = getNotScaledCoords(199, 199, 200, 200, 10)
27 | 
28 |     expect(x).toBe(19)
29 |     expect(y).toBe(19)
30 |   })
31 | 
32 |   it('get adjacent left', () => {
33 |     const { x, y } = getNotScaledCoords(9, 0, 100, 100, 10)
34 | 
35 |     expect(x).toBe(0)
36 |     expect(y).toBe(0)
37 |   })
38 | 
39 |   it('get adjacent right', () => {
40 |     const { x, y } = getNotScaledCoords(10, 0, 100, 100, 10)
41 | 
42 |     expect(x).toBe(1)
43 |     expect(y).toBe(0)
44 |   })
45 | 
46 |   it('get with scaled rect', () => {
47 |     const { x: x1 , y: y1 } = getCoords(349, 2, 350, 1050, 10, 100, 300)
48 |     expect(x1).toBe(9)
49 |     expect(y1).toBe(0)
50 | 
51 |     const { x: x2 , y: y2 } = getCoords(182, 211, 200, 300, 10, 100, 300)
52 |     expect(x2).toBe(9)
53 |     expect(y2).toBe(21)
54 | 
55 |     const { x: x3 , y: y3 } = getCoords(44, 211, 50, 300, 10, 100, 300)
56 |     expect(x3).toBe(8)
57 |     expect(y3).toBe(21)
58 |   })
59 | })
60 |

--------------------------------------------------------------------------------
/styleguide.config.js:
--------------------------------------------------------------------------------
  1 | const { createConfig, babel } = require('webpack-blocks')
  2 | module.exports = {
  3 |   title: 'Pixel8',
  4 |   showSidebar: true,
  5 |   showCode: true,
  6 |   showUsage: false,
  7 |   theme: {
  8 |     sidebarWidth: 300,
  9 |     color: {
 10 |       base: '#364149',
 11 |       link: '#008cff',
 12 |       linkHover: '#008cff',
 13 |       sidebarBackground: '#fafafa',
 14 |     },
 15 |     fontFamily: {
 16 |       base: '"Helvetica Neue", Helvetica, Arial, sans-serif',
 17 |       monospace: 'Menlo, Monaco, Consolas, "Courier New", monospace',
 18 |     },
 19 |     fontSize: {
 20 |       base: 14,
 21 |       h1: 36,
 22 |       h2: 24,
 23 |       h3: 18,
 24 |       h4: 16,
 25 |     },
 26 |   },
 27 |   assetsDir: './assets',
 28 |   require: [require('path').resolve(__dirname, 'styleguide.setup.js')],
 29 |   sections: [
 30 |     {
 31 |       name: 'Introduction',
 32 |       content: 'docs/introduction.md',
 33 |     },
 34 |     {
 35 |       name: 'Getting Started',
 36 |       content: 'docs/getting-started.md',
 37 |     },
 38 |     {
 39 |       name: 'Usage',
 40 |       sections: [
 41 |         {
 42 |           name: 'The Stage',
 43 |           sections: [
 44 |             {
 45 |               components: 'src/components/Stage.js',
 46 |             },
 47 |           ],
 48 |         },
 49 |         {
 50 |           name: 'Drawing Shapes',
 51 |           sections: [
 52 |             {
 53 |               components: 'src/components/pixel.js',
 54 |             },
 55 |             {
 56 |               components: 'src/components/rectangle.js',
 57 |             },
 58 |             {
 59 |               components: 'src/components/circle.js',
 60 |             },
 61 |           ],
 62 |         },
 63 |         {
 64 |           name: 'Creating Motion',
 65 |           sections: [
 66 |             {
 67 |               components: 'src/components/transition.js',
 68 |             },
 69 |             {
 70 |               components: 'src/components/animation.js',
 71 |             },
 72 |           ],
 73 |         },
 74 |         {
 75 |           name: 'Text',
 76 |           sections: [
 77 |             {
 78 |               components: 'src/components/text.js',
 79 |             },
 80 |           ],
 81 |         },
 82 |         {
 83 |           name: 'Sprites',
 84 |           sections: [
 85 |             {
 86 |               components: 'src/components/sprite.js',
 87 |             },
 88 |           ],
 89 |         },
 90 |         {
 91 |           name: 'Buffers',
 92 |           sections: [
 93 |             {
 94 |               components: 'src/components/buffer.js',
 95 |             },
 96 |           ],
 97 |         },
 98 |       ],
 99 |     },
100 |   ],
101 |   webpackConfig: createConfig([babel()]),
102 |   getComponentPathLine: componentPath => {
103 |     const name = require('path').basename(componentPath, '.js')
104 |     console.log(name)
105 |     switch (name) {
106 |       case 'Stage':
107 |         return `import { ${name} } from 'pixel8'`
108 |       default:
109 |         return 'no import required :)'
110 |     }
111 |   },
112 | }
113 |

--------------------------------------------------------------------------------
/styleguide.setup.js:
--------------------------------------------------------------------------------
  1 | import { compose } from 'recompose'
  2 | import { injectGlobal } from 'styled-components'
  3 | import * as pixel8 from './src/index'
  4 | global.Stage = pixel8.Stage
  5 | global.pixel8 = pixel8
  6 | global.compose = compose
  7 | injectGlobal`
  8 |   * {
  9 |     -webkit-font-smoothing: antialiased;
 10 |   }
 11 |   .logo {
 12 |     display: block;
 13 |     margin: 0 auto;
 14 |     image-rendering: pixelated;
 15 |     height: 128px;
 16 |     width: 128px;
 17 |     margin-bottom: 24px;
 18 |   }
 19 |   .rsg--sidebar-4 {
 20 |     .rsg--logo-5 {
 21 |       display: none;
 22 |     }
 23 |     [class^="rsg--search"] {
 24 |       padding: 6px;
 25 |       background: 0 0;
 26 |       transition: top .5s ease;
 27 |       background: #fff;
 28 |       border-bottom: 1px solid rgba(0,0,0,.07);
 29 |       border-top: 1px solid rgba(0,0,0,.07);
 30 |       margin-bottom: 10px;
 31 |       margin-top: -1px;
 32 |       input {
 33 |         width: 100%;
 34 |         background: 0 0;
 35 |         border: 1px solid transparent;
 36 |         box-shadow: none;
 37 |         outline: 0;
 38 |         line-height: 22px;
 39 |         padding: 7px 7px;
 40 |         color: #364149;
 41 |       }
 42 |     }
 43 |     [class^="rsg--list"] {
 44 |       padding: 0;
 45 |       [class*="rsg--isChild"] {
 46 |         border: none !important;
 47 |       }
 48 |       [class*="rsg--isChild"] + [class*="rsg--item"]:nth-child(3) {
 49 |         border-top: 1px solid rgba(0,0,0,.07);
 50 |         margin-top: 12px;
 51 |         padding: 16px 15px;
 52 |         & > ul {
 53 |           margin-top: 12px;
 54 |         }
 55 |       } 
 56 |       [class*="rsg--item"] {
 57 |         border: none;
 58 |         padding: 10px 15px;
 59 |         margin: 0;
 60 |         [class^="rsg--link"] {
 61 |           color: #364149;
 62 |           &.active {
 63 |             color: #008cff;
 64 |           }
 65 |         }
 66 |       }
 67 |     }
 68 |   }
 69 |   main {
 70 |     padding: 48px 64px !important;
 71 |     pre {
 72 |       overflow: auto !important;
 73 |     }
 74 |     article blockquote[class^="rsg--blockquote"] {
 75 |       margin: 0;
 76 |       margin-bottom: .85em;
 77 |       padding: 0 15px;
 78 |       color: #858585;
 79 |       border-left: 4px solid #e5e5e5;
 80 |     }
 81 |     article p {
 82 |       letter-spacing: .2px !important;
 83 |     }
 84 |     h1 {
 85 |       margin-bottom: .5em !important;
 86 |     }
 87 |     h1, h2, h3, h4, h5, h6 {
 88 |       &, a, code {
 89 |         font-weight: bold !important;
 90 |       }
 91 |     }
 92 |     h2 {
 93 |       code {
 94 |         font-size: 18px !important;
 95 |       }
 96 |     }
 97 |     code {
 98 |       font-size: 14px !important;
 99 |       padding: .2em .5em !important;
100 |       margin: 0 !important;
101 |       background-color: #f7f7f7 !important;
102 |     }
103 |     h4[class^="rsg--root"],
104 |     header[class^="rsg--header"] h4,
105 |     header[class^="rsg--header"] div[class^="rsg--wrapper"] {
106 |       display: none;
107 |     }
108 |     td [class^="rsg--code"] {
109 |       font-size: 11px !important;
110 |     }
111 |     td span code, td p code {
112 |       white-space: nowrap !important;
113 |     }
114 | 
115 |     .react-codemirror2 {
116 |       .CodeMirror-sizer {
117 |         min-height: 0 !important;
118 |         max-height: 320px;
119 |       }
120 |       // .cm-s-base16-light.CodeMirror {
121 |       //   background-color: #2c3e50;
122 |       //   color: rgba(233, 237, 237, 1);
123 |       //   border-radius: 4px;
124 |       //   margin-top: 8px;
125 |       // }
126 |       // .cm-s-base16-light .CodeMirror-gutters {
127 |       //   background: #2c3e50;
128 |       //   color: rgb(83,127,126);
129 |       //   border: none;
130 |       // }
131 |       // .cm-s-base16-light .CodeMirror-guttermarker, .cm-s-base16-light .CodeMirror-guttermarker-subtle, .cm-s-base16-light .CodeMirror-linenumber { color: rgb(83,127,126); }
132 |       // .cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
133 |       // .cm-s-base16-light div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
134 |       // .cm-s-base16-light.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
135 |       // .cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
136 |       // .cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
137 |       
138 |       // .cm-s-base16-light .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
139 |       // .cm-s-base16-light .cm-keyword { color: rgba(199, 146, 234, 1); }
140 |       // .cm-s-base16-light .cm-operator { color: rgba(233, 237, 237, 1); }
141 |       // .cm-s-base16-light .cm-variable-2 { color: #80CBC4; }
142 |       // .cm-s-base16-light .cm-variable-3, .cm-s-base16-light .cm-type { color: #82B1FF; }
143 |       // .cm-s-base16-light .cm-builtin { color: #DECB6B; }
144 |       // .cm-s-base16-light .cm-atom { color: #F77669; }
145 |       // .cm-s-base16-light .cm-number { color: #F77669; }
146 |       // .cm-s-base16-light .cm-def { color: rgba(233, 237, 237, 1); }
147 |       // .cm-s-base16-light .cm-string { color: #C3E88D; }
148 |       // .cm-s-base16-light .cm-string-2 { color: #80CBC4; }
149 |       // .cm-s-base16-light .cm-comment { color: #999999; }
150 |       // .cm-s-base16-light .cm-variable { color: #82B1FF; }
151 |       // .cm-s-base16-light .cm-tag { color: #80CBC4; }
152 |       // .cm-s-base16-light .cm-meta { color: #80CBC4; }
153 |       // .cm-s-base16-light .cm-attribute { color: #FFCB6B; }
154 |       // .cm-s-base16-light .cm-property { color: #80CBAE; }
155 |       // .cm-s-base16-light .cm-qualifier { color: #DECB6B; }
156 |       // .cm-s-base16-light .cm-variable-3, .cm-s-base16-light .cm-type { color: #DECB6B; }
157 |       // .cm-s-base16-light .cm-tag { color: rgba(255, 83, 112, 1); }
158 |       // .cm-s-base16-light .cm-error {
159 |       //   color: rgba(255, 255, 255, 1.0);
160 |       //   background-color: #EC5F67;
161 |       // }
162 |       // .cm-s-base16-light .CodeMirror-matchingbracket {
163 |       //   text-decoration: underline;
164 |       //   color: white !important;
165 |       // }
166 |     }
167 |   }
168 | `
169 | const updateActiveNavLink = () => {
170 |   const { hash } = window.location
171 |   ;[...document.querySelectorAll('[class^="rsg--link"]')].forEach(x => {
172 |     x.classList.remove('active')
173 |   })
174 |   const anchor = document.body.querySelector(
175 |     `[class^="rsg--list"] [class^="rsg--link"][href="${hash}"]`,
176 |   )
177 |   if (!anchor) return
178 |   anchor.classList.add('active')
179 | }
180 | 
181 | window.addEventListener('hashchange', updateActiveNavLink)
182 | document.addEventListener('DOMContentLoaded', () => {
183 |   const search = document.body.querySelector('[class^="rsg--search"] input')
184 |   if (search) search.placeholder = 'Type to search'
185 |   updateActiveNavLink()
186 |   const logo = document.createElement('img')
187 |   logo.src = '/logo.png'
188 |   logo.className = 'logo'
189 |   document.body.querySelector('.rsg--root-8').prepend(logo)
190 | })
191 |

--------------------------------------------------------------------------------