From 9a53ecf4c968430947e8a0000fb76d9f028665f2 Mon Sep 17 00:00:00 2001
From: "Elf M. Sternberg" <elf.sternberg@gmail.com>
Date: Thu, 21 Nov 2024 12:49:45 -0800
Subject: [PATCH] Flyout begun.

---
 src/fridge-magnets.ts | 3 ++-
 src/fridge-tile.ts    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/fridge-magnets.ts b/src/fridge-magnets.ts
index b37beb6..9a046dd 100644
--- a/src/fridge-magnets.ts
+++ b/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>`;
diff --git a/src/fridge-tile.ts b/src/fridge-tile.ts
index 56435b5..124ecbc 100644
--- a/src/fridge-tile.ts
+++ b/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>`;