Feat/polish-perf #13

Merged
math-pixel merged 20 commits from feat/polish-perf into develop 2026-05-31 22:11:59 +00:00
2 changed files with 43 additions and 44 deletions
Showing only changes of commit d26c676edf - Show all commits
+29 -28
View File
@@ -285,35 +285,36 @@ export function GameSettingsMenu(): React.JSX.Element | null {
</button>
))}
</div>
</section>
<section
className="game-settings-menu__section game-settings-menu__section--right"
aria-labelledby="hand-tracking-settings-heading"
>
<div className="game-settings-menu__section-title">
<Hand size={16} aria-hidden="true" />
<h3 id="hand-tracking-settings-heading">Détection des mains</h3>
</div>
<div
className="game-settings-menu__choice-group game-settings-menu__choice-group--hand-tracking"
aria-label="Mode de détection des mains"
>
{HAND_TRACKING_OPTIONS.map((option) => (
<button
key={option.source}
type="button"
className={
handTrackingSource === option.source ? "active" : undefined
}
onClick={() => handleHandTrackingSourceChange(option.source)}
aria-pressed={handTrackingSource === option.source}
>
{option.icon}
<span>{option.label}</span>
<small>{option.description}</small>
</button>
))}
<div className="game-settings-menu__subsection">
<div className="game-settings-menu__section-title">
<Hand size={16} aria-hidden="true" />
<h3 id="hand-tracking-settings-heading">Détection des mains</h3>
</div>
<div
className="game-settings-menu__choice-group game-settings-menu__choice-group--hand-tracking"
aria-labelledby="hand-tracking-settings-heading"
>
{HAND_TRACKING_OPTIONS.map((option) => (
<button
key={option.source}
type="button"
className={
handTrackingSource === option.source
? "active"
: undefined
}
onClick={() =>
handleHandTrackingSourceChange(option.source)
}
aria-pressed={handTrackingSource === option.source}
>
{option.icon}
<span>{option.label}</span>
<small>{option.description}</small>
</button>
))}
</div>
</div>
</section>
</div>
+14 -16
View File
@@ -1219,12 +1219,10 @@ canvas {
display: grid;
place-items: center;
padding: clamp(18px, 4vw, 42px);
background:
linear-gradient(180deg, rgba(4, 10, 18, 0.72), rgba(2, 6, 12, 0.9)),
rgba(0, 0, 0, 0.82);
background: rgba(2, 8, 14, 0.28);
color: #ffffff;
pointer-events: auto;
backdrop-filter: blur(14px);
backdrop-filter: blur(8px) saturate(1.05);
}
.game-settings-menu__panel {
@@ -1236,12 +1234,13 @@ canvas {
border: 1px solid rgba(125, 211, 252, 0.38);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(8, 20, 34, 0.98), rgba(3, 8, 14, 0.99)),
rgba(4, 8, 12, 0.99);
linear-gradient(180deg, rgba(8, 20, 34, 0.84), rgba(3, 8, 14, 0.78)),
rgba(4, 8, 12, 0.74);
box-shadow:
0 28px 90px rgba(0, 0, 0, 0.58),
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 34px rgba(56, 189, 248, 0.16);
backdrop-filter: blur(18px) saturate(1.12);
scrollbar-width: thin;
scrollbar-color: rgba(125, 211, 252, 0.55) transparent;
}
@@ -1327,17 +1326,13 @@ canvas {
padding: 14px;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 8px;
background: rgba(5, 14, 24, 0.78);
background: rgba(5, 14, 24, 0.58);
}
.game-settings-menu__section--wide {
grid-column: 1 / -1;
}
.game-settings-menu__section--right {
grid-column: 2;
}
.game-settings-menu__section-title {
display: flex;
align-items: center;
@@ -1345,6 +1340,13 @@ canvas {
color: #7dd3fc;
}
.game-settings-menu__subsection {
display: grid;
gap: 10px;
padding-top: 10px;
border-top: 1px solid rgba(125, 211, 252, 0.16);
}
.game-settings-menu__section h3 {
margin: 0;
color: #dff7ff;
@@ -1422,7 +1424,7 @@ canvas {
padding: 11px 12px;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 8px;
background: rgba(6, 18, 30, 0.84);
background: rgba(6, 18, 30, 0.7);
color: #edfaff;
cursor: pointer;
font-size: 0.88rem;
@@ -1517,10 +1519,6 @@ canvas {
.game-settings-menu__choice-group--presets {
grid-template-columns: 1fr;
}
.game-settings-menu__section--right {
grid-column: auto;
}
}
/* Debug overlay panels */