Mercurial
diff mrjunejune/src/index.html @ 231:09a96dcb2b4c hg-web
[merge] Join existing hg-web branch head
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 02 Aug 2026 16:50:48 -0700 |
| parents | a6d8d32a0261 |
| children | 97882baf83e7 |
line wrap: on
line diff
--- a/mrjunejune/src/index.html Sun Jan 25 10:44:04 2026 -0800 +++ b/mrjunejune/src/index.html Sun Aug 02 16:50:48 2026 -0700 @@ -29,6 +29,41 @@ margin-bottom: 0.75em; } } + + #background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 0; + } + + #game { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + cursor: default; + } + + #game.active { + pointer-events: auto; + z-index: 100; + } + + #gameUI { + position: fixed; + top: 10px; + right: 10px; + pointer-events: auto; + z-index: 101; + cursor: pointer; + } </style> </head> <body> @@ -53,10 +88,14 @@ <li><a href="/resume">Resume</a> - My professional experiences </li> <li><a href="/tools">Tools</a> - Things I made for myself </li> </ul> + <canvas id="background"></canvas> + <canvas id="game"></canvas> + <canvas id="gameUI"></canvas> </main> {{/parts/footer.html}} </body> <script> + // Epi image let arr = Array.from({ length: 18 }, (_, i) => i+1); function setRandomImages() { const randomIndex = Math.floor(Math.random() * arr.length); @@ -69,4 +108,5 @@ } setRandomImages(); </script> + <script src="/public/dog-game.js"></script> </html>