Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/mobile-ux-improvements

Browse Source
This commit is contained in:
Paperboy
2025-10-16 14:45:26 +11:00
committed by GitHub
parent 58b7ea4d21 4145817a93
commit 54ead0ed0c
2 changed files with 125 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+8 -12
View File
@@ -2745,20 +2745,16 @@ function renderUserStats() {
const gradient = `linear-gradient(to right, ${extensionSettings.statBarColorLow}, ${extensionSettings.statBarColorHigh})`; const gradient = `linear-gradient(to right, ${extensionSettings.statBarColorLow}, ${extensionSettings.statBarColorHigh})`;
const html = ` const html = `
<div class="rpg-stats-header">
<div class="rpg-stats-header-left">
<img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.src='img/user-default.png'" />
<div class="rpg-stats-title">${userName}</div>
</div>
<div class="rpg-inventory-box">
<div class="rpg-inventory-items rpg-editable" contenteditable="true" data-field="inventory" title="Click to edit">
${stats.inventory || 'None'}
</div>
</div>
</div>
<div class="rpg-stats-content"> <div class="rpg-stats-content">
<div class="rpg-stats-left"> <div class="rpg-stats-left">
<div style="display: flex; gap: clamp(4px, 0.8vh, 8px); align-items: center; flex-shrink: 0;">
<img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.src='img/user-default.png'" />
<div class="rpg-inventory-box">
<div class="rpg-inventory-items rpg-editable" contenteditable="true" data-field="inventory" title="Click to edit">
${stats.inventory || 'None'}
</div>
</div>
</div>
<div class="rpg-stats-grid"> <div class="rpg-stats-grid">
<div class="rpg-stat-row"> <div class="rpg-stat-row">
<span class="rpg-stat-label">Health:</span> <span class="rpg-stat-label">Health:</span>
style.css
+117 -57
View File
@@ -566,30 +566,24 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
overflow-x: hidden; overflow-x: hidden;
} }
/* Hide the stats header - we'll integrate portrait/inventory into stats content */
.rpg-stats-header { .rpg-stats-header {
display: flex; display: none;
align-items: stretch;
justify-content: space-between;
gap: clamp(6px, 1.2vh, 12px);
margin: 0 !important;
margin-bottom: 0 !important;
flex-shrink: 0;
} }
.rpg-stats-header-left { .rpg-stats-header-left {
display: flex; display: none;
align-items: center;
gap: clamp(4px, 1vh, 8px);
} }
.rpg-user-portrait { .rpg-user-portrait {
width: clamp(24px, 4vh, 45px); width: clamp(24px, 4vh, 32px);
height: clamp(24px, 4vh, 45px); height: clamp(24px, 4vh, 32px);
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--rpg-highlight); border: 2px solid var(--rpg-highlight);
box-shadow: 0 0 10px var(--rpg-highlight); box-shadow: 0 0 8px var(--rpg-highlight);
object-fit: cover; object-fit: cover;
transition: transform 0.3s ease; transition: transform 0.3s ease;
flex-shrink: 0;
} }
.rpg-user-portrait:hover { .rpg-user-portrait:hover {
@@ -597,11 +591,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-stats-title { .rpg-stats-title {
font-size: clamp(8px, 1.6vh, 12px); display: none;
font-weight: bold;
color: var(--rpg-highlight);
text-shadow: 0 0 8px var(--rpg-highlight);
line-height: 1.2;
} }
/* Inventory Box - Styled like a treasure chest */ /* Inventory Box - Styled like a treasure chest */
@@ -612,11 +602,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
position: relative; position: relative;
background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%); background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%);
border: 2px solid var(--rpg-highlight); border: 2px solid var(--rpg-highlight);
border-radius: clamp(4px, 0.8vh, 8px); border-radius: clamp(4px, 0.8vh, 6px);
padding: clamp(4px, 0.8vh, 8px); padding: clamp(3px, 0.6vh, 5px);
max-width: 12.5rem; max-height: clamp(35px, 5vh, 45px);
max-height: clamp(60px, 8vh, 80px); min-height: clamp(28px, 4vh, 35px);
min-height: clamp(50px, 6vh, 60px);
box-shadow: box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.1),
inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.3),
@@ -650,12 +639,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-inventory-items { .rpg-inventory-items {
font-size: clamp(6px, 1.1vh, 9px); font-size: clamp(5px, 1vh, 7px);
color: var(--rpg-text); color: var(--rpg-text);
line-height: 1.4; line-height: 1.3;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
padding: clamp(2px, 0.4vh, 4px); padding: clamp(1px, 0.3vh, 3px);
text-align: left; text-align: left;
} }
@@ -687,15 +676,29 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
overflow-x: hidden; overflow-x: hidden;
} }
/* Stats Left - Bars and mood */ /* Stats Left - Portrait, Inventory, Bars and mood */
.rpg-stats-left { .rpg-stats-left {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: clamp(2px, 0.4vh, 4px); gap: clamp(3px, 0.6vh, 6px);
min-height: 0; min-height: 0;
} }
/* Portrait and Inventory row at top of stats-left */
.rpg-stats-left > .rpg-user-portrait,
.rpg-stats-left > .rpg-inventory-box {
flex-shrink: 0;
}
.rpg-stats-left > .rpg-user-portrait {
align-self: flex-start;
}
.rpg-stats-left > .rpg-inventory-box {
width: 100%;
}
/* Stats Right - Attributes */ /* Stats Right - Attributes */
.rpg-stats-right { .rpg-stats-right {
flex: 1; flex: 1;
@@ -707,22 +710,43 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-stats-grid { .rpg-stats-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: clamp(2px, 0.4vh, 4px); gap: clamp(3px, 0.5vh, 6px);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto;
overflow-x: hidden;
justify-content: space-evenly;
}
.rpg-stats-grid::-webkit-scrollbar {
width: 0.188rem;
}
.rpg-stats-grid::-webkit-scrollbar-track {
background: var(--rpg-bg);
border-radius: 2px;
}
.rpg-stats-grid::-webkit-scrollbar-thumb {
background: var(--rpg-highlight);
border-radius: 2px;
}
.rpg-stats-grid::-webkit-scrollbar-thumb:hover {
background: var(--rpg-text);
} }
.rpg-stat-row { .rpg-stat-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25em; gap: 0.25em;
flex: 1; flex: 0 0 auto;
min-height: 0; min-height: clamp(12px, 1.8vh, 16px);
} }
.rpg-stat-label { .rpg-stat-label {
min-width: 4.062rem; min-width: 4.062rem;
font-size: clamp(7px, 1.4vh, 9px); font-size: clamp(7px, 1.1vh, 8px);
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
color: var(--rpg-text); color: var(--rpg-text);
@@ -732,9 +756,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-stat-bar { .rpg-stat-bar {
flex: 1; flex: 1;
height: 0.75rem; height: clamp(9px, 1.3vh, 11px);
min-height: 0.5rem; min-height: 9px;
max-height: 1rem;
position: relative; position: relative;
border-radius: 0.375em; border-radius: 0.375em;
overflow: hidden; overflow: hidden;
@@ -753,21 +776,56 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-stat-value { .rpg-stat-value {
color: #fff; color: #fff;
font-size: 0.562rem; font-size: clamp(7px, 1.1vh, 8px);
font-weight: bold; font-weight: bold;
min-width: 1.875rem; min-width: 1.875rem;
text-align: right; text-align: right;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
} }
/* Compact layout for high zoom / small viewports */
@media (max-height: 750px), (max-width: 500px) {
.rpg-stat-row {
position: relative;
min-height: clamp(16px, 2.5vh, 20px);
}
.rpg-stat-label {
position: absolute;
left: 0.5em;
top: 50%;
transform: translateY(-50%);
z-index: 2;
min-width: auto;
font-size: clamp(7px, 1.1vh, 9px);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.rpg-stat-bar {
width: 100%;
height: 100%;
min-height: clamp(16px, 2.5vh, 20px);
}
.rpg-stat-value {
position: absolute;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
z-index: 2;
min-width: auto;
font-size: clamp(7px, 1.1vh, 9px);
}
}
.rpg-mood { .rpg-mood {
margin: 0 !important; margin: 0 !important;
margin-top: 0 !important; margin-top: clamp(2px, 0.4vh, 4px) !important;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.375em; gap: 0.375em;
font-size: 0.562rem; font-size: clamp(6px, 1vh, 8px);
padding: 0.25em 0.375em; padding: clamp(4px, 0.6vh, 6px) 0.375em;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: 0.25em; border-radius: 0.25em;
border: 1px solid var(--rpg-border); border: 1px solid var(--rpg-border);
@@ -775,7 +833,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-mood-emoji { .rpg-mood-emoji {
font-size: 1rem; font-size: clamp(12px, 1.8vh, 16px);
flex-shrink: 0; flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
} }
@@ -810,7 +868,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-classic-stats-grid { .rpg-classic-stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: clamp(3px, 0.5vh, 5px); gap: clamp(2px, 0.4vh, 4px);
flex: 1; flex: 1;
align-content: stretch; align-content: stretch;
min-height: 0; min-height: 0;
@@ -821,8 +879,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
gap: clamp(1px, 0.2vh, 2px); gap: clamp(1px, 0.15vh, 2px);
padding: clamp(4px, 0.6vh, 6px); padding: clamp(3px, 0.5vh, 5px);
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: 0.25em; border-radius: 0.25em;
border: 1px solid var(--rpg-border); border: 1px solid var(--rpg-border);
@@ -832,7 +890,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-classic-stat-label { .rpg-classic-stat-label {
font-size: clamp(7px, 0.9vh, 8px); font-size: clamp(6px, 0.8vh, 7px);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.006em; letter-spacing: 0.006em;
@@ -842,7 +900,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-classic-stat-value { .rpg-classic-stat-value {
font-size: clamp(11px, 1.4vh, 14px); font-size: clamp(10px, 1.2vh, 12px);
font-weight: bold; font-weight: bold;
color: var(--rpg-highlight); color: var(--rpg-highlight);
text-align: center; text-align: center;
@@ -938,21 +996,23 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
min-height: 0; min-height: 0;
} }
/* Row 1: 4 equal-width widgets */ /* Row 1: 4 equal-width widgets - more square aspect ratio */
.rpg-dashboard-row-1 { .rpg-dashboard-row-1 {
flex: 1; flex: 0 0 auto;
min-height: 0; min-height: 0;
height: clamp(60px, 10vh, 80px);
} }
.rpg-dashboard-row-1 .rpg-dashboard-widget { .rpg-dashboard-row-1 .rpg-dashboard-widget {
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
height: 100%; height: 100%;
aspect-ratio: 1 / 1;
} }
/* Row 2: Full-width location */ /* Row 2: Full-width location */
.rpg-dashboard-row-2 { .rpg-dashboard-row-2 {
flex: 1; flex: 0 0 auto;
min-height: 0; min-height: 0;
} }
@@ -993,7 +1053,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-calendar-top { .rpg-calendar-top {
background: var(--rpg-highlight); background: var(--rpg-highlight);
color: var(--rpg-bg); color: var(--rpg-bg);
font-size: clamp(6px, 1.2vh, 8px); font-size: clamp(5px, 1vh, 7px);
font-weight: bold; font-weight: bold;
padding: 0.125em 0.375em; padding: 0.125em 0.375em;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
@@ -1004,9 +1064,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-calendar-day { .rpg-calendar-day {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: var(--rpg-text); color: var(--rpg-text);
font-size: clamp(8px, 1.5vw, 14px); font-size: clamp(14px, 2.5vh, 20px);
font-weight: bold; font-weight: bold;
padding: 0.375em; padding: 0.25em;
width: 100%; width: 100%;
text-align: center; text-align: center;
border: 2px solid var(--rpg-highlight); border: 2px solid var(--rpg-highlight);
@@ -1018,7 +1078,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-calendar-year { .rpg-calendar-year {
font-size: 0.438rem; font-size: clamp(5px, 0.8vh, 6px);
color: var(--rpg-text); color: var(--rpg-text);
opacity: 0.7; opacity: 0.7;
margin-top: 0.062em; margin-top: 0.062em;
@@ -1026,12 +1086,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Weather Widget Icon */ /* Weather Widget Icon */
.rpg-weather-icon { .rpg-weather-icon {
font-size: clamp(16px, 3vw, 32px); font-size: clamp(20px, 4vh, 28px);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
} }
.rpg-weather-forecast { .rpg-weather-forecast {
font-size: 0.438rem; font-size: clamp(5px, 0.9vh, 7px);
text-align: center; text-align: center;
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
@@ -1092,7 +1152,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-temp-value { .rpg-temp-value {
font-size: clamp(7px, 1.5vh, 9px); font-size: clamp(6px, 1.2vh, 8px);
font-weight: bold; font-weight: bold;
color: var(--rpg-text); color: var(--rpg-text);
text-align: center; text-align: center;
@@ -1155,7 +1215,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-time-value { .rpg-time-value {
font-size: 0.5rem; font-size: clamp(6px, 1.1vh, 8px);
font-weight: bold; font-weight: bold;
color: var(--rpg-text); color: var(--rpg-text);
} }
@@ -1197,7 +1257,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-location-text { .rpg-location-text {
font-size: clamp(7px, 1.4vh, 9px); font-size: clamp(7px, 1.2vh, 8px);
font-weight: bold; font-weight: bold;
color: var(--rpg-text); color: var(--rpg-text);
text-align: center; text-align: center;