Flyout begun.

src/fridge-magnets.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
+import { words } from "./wordlist.js";
 import "./fridge-tile.js";
 
 @customElement("fridge-magnets")
@@ -34,7 +35,7 @@ export class FridgeMagnets extends LitElement {
     render() {
         return html` <div id="fridgemagnets">
             <div id="fridge">
-                <fridge-tile word="Magnificent"></fridge-tile>
+            ${words.map(word => html`<fridge-tile word=${word.w}></fridge-tile>`)}
             </div>
             <div id="footer">Footer</div>
         </div>`;

src/fridge-tile.ts

@@ -40,6 +40,7 @@ export class FridgeTile extends LitElement {
                 font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
                 box-shadow: 0 0 0.375rem 0.125rem #aaa;
                 text-align: center;
+                border-radius: 10%;
                 user-select: none;
                 cursor: pointer;
                 color: #444;
@@ -88,7 +89,7 @@ export class FridgeTile extends LitElement {
 
     render() {
         const styles = {
-            width: `${this.word.length}ch`,
+            width: `${this.word.length * 1.2}ch`,
             transform: `rotate(${this.transform.rotate}deg)`,
         };
         return html`<div part="word ${ref(this.handle)} " style="${styleMap(styles)}" class="word">${this.word}</div>`;