rpggio

Click and drag above to paint red hexagons. A black outline will appear around contiguous clusters of red hexagons. This outline is constructed using topojson.mesh, part of the TopoJSON client API. A filter is specified so that the mesh only contains boundaries that separate filled hexagons from empty hexagons.

The hexagon grid itself is represented as TopoJSON, but is constructed on-the-fly in the browser. Since TopoJSON requires quantized coordinates, the hexagon grid is represented as integers, with each hexagon of dimensions 3×2. Then a custom projection is used to transform these irregular integer hexagons to normal hexagons of the desired size.

rpggio

class ViewZoom {

    project: paper.Project;
    factor = 1.25;
    
    private _minZoom: number;
    private _maxZoom: number;
    private mouseNativeStart: paper.Point;
    private viewCenterStart: paper.Point;

rpggio

Verifying my Blockstack ID is secured with the address 1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh https://explorer.blockstack.org/address/1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh

rpggio

Verifying my Blockstack ID is secured with the address 1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh https://explorer.blockstack.org/address/1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh

rpggio

Verifying my Blockstack ID is secured with the address 1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh https://explorer.blockstack.org/address/1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh

rpggio

Verifying my Blockstack ID is secured with the address 1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh https://explorer.blockstack.org/address/1EbxrkJezeMR8LqeKVVBGoSfzA6MbrwfRh

rpggio

function GoogleDocFrame({ url }: { url: string }) {
  const frameRef = useRef<HTMLIFrameElement>(null)
  const viewerUrl = `https://docs.google.com/viewer?embedded=true&url=${url}`
  let cancel: () => void | undefined
  useEffect(() => {
    cancel = setFrameSrcWithRetry(frameRef.current!, viewerUrl, true)

    // unmount
    return () => {
      if (cancel) {

rpggio

export function ComplexKeyedMap<K, V>(
  formatter: StringFormatter<K>,
  entries?: readonly (readonly [K, V])[] | null
): Map<K, V> {
  const map = new Map<string, V>(
    entries?.map(([k, v]) => [formatter.asString(k), v])
  )

  function* getEntries() {

rpggio

export function ReactiveMap<K, V>(map: Map<K, V>): ReactiveMap<K, V> {
  const subscribers = new Set<Subscriber<MapState<K, V>>>()

  function notify() {
    const state: MapState<K, V> = [Array.from(map.entries()), map]
    subscribers.forEach(subscriber => subscriber(state))
  }

  function unsubscribe(subscriber: Subscriber<MapState<K, V>>) {

rpggio

import type { Reactive, Subscriber, Store } from './types'

export function Store<S>(initial: S): Store<S> {
  let current = initial
  const subscribers = new Set<Subscriber<S>>()

  function subscribe(subscriber: Subscriber<S>) {
    subscribers.add(subscriber)
    return () => unsubscribe(subscriber as VoidFunction)
  }