feat: Implement Inventory Grid View and GameButton

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

View File

@@ -32,7 +32,7 @@
background: linear-gradient(135deg, rgba(225, 29, 72, 0.1) 0%, transparent 100%);
border: 1px solid rgba(225, 29, 72, 0.3);
/* Angled Cut */
clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
clip-path: var(--game-clip-path);
border-left: 3px solid var(--game-color-primary);
position: relative;
}
@@ -85,7 +85,7 @@
justify-content: center;
gap: 0.5rem;
/* Tech Shape: Angled top-left and bottom-right */
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
clip-path: var(--game-clip-path);
position: relative;
}
@@ -132,7 +132,7 @@
padding: 0 12px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(76, 209, 55, 0.3);
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
clip-path: var(--game-clip-path-sm);
font-size: 0.8rem;
color: #aaddaa;
font-family: monospace;
@@ -177,7 +177,7 @@
font-weight: 700;
transition: all 0.2s;
/* Same tech shape */
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
clip-path: var(--game-clip-path-sm);
text-transform: uppercase;
display: flex;
align-items: center;
@@ -209,7 +209,7 @@
font-size: 1rem;
transition: all 0.2s;
/* Angled corners */
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
clip-path: var(--game-clip-path-sm);
}
.header-icon-btn:hover {
@@ -223,7 +223,7 @@
.game-header .language-btn {
height: 36px;
border-radius: 0;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
clip-path: var(--game-clip-path-sm);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.15);
}
@@ -237,7 +237,7 @@
border-radius: 0;
border: 1px solid var(--game-border-color);
background: rgba(10, 10, 15, 0.95);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
clip-path: var(--game-clip-path);
}
/* Separator line */