diff options
| -rw-r--r-- | client/index.js | 43 | ||||
| -rw-r--r-- | index.html | 14 |
2 files changed, 55 insertions, 2 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("_") +} + @@ -3,17 +3,26 @@ <title>honeycomb</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> +html,body { margin: 0; padding: 0; width: 100%; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 13px; background-color: #333; } -div { - display: inline-block; +#container { + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; +} +.mobile #container { + transform-origin: 50% 50%; + transform: scale(0.6); } .desktop body { user-select: none; } +.hex { + transform: translate(-40px, -50px); +} @media only screen and (max-device-width: 800px) { html,body { margin: 0; @@ -23,6 +32,7 @@ div { </style> </head> <body> +<div id="container"></div> </body> <script> var s = document.createElement('script'); |