2e:null 2f:["$","title",null,{"children":"An Hexgrid Web Component | Olivier Lange | Observable"}] 34:T436,## Status Much of a work-in-progress. We need to replace the HTML by SVG. That will be for an upcoming Gōng-fu I/O session. ## What we have so far ```html ``` ## General idea ```html ``` and/or (_we'll see_) ```html

PACMAN

FANTOM-A

FANTOM-B

```35:[] 32:{"id":"bd2026352c690163","slug":"hexgrid-web-component","title":"An Hexgrid Web Component","thumbnail":"2ff758681dfeb3fb05f7fb1aaad581abe77af9e32375bed1add8a061acdbcccc","access_level":"public","create_time":"$D2021-06-16T21:06:20.490Z","update_time":"$D2021-11-25T22:32:49.793Z","view_time":null,"first_public_time":"$D2021-06-16T21:11:16.489Z","has_unpublished_edits":null,"fork":{"id":"ae152a8f105853f4","slug":"using-a-lit-web-component-in-observablehq","title":"Defining and using a Lit Web Component in ObservableHQ","owner":{"id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/52639e5630d4e3e4e2772fe77680883002a0b9352d8dd7a649dbcb67b1e1fb3a","tier":"starter_2024"},"version":243,"publish_version":243,"role":null,"authored":false,"authors":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null}],"members":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"58c9f171676a532b","slug":"hexgrids","title":"Hexagonal Grids","owner":{"id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange"}},"type":"notebook","body":{"title":"An Hexgrid Web Component","cells":[{"id":0,"value":"# An Hexgrid Web Component","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## Using our `` element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"HexGrid, html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## Defining our `` element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"HexGrid = {\n class HexGrid extends LitElement {\n static get styles() {\n return lit.css`\n :host {\n display: inline-block;\n border: 2px solid indigo;\n \t padding: 0.5rem 1.5rem;\n margin-bottom: 1rem; }\n p {\n color: indigo;\n font-family: 'Georgia'; }`;\n }\n \n static get properties() {\n return {\n name: { type: String }\n }\n }\n \n constructor() {\n super();\n this.name = 'Somebody';\n }\n \n render() {\n return lit.html`

Hello, ${this.name}!

`;\n }\n }\n if( !window.customElements.get( 'hex-grid')) {\n window.customElements.define('hex-grid', HexGrid)\n }\n return HexGrid\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"## Reference articles\n\n* [Red Blob Games › Hexagonal Grids](https://www.redblobgames.com/grids/hexagons/#map-storage)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Dependencies\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"LitElement = lit.LitElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"lit = import('https://unpkg.com/lit@2.0.0-rc.2/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"hexgrid = import('https://unpkg.com/@gongfuio/hexgrid@1.0.0/dist/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"