ztimson/navi
1
0
Fork 0
generated from ztimson/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed minor prod issues
All checks were successful
Build and publish / Build Container (push) Successful in 1m27s
Details

Browse Source
This commit is contained in:
Zakary Timson
2026-03-01 00:03:45 -05:00
parent 4735968612
commit aa79b21a5f
5 changed files with 134 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@@ -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 @@
</style>
</head>
<body>
<div id="game"></div>
<jukebox-component id="jukebox"></jukebox-component>
<llm-component id="llm"></llm-component>

144
public/jukebox.js
View File

@@ -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 = `
<style>
:host { display: block; }
.audio-controls {
position: fixed;
display: flex;
top: 20px;
right: 20px;
background: var(--dialogue-header-bg, #ffffff);
border: 3px solid var(--dialogue-border, #000);
border-radius: 8px;
padding: 12px;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
min-width: 200px;
#simple-mute-btn {
position: fixed;
top: 20px;
right: 20px;
}
.track-info {
display: flex;
align-items: center;
background: var(--dialogue-bg, #8b5cf6);
color: var(--dialogue-text, #ffffff);
padding: 8px;
border-radius: 4px;
margin: 0 8px;
overflow: hidden;
height: 24px;
width: 120px;
position: relative;
.audio-controls {
position: fixed;
display: flex;
top: 20px;
right: 20px;
background: var(--dialogue-header-bg, #ffffff);
border: 3px solid var(--dialogue-border, #000);
border-radius: 8px;
padding: 12px;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
min-width: 200px;
}
.track-name {
white-space: nowrap;
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
font-weight: bold;
font-size: 14px;
.track-info {
display: flex;
align-items: center;
background: var(--dialogue-bg, #8b5cf6);
color: var(--dialogue-text, #ffffff);
padding: 8px;
border-radius: 4px;
margin: 0 8px;
overflow: hidden;
height: 24px;
width: 120px;
position: relative;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
.track-name {
white-space: nowrap;
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
font-weight: bold;
font-size: 14px;
}
.controls-row {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.control-btn {
width: 40px;
height: 40px;
background: var(--button-bg, #6366f1);
border: 2px solid var(--dialogue-border, #000);
border-radius: 6px;
cursor: pointer;
font-size: 20px;
box-shadow: 0 3px 0 var(--button-shadow, #4338ca);
transition: transform 0.1s;
display: flex;
align-items: center;
justify-content: center;
.controls-row {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
}
.control-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--button-shadow, #4338ca);
.control-btn {
width: 40px;
height: 40px;
background: var(--button-bg, #6366f1);
border: 2px solid var(--dialogue-border, #000);
border-radius: 6px;
font-size: 20px;
box-shadow: 0 3px 0 var(--button-shadow, #4338ca);
transition: transform 0.1s;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--button-shadow, #4338ca);
.control-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--button-shadow, #4338ca);
}
.control-btn svg {
width: 24px;
height: 24px;
fill: #fff;
.control-btn:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--button-shadow, #4338ca);
}
.control-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
.hidden { display: none; }
</style>
<button class="control-btn" id="simple-mute-btn">
<svg viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
</svg>
</button>
<div class="audio-controls hidden" id="playlist-controls">
<div class="controls-row">
<button class="control-btn" id="prev-btn">
@@ -144,7 +143,6 @@ class JukeboxComponent extends HTMLElement {
</div>
</div>
`;
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;

122
public/llm.js
View File

@@ -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;
}
</style>
<div id="dialogue-box" class="minimized">
<div class="dialogue-content">
<div class="dialogue-header" id="dialogue-header">

6
public/world.js
View File

@@ -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);

5
worlds/theme.json
View File

@@ -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",