feat: update inventory frontend and services to current production state
This commit is contained in:
erik
parent
7050cfb8b7
commit
fc557ab1d5
4 changed files with 1321 additions and 307 deletions
546
static/style.css
546
static/style.css
|
|
@ -709,13 +709,15 @@ body.noselect, body.noselect * {
|
|||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------- inventory window styling ----------------------------- */
|
||||
/* ---------- inventory window styling (AC Layout) ----------------------------- */
|
||||
.inventory-content {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
background: var(--card);
|
||||
color: var(--text);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: none;
|
||||
color: var(--ac-text);
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.inventory-placeholder {
|
||||
|
|
@ -733,15 +735,18 @@ body.noselect, body.noselect * {
|
|||
position: fixed;
|
||||
top: 100px;
|
||||
left: 400px;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background: var(--card);
|
||||
border: 1px solid #555;
|
||||
border-radius: 8px;
|
||||
width: 390px;
|
||||
height: 520px;
|
||||
background: rgba(20, 20, 20, 0.92);
|
||||
backdrop-filter: blur(2px);
|
||||
border: 2px solid var(--ac-gold);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: inset 0 0 10px #000, 0 4px 15px rgba(0, 0, 0, 0.8);
|
||||
z-index: 1000;
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inventory-loading {
|
||||
|
|
@ -750,37 +755,229 @@ body.noselect, body.noselect * {
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 1.1rem;
|
||||
color: #888;
|
||||
color: var(--ac-text-dim);
|
||||
}
|
||||
|
||||
/* Inventory grid layout - matches AC original */
|
||||
.inventory-grid {
|
||||
.inv-top-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 264px;
|
||||
}
|
||||
|
||||
.inv-equipment-grid {
|
||||
position: relative;
|
||||
width: 308px;
|
||||
height: 264px;
|
||||
}
|
||||
|
||||
.inv-equip-slot {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--ac-medium-stone);
|
||||
border-top: 2px solid #3d4b5f;
|
||||
border-left: 2px solid #3d4b5f;
|
||||
border-bottom: 2px solid #12181a;
|
||||
border-right: 2px solid #12181a;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inv-equip-slot.equipped {
|
||||
border: 2px solid var(--ac-cyan);
|
||||
box-shadow: 0 0 5px var(--ac-cyan), inset 0 0 5px var(--ac-cyan);
|
||||
}
|
||||
|
||||
.inv-equip-slot.empty::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url('/icons/06000133.png');
|
||||
background-size: contain;
|
||||
opacity: 0.15;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.inv-equip-slot .inventory-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inv-sidebar {
|
||||
width: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.inv-burden-bar {
|
||||
width: 16px;
|
||||
height: 40px;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid var(--ac-border-light);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.inv-burden-fill {
|
||||
width: 100%;
|
||||
background: var(--ac-green);
|
||||
height: 0%;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.inv-burden-label {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
width: 60px;
|
||||
left: -22px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: var(--ac-gold);
|
||||
}
|
||||
|
||||
.inv-pack-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.inv-pack-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.inv-pack-icon.active {
|
||||
border: 1px solid var(--ac-green);
|
||||
box-shadow: 0 0 4px var(--ac-green);
|
||||
}
|
||||
|
||||
.inv-pack-icon.active::before {
|
||||
content: "▶";
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
top: 10px;
|
||||
color: var(--ac-gold);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.inv-pack-fill-container {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: -1px;
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: #000;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.inv-pack-fill {
|
||||
height: 100%;
|
||||
background: var(--ac-green);
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.inv-pack-icon img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.inv-bottom-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
margin-right: 52px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.inv-contents-header {
|
||||
color: var(--ac-gold);
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--ac-border-light);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.inv-item-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 36px);
|
||||
gap: 0px;
|
||||
padding: 8px;
|
||||
background:
|
||||
linear-gradient(90deg, #333 1px, transparent 1px),
|
||||
linear-gradient(180deg, #333 1px, transparent 1px),
|
||||
#111;
|
||||
background-size: 36px 36px;
|
||||
max-height: 450px;
|
||||
grid-template-columns: repeat(6, 36px);
|
||||
grid-auto-rows: 36px;
|
||||
gap: 2px;
|
||||
background: var(--ac-black);
|
||||
padding: 4px;
|
||||
border: 1px solid var(--ac-border-light);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #444;
|
||||
min-height: 0;
|
||||
align-content: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
/* Individual inventory slots - no borders like AC original */
|
||||
.inv-item-grid::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
.inv-item-grid::-webkit-scrollbar-track {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.inv-item-grid::-webkit-scrollbar-thumb {
|
||||
background: #0022cc;
|
||||
border-top: 2px solid var(--ac-gold);
|
||||
border-bottom: 2px solid var(--ac-gold);
|
||||
}
|
||||
|
||||
.inv-item-slot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #222;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inv-item-slot.occupied {
|
||||
background: linear-gradient(135deg, #3d007a 0%, #1a0033 100%);
|
||||
border: 1px solid #4a148c;
|
||||
}
|
||||
|
||||
/* Base slot styling used by createInventorySlot */
|
||||
.inventory-slot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -794,14 +991,11 @@ body.noselect, body.noselect * {
|
|||
height: 36px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
/* Improve icon appearance - make background match slot */
|
||||
border: none;
|
||||
outline: none;
|
||||
background: #1a1a1a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Icon compositing for overlays/underlays - matches AC original */
|
||||
/* Icon compositing */
|
||||
.item-icon-composite {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
|
|
@ -827,24 +1021,13 @@ body.noselect, body.noselect * {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.icon-underlay {
|
||||
z-index: 1;
|
||||
}
|
||||
.icon-underlay { z-index: 1; }
|
||||
.icon-base { z-index: 2; }
|
||||
.icon-overlay { z-index: 3; }
|
||||
|
||||
.icon-base {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.icon-overlay {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Item count */
|
||||
/* Item count (hidden in new AC layout, kept for compatibility) */
|
||||
.inventory-count {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Inventory tooltip */
|
||||
|
|
@ -1848,3 +2031,272 @@ table.ts-allegiance td:first-child {
|
|||
border-color: #af7a30;
|
||||
}
|
||||
|
||||
|
||||
/* ==============================================
|
||||
Inventory Window Visual Fixes - AC Game Match
|
||||
============================================== */
|
||||
|
||||
.inventory-window,
|
||||
.inventory-window * {
|
||||
font-family: "Times New Roman", Times, serif !important;
|
||||
text-shadow: 1px 1px 0 #000 !important;
|
||||
}
|
||||
|
||||
.inventory-window .chat-header {
|
||||
background: #0e0c08 !important;
|
||||
border-bottom: 1px solid #8a7a44 !important;
|
||||
color: #d4af37 !important;
|
||||
padding: 4px 6px !important;
|
||||
box-shadow: none !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: bold !important;
|
||||
height: 22px !important;
|
||||
box-sizing: border-box !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.inventory-window .window-content {
|
||||
background: linear-gradient(180deg, #1a1814 0%, #0e0c0a 100%) !important;
|
||||
border: 2px solid #8a7a44 !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
.inv-equipment-grid {
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(30, 28, 25, 0.6) 0%, transparent 70%),
|
||||
radial-gradient(ellipse at 80% 30%, rgba(25, 23, 20, 0.4) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 50% 80%, rgba(35, 30, 25, 0.5) 0%, transparent 50%),
|
||||
linear-gradient(180deg, #0e0c0a 0%, #141210 50%, #0c0a08 100%) !important;
|
||||
}
|
||||
|
||||
.inv-equip-slot {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
border-top: 1px solid #2a2a30 !important;
|
||||
border-left: 1px solid #2a2a30 !important;
|
||||
border-bottom: 1px solid #0a0a0e !important;
|
||||
border-right: 1px solid #0a0a0e !important;
|
||||
background: #14141a !important;
|
||||
}
|
||||
|
||||
.inv-equip-slot.equipped {
|
||||
border: 1px solid #222 !important;
|
||||
background: #14141a !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Equipment slot color categories - matching real AC
|
||||
Real AC uses clearly visible colored borders AND tinted backgrounds per slot type */
|
||||
.inv-equip-slot.slot-purple {
|
||||
border: 1px solid #8040a8 !important;
|
||||
background: #2a1538 !important;
|
||||
}
|
||||
.inv-equip-slot.slot-blue {
|
||||
border: 1px solid #3060b0 !important;
|
||||
background: #141e38 !important;
|
||||
}
|
||||
.inv-equip-slot.slot-teal {
|
||||
border: 1px solid #309898 !important;
|
||||
background: #0e2828 !important;
|
||||
}
|
||||
.inv-equip-slot.slot-darkblue {
|
||||
border: 1px solid #1e3060 !important;
|
||||
background: #0e1428 !important;
|
||||
}
|
||||
/* Brighter tint when equipped (item present) */
|
||||
.inv-equip-slot.equipped.slot-purple {
|
||||
border: 1px solid #9050b8 !important;
|
||||
background: #341a44 !important;
|
||||
}
|
||||
.inv-equip-slot.equipped.slot-blue {
|
||||
border: 1px solid #4070c0 !important;
|
||||
background: #1a2844 !important;
|
||||
}
|
||||
.inv-equip-slot.equipped.slot-teal {
|
||||
border: 1px solid #40a8a8 !important;
|
||||
background: #143030 !important;
|
||||
}
|
||||
.inv-equip-slot.equipped.slot-darkblue {
|
||||
border: 1px solid #283870 !important;
|
||||
background: #141a30 !important;
|
||||
}
|
||||
|
||||
.inv-equip-slot.empty::before {
|
||||
opacity: 0.15 !important;
|
||||
filter: grayscale(100%) !important;
|
||||
}
|
||||
|
||||
.inv-item-grid {
|
||||
background: #1a1208 !important;
|
||||
gap: 2px !important;
|
||||
}
|
||||
|
||||
.inv-item-slot.occupied {
|
||||
background: #442c1e !important;
|
||||
border: 1px solid #5a3c28 !important;
|
||||
}
|
||||
|
||||
.inv-item-slot {
|
||||
background: #2a1c14 !important;
|
||||
border: 1px solid #3a2818 !important;
|
||||
}
|
||||
|
||||
.inv-contents-header {
|
||||
font-size: 10px !important;
|
||||
font-family: "Times New Roman", Times, serif !important;
|
||||
color: #ffffff !important;
|
||||
border-bottom: none !important;
|
||||
text-align: center !important;
|
||||
padding-bottom: 2px !important;
|
||||
margin-bottom: 2px !important;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.inv-sidebar {
|
||||
width: 52px !important;
|
||||
align-items: center !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.inv-pack-icon {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
border: 1px solid #1a1a1a !important;
|
||||
margin-bottom: 2px !important;
|
||||
overflow: visible !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.inv-pack-icon img {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.inv-pack-icon.active {
|
||||
border: 1px solid #8a7a44 !important;
|
||||
position: relative !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.inv-pack-icon.active::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
left: -8px !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
border-top: 6px solid transparent !important;
|
||||
border-bottom: 6px solid transparent !important;
|
||||
border-left: 7px solid #d4af37 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.inv-pack-fill-container {
|
||||
position: absolute !important;
|
||||
right: -6px !important;
|
||||
top: 0 !important;
|
||||
bottom: auto !important;
|
||||
left: auto !important;
|
||||
width: 4px !important;
|
||||
height: 32px !important;
|
||||
background: #000 !important;
|
||||
border: 1px solid #333 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
|
||||
.inv-pack-fill {
|
||||
width: 100% !important;
|
||||
background: #00ff00 !important;
|
||||
transition: height 0.3s ease !important;
|
||||
}
|
||||
|
||||
.inv-item-grid::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
.inv-item-grid::-webkit-scrollbar-track {
|
||||
background: #0e0a04;
|
||||
border: 1px solid #8a7a44;
|
||||
}
|
||||
.inv-item-grid::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #2244aa 0%, #1a3399 50%, #2244aa 100%);
|
||||
border: 1px solid #8a7a44;
|
||||
}
|
||||
.inv-item-grid::-webkit-scrollbar-button:vertical:start:decrement,
|
||||
.inv-item-grid::-webkit-scrollbar-button:vertical:end:increment {
|
||||
background: #8a2020;
|
||||
border: 1px solid #b89a30;
|
||||
height: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inv-burden-bar {
|
||||
width: 14px !important;
|
||||
height: 40px !important;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
.inv-burden-label {
|
||||
position: absolute !important;
|
||||
top: -20px !important;
|
||||
width: 60px !important;
|
||||
left: -22px !important;
|
||||
text-align: center !important;
|
||||
font-size: 9px !important;
|
||||
color: #fff !important;
|
||||
font-weight: normal !important;
|
||||
line-height: 1.1 !important;
|
||||
}
|
||||
|
||||
.inventory-count {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
font-size: 8px !important;
|
||||
color: #fff !important;
|
||||
background: #1a3399 !important;
|
||||
padding: 0 2px !important;
|
||||
line-height: 12px !important;
|
||||
min-width: 8px !important;
|
||||
text-align: center !important;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.inventory-window {
|
||||
border: 2px solid #8a7a44 !important;
|
||||
background: #0e0c08 !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
/* Custom resize grip for inventory window */
|
||||
.inv-resize-grip {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6px;
|
||||
cursor: ns-resize;
|
||||
z-index: 100;
|
||||
background: transparent;
|
||||
border-top: 1px solid #8a7a44;
|
||||
}
|
||||
|
||||
.inv-resize-grip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
border-top: 1px solid #5a4a24;
|
||||
border-bottom: 1px solid #5a4a24;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue