elf
/
fridgemagnets
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Flyout begun.

This commit is contained in:
Elf M. Sternberg 2024-11-21 12:49:45 -08:00
parent c7c9c4809d
commit 9a53ecf4c9
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/fridge-magnets.ts
View File

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

3
src/fridge-tile.ts
View File

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