GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine profile shortcuts and puzzle next button

Browse Source
This commit is contained in:
kdletters
2026-06-01 16:45:39 +00:00
parent fae4db6a09
commit 1cb11bc1dd
6 changed files with 113 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
View File

@@ -162,6 +162,15 @@ function PuzzleUiSprite({
);
}
function resolvePuzzleUiSpriteAspectRatio(
kind: PuzzleUiSpriteKind,
layout: PuzzleUiSpritesheetLayout | null,
fallback: string,
) {
const region = layout?.regions[kind];
return region ? `${region.width} / ${region.height}` : fallback;
}
function buildMergedGroupViewModels(
groups: PuzzleMergedGroupState[],
pieces: PuzzleBoardPieceViewModel[],
@@ -1221,6 +1230,22 @@ export function PuzzleRuntimeShell({
const clearResultOverlayClassName = embedded
? `platform-ui-shell platform-theme ${platformThemeClass} puzzle-runtime-shell puzzle-runtime-modal-overlay puzzle-runtime-modal-overlay--fixed flex items-center justify-center px-4 py-6 backdrop-blur-sm`
: 'puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-6 backdrop-blur-sm';
const nextSpriteButtonClassName =
'inline-flex h-12 appearance-none items-center justify-center border-0 bg-transparent p-0 leading-none shadow-none transition hover:brightness-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-button-primary-border)] disabled:cursor-not-allowed disabled:opacity-45';
const nextSpriteButtonStyle = hasUiSpritesheet
? {
...buildPuzzleUiSpriteBackgroundStyle({
src: resolvedUiSpritesheetImage,
kind: 'next',
layout: uiSpritesheetLayout,
}),
aspectRatio: resolvePuzzleUiSpriteAspectRatio(
'next',
uiSpritesheetLayout,
'2 / 1',
),
}
: undefined;
const handleBackRequest = () => {
if (hideExitControls) {
return;
@@ -1457,6 +1482,8 @@ export function PuzzleRuntimeShell({
<footer className="puzzle-runtime-dialog__line flex items-center justify-end border-t px-5 py-4">
<button
type="button"
aria-label="下一关"
data-puzzle-ui-sprite={hasUiSpritesheet ? 'next' : undefined}
disabled={isBusy}
onClick={() => {
onAdvanceNextLevel({
@@ -1464,14 +1491,23 @@ export function PuzzleRuntimeShell({
levelId: run.nextLevelId ?? null,
});
}}
className="puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-black transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-45"
style={nextSpriteButtonStyle}
className={
hasUiSpritesheet
? nextSpriteButtonClassName
: 'puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-black transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-45'
}
>
{isBusy ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowRight className="h-4 w-4" />
{hasUiSpritesheet ? null : (
<>
{isBusy ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowRight className="h-4 w-4" />
)}
下一关
</>
)}
下一关
</button>
</footer>
) : null}
@@ -1933,6 +1969,7 @@ export function PuzzleRuntimeShell({
<button
type="button"
disabled={isBusy}
data-puzzle-ui-sprite={hasUiSpritesheet ? 'next' : undefined}
aria-label={hasSimilarWorkChoices ? '换个作品' : '下一关'}
onClick={() => {
if (hasSimilarWorkChoices) {
@@ -1945,16 +1982,18 @@ export function PuzzleRuntimeShell({
levelId: run.nextLevelId ?? null,
});
}}
className="puzzle-runtime-primary-button inline-flex min-h-11 items-center justify-center rounded-full px-5 py-2.5 text-sm font-bold transition hover:brightness-105 disabled:opacity-45"
style={nextSpriteButtonStyle}
className={
hasUiSpritesheet
? nextSpriteButtonClassName
: 'puzzle-runtime-primary-button inline-flex min-h-11 items-center justify-center rounded-full px-5 py-2.5 text-sm font-bold transition hover:brightness-105 disabled:opacity-45'
}
>
<PuzzleUiSprite
src={resolvedUiSpritesheetImage}
kind="next"
layout={uiSpritesheetLayout}
className="h-8 w-12 rounded-full"
/>
{resolvedUiSpritesheetImage ? null : (
<ArrowRight className="h-4 w-4" />
{hasUiSpritesheet ? null : (
<>
<ArrowRight className="h-4 w-4" />
{hasSimilarWorkChoices ? '换个作品' : '下一关'}
</>
)}
</button>
) : null}