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