diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.js | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/client/index.js b/client/index.js index a182cca..e44508d 100644 --- a/client/index.js +++ b/client/index.js @@ -3,6 +3,45 @@ import keys from './lib/keys' import kalimba from './lib/kalimba' import colundi from './lib/colundi' import { mod, browser, requestAudioContext } from './lib/util' +import { Grid, Views, HexFactory } from 'honeycomb-grid' + +const Hex = HexFactory({ + size: 50, + template: function(hex) { + return ` + <svg class='hex'> + <polygon points="43.30127019 0 86.60254039 25 86.60254039 75 43.30127019 100 0 75 0 25"/> + </svg> + ` + } +}) + +const container = document.querySelector("#container") +const view = Views.DOM({ + container: container, + origin: { + x: container.offsetWidth / 2, + y: container.offsetHeight / 2, + } +}) + +const origin = Hex(0,0,0) +const seen = {} +let perimeter = [ origin ] + +for (let i = 0, len = colundi.list.length; i < len;) { + const hex = perimeter.shift() + const id = hexToString(hex) + if (seen[id]) continue + seen[id] = true + let pair = colundi.list[i] + const neighbors = [0,1,2,3,4,5].map((i) => Hex.neighbor(hex, i)) + perimeter = perimeter.concat(neighbors) + view.renderHexes([ hex ]) + const el = container.lastChild + el.querySelector('polygon').setAttribute('fill', pair.color) + i++ +} requestAudioContext(() => { }) @@ -13,3 +52,7 @@ keys.listen(function(index){ kalimba.play(freq) }) +function hexToString(hex) { + return [hex.x, hex.y, hex.z].join("_") +} + |