diff --git a/index.html b/index.html index fe95216..c680952 100644 --- a/index.html +++ b/index.html @@ -1,28 +1,32 @@ - + + + + + + - - - - - + + fridge-magnets + - - fridge-magnets - - - - - - - - - \ No newline at end of file + + + + + diff --git a/src/fridge-board.ts b/src/fridge-board.ts index 112d32d..ae2043d 100644 --- a/src/fridge-board.ts +++ b/src/fridge-board.ts @@ -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`); diff --git a/src/fridge-magnets.ts b/src/fridge-magnets.ts index 2f11f13..a572d10 100644 --- a/src/fridge-magnets.ts +++ b/src/fridge-magnets.ts @@ -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; } `; diff --git a/src/fridge-tile.ts b/src/fridge-tile.ts index 4cd0f1a..b0af9df 100644 --- a/src/fridge-tile.ts +++ b/src/fridge-tile.ts @@ -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`
${this.word}
`; }