index.html (3799B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Work — KGames</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9 <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap" rel="stylesheet"> 10 <style> 11 * { margin: 0; padding: 0; box-sizing: border-box; } 12 html, body { height: 100%; overflow: hidden; } 13 body { 14 background: #E8E8EC; 15 font-family: 'Fredoka', sans-serif; 16 display: flex; 17 flex-direction: column; 18 } 19 nav { width: 100%; padding: 0.6rem 1.25rem; flex-shrink: 0; } 20 nav a { color: #667; text-decoration: none; font-size: 1rem; } 21 nav a:hover { color: #223; } 22 #game-container { flex: 1; width: 100%; } 23 24 #audio-controls { 25 position: fixed; 26 top: 0.45rem; 27 right: 1rem; 28 display: flex; 29 gap: 0.4rem; 30 z-index: 10; 31 } 32 #audio-controls button { 33 background: rgba(0,0,0,0.05); 34 border: 1px solid rgba(0,0,0,0.15); 35 color: #556; 36 font-family: 'Fredoka', sans-serif; 37 font-size: 0.85rem; 38 padding: 0.25rem 0.65rem; 39 border-radius: 6px; 40 cursor: pointer; 41 transition: background 0.15s, color 0.15s; 42 user-select: none; 43 } 44 #audio-controls button:hover { background: rgba(0,0,0,0.1); color: #112; } 45 #story-credits { 46 flex-shrink: 0; 47 padding: 0.4rem 1.25rem 0.6rem; 48 font-size: 0.72rem; 49 line-height: 1.35; 50 color: #8a8a97; 51 text-align: center; 52 } 53 #story-credits[hidden] { display: none; } 54 #story-credits a { color: #667; text-decoration: underline; } 55 #story-credits a:hover { color: #1D7CF2; } 56 #story-credits strong { font-weight: 600; color: #778; } 57 #audio-controls button.muted { color: #aab; border-color: rgba(0,0,0,0.07); } 58 </style> 59 </head> 60 <body> 61 <nav><a href="../../index.html">← Back to KGames</a></nav> 62 <div id="audio-controls"> 63 <button id="btn-sfx">Sound: ON</button> 64 </div> 65 <div id="game-container"></div> 66 <footer id="story-credits" hidden> 67 <strong>For grown-ups:</strong> this story is adapted from the public domain original — 68 <span id="story-credits-list"></span> 69 </footer> 70 <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script> 71 <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script> 72 <script src="../../js/shared/game-shared.js"></script> 73 <script src="lib.js?v=2"></script> 74 <script src="game.js?v=2"></script> 75 <script src="../../js/shared/touch-controls.js"></script> 76 <script> 77 // Credit for the story currently being played — shown only in Stories mode, 78 // and only for that one story. Called by game.js; `null` hides the footer. 79 window.KGamesShowStoryCredit = function (source) { 80 const el = document.getElementById('story-credits'); 81 const list = document.getElementById('story-credits-list'); 82 if (!el || !list) return; 83 if (!source) { 84 el.hidden = true; 85 list.textContent = ''; 86 } else { 87 const a = document.createElement('a'); 88 a.href = source.url; 89 a.target = '_blank'; 90 a.rel = 'noopener'; 91 a.textContent = source.title; 92 list.innerHTML = a.outerHTML + ' by ' + source.author; 93 el.hidden = false; 94 } 95 // The footer is a flex sibling of the canvas, so showing or hiding it 96 // changes the canvas box; Phaser's RESIZE mode needs a nudge. 97 if (window.__KG_GAME__ && window.__KG_GAME__.scale) window.__KG_GAME__.scale.refresh(); 98 }; 99 </script> 100 <script>KGames.initTouchControls({ layout: 'text' });</script> 101 </body> 102 </html>