Jocaru/echoes-of-the-ash
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Implement Inventory Grid View and GameButton

Browse Source
This commit is contained in:
Joan
2026-02-07 22:00:14 +01:00
parent dcfc91b82b
commit eb75ee5b33
22 changed files with 1161 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
pwa/src/components/game/InventoryModal.css
View File

@@ -104,7 +104,7 @@
.metric-fill {
height: 100%;
border-radius: var(--game-radius-sm);
clip-path: var(--game-clip-path-sm);
transition: width 0.3s ease;
}
@@ -191,7 +191,8 @@
padding: 0.75rem 1rem;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
border: 1px solid transparent;
clip-path: var(--game-clip-path-sm);
color: #a0aec0;
cursor: pointer;
transition: all 0.2s;
@@ -231,12 +232,12 @@
background: var(--game-bg-app);
}
.inventory-search-bar {
.game-search-container {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--game-bg-input);
background: var(--game-bg-input, rgba(0, 0, 0, 0.3));
border: 1px solid var(--game-border-color);
margin-bottom: 1.5rem;
color: var(--game-text-primary);
@@ -245,7 +246,12 @@
clip-path: var(--game-clip-path-sm);
}
.inventory-search-bar input {
.game-search-icon {
font-size: 1rem;
opacity: 0.7;
}
.game-search-input {
background: transparent;
border: none;
color: #fff;
@@ -254,6 +260,41 @@
outline: none;
}
/* View Toggle Button */
.inventory-view-toggle {
display: flex;
align-items: center;
border-left: 1px solid var(--game-border-color);
padding-left: 0.75rem;
margin-left: 0.5rem;
}
.view-toggle-btn {
background: transparent;
border: 1px solid transparent;
color: #a0aec0;
cursor: pointer;
font-size: 1.2rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
/* Minor radius for small button */
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.view-toggle-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.view-toggle-btn.active {
color: #63b3ed;
background: rgba(66, 153, 225, 0.15);
border-color: rgba(66, 153, 225, 0.3);
}
.inventory-items-grid {
flex: 1;
overflow-y: auto;
@@ -263,6 +304,30 @@
padding-right: 0.5rem;
}
/* Grid View Layout */
/* Grid View Layout */
.items-container.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
grid-auto-rows: max-content;
gap: 1rem;
align-content: start;
}
.items-container.list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Wrapper to handle tooltip + card relative positioning */
.inventory-grid-wrapper {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
/* Compact Item Card */
/* Compact Item Card */
.inventory-item-card.compact {
@@ -270,7 +335,7 @@
flex-direction: row;
background-color: var(--game-bg-card);
border: 1px solid var(--game-border-color);
border-radius: var(--game-radius-md);
clip-path: var(--game-clip-path);
padding: 0.75rem;
gap: 1rem;
align-items: stretch;
@@ -285,6 +350,45 @@
transform: translateY(-1px);
}
/* Base Card Style for Grid */
.inventory-item-card.grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--game-bg-card);
border: 1px solid var(--game-border-color);
clip-path: var(--game-clip-path);
padding: 0.5rem;
aspect-ratio: 1;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--game-shadow-sm);
}
.inventory-item-card.grid:hover,
.inventory-item-card.grid.active {
border-color: #63b3ed;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 10;
}
.inventory-item-card.grid.equipped {
border-color: #63b3ed;
background: rgba(66, 153, 225, 0.1);
}
/* Grid Image Area */
.item-grid-image {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.25rem;
}
.item-image-section.small {
width: 100px;
height: 100px;
@@ -294,7 +398,7 @@
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 6px;
clip-path: var(--game-clip-path-no-br);
border: 1px solid #4a5568;
margin: auto;
}
@@ -312,6 +416,11 @@
justify-content: center;
}
/* Grid Icon adjustments */
.inventory-item-card.grid .item-icon-large {
font-size: 2.5rem;
}
.item-icon-large.hidden {
display: none;
}
@@ -325,11 +434,32 @@
color: var(--game-text-primary);
font-size: 0.75rem;
padding: 2px 6px;
border-radius: var(--game-radius-sm);
clip-path: var(--game-clip-path-sm);
font-weight: bold;
box-shadow: var(--game-shadow-sm);
}
/* Position adjustment for grid view badge */
.inventory-item-card.grid .item-quantity-badge {
bottom: 2px;
right: 2px;
font-size: 0.7rem;
padding: 1px 4px;
}
.item-equipped-indicator {
position: absolute;
top: 2px;
right: 2px;
background: #4299e1;
color: #fff;
font-size: 0.65rem;
font-weight: bold;
padding: 1px 4px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.item-info-section {
flex: 1;
display: flex;
@@ -374,7 +504,7 @@
.item-tier-badge {
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px;
clip-path: var(--game-clip-path-sm);
background: #4a5568;
color: #e2e8f0;
font-weight: bold;
@@ -510,7 +640,7 @@
.stat-badge {
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
clip-path: var(--game-clip-path-sm);
border: 1px solid;
display: flex;
align-items: center;
@@ -611,7 +741,8 @@
.durability-track {
height: 0.5rem;
background-color: #374151;
border-radius: 9999px;
background-color: #374151;
clip-path: var(--game-clip-path-sm);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -661,6 +792,9 @@
letter-spacing: 0.05em;
border-bottom: 1px solid #4a5568;
margin: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.item-actions-section.bottom-right {
@@ -671,13 +805,17 @@
.action-btn {
padding: 0.4rem 0.8rem;
border: none;
border-radius: 6px;
border: 1px solid var(--game-border-color);
background: rgba(255, 255, 255, 0.05);
clip-path: var(--game-clip-path-sm);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
}
.action-btn:disabled,
@@ -730,7 +868,7 @@
gap: 2px;
background: rgba(0, 0, 0, 0.2);
padding: 2px;
border-radius: 6px;
clip-path: var(--game-clip-path-sm);
border: 1px solid rgba(245, 101, 101, 0.3);
}
@@ -740,7 +878,7 @@
border: none;
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
border-radius: 4px;
clip-path: var(--game-clip-path-sm);
}
.action-btn.drop:hover {
@@ -772,7 +910,7 @@
.item-card-equipped {
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px;
clip-path: var(--game-clip-path-sm);
background: rgba(66, 153, 225, 0.2);
color: #63b3ed;
border: 1px solid rgba(66, 153, 225, 0.4);
@@ -793,31 +931,41 @@
margin-bottom: 0.5rem;
}
.subcategory-header {
/* Tooltip Custom Content */
.item-tooltip-content {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid #4299e1;
margin: 0.5rem 0;
border-radius: 0 4px 4px 0;
min-width: 180px;
}
.subcat-icon {
font-size: 1rem;
.tooltip-header {
font-weight: 700;
font-size: 0.95rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 0.25rem;
margin-bottom: 0.25rem;
}
.subcat-label {
font-size: 0.8rem;
font-weight: 500;
.tooltip-desc {
color: #a0aec0;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.85rem;
font-style: italic;
line-height: 1.3;
}
.subcat-count {
font-size: 0.75rem;
color: #718096;
margin-left: auto;
.tooltip-stats {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: #cbd5e0;
background: rgba(0, 0, 0, 0.2);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.tooltip-stat {
font-size: 0.85rem;
font-weight: 500;
color: #e2e8f0;
}