|
| 1 | +import "./style.css" |
| 2 | + |
| 3 | +document.querySelector("#app" as string).innerHTML = ` |
| 4 | + <h1>Hello Vite!</h1> |
| 5 | + <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a> |
| 6 | +` |
| 7 | + |
| 8 | +const level = { |
| 9 | + width: 6, |
| 10 | + height: 5, |
| 11 | + depth: 3, |
| 12 | +} |
| 13 | + |
| 14 | +const containerEl: HTMLDivElement = document.querySelector(".container") |
| 15 | +const levelEl: HTMLDivElement = containerEl.querySelector(".level") |
| 16 | + |
| 17 | +const generateLevel = () => { |
| 18 | + Object.keys(level).forEach(key => |
| 19 | + levelEl.style.setProperty(`--${key}`, level[key]) |
| 20 | + ) |
| 21 | + |
| 22 | + levelEl.querySelectorAll(".face").forEach(el => { |
| 23 | + const rectCount = el.classList.contains("back") |
| 24 | + ? level.width * level.height |
| 25 | + : el.classList.contains("top") || el.classList.contains("bottom") |
| 26 | + ? level.width * level.depth |
| 27 | + : level.height * level.depth |
| 28 | + const frag = document.createDocumentFragment() |
| 29 | + for (let i = 0; i < rectCount; i++) { |
| 30 | + frag.appendChild(document.createElement("div")) |
| 31 | + } |
| 32 | + el.appendChild(frag) |
| 33 | + }) |
| 34 | +} |
| 35 | + |
| 36 | +window.addEventListener("load", () => { |
| 37 | + generateLevel() |
| 38 | + |
| 39 | + document.addEventListener( |
| 40 | + "mousemove", |
| 41 | + ({ buttons, clientX, clientY }: MouseEvent) => { |
| 42 | + const { clientWidth, clientHeight } = containerEl |
| 43 | + containerEl.style.setProperty( |
| 44 | + "--mouse-x", |
| 45 | + 100 - Math.floor((clientX / clientWidth) * 100) + "%" |
| 46 | + ) |
| 47 | + containerEl.style.setProperty( |
| 48 | + "--mouse-y", |
| 49 | + 100 - Math.floor((clientY / clientHeight) * 100) + "%" |
| 50 | + ) |
| 51 | + }, |
| 52 | + false |
| 53 | + ) |
| 54 | + |
| 55 | + new ResizeObserver( |
| 56 | + ([ |
| 57 | + { |
| 58 | + contentRect: { width, height }, |
| 59 | + }, |
| 60 | + ]) => { |
| 61 | + const minWidth = Math.floor( |
| 62 | + Math.min(width / level.width, height / level.height) |
| 63 | + ) |
| 64 | + levelEl.style.setProperty( |
| 65 | + "--square-length", |
| 66 | + Math.floor((minWidth / level.depth) * 1.5) + "px" |
| 67 | + ) |
| 68 | + } |
| 69 | + ).observe(containerEl) |
| 70 | +}) |
0 commit comments