lx/dsh-long-skin
2
0
Fork 0
forked from 27hrs/dsh-long-skin
Code Pull Requests Activity

Expand portrait progression

Browse Source
This commit is contained in:
kingOfSoySauce
2026-08-14 22:48:03 +08:00
parent ed342f0aa4
commit a0b8a636af
13 changed files with 105 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/client/index.tsx
View File

@@ -29,12 +29,28 @@ const PREFERENCE_KEY = "dsh-liang-intensity-skin.enabled";
const PORTRAIT_ANCHORS = [
{ level: 0, file: "stage-00.png" },
{ level: 1, file: "level-01.png" },
{ level: 3, file: "level-03.png" },
{ level: 4, file: "level-04.png" },
{ level: 6, file: "stage-06.png" },
{ level: 7, file: "level-07.png" },
{ level: 9, file: "level-09.png" },
{ level: 10, file: "level-10.png" },
{ level: 12, file: "stage-12.png" },
{ level: 13, file: "level-13.png" },
{ level: 14, file: "level-14.png" },
{ level: 15, file: "bridge-15.png" },
{ level: 16, file: "level-16.png" },
{ level: 17, file: "level-17.png" },
{ level: 18, file: "stage-18.png" },
{ level: 19, file: "level-19.png" },
{ level: 21, file: "level-21.png" },
{ level: 22, file: "level-22.png" },
{ level: 24, file: "stage-24.png" },
{ level: 25, file: "level-25.png" },
{ level: 27, file: "bridge-27.png" },
{ level: 28, file: "level-28.png" },
{ level: 29, file: "level-29.png" },
{ level: 30, file: "stage-30.png" },
] as const;
@@ -347,7 +363,7 @@ function LiangEffortSlider({ directory, load, select, presenter, scope }: Slider
const previewIndex = nearestEffortIndex(frame, efforts);
const previewEffort = efforts[previewIndex];
const progress = `${(frame / PREVIEW_MAX_FRAME) * 100}%`;
const progressRatio = frame / PREVIEW_MAX_FRAME;
const commit = async (rawFrame: number) => {
const targetIndex = nearestEffortIndex(rawFrame, efforts);
@@ -383,7 +399,7 @@ function LiangEffortSlider({ directory, load, select, presenter, scope }: Slider
{interacting && (
<output
className="liang-effort-control__tooltip"
style={{ "--liang-tooltip-position": progress } as React.CSSProperties}
style={{ "--liang-slider-ratio": progressRatio } as React.CSSProperties}
>
{indicatorLabel(frame, efforts)}
</output>
@@ -407,7 +423,6 @@ function LiangEffortSlider({ directory, load, select, presenter, scope }: Slider
disabled={pending || state.status === "selecting"}
aria-label="思考等级"
aria-valuetext={previewEffort?.name ?? ""}
style={{ "--liang-slider-progress": progress } as React.CSSProperties}
onPointerDown={() => {
dragging.current = true;
setInteracting(true);

33
src/client/skin.css
View File

@@ -267,16 +267,6 @@ body[data-liang-skin="on"]:is(
}
body[data-liang-skin="on"] .liang-effort-control {
--liang-control-accent: var(--liang-accent);
--liang-control-rail: color-mix(in srgb, var(--liang-accent) 34%, transparent);
}
body[data-liang-skin="on"]:is(
[data-liang-stage="0"],
[data-liang-stage="1"],
[data-liang-stage="2"],
[data-liang-stage="3"]
) .liang-effort-control {
--liang-control-accent: var(--liang-secondary);
--liang-control-rail: color-mix(in srgb, var(--liang-secondary) 28%, transparent);
}
@@ -288,11 +278,22 @@ body[data-liang-skin="on"]:is(
pointer-events: none;
}
.liang-effort-control__ticks::before {
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 1px;
content: "";
background: var(--liang-control-rail);
transform: translateY(-50%);
}
.liang-effort-control__tooltip {
position: absolute;
z-index: 4;
bottom: calc(100% + 7px);
left: var(--liang-tooltip-position);
left: calc(10px + (100% - 20px) * var(--liang-slider-ratio));
min-width: max-content;
padding: 5px 8px;
border: 1px solid var(--liang-border, rgb(0 0 0 / 12%));
@@ -333,9 +334,9 @@ body[data-liang-skin="on"]:is(
.liang-effort-control__range {
position: relative;
z-index: 1;
width: 100%;
width: calc(100% - 7px);
height: 28px;
margin: 0;
margin: 0 3.5px;
cursor: ew-resize;
appearance: none;
background: transparent;
@@ -350,7 +351,7 @@ body[data-liang-skin="on"]:is(
.liang-effort-control__range::-webkit-slider-runnable-track {
height: 1px;
border-radius: 1px;
background: linear-gradient(90deg, var(--liang-control-accent) 0 var(--liang-slider-progress), var(--liang-control-rail) var(--liang-slider-progress) 100%);
background: transparent;
}
.liang-effort-control__range::-webkit-slider-thumb {
@@ -374,12 +375,12 @@ body[data-liang-skin="on"] .liang-effort-control__range::-webkit-slider-thumb {
.liang-effort-control__range::-moz-range-track {
height: 1px;
background: var(--liang-control-rail);
background: transparent;
}
.liang-effort-control__range::-moz-range-progress {
height: 1px;
background: var(--liang-control-accent);
background: transparent;
}
.liang-effort-control__range::-moz-range-thumb {

16
src/index.js
View File

@@ -13,12 +13,28 @@ const ASSET_SPECS = [
["liang-evolution.mp4", "video/mp4"],
["liang-poster.png", "image/png"],
["portrait-source-v2/stage-00.png", "image/png"],
["portrait-source-v2/level-01.png", "image/png"],
["portrait-source-v2/level-03.png", "image/png"],
["portrait-source-v2/level-04.png", "image/png"],
["portrait-source-v2/stage-06.png", "image/png"],
["portrait-source-v2/level-07.png", "image/png"],
["portrait-source-v2/level-09.png", "image/png"],
["portrait-source-v2/level-10.png", "image/png"],
["portrait-source-v2/stage-12.png", "image/png"],
["portrait-source-v2/level-13.png", "image/png"],
["portrait-source-v2/level-14.png", "image/png"],
["portrait-source-v2/bridge-15.png", "image/png"],
["portrait-source-v2/level-16.png", "image/png"],
["portrait-source-v2/level-17.png", "image/png"],
["portrait-source-v2/stage-18.png", "image/png"],
["portrait-source-v2/level-19.png", "image/png"],
["portrait-source-v2/level-21.png", "image/png"],
["portrait-source-v2/level-22.png", "image/png"],
["portrait-source-v2/stage-24.png", "image/png"],
["portrait-source-v2/level-25.png", "image/png"],
["portrait-source-v2/bridge-27.png", "image/png"],
["portrait-source-v2/level-28.png", "image/png"],
["portrait-source-v2/level-29.png", "image/png"],
["portrait-source-v2/stage-30.png", "image/png"],
];