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

Fixed a bunch of coordinate issues. The Z-index is responding correctly. Positioning without overlapping is still broken.

This commit is contained in:
Elf M. Sternberg 2025-01-20 16:34:46 -08:00
parent 97dde3bdfe
commit 80a9c7aa35
4 changed files with 44 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -1,11 +1,10 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="Put your description here."> <meta name="Description" content="Put your description here." />
<base href="/"> <base href="/" />
<style> <style>
html, html,
@ -15,14 +14,19 @@
font-family: sans-serif; font-family: sans-serif;
background-color: #ededed; background-color: #ededed;
} }
fridge-magnets {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
</style> </style>
<title>fridge-magnets</title> <title>fridge-magnets</title>
</head> </head>
<body> <body>
<fridge-magnets></fridge-magnets> <fridge-magnets></fridge-magnets>
<script type="module" src="./out-tsc/src/fridge-magnets.js"></script> <script type="module" src="./out-tsc/src/fridge-magnets.js"></script>
</body> </body>
</html> </html>

14
src/fridge-board.ts
View File

@ -67,6 +67,8 @@ export class FridgeBoard extends LitElement {
@query("#fridge") @query("#fridge")
fridge!: HTMLDivElement; fridge!: HTMLDivElement;
maxZ: number = 1;
assignNewPositions() { assignNewPositions() {
const pointsAlreadyPositioned: Point[] = []; const pointsAlreadyPositioned: Point[] = [];
const unpositionable: FridgeTile[] = []; const unpositionable: FridgeTile[] = [];
@ -77,8 +79,8 @@ export class FridgeBoard extends LitElement {
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
// Where we will put the new tile // Where we will put the new tile
const newXPos = Math.random() * (boardHeight - tileHeight) * 0.985; const newYPos = Math.random() * (boardHeight - tileHeight) * 0.96;
const newYPos = Math.random() * (boardWidth - tileWidth) * 0.98; const newXPos = Math.random() * (boardWidth - tileWidth) * 0.96;
// The box defining the new tile. // The box defining the new tile.
const box = { const box = {
@ -94,6 +96,12 @@ export class FridgeBoard extends LitElement {
if (pointsAlreadyPositioned.find(p => isPointInBox(p)) === undefined) { if (pointsAlreadyPositioned.find(p => isPointInBox(p)) === undefined) {
tile.style.top = `${box.yt}px`; tile.style.top = `${box.yt}px`;
tile.style.left = `${box.xl}px`; tile.style.left = `${box.xl}px`;
pointsAlreadyPositioned.push(
[box.xl, box.yt],
[box.xr, box.yt],
[box.xl, box.yb],
[box.xr, box.yb]
);
return true; return true;
} }
} }
@ -145,6 +153,8 @@ export class FridgeBoard extends LitElement {
pointerY = clientY; pointerY = clientY;
}; };
this.maxZ = this.maxZ + 1;
node.style.setProperty("z-index", `${this.maxZ}`);
node.style.setProperty("scale", "1.3"); node.style.setProperty("scale", "1.3");
node.style.setProperty("rotate", `${Math.random() * 30 - 15}deg`); node.style.setProperty("rotate", `${Math.random() * 30 - 15}deg`);

2
src/fridge-magnets.ts
View File

@ -17,7 +17,7 @@ export class FridgeMagnets extends LitElement {
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
height: 95vw; height: 95vh;
background: url("./dist/pingbg.png") repeat; background: url("./dist/pingbg.png") repeat;
} }
`; `;

5
src/fridge-tile.ts
View File

@ -37,7 +37,6 @@ export class FridgeTile extends LitElement {
padding: 0.1875rem 0.25rem 0.25rem 0.25rem; padding: 0.1875rem 0.25rem 0.25rem 0.25rem;
position: relative; position: relative;
background: white; background: white;
z-index: 100;
} }
`; `;
} }
@ -69,7 +68,7 @@ export class FridgeTile extends LitElement {
get bl() { get bl() {
const [x, y] = this.relativePosition; const [x, y] = this.relativePosition;
const { height } = this.size; const { height } = this.size;
return [x + height, y]; return [x, y + height];
} }
get br() { get br() {
@ -84,7 +83,7 @@ export class FridgeTile extends LitElement {
render() { render() {
const styles = { const styles = {
width: `${this.word.length * 1.2}ch`, width: `${this.word.length + 2}ch`,
}; };
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>`;
} }