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