diff --git a/public/index.html b/public/index.html index 90592cf..31eb28b 100644 --- a/public/index.html +++ b/public/index.html @@ -12,7 +12,7 @@ margin: 0; padding: 0; box-sizing: border-box; - cursor: url('/cursor.png'), auto !important; + cursor: url('/assets/cursor.png'), auto !important; } html, body { @@ -42,6 +42,7 @@ +
diff --git a/public/jukebox.js b/public/jukebox.js index 16937bb..90e8f57 100644 --- a/public/jukebox.js +++ b/public/jukebox.js @@ -21,17 +21,12 @@ class JukeboxComponent extends HTMLElement { } disconnectedCallback() { - // Cleanup listeners when component is removed - if (this.unsubscribeWorld) this.unsubscribeWorld(); + if(this.unsubscribeWorld) this.unsubscribeWorld(); } setupAPIListeners() { - // Listen for world loaded events to auto-load music 🎧 this.unsubscribeWorld = this.api.on('world:loaded', (data) => { - console.log('🎵 Jukebox detected world loaded:', data.theme.name); - if (data.theme?.music) { - this.loadMusic(data.theme.music, data.theme); - } + if(data.theme?.music) this.loadMusic(data.theme.music, data.theme); }); } @@ -39,86 +34,90 @@ class JukeboxComponent extends HTMLElement { this.shadowRoot.innerHTML = ` - + - + `; - this.shadowRoot.getElementById('simple-mute-btn').addEventListener('click', () => this.toggleMute()); this.shadowRoot.getElementById('mute-btn').addEventListener('click', () => this.toggleMute()); this.shadowRoot.getElementById('prev-btn').addEventListener('click', () => this.previousTrack()); @@ -155,7 +153,7 @@ class JukeboxComponent extends HTMLElement { if (!musicConfig) return; this.theme = theme; - this.isPlaylistMode = Array.isArray(musicConfig) && musicConfig.length > 1; + this.isPlaylistMode = Array.isArray(musicConfig); this.playlist = Array.isArray(musicConfig) ? musicConfig : [musicConfig]; this.currentTrackIndex = 0; diff --git a/public/llm.js b/public/llm.js index ffa2bd2..85ea7d2 100644 --- a/public/llm.js +++ b/public/llm.js @@ -34,22 +34,22 @@ class LlmComponent extends HTMLElement { ::-webkit-scrollbar { width: 12px; } - + ::-webkit-scrollbar-track { background: transparent; border: none; } - + ::-webkit-scrollbar-thumb { background: var(--dialogue-header-bg, #fff); border: 2px solid var(--dialog-border, #000); border-radius: 9px; } - + :host { display: block; } - + #dialogue-box { position: fixed; bottom: 0; @@ -62,11 +62,11 @@ class LlmComponent extends HTMLElement { transform-origin: bottom center; z-index: 1000; } - + #dialogue-box.minimized { height: 50px; } - + #dialogue-box.expanded { width: 100vw; max-width: 100vw; @@ -74,7 +74,7 @@ class LlmComponent extends HTMLElement { left: 50%; transform: translateX(-50%); } - + .dialogue-content { background: var(--dialogue-bg, #fff); border: 5px solid var(--dialogue-border, #000); @@ -87,14 +87,13 @@ class LlmComponent extends HTMLElement { max-height: 600px; height: 100%; } - + #dialogue-box.expanded .dialogue-content { max-height: 100vh; border-radius: 0; } - + .dialogue-header { - cursor: pointer; user-select: none; padding: 12px 20px; background: var(--dialogue-header-bg, #fff); @@ -105,11 +104,11 @@ class LlmComponent extends HTMLElement { justify-content: space-between; flex-shrink: 0; } - + #dialogue-box.expanded .dialogue-header { border-radius: 0; } - + .speaker-name { font-weight: bold; font-size: 16px; @@ -117,7 +116,7 @@ class LlmComponent extends HTMLElement { font-family: 'Courier New', monospace; pointer-events: none; } - + .expand-btn { background: var(--button-bg, #4a90e2); border: 2px solid var(--dialogue-border, #000); @@ -126,25 +125,24 @@ class LlmComponent extends HTMLElement { font-family: 'Courier New', monospace; font-weight: bold; font-size: 14px; - cursor: pointer; border-radius: 4px; box-shadow: 0 3px 0 var(--button-shadow, #2a5a9a); display: flex; align-items: center; gap: 4px; } - + .expand-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--button-shadow, #2a5a9a); } - + .expand-icon { width: 20px; height: 20px; flex-shrink: 0; } - + .message-body { padding: 20px; flex: 1; @@ -155,26 +153,26 @@ class LlmComponent extends HTMLElement { min-height: 200px; max-height: 400px; } - + #dialogue-box.expanded .message-body { max-height: none; } - + .message-wrapper { display: flex; flex-direction: column; gap: 4px; position: relative; } - + .message-wrapper.user { align-items: flex-end; } - + .message-wrapper.assistant { align-items: flex-start; } - + .message-label { font-size: 12px; font-weight: bold; @@ -183,7 +181,7 @@ class LlmComponent extends HTMLElement { opacity: 0.7; padding: 0 8px; } - + .message-bubble { max-width: 80%; padding: 12px 16px; @@ -196,17 +194,17 @@ class LlmComponent extends HTMLElement { box-shadow: 2px 2px 0 rgba(0,0,0,0.2); user-select: text; } - + .message-wrapper.user .message-bubble { background: var(--button-bg, #4a90e2); color: var(--button-text, #fff); } - + .message-wrapper.assistant .message-bubble { background: var(--dialogue-bg, #fff); color: var(--dialogue-text, #000); } - + .message-timestamp { font-size: 10px; opacity: 0.6; @@ -214,7 +212,7 @@ class LlmComponent extends HTMLElement { font-family: 'Courier New', monospace; color: var(--dialogue-text, #000); } - + .empty-state { display: flex; align-items: center; @@ -224,7 +222,7 @@ class LlmComponent extends HTMLElement { font-weight: bold; color: var(--dialogue-text, #000); font-family: 'Courier New', monospace; - text-shadow: + text-shadow: 3px 3px 0 rgba(74, 144, 226, 0.3), -1px -1px 0 rgba(0,0,0,0.2); letter-spacing: 3px; @@ -235,18 +233,18 @@ class LlmComponent extends HTMLElement { -webkit-background-clip: text; padding: 20px; } - + @keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } - + @keyframes glowPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } - + .text-cursor { display: inline-block; width: 8px; @@ -256,12 +254,12 @@ class LlmComponent extends HTMLElement { animation: blink 0.5s infinite; vertical-align: text-bottom; } - + @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } - + .tool-call { display: inline-block; background: var(--button-bg, #000); @@ -274,12 +272,12 @@ class LlmComponent extends HTMLElement { font-family: 'Courier New', monospace; animation: toolPulse 0.5s ease-in-out; } - + @keyframes toolPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } - + .file-badge { display: flex; align-items: center; @@ -293,7 +291,7 @@ class LlmComponent extends HTMLElement { font-family: 'Courier New', monospace; font-weight: bold; } - + .message-files { display: flex; flex-wrap: wrap; @@ -301,15 +299,15 @@ class LlmComponent extends HTMLElement { padding: 0 8px; margin-bottom: 6px; } - + .message-wrapper.user .message-files { justify-content: flex-end; } - + .message-wrapper.assistant .message-files { justify-content: flex-start; } - + .attached-files { padding: 8px 12px; border-top: 3px solid var(--dialogue-border, #000); @@ -319,11 +317,11 @@ class LlmComponent extends HTMLElement { gap: 6px; flex-shrink: 0; } - + .attached-files.has-files { display: flex; } - + .attached-file { display: inline-flex; align-items: center; @@ -335,40 +333,39 @@ class LlmComponent extends HTMLElement { font-size: 13px; gap: 8px; } - + .attached-file .file-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - + .attached-file .remove-file { background: #e74c3c; border: none; color: #fff; - cursor: pointer; padding: 2px 6px; border-radius: 3px; font-size: 12px; font-weight: bold; } - + .attached-file .remove-file:hover { background: #c0392b; } - + .dialogue-input { padding: 12px 20px; border-top: 3px solid var(--dialogue-border, #000); background: var(--dialogue-input-bg, #f0f0f0); flex-shrink: 0; } - + .input-wrapper { margin-bottom: 8px; } - + .dialogue-input textarea { width: 100%; background: var(--dialogue-bg, #fff); @@ -384,22 +381,22 @@ class LlmComponent extends HTMLElement { overflow-y: auto; box-sizing: border-box; } - + .dialogue-input textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--button-bg, #4a90e2); } - + .dialogue-input textarea:disabled { opacity: 0.5; cursor: not-allowed; } - + .button-row { display: flex; gap: 8px; } - + .clear-btn, .attach-btn, .dialogue-send-btn { background: var(--button-bg, #4a90e2); border: 3px solid var(--dialogue-border, #000); @@ -408,57 +405,56 @@ class LlmComponent extends HTMLElement { font-family: 'Courier New', monospace; font-weight: bold; font-size: 14px; - cursor: pointer; border-radius: 4px; box-shadow: 0 3px 0 var(--button-shadow, #2a5a9a); transition: background 0.2s; white-space: nowrap; flex: 1; } - + .clear-btn { background: #e74c3c; box-shadow: 0 3px 0 #c0392b; } - + .clear-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c0392b; } - + .attach-btn:active, .dialogue-send-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--button-shadow, #2a5a9a); } - + .attach-btn:disabled, .dialogue-send-btn:disabled, .clear-btn:disabled { opacity: 0.5; cursor: not-allowed; } - + .dialogue-send-btn.stop { background: #e74c3c; box-shadow: 0 3px 0 #c0392b; } - + .dialogue-send-btn.stop:active { box-shadow: 0 1px 0 #c0392b; } - + .dialogue-send-btn.skip { background: #f39c12; box-shadow: 0 3px 0 #d68910; } - + .dialogue-send-btn.skip:active { box-shadow: 0 1px 0 #d68910; } - + #file-input { display: none; } - +
diff --git a/public/world.js b/public/world.js index 970303e..f48aaab 100644 --- a/public/world.js +++ b/public/world.js @@ -190,7 +190,6 @@ class Game { this.otherPlayers = new Map(); this.isMoving = false; this.dialogue = null; - this.audioManager = null; this.keys = {}; // Use global singleton 🌍 @@ -215,7 +214,6 @@ class Game { }, onCurrentPlayers: (players) => { - console.log('👥 Current players:', players); players.forEach(player => { if (player.socketId !== this.api.worldSocket.id) { this.addOtherPlayer(player); @@ -224,7 +222,6 @@ class Game { }, onPlayerJoined: (player) => { - console.log('👋 Player joined:', player.name); this.addOtherPlayer(player); }, @@ -236,7 +233,6 @@ class Game { }, onPlayerLeft: (data) => { - console.log('👋 Player left:', data.socketId); const sprite = this.otherPlayers.get(data.socketId); if (sprite) { this.app.stage.removeChild(sprite); @@ -297,7 +293,7 @@ class Game { resolution: window.devicePixelRatio || 1, autoDensity: true }); - document.body.appendChild(this.app.view); + document.getElementById('game').appendChild(this.app.view); const tiles = new PIXI.Container(); this.app.stage.addChild(tiles); diff --git a/worlds/theme.json b/worlds/theme.json index 24feb9b..b93a0b8 100644 --- a/worlds/theme.json +++ b/worlds/theme.json @@ -6,10 +6,7 @@ "image": "/assets/background.jpg", "style": "cover" }, - "music": [ - "/assets/mystery_acorns.mp3", - "/assets/crunchy_leaves.mp3" - ], + "music": "/assets/music.mp3", "colors": { "tileTop": "#7a5a8c", "tileSide": "#4a2d5a",