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

14
src/fridge-board.ts
View File

@ -67,6 +67,8 @@ export class FridgeBoard extends LitElement {
@query("#fridge")
fridge!: HTMLDivElement;
maxZ: number = 1;
assignNewPositions() {
const pointsAlreadyPositioned: Point[] = [];
const unpositionable: FridgeTile[] = [];
@ -77,8 +79,8 @@ export class FridgeBoard extends LitElement {
for (let i = 0; i < 30; i++) {
// Where we will put the new tile
const newXPos = Math.random() * (boardHeight - tileHeight) * 0.985;
const newYPos = Math.random() * (boardWidth - tileWidth) * 0.98;
const newYPos = Math.random() * (boardHeight - tileHeight) * 0.96;
const newXPos = Math.random() * (boardWidth - tileWidth) * 0.96;
// The box defining the new tile.
const box = {
@ -94,6 +96,12 @@ export class FridgeBoard extends LitElement {
if (pointsAlreadyPositioned.find(p => isPointInBox(p)) === undefined) {
tile.style.top = `${box.yt}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;
}
}
@ -145,6 +153,8 @@ export class FridgeBoard extends LitElement {
pointerY = clientY;
};
this.maxZ = this.maxZ + 1;
node.style.setProperty("z-index", `${this.maxZ}`);
node.style.setProperty("scale", "1.3");
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;
position: relative;
width: 100%;
height: 95vw;
height: 95vh;
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;
position: relative;
background: white;
z-index: 100;
}
`;
}
@ -69,7 +68,7 @@ export class FridgeTile extends LitElement {
get bl() {
const [x, y] = this.relativePosition;
const { height } = this.size;
return [x + height, y];
return [x, y + height];
}
get br() {
@ -84,7 +83,7 @@ export class FridgeTile extends LitElement {
render() {
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>`;
}