fix: 修复打砖块游戏碰撞穿透bug,添加渐进提速机制
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { DEFAULT_PRESSURE_RANGE_MAX, DEFAULT_PRESSURE_RANGE_MIN } from "$lib/config/pressure-range";
|
||||
import type { HudColorMapOption, PressureColorMapPreset } from "$lib/types/hud";
|
||||
|
||||
export let title = "";
|
||||
export let hint = "";
|
||||
@@ -11,15 +10,12 @@
|
||||
export let rangeLabel = "";
|
||||
export let rangeMinLabel = "";
|
||||
export let rangeMaxLabel = "";
|
||||
export let colorMapLabel = "";
|
||||
export let resetLabel = "";
|
||||
export let applyLiveHint = "";
|
||||
export let matrixRows = 12;
|
||||
export let matrixCols = 7;
|
||||
export let rangeMin = DEFAULT_PRESSURE_RANGE_MIN;
|
||||
export let rangeMax = DEFAULT_PRESSURE_RANGE_MAX;
|
||||
export let colorMapPreset: PressureColorMapPreset = "emerald";
|
||||
export let colorMapOptions: HudColorMapOption[] = [];
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
close: void;
|
||||
@@ -78,24 +74,17 @@
|
||||
matrixCols = size;
|
||||
}
|
||||
|
||||
function applyColorMapPreset(id: PressureColorMapPreset): void {
|
||||
colorMapPreset = id;
|
||||
}
|
||||
|
||||
function resetDefaults(): void {
|
||||
matrixRows = 12;
|
||||
matrixCols = 7;
|
||||
rangeMin = DEFAULT_PRESSURE_RANGE_MIN;
|
||||
rangeMax = DEFAULT_PRESSURE_RANGE_MAX;
|
||||
colorMapPreset = "emerald";
|
||||
}
|
||||
|
||||
function handleSubmit(): void {
|
||||
dispatch("close");
|
||||
}
|
||||
|
||||
$: selectedColorMap = colorMapOptions.find((option) => option.id === colorMapPreset) ?? colorMapOptions[0];
|
||||
|
||||
$: {
|
||||
const nextRows = normalizeGridValue(matrixRows);
|
||||
if (nextRows !== matrixRows) {
|
||||
@@ -190,31 +179,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-section">
|
||||
<div class="section-head">
|
||||
<p class="section-title">{colorMapLabel}</p>
|
||||
<p class="section-note">{selectedColorMap?.label ?? colorMapPreset}</p>
|
||||
</div>
|
||||
|
||||
<div class="palette-row" role="group" aria-label={colorMapLabel}>
|
||||
{#each colorMapOptions as option}
|
||||
<button
|
||||
type="button"
|
||||
class="palette-btn"
|
||||
class:is-active={colorMapPreset === option.id}
|
||||
on:click={() => applyColorMapPreset(option.id)}
|
||||
>
|
||||
<span
|
||||
class="palette-preview"
|
||||
style={`--palette-stop-0: ${option.previewStops[0]}; --palette-stop-1: ${option.previewStops[1]}; --palette-stop-2: ${option.previewStops[2]};`}
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="palette-name">{option.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="config-foot">
|
||||
<p class="live-note">{applyLiveHint}</p>
|
||||
<button type="button" class="reset-btn" on:click={resetDefaults}>{resetLabel}</button>
|
||||
@@ -327,15 +291,8 @@
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.palette-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.48rem;
|
||||
}
|
||||
|
||||
.preset-btn,
|
||||
.reset-btn,
|
||||
.palette-btn {
|
||||
.reset-btn {
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.28);
|
||||
border-radius: 999px;
|
||||
padding: 0.38rem 0.72rem;
|
||||
@@ -358,48 +315,6 @@
|
||||
box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.14), 0 0 16px rgb(var(--hud-glow-alt-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.palette-btn {
|
||||
display: grid;
|
||||
gap: 0.34rem;
|
||||
min-height: 4rem;
|
||||
padding: 0.52rem 0.56rem 0.58rem;
|
||||
border-radius: 0.74rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.palette-btn.is-active {
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.48);
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92));
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.14), 0 0 16px rgb(var(--hud-glow-alt-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.palette-preview {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
block-size: 0.74rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgb(255 255 255 / 0.08);
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
var(--palette-stop-0) 0%,
|
||||
var(--palette-stop-1) 52%,
|
||||
var(--palette-stop-2) 100%
|
||||
),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 55%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1),
|
||||
0 0 12px rgb(0 0 0 / 0.14);
|
||||
}
|
||||
|
||||
.palette-name {
|
||||
color: inherit;
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.field-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -457,9 +372,5 @@
|
||||
.field-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.palette-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user