working on cutscenes
This commit is contained in:
Vladislav Khorev committed
1 parent
54cc118df7
commit
6349859e66
47 files changed
+6234
-21
No files matched your search
+351
@@ -0,0 +1,351 @@
|
|||||||
|
# Cutscene System
|
||||||
|
|
||||||
|
Cutscenes are defined in JSON and loaded by `CutsceneDatabase`. Each cutscene is a self-contained object with an array of animated image layers and optional subtitle lines.
|
||||||
|
|
||||||
|
The file can contain multiple cutscenes:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"cutscenes": [
|
||||||
|
{ "id": "intro", ... },
|
||||||
|
{ "id": "ending", ... }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Cutscenes and dialogues are loaded from **separate files**:
|
||||||
|
|
||||||
|
```cpp
|
||||||
|
dialogueSystem.loadDatabase("resources/dialogue/uni_interior.json"); // dialogues
|
||||||
|
dialogueSystem.loadCutsceneDatabase("resources/dialogue/cutscenes.json"); // cutscenes
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Cutscene object
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "intro_cutscene",
|
||||||
|
"skippable": true,
|
||||||
|
"durationMs": 8000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 500,
|
||||||
|
"endFadeInMs": 500,
|
||||||
|
"onFadeInCallback": "",
|
||||||
|
"imageSegments": [ ... ],
|
||||||
|
"lines": [ ... ]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `id` | string | — | Unique identifier used to start the cutscene from C++ or dialogue (**required**) |
|
||||||
|
| `skippable` | bool | `true` | Whether the player can skip by holding LMB / touch |
|
||||||
|
| `durationMs` | int | `0` | Minimum content duration in ms. The cutscene will not end before this time even if all subtitle lines have finished. `0` means duration is determined solely by subtitle lines or `imageSegments.endMs` |
|
||||||
|
| `fadeOutMs` | int | `0` | Duration of the **opening fade** — game world fades to black before the cutscene images appear |
|
||||||
|
| `fadeInMs` | int | `0` | Duration of the **opening reveal** — cutscene images fade in from black after `fadeOutMs` |
|
||||||
|
| `endFadeOutMs` | int | `0` | Duration of the **closing fade** — cutscene fades to black at the end of content |
|
||||||
|
| `endFadeInMs` | int | `0` | Duration of the **closing reveal** — game world fades back in from black |
|
||||||
|
| `onFadeInCallback` | string | `""` | Lua function name called once the opening fade-in completes (fired after `fadeOutMs + fadeInMs` ms) |
|
||||||
|
| `imageSegments` | array | `[]` | Image layers with motion — see [Image segments](#image-segments) |
|
||||||
|
| `lines` | array | `[]` | Subtitle lines shown sequentially — see [Subtitle lines](#subtitle-lines) |
|
||||||
|
|
||||||
|
### Timing model
|
||||||
|
|
||||||
|
The total cutscene duration is:
|
||||||
|
|
||||||
|
```
|
||||||
|
contentDuration = max(durationMs, max(segment.endMs for all segments))
|
||||||
|
totalDuration = contentDuration + endFadeOutMs + endFadeInMs
|
||||||
|
```
|
||||||
|
|
||||||
|
The full timeline looks like this:
|
||||||
|
|
||||||
|
```
|
||||||
|
|-- fadeOutMs --|-- fadeInMs --|--- content plays (images + subtitles) ---|-- endFadeOutMs --|-- endFadeInMs --|
|
||||||
|
world→black black→images images→black black→world
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Image segments
|
||||||
|
|
||||||
|
Each entry in `imageSegments` describes one image layer: when it is visible, how it fades in/out, and how it animates from a start pose to an end pose.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/bg_layer.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"fadeInMs": 300,
|
||||||
|
"fadeOutMs": 300,
|
||||||
|
"easing": "EaseInOutSine",
|
||||||
|
"from": { "centerX": 0.4, "centerY": 0.5, "scale": 1.1 },
|
||||||
|
"to": { "centerX": 0.6, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `path` | string | — | Path to the PNG image (**required**) |
|
||||||
|
| `width` | int | `0` | Logical width used for all UV and aspect-ratio math. `0` uses the actual texture pixel width |
|
||||||
|
| `height` | int | `0` | Logical height. `0` uses the actual texture pixel height |
|
||||||
|
| `startMs` | int | `0` | Time (ms from cutscene start) when this layer becomes active |
|
||||||
|
| `endMs` | int | `0` | Time (ms) when this layer stops being active. Must be > `startMs` |
|
||||||
|
| `fadeInMs` | int | `0` | Alpha fades from 0 → 1 over this many ms after `startMs`. `0` = instant |
|
||||||
|
| `fadeOutMs` | int | `0` | Alpha fades from 1 → 0 over this many ms before `endMs`. `0` = instant |
|
||||||
|
| `easing` | string | `"Linear"` | Easing applied to the pose interpolation — see [Easing types](#easing-types) |
|
||||||
|
| `from` | pose object | center/1.0 | Pose at `startMs` — see [Image pose](#image-pose) |
|
||||||
|
| `to` | pose object | same as `from` | Pose at `endMs`. If omitted, the layer stays at `from` the whole time |
|
||||||
|
|
||||||
|
Multiple segments can be active at the same time. They are rendered **in declaration order** (first = bottom layer, last = top layer), which enables parallax layering.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Image pose
|
||||||
|
|
||||||
|
A pose defines how an image is framed on screen at a given moment.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{ "centerX": 0.5, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `centerX` | float | `0.5` | Normalized X position (0 = left edge of image, 1 = right edge) of the point that is placed at the horizontal center of the screen |
|
||||||
|
| `centerY` | float | `0.5` | Normalized Y position (0 = top edge, 1 = bottom edge) placed at the screen center |
|
||||||
|
| `scale` | float | `1.0` | Zoom level. `1.0` = the image fills the screen exactly (aspect-ratio corrected). `2.0` = zoomed in 2×, showing half the image area |
|
||||||
|
|
||||||
|
The runtime interpolates all three values independently from `from` to `to` using the chosen easing.
|
||||||
|
|
||||||
|
**Coordinate clamping:** `centerX`/`centerY` are automatically clamped so the viewport never shows area outside the image. For a zoomed-in segment (`scale > 1`) you therefore have more freedom to pan; for `scale = 1.0` the center is locked to `0.5/0.5`.
|
||||||
|
|
||||||
|
### Pose intuition
|
||||||
|
|
||||||
|
| Goal | Config |
|
||||||
|
|---|---|
|
||||||
|
| Centered, no zoom | `{ "centerX": 0.5, "centerY": 0.5, "scale": 1.0 }` |
|
||||||
|
| Slightly zoomed in on center | `{ "centerX": 0.5, "centerY": 0.5, "scale": 1.2 }` |
|
||||||
|
| Pan left to right | `from: { "centerX": 0.3, "scale": 1.2 }` → `to: { "centerX": 0.7, "scale": 1.2 }` |
|
||||||
|
| Zoom out from close-up | `from: { "scale": 1.8 }` → `to: { "scale": 1.0 }` |
|
||||||
|
| Look at top portion | `{ "centerY": 0.2, "scale": 1.3 }` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Easing types
|
||||||
|
|
||||||
|
Controls the interpolation curve applied to pose animation between `from` and `to`.
|
||||||
|
|
||||||
|
| Value | Description |
|
||||||
|
|---|---|
|
||||||
|
| `"Linear"` | Constant speed (default) |
|
||||||
|
| `"EaseInSine"` | Slow start, fast end |
|
||||||
|
| `"EaseOutSine"` | Fast start, slow end |
|
||||||
|
| `"EaseInOutSine"` | Slow start and end, fast middle |
|
||||||
|
| `"EaseInQuad"` | Quadratic slow start |
|
||||||
|
| `"EaseOutQuad"` | Quadratic slow end |
|
||||||
|
| `"EaseInOutQuad"` | Quadratic slow start and end |
|
||||||
|
| `"EaseInCubic"` | Cubic slow start |
|
||||||
|
| `"EaseOutCubic"` | Cubic slow end |
|
||||||
|
| `"EaseInOutCubic"` | Cubic slow start and end |
|
||||||
|
|
||||||
|
For cinematic camera motion `"EaseInOutSine"` or `"EaseInOutCubic"` give the most natural feel.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Subtitle lines
|
||||||
|
|
||||||
|
Lines are displayed sequentially on top of the cutscene images. Each line shows until its duration expires (or until the player advances, if `waitForConfirm` is set).
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Здравствуйте, студенты.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `speaker` | string | `""` | Speaker name shown above the subtitle text. Empty = no name bar |
|
||||||
|
| `text` | string | `""` | Subtitle text. Supports Cyrillic and any codepoint in `resources/symbols.txt` |
|
||||||
|
| `durationMs` | int | `0` | How long this line is displayed in ms. `0` = auto-computed from text length (~17 chars/sec, minimum 1500 ms) |
|
||||||
|
| `waitForConfirm` | bool | `false` | When `true`, the line waits for player input (tap/click/Enter) before advancing. No timer runs |
|
||||||
|
| `luaCallback` | string | `""` | Lua function name called when this line begins. Useful for triggering SFX, spawning effects, etc. |
|
||||||
|
|
||||||
|
Subtitle lines run on their own timer that is **independent** of the image segments. The cutscene ends when **both** subtitle lines are exhausted **and** `contentDuration` has elapsed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## C++ API
|
||||||
|
|
||||||
|
### Starting a cutscene
|
||||||
|
|
||||||
|
```cpp
|
||||||
|
// Standalone cutscene (not part of a dialogue):
|
||||||
|
dialogueSystem.startCutscene("intro_cutscene");
|
||||||
|
|
||||||
|
// Skip the currently playing cutscene:
|
||||||
|
dialogueSystem.skipCutscene();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Callbacks
|
||||||
|
|
||||||
|
```cpp
|
||||||
|
// Called when a cutscene begins:
|
||||||
|
dialogueSystem.setOnCutsceneStarted([]() { /* hide HUD, etc. */ });
|
||||||
|
|
||||||
|
// Called when a cutscene ends (receives the cutscene id):
|
||||||
|
dialogueSystem.setOnCutsceneFinished([](const std::string& id) {
|
||||||
|
// id == "intro_cutscene"
|
||||||
|
});
|
||||||
|
|
||||||
|
// Called when a subtitle line begins (receives luaCallback value):
|
||||||
|
dialogueSystem.setOnCutsceneLineStarted([](const std::string& fn) {
|
||||||
|
scriptEngine.callActivateFunction(fn);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Called when the opening fade-in completes (receives onFadeInCallback value):
|
||||||
|
dialogueSystem.setOnCutsceneFadeInComplete([](const std::string& fn) {
|
||||||
|
scriptEngine.callActivateFunction(fn);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Triggering from dialogue
|
||||||
|
|
||||||
|
A dialogue node of type `CutsceneStart` embeds a cutscene mid-conversation. Dialogue resumes at `next` when the cutscene ends.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "node_cutscene",
|
||||||
|
"type": "CutsceneStart",
|
||||||
|
"cutsceneId": "intro_cutscene",
|
||||||
|
"next": "node_after_cutscene"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Full examples
|
||||||
|
|
||||||
|
### Minimal — static image, timed
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "simple",
|
||||||
|
"durationMs": 4000,
|
||||||
|
"fadeOutMs": 300,
|
||||||
|
"fadeInMs": 300,
|
||||||
|
"endFadeOutMs": 300,
|
||||||
|
"endFadeInMs": 300,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/city.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 4000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Two-layer parallax pan
|
||||||
|
|
||||||
|
Background moves slowly left-to-right; foreground character moves faster, creating depth.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "classroom_intro",
|
||||||
|
"durationMs": 8000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 500,
|
||||||
|
"endFadeInMs": 500,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/classroom_bg.png",
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"fadeInMs": 400,
|
||||||
|
"easing": "EaseInOutSine",
|
||||||
|
"from": { "centerX": 0.4, "centerY": 0.5, "scale": 1.1 },
|
||||||
|
"to": { "centerX": 0.6, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/classroom_teacher.png",
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"easing": "EaseInOutSine",
|
||||||
|
"from": { "centerX": 0.35, "centerY": 0.5, "scale": 1.0 },
|
||||||
|
"to": { "centerX": 0.65, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Здравствуйте, студенты.",
|
||||||
|
"durationMs": 3000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Рассаживайтесь.",
|
||||||
|
"durationMs": 2500
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Zoom-in reveal with a second image appearing mid-way
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "letter_reveal",
|
||||||
|
"durationMs": 7000,
|
||||||
|
"fadeOutMs": 400,
|
||||||
|
"fadeInMs": 600,
|
||||||
|
"endFadeOutMs": 600,
|
||||||
|
"endFadeInMs": 400,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/desk_bg.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 7000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/letter_closeup.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 2000,
|
||||||
|
"endMs": 7000,
|
||||||
|
"fadeInMs": 800,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": { "centerX": 0.5, "centerY": 0.5, "scale": 2.5 },
|
||||||
|
"to": { "centerX": 0.5, "centerY": 0.5, "scale": 1.2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"text": "Среди бумаг на столе лежит конверт.",
|
||||||
|
"durationMs": 2500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Главный герой",
|
||||||
|
"text": "«Явитесь в деканат немедленно».",
|
||||||
|
"durationMs": 3000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
.DS_STORE
|
||||||
|
node_modules
|
||||||
|
scripts/flow/*/.flowconfig
|
||||||
|
.flowconfig
|
||||||
|
*~
|
||||||
|
*.pyc
|
||||||
|
.grunt
|
||||||
|
_SpecRunner.html
|
||||||
|
__benchmarks__
|
||||||
|
build/
|
||||||
|
remote-repo/
|
||||||
|
coverage/
|
||||||
|
.module-cache
|
||||||
|
fixtures/dom/public/react-dom.js
|
||||||
|
fixtures/dom/public/react.js
|
||||||
|
test/the-files-to-test.generated.js
|
||||||
|
*.log*
|
||||||
|
chrome-user-data
|
||||||
|
*.sublime-project
|
||||||
|
*.sublime-workspace
|
||||||
|
.idea
|
||||||
|
*.iml
|
||||||
|
.vscode
|
||||||
|
.zed
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
/tmp
|
||||||
|
/.worktrees
|
||||||
|
.claude/*.local.*
|
||||||
|
|
||||||
|
packages/react-devtools-core/dist
|
||||||
|
packages/react-devtools-extensions/chrome/build
|
||||||
|
packages/react-devtools-extensions/chrome/*.crx
|
||||||
|
packages/react-devtools-extensions/chrome/*.pem
|
||||||
|
packages/react-devtools-extensions/firefox/build
|
||||||
|
packages/react-devtools-extensions/firefox/*.xpi
|
||||||
|
packages/react-devtools-extensions/firefox/*.pem
|
||||||
|
packages/react-devtools-extensions/shared/build
|
||||||
|
packages/react-devtools-extensions/.tempUserDataDir
|
||||||
|
packages/react-devtools-fusebox/dist
|
||||||
|
packages/react-devtools-inline/dist
|
||||||
|
packages/react-devtools-shell/dist
|
||||||
|
packages/react-devtools-timeline/dist
|
||||||
|
|
||||||
|
resources
|
||||||
|
|
||||||
@@ -0,0 +1,351 @@
|
|||||||
|
# Cutscene System
|
||||||
|
|
||||||
|
Cutscenes are defined in JSON and loaded by `CutsceneDatabase`. Each cutscene is a self-contained object with an array of animated image layers and optional subtitle lines.
|
||||||
|
|
||||||
|
The file can contain multiple cutscenes:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"cutscenes": [
|
||||||
|
{ "id": "intro", ... },
|
||||||
|
{ "id": "ending", ... }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Cutscenes and dialogues are loaded from **separate files**:
|
||||||
|
|
||||||
|
```cpp
|
||||||
|
dialogueSystem.loadDatabase("resources/dialogue/uni_interior.json"); // dialogues
|
||||||
|
dialogueSystem.loadCutsceneDatabase("resources/dialogue/cutscenes.json"); // cutscenes
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Cutscene object
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "intro_cutscene",
|
||||||
|
"skippable": true,
|
||||||
|
"durationMs": 8000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 500,
|
||||||
|
"endFadeInMs": 500,
|
||||||
|
"onFadeInCallback": "",
|
||||||
|
"imageSegments": [ ... ],
|
||||||
|
"lines": [ ... ]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `id` | string | — | Unique identifier used to start the cutscene from C++ or dialogue (**required**) |
|
||||||
|
| `skippable` | bool | `true` | Whether the player can skip by holding LMB / touch |
|
||||||
|
| `durationMs` | int | `0` | Minimum content duration in ms. The cutscene will not end before this time even if all subtitle lines have finished. `0` means duration is determined solely by subtitle lines or `imageSegments.endMs` |
|
||||||
|
| `fadeOutMs` | int | `0` | Duration of the **opening fade** — game world fades to black before the cutscene images appear |
|
||||||
|
| `fadeInMs` | int | `0` | Duration of the **opening reveal** — cutscene images fade in from black after `fadeOutMs` |
|
||||||
|
| `endFadeOutMs` | int | `0` | Duration of the **closing fade** — cutscene fades to black at the end of content |
|
||||||
|
| `endFadeInMs` | int | `0` | Duration of the **closing reveal** — game world fades back in from black |
|
||||||
|
| `onFadeInCallback` | string | `""` | Lua function name called once the opening fade-in completes (fired after `fadeOutMs + fadeInMs` ms) |
|
||||||
|
| `imageSegments` | array | `[]` | Image layers with motion — see [Image segments](#image-segments) |
|
||||||
|
| `lines` | array | `[]` | Subtitle lines shown sequentially — see [Subtitle lines](#subtitle-lines) |
|
||||||
|
|
||||||
|
### Timing model
|
||||||
|
|
||||||
|
The total cutscene duration is:
|
||||||
|
|
||||||
|
```
|
||||||
|
contentDuration = max(durationMs, max(segment.endMs for all segments))
|
||||||
|
totalDuration = contentDuration + endFadeOutMs + endFadeInMs
|
||||||
|
```
|
||||||
|
|
||||||
|
The full timeline looks like this:
|
||||||
|
|
||||||
|
```
|
||||||
|
|-- fadeOutMs --|-- fadeInMs --|--- content plays (images + subtitles) ---|-- endFadeOutMs --|-- endFadeInMs --|
|
||||||
|
world→black black→images images→black black→world
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Image segments
|
||||||
|
|
||||||
|
Each entry in `imageSegments` describes one image layer: when it is visible, how it fades in/out, and how it animates from a start pose to an end pose.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/bg_layer.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"fadeInMs": 300,
|
||||||
|
"fadeOutMs": 300,
|
||||||
|
"easing": "EaseInOutSine",
|
||||||
|
"from": { "centerX": 0.4, "centerY": 0.5, "scale": 1.1 },
|
||||||
|
"to": { "centerX": 0.6, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `path` | string | — | Path to the PNG image (**required**) |
|
||||||
|
| `width` | int | `0` | Logical width used for all UV and aspect-ratio math. `0` uses the actual texture pixel width |
|
||||||
|
| `height` | int | `0` | Logical height. `0` uses the actual texture pixel height |
|
||||||
|
| `startMs` | int | `0` | Time (ms from cutscene start) when this layer becomes active |
|
||||||
|
| `endMs` | int | `0` | Time (ms) when this layer stops being active. Must be > `startMs` |
|
||||||
|
| `fadeInMs` | int | `0` | Alpha fades from 0 → 1 over this many ms after `startMs`. `0` = instant |
|
||||||
|
| `fadeOutMs` | int | `0` | Alpha fades from 1 → 0 over this many ms before `endMs`. `0` = instant |
|
||||||
|
| `easing` | string | `"Linear"` | Easing applied to the pose interpolation — see [Easing types](#easing-types) |
|
||||||
|
| `from` | pose object | center/1.0 | Pose at `startMs` — see [Image pose](#image-pose) |
|
||||||
|
| `to` | pose object | same as `from` | Pose at `endMs`. If omitted, the layer stays at `from` the whole time |
|
||||||
|
|
||||||
|
Multiple segments can be active at the same time. They are rendered **in declaration order** (first = bottom layer, last = top layer), which enables parallax layering.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Image pose
|
||||||
|
|
||||||
|
A pose defines how an image is framed on screen at a given moment.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{ "centerX": 0.5, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `centerX` | float | `0.5` | Normalized X position (0 = left edge of image, 1 = right edge) of the point that is placed at the horizontal center of the screen |
|
||||||
|
| `centerY` | float | `0.5` | Normalized Y position (0 = top edge, 1 = bottom edge) placed at the screen center |
|
||||||
|
| `scale` | float | `1.0` | Zoom level. `1.0` = the image fills the screen exactly (aspect-ratio corrected). `2.0` = zoomed in 2×, showing half the image area |
|
||||||
|
|
||||||
|
The runtime interpolates all three values independently from `from` to `to` using the chosen easing.
|
||||||
|
|
||||||
|
**Coordinate clamping:** `centerX`/`centerY` are automatically clamped so the viewport never shows area outside the image. For a zoomed-in segment (`scale > 1`) you therefore have more freedom to pan; for `scale = 1.0` the center is locked to `0.5/0.5`.
|
||||||
|
|
||||||
|
### Pose intuition
|
||||||
|
|
||||||
|
| Goal | Config |
|
||||||
|
|---|---|
|
||||||
|
| Centered, no zoom | `{ "centerX": 0.5, "centerY": 0.5, "scale": 1.0 }` |
|
||||||
|
| Slightly zoomed in on center | `{ "centerX": 0.5, "centerY": 0.5, "scale": 1.2 }` |
|
||||||
|
| Pan left to right | `from: { "centerX": 0.3, "scale": 1.2 }` → `to: { "centerX": 0.7, "scale": 1.2 }` |
|
||||||
|
| Zoom out from close-up | `from: { "scale": 1.8 }` → `to: { "scale": 1.0 }` |
|
||||||
|
| Look at top portion | `{ "centerY": 0.2, "scale": 1.3 }` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Easing types
|
||||||
|
|
||||||
|
Controls the interpolation curve applied to pose animation between `from` and `to`.
|
||||||
|
|
||||||
|
| Value | Description |
|
||||||
|
|---|---|
|
||||||
|
| `"Linear"` | Constant speed (default) |
|
||||||
|
| `"EaseInSine"` | Slow start, fast end |
|
||||||
|
| `"EaseOutSine"` | Fast start, slow end |
|
||||||
|
| `"EaseInOutSine"` | Slow start and end, fast middle |
|
||||||
|
| `"EaseInQuad"` | Quadratic slow start |
|
||||||
|
| `"EaseOutQuad"` | Quadratic slow end |
|
||||||
|
| `"EaseInOutQuad"` | Quadratic slow start and end |
|
||||||
|
| `"EaseInCubic"` | Cubic slow start |
|
||||||
|
| `"EaseOutCubic"` | Cubic slow end |
|
||||||
|
| `"EaseInOutCubic"` | Cubic slow start and end |
|
||||||
|
|
||||||
|
For cinematic camera motion `"EaseInOutSine"` or `"EaseInOutCubic"` give the most natural feel.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Subtitle lines
|
||||||
|
|
||||||
|
Lines are displayed sequentially on top of the cutscene images. Each line shows until its duration expires (or until the player advances, if `waitForConfirm` is set).
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Здравствуйте, студенты.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `speaker` | string | `""` | Speaker name shown above the subtitle text. Empty = no name bar |
|
||||||
|
| `text` | string | `""` | Subtitle text. Supports Cyrillic and any codepoint in `resources/symbols.txt` |
|
||||||
|
| `durationMs` | int | `0` | How long this line is displayed in ms. `0` = auto-computed from text length (~17 chars/sec, minimum 1500 ms) |
|
||||||
|
| `waitForConfirm` | bool | `false` | When `true`, the line waits for player input (tap/click/Enter) before advancing. No timer runs |
|
||||||
|
| `luaCallback` | string | `""` | Lua function name called when this line begins. Useful for triggering SFX, spawning effects, etc. |
|
||||||
|
|
||||||
|
Subtitle lines run on their own timer that is **independent** of the image segments. The cutscene ends when **both** subtitle lines are exhausted **and** `contentDuration` has elapsed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## C++ API
|
||||||
|
|
||||||
|
### Starting a cutscene
|
||||||
|
|
||||||
|
```cpp
|
||||||
|
// Standalone cutscene (not part of a dialogue):
|
||||||
|
dialogueSystem.startCutscene("intro_cutscene");
|
||||||
|
|
||||||
|
// Skip the currently playing cutscene:
|
||||||
|
dialogueSystem.skipCutscene();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Callbacks
|
||||||
|
|
||||||
|
```cpp
|
||||||
|
// Called when a cutscene begins:
|
||||||
|
dialogueSystem.setOnCutsceneStarted([]() { /* hide HUD, etc. */ });
|
||||||
|
|
||||||
|
// Called when a cutscene ends (receives the cutscene id):
|
||||||
|
dialogueSystem.setOnCutsceneFinished([](const std::string& id) {
|
||||||
|
// id == "intro_cutscene"
|
||||||
|
});
|
||||||
|
|
||||||
|
// Called when a subtitle line begins (receives luaCallback value):
|
||||||
|
dialogueSystem.setOnCutsceneLineStarted([](const std::string& fn) {
|
||||||
|
scriptEngine.callActivateFunction(fn);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Called when the opening fade-in completes (receives onFadeInCallback value):
|
||||||
|
dialogueSystem.setOnCutsceneFadeInComplete([](const std::string& fn) {
|
||||||
|
scriptEngine.callActivateFunction(fn);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Triggering from dialogue
|
||||||
|
|
||||||
|
A dialogue node of type `CutsceneStart` embeds a cutscene mid-conversation. Dialogue resumes at `next` when the cutscene ends.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "node_cutscene",
|
||||||
|
"type": "CutsceneStart",
|
||||||
|
"cutsceneId": "intro_cutscene",
|
||||||
|
"next": "node_after_cutscene"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Full examples
|
||||||
|
|
||||||
|
### Minimal — static image, timed
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "simple",
|
||||||
|
"durationMs": 4000,
|
||||||
|
"fadeOutMs": 300,
|
||||||
|
"fadeInMs": 300,
|
||||||
|
"endFadeOutMs": 300,
|
||||||
|
"endFadeInMs": 300,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/city.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 4000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Two-layer parallax pan
|
||||||
|
|
||||||
|
Background moves slowly left-to-right; foreground character moves faster, creating depth.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "classroom_intro",
|
||||||
|
"durationMs": 8000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 500,
|
||||||
|
"endFadeInMs": 500,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/classroom_bg.png",
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"fadeInMs": 400,
|
||||||
|
"easing": "EaseInOutSine",
|
||||||
|
"from": { "centerX": 0.4, "centerY": 0.5, "scale": 1.1 },
|
||||||
|
"to": { "centerX": 0.6, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/classroom_teacher.png",
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"easing": "EaseInOutSine",
|
||||||
|
"from": { "centerX": 0.35, "centerY": 0.5, "scale": 1.0 },
|
||||||
|
"to": { "centerX": 0.65, "centerY": 0.5, "scale": 1.0 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Здравствуйте, студенты.",
|
||||||
|
"durationMs": 3000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Рассаживайтесь.",
|
||||||
|
"durationMs": 2500
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Zoom-in reveal with a second image appearing mid-way
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "letter_reveal",
|
||||||
|
"durationMs": 7000,
|
||||||
|
"fadeOutMs": 400,
|
||||||
|
"fadeInMs": 600,
|
||||||
|
"endFadeOutMs": 600,
|
||||||
|
"endFadeInMs": 400,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/desk_bg.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 7000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/cutscenes/letter_closeup.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 2000,
|
||||||
|
"endMs": 7000,
|
||||||
|
"fadeInMs": 800,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": { "centerX": 0.5, "centerY": 0.5, "scale": 2.5 },
|
||||||
|
"to": { "centerX": 0.5, "centerY": 0.5, "scale": 1.2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"text": "Среди бумаг на столе лежит конверт.",
|
||||||
|
"durationMs": 2500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Главный герой",
|
||||||
|
"text": "«Явитесь в деканат немедленно».",
|
||||||
|
"durationMs": 3000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
{
|
||||||
|
"cutscenes": [
|
||||||
|
{
|
||||||
|
"id": "test_cutscene_01",
|
||||||
|
"background": "resources/black.png",
|
||||||
|
"durationMs": 5000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 500,
|
||||||
|
"endFadeInMs": 500,
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.3, "scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.7, "scale": 1.2
|
||||||
|
},
|
||||||
|
"easing": "Linear"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png",
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 8000,
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"from": {
|
||||||
|
|
||||||
|
"centerX": 0.3,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.0
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.7,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Здравствуйте, студенты. Кого я вижу, где вы были весь семестр?",
|
||||||
|
"durationMs": 3000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В эпизоде \"Семетей\" трилогии \"Манас\", изменники Канчоро и Кыяз захватывают власть над кыргызами.",
|
||||||
|
"durationMs": 3000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "На сегодня лекция завершена. Домашнее задание - к практическому занятию вы должны подготовить презентации, каждый по своей теме.",
|
||||||
|
"durationMs": 2000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;background:#1a1a1a;color:#e0e0e0}button{cursor:pointer;font-family:inherit;font-size:12px}input,select,textarea{font-family:inherit;font-size:12px;background:#2a2a2a;color:#e0e0e0;border:1px solid #444;border-radius:3px;padding:3px 6px}input:focus,select:focus,textarea:focus{outline:none;border-color:#5b9bd5}label{color:#aaa;font-size:11px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#666}._app_1ibpl_1{display:flex;width:100%;height:100%;overflow:hidden}._panel_e520h_1{width:200px;min-width:180px;background:#252525;border-right:1px solid #333;display:flex;flex-direction:column;overflow:hidden}._header_e520h_11{padding:10px 12px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#888;border-bottom:1px solid #333}._actions_e520h_21{display:flex;flex-direction:column;gap:6px;padding:10px;border-bottom:1px solid #333}._btn_e520h_29{background:#333;color:#ddd;border:1px solid #444;border-radius:4px;padding:5px 8px;text-align:center;transition:background .15s}._btn_e520h_29:hover:not(:disabled){background:#3d3d3d}._btn_e520h_29:disabled{opacity:.4;cursor:default}._btnPrimary_e520h_42{background:#2a4a6e;border-color:#3a6090;color:#a8d0f0}._btnPrimary_e520h_42:hover{background:#2e5480}._list_e520h_50{flex:1;overflow-y:auto;padding:4px 0}._empty_e520h_56{padding:16px 12px;color:#555;font-size:11px;line-height:1.5}._item_e520h_63{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;border-left:3px solid transparent;transition:background .1s}._item_e520h_63:hover{background:#2e2e2e}._selected_e520h_76{background:#1e3a55;border-left-color:#5b9bd5}._itemId_e520h_81{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}._deleteBtn_e520h_89{background:none;border:none;color:#666;padding:2px 4px;border-radius:3px;font-size:10px;opacity:0;transition:opacity .1s,color .1s}._item_e520h_63:hover ._deleteBtn_e520h_89{opacity:1}._deleteBtn_e520h_89:hover{color:#e06c6c}._panel_1kkcd_1{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}._previewArea_1kkcd_9{flex:0 0 auto;display:flex;justify-content:center;align-items:center;background:#111;padding:8px;max-height:60%}._wrapper_1nucj_1{width:100%;display:flex;justify-content:center;align-items:center;background:#111;padding:8px;flex-shrink:0}._viewport_1nucj_11{position:relative;aspect-ratio:16 / 9;width:100%;max-height:100%;background:#000;overflow:hidden}._empty_1nucj_20{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#444;font-size:13px}._subtitleBar_1nucj_30{position:absolute;bottom:0;left:0;right:0;padding:10px 20px 14px;background:linear-gradient(transparent,#000000bf);text-align:center}._speaker_1nucj_40{font-size:11px;font-weight:600;color:#f0c060;margin-bottom:4px;text-shadow:0 1px 3px rgba(0,0,0,.8)}._text_1nucj_48{font-size:14px;color:#fff;line-height:1.5;text-shadow:0 1px 4px rgba(0,0,0,.9)}._controls_1qoyb_1{display:flex;align-items:center;gap:4px;padding:6px 10px;background:#1e1e1e;border-top:1px solid #333;border-bottom:1px solid #333;flex-shrink:0}._btn_1qoyb_12{background:#2d2d2d;border:1px solid #404040;color:#ccc;border-radius:4px;padding:4px 10px;font-size:13px;transition:background .1s;min-width:32px}._btn_1qoyb_12:hover:not(:disabled){background:#3a3a3a;color:#fff}._btn_1qoyb_12:disabled{opacity:.35;cursor:default}._active_1qoyb_26{color:#5ba3e0;border-color:#4a7aaa}._time_1qoyb_31{margin-left:10px;font-size:11px;color:#888;font-variant-numeric:tabular-nums}._container_uetgi_1{display:flex;flex-direction:column;flex:1;min-height:0;background:#1a1a1a;border-top:1px solid #333;overflow:hidden}._toolbar_uetgi_11{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#222;border-bottom:1px solid #333;flex-shrink:0}._tbBtn_uetgi_21{background:#2d2d2d;border:1px solid #404040;color:#bbb;border-radius:3px;padding:3px 8px;font-size:11px;transition:background .1s}._tbBtn_uetgi_21:hover:not(:disabled){background:#3a3a3a;color:#fff}._tbBtn_uetgi_21:disabled{opacity:.3;cursor:default}._spacer_uetgi_33{flex:1}._zoomLabel_uetgi_35{font-size:11px;color:#666;margin-right:2px}._scroll_uetgi_37{flex:1;overflow:auto;position:relative;cursor:default}._ruler_uetgi_45{display:flex;height:22px;background:#212121;border-bottom:1px solid #333;position:sticky;top:0;z-index:10;-webkit-user-select:none;user-select:none;cursor:crosshair}._tick_uetgi_57{position:absolute;top:0;bottom:0;width:1px;background:#444}._tickLabel_uetgi_65{position:absolute;top:3px;left:3px;font-size:9px;color:#666;white-space:nowrap}._layersArea_Line truncated
|
||||||
+40
@@ -0,0 +1,40 @@
|
|||||||
|
(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const p of document.querySelectorAll('link[rel="modulepreload"]'))f(p);new MutationObserver(p=>{for(const g of p)if(g.type==="childList")for(const S of g.addedNodes)S.tagName==="LINK"&&S.rel==="modulepreload"&&f(S)}).observe(document,{childList:!0,subtree:!0});function s(p){const g={};return p.integrity&&(g.integrity=p.integrity),p.referrerPolicy&&(g.referrerPolicy=p.referrerPolicy),p.crossOrigin==="use-credentials"?g.credentials="include":p.crossOrigin==="anonymous"?g.credentials="omit":g.credentials="same-origin",g}function f(p){if(p.ep)return;p.ep=!0;const g=s(p);fetch(p.href,g)}})();function Bd(u){return u&&u.__esModule&&Object.prototype.hasOwnProperty.call(u,"default")?u.default:u}var bu={exports:{}},Or={},eo={exports:{}},G={};/**
|
||||||
|
* @license React
|
||||||
|
* react.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/var pc;function $d(){if(pc)return G;pc=1;var u=Symbol.for("react.element"),a=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),f=Symbol.for("react.strict_mode"),p=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),S=Symbol.for("react.context"),L=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),U=Symbol.for("react.memo"),ee=Symbol.for("react.lazy"),D=Symbol.iterator;function H(h){return h===null||typeof h!="object"?null:(h=D&&h[D]||h["@@iterator"],typeof h=="function"?h:null)}var fe={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},me=Object.assign,re={};function q(h,k,X){this.props=h,this.context=k,this.refs=re,this.updater=X||fe}q.prototype.isReactComponent={},q.prototype.setState=function(h,k){if(typeof h!="object"&&typeof h!="function"&&h!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,h,k,"setState")},q.prototype.forceUpdate=function(h){this.updater.enqueueForceUpdate(this,h,"forceUpdate")};function ge(){}ge.prototype=q.prototype;function Ge(h,k,X){this.props=h,this.context=k,this.refs=re,this.updater=X||fe}var Be=Ge.prototype=new ge;Be.constructor=Ge,me(Be,q.prototype),Be.isPureReactComponent=!0;var ke=Array.isArray,Ze=Object.prototype.hasOwnProperty,Ee={current:null},Ne={key:!0,ref:!0,__self:!0,__source:!0};function $e(h,k,X){var Y,Z={},b=null,oe=null;if(k!=null)for(Y in k.ref!==void 0&&(oe=k.ref),k.key!==void 0&&(b=""+k.key),k)Ze.call(k,Y)&&!Ne.hasOwnProperty(Y)&&(Z[Y]=k[Y]);var J=arguments.length-2;if(J===1)Z.children=X;else if(1<J){for(var de=Array(J),Je=0;Je<J;Je++)de[Je]=arguments[Je+2];Z.children=de}if(h&&h.defaultProps)for(Y in J=h.defaultProps,J)Z[Y]===void 0&&(Z[Y]=J[Y]);return{$$typeof:u,type:h,key:b,ref:oe,props:Z,_owner:Ee.current}}function rt(h,k){return{$$typeof:u,type:h.type,key:k,ref:h.ref,props:h.props,_owner:h._owner}}function pt(h){return typeof h=="object"&&h!==null&&h.$$typeof===u}function kt(h){var k={"=":"=0",":":"=2"};return"$"+h.replace(/[=:]/g,function(X){return k[X]})}var He=/\/+/g;function De(h,k){return typeof h=="object"&&h!==null&&h.key!=null?kt(""+h.key):k.toString(36)}function I(h,k,X,Y,Z){var b=typeof h;(b==="undefined"||b==="boolean")&&(h=null);var oe=!1;if(h===null)oe=!0;else switch(b){case"string":case"number":oe=!0;break;case"object":switch(h.$$typeof){case u:case a:oe=!0}}if(oe)return oe=h,Z=Z(oe),h=Y===""?"."+De(oe,0):Y,ke(Z)?(X="",h!=null&&(X=h.replace(He,"$&/")+"/"),I(Z,k,X,"",function(Je){return Je})):Z!=null&&(pt(Z)&&(Z=rt(Z,X+(!Z.key||oe&&oe.key===Z.key?"":(""+Z.key).replace(He,"$&/")+"/")+h)),k.push(Z)),1;if(oe=0,Y=Y===""?".":Y+":",ke(h))for(var J=0;J<h.length;J++){b=h[J];var de=Y+De(b,J);oe+=I(b,k,X,de,Z)}else if(de=H(h),typeof de=="function")for(h=de.call(h),J=0;!(b=h.next()).done;)b=b.value,de=Y+De(b,J++),oe+=I(b,k,X,de,Z);else if(b==="object")throw k=String(h),Error("Objects are not valid as a React child (found: "+(k==="[object Object]"?"object with keys {"+Object.keys(h).join(", ")+"}":k)+"). If you meant to render a collection of children, use an array instead.");return oe}function Q(h,k,X){if(h==null)return h;var Y=[],Z=0;return I(h,Y,"","",function(b){return k.call(X,b,Z++)}),Y}function le(h){if(h._status===-1){var k=h._result;k=k(),k.then(function(X){(h._status===0||h._status===-1)&&(h._status=1,h._result=X)},function(X){(h._status===0||h._status===-1)&&(h._status=2,h._result=X)}),h._status===-1&&(h._status=0,h._result=k)}if(h._status===1)return h._result.default;throw h._result}var K={current:null},M={transition:null},A={ReactCurrentDispatcher:K,ReactCurrentBatchConfig:M,ReactCurrentOwner:Ee};function P(){throw Error("act(...) is not supported in production builds of React.")}return G.Children={map:Q,forEach:function(h,k,X){Q(h,function(){k.apply(this,arguments)},X)},count:function(h){var k=0;return Q(h,function(){k++}),k},toArray:function(h){return Q(h,function(k){return k})||[]},only:function(h){if(!pt(h))throw Error("React.Children.only expected to receive a single React element child.");return h}},G.Component=q,G.Fragment=s,G.Profiler=p,G.PureComponent=Ge,G.StrictMode=f,G.Suspense=z,G.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=A,G.act=P,G.cloneElement=function(h,k,X){if(h==null)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+h+".");var Y=me({},h.props),Z=h.key,b=h.ref,oe=h._owner;if(k!=null){if(k.ref!==void 0&&(b=k.ref,oe=Ee.current),k.key!==void 0&&(Z=""+k.key),h.type&&h.type.defaultProps)var J=h.type.defaultProps;for(de in k)Ze.call(k,de)&&!Ne.hasOwnProperty(de)&&(Y[de]=k[de]===void 0&&J!==void 0?J[de]:k[de])}var de=arguments.length-2;if(de===1)Y.children=X;else if(1<de){J=Array(de);for(var Je=0;Je<de;Je++)J[Je]=arguments[Je+2];Y.children=J}return{$$typeof:u,type:h.type,key:Z,ref:b,props:Y,_owner:oe}},G.createContext=function(h){return h={$$typeof:S,_currLine truncated
|
||||||
|
* @license React
|
||||||
|
* react-jsx-runtime.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/var hc;function Hd(){if(hc)return Or;hc=1;var u=vo(),a=Symbol.for("react.element"),s=Symbol.for("react.fragment"),f=Object.prototype.hasOwnProperty,p=u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,g={key:!0,ref:!0,__self:!0,__source:!0};function S(L,z,U){var ee,D={},H=null,fe=null;U!==void 0&&(H=""+U),z.key!==void 0&&(H=""+z.key),z.ref!==void 0&&(fe=z.ref);for(ee in z)f.call(z,ee)&&!g.hasOwnProperty(ee)&&(D[ee]=z[ee]);if(L&&L.defaultProps)for(ee in z=L.defaultProps,z)D[ee]===void 0&&(D[ee]=z[ee]);return{$$typeof:a,type:L,key:H,ref:fe,props:D,_owner:p.current}}return Or.Fragment=s,Or.jsx=S,Or.jsxs=S,Or}var vc;function Wd(){return vc||(vc=1,bu.exports=Hd()),bu.exports}var y=Wd(),ze=vo();const Zl=Bd(ze);var Jl={},to={exports:{}},Ke={},no={exports:{}},ro={};/**
|
||||||
|
* @license React
|
||||||
|
* scheduler.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/var yc;function Vd(){return yc||(yc=1,(function(u){function a(M,A){var P=M.length;M.push(A);e:for(;0<P;){var h=P-1>>>1,k=M[h];if(0<p(k,A))M[h]=A,M[P]=k,P=h;else break e}}function s(M){return M.length===0?null:M[0]}function f(M){if(M.length===0)return null;var A=M[0],P=M.pop();if(P!==A){M[0]=P;e:for(var h=0,k=M.length,X=k>>>1;h<X;){var Y=2*(h+1)-1,Z=M[Y],b=Y+1,oe=M[b];if(0>p(Z,P))b<k&&0>p(oe,Z)?(M[h]=oe,M[b]=P,h=b):(M[h]=Z,M[Y]=P,h=Y);else if(b<k&&0>p(oe,P))M[h]=oe,M[b]=P,h=b;else break e}}return A}function p(M,A){var P=M.sortIndex-A.sortIndex;return P!==0?P:M.id-A.id}if(typeof performance=="object"&&typeof performance.now=="function"){var g=performance;u.unstable_now=function(){return g.now()}}else{var S=Date,L=S.now();u.unstable_now=function(){return S.now()-L}}var z=[],U=[],ee=1,D=null,H=3,fe=!1,me=!1,re=!1,q=typeof setTimeout=="function"?setTimeout:null,ge=typeof clearTimeout=="function"?clearTimeout:null,Ge=typeof setImmediate<"u"?setImmediate:null;typeof navigator<"u"&&navigator.scheduling!==void 0&&navigator.scheduling.isInputPending!==void 0&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function Be(M){for(var A=s(U);A!==null;){if(A.callback===null)f(U);else if(A.startTime<=M)f(U),A.sortIndex=A.expirationTime,a(z,A);else break;A=s(U)}}function ke(M){if(re=!1,Be(M),!me)if(s(z)!==null)me=!0,le(Ze);else{var A=s(U);A!==null&&K(ke,A.startTime-M)}}function Ze(M,A){me=!1,re&&(re=!1,ge($e),$e=-1),fe=!0;var P=H;try{for(Be(A),D=s(z);D!==null&&(!(D.expirationTime>A)||M&&!kt());){var h=D.callback;if(typeof h=="function"){D.callback=null,H=D.priorityLevel;var k=h(D.expirationTime<=A);A=u.unstable_now(),typeof k=="function"?D.callback=k:D===s(z)&&f(z),Be(A)}else f(z);D=s(z)}if(D!==null)var X=!0;else{var Y=s(U);Y!==null&&K(ke,Y.startTime-A),X=!1}return X}finally{D=null,H=P,fe=!1}}var Ee=!1,Ne=null,$e=-1,rt=5,pt=-1;function kt(){return!(u.unstable_now()-pt<rt)}function He(){if(Ne!==null){var M=u.unstable_now();pt=M;var A=!0;try{A=Ne(!0,M)}finally{A?De():(Ee=!1,Ne=null)}}else Ee=!1}var De;if(typeof Ge=="function")De=function(){Ge(He)};else if(typeof MessageChannel<"u"){var I=new MessageChannel,Q=I.port2;I.port1.onmessage=He,De=function(){Q.postMessage(null)}}else De=function(){q(He,0)};function le(M){Ne=M,Ee||(Ee=!0,De())}function K(M,A){$e=q(function(){M(u.unstable_now())},A)}u.unstable_IdlePriority=5,u.unstable_ImmediatePriority=1,u.unstable_LowPriority=4,u.unstable_NormalPriority=3,u.unstable_Profiling=null,u.unstable_UserBlockingPriority=2,u.unstable_cancelCallback=function(M){M.callback=null},u.unstable_continueExecution=function(){me||fe||(me=!0,le(Ze))},u.unstable_forceFrameRate=function(M){0>M||125<M?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):rt=0<M?Math.floor(1e3/M):5},u.unstable_getCurrentPriorityLevel=function(){return H},u.unstable_getFirstCallbackNode=function(){return s(z)},u.unstable_next=function(M){switch(H){case 1:case 2:case 3:var A=3;break;default:A=H}var P=H;H=A;try{return M()}finally{H=P}},u.unstable_pauseExecution=function(){},u.unstable_requestPaint=function(){},u.unstable_runWithPriority=function(M,A){switch(M){case 1:case 2:case 3:case 4:case 5:break;default:M=3}var P=H;H=M;try{return A()}finally{H=P}},u.unstable_scheduleCallback=function(M,A,P){var h=u.unstable_now();switch(typeof P=="object"&&P!==null?(P=P.delay,P=typeof P=="number"&&0<P?h+P:h):P=h,M){case 1:var k=-1;break;case 2:k=250;break;case 5:k=1073741823;break;case 4:k=1e4;break;default:k=5e3}return k=P+k,M={id:ee++,callback:A,priorityLevel:M,startTime:P,expirationTime:k,sortIndex:-1},P>h?(M.sortIndex=P,a(U,M),s(z)===null&&M===s(U)&&(re?(ge($e),$e=-1):re=!0,K(ke,P-h))):(M.sortIndex=k,a(z,M),me||fe||(me=!0,le(Ze))),M},u.unstable_shouldYield=kt,u.unstable_wrapCallback=function(M){var A=H;return function(){var P=H;H=A;try{return M.apply(this,arguments)}finally{H=P}}}})(ro)),ro}var gc;function Qd(){return gc||(gc=1,no.exports=Vd()),no.exports}/**
|
||||||
|
* @license React
|
||||||
|
* react-dom.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/var _c;function Xd(){if(_c)return Ke;_c=1;var u=vo(),a=Qd();function s(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var f=new Set,p={};function g(e,t){S(e,t),S(e+"Capture",t)}function S(e,t){for(p[e]=t,e=0;e<t.length;e++)f.add(t[e])}var L=!(typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),z=Object.prototype.hasOwnProperty,U=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,ee={},D={};function H(e){return z.call(D,e)?!0:z.call(ee,e)?!1:U.test(e)?D[e]=!0:(ee[e]=!0,!1)}function fe(e,t,n,r){if(n!==null&&n.type===0)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return r?!1:n!==null?!n.acceptsBooleans:(e=e.toLowerCase().slice(0,5),e!=="data-"&&e!=="aria-");default:return!1}}function me(e,t,n,r){if(t===null||typeof t>"u"||fe(e,t,n,r))return!0;if(r)return!1;if(n!==null)switch(n.type){case 3:return!t;case 4:return t===!1;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}function re(e,t,n,r,l,i,o){this.acceptsBooleans=t===2||t===3||t===4,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=i,this.removeEmptyString=o}var q={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){q[e]=new re(e,0,!1,e,null,!1,!1)}),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var t=e[0];q[t]=new re(t,1,!1,e[1],null,!1,!1)}),["contentEditable","draggable","spellCheck","value"].forEach(function(e){q[e]=new re(e,2,!1,e.toLowerCase(),null,!1,!1)}),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(e){q[e]=new re(e,2,!1,e,null,!1,!1)}),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){q[e]=new re(e,3,!1,e.toLowerCase(),null,!1,!1)}),["checked","multiple","muted","selected"].forEach(function(e){q[e]=new re(e,3,!0,e,null,!1,!1)}),["capture","download"].forEach(function(e){q[e]=new re(e,4,!1,e,null,!1,!1)}),["cols","rows","size","span"].forEach(function(e){q[e]=new re(e,6,!1,e,null,!1,!1)}),["rowSpan","start"].forEach(function(e){q[e]=new re(e,5,!1,e.toLowerCase(),null,!1,!1)});var ge=/[\-:]([a-z])/g;function Ge(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var t=e.replace(ge,Ge);q[t]=new re(t,1,!1,e,null,!1,!1)}),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var t=e.replace(ge,Ge);q[t]=new re(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)}),["xml:base","xml:lang","xml:space"].forEach(function(e){var t=e.replace(ge,Ge);q[t]=new re(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)}),["tabIndex","crossOrigin"].forEach(function(e){q[e]=new re(e,1,!1,e.toLowerCase(),null,!1,!1)}),q.xlinkHref=new re("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach(function(e){q[e]=new re(e,1,!1,e.toLowerCase(),null,!0,!0)});function Be(e,t,n,r){var l=q.hasOwnProperty(t)?q[t]:null;(l!==null?l.type!==0:r||!(2<t.length)||t[0]!=="o"&
Line truncated
|
||||||
|
`+h+e}var X=!1;function Y(e,t){if(!e||X)return"";X=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(t,[])}catch(w){var r=w}Reflect.construct(e,[],t)}else{try{t.call()}catch(w){r=w}e.call(t.prototype)}else{try{throw Error()}catch(w){r=w}e()}}catch(w){if(w&&r&&typeof w.stack=="string"){for(var l=w.stack.split(`
|
||||||
|
`),i=r.stack.split(`
|
||||||
|
`),o=l.length-1,c=i.length-1;1<=o&&0<=c&&l[o]!==i[c];)c--;for(;1<=o&&0<=c;o--,c--)if(l[o]!==i[c]){if(o!==1||c!==1)do if(o--,c--,0>c||l[o]!==i[c]){var d=`
|
||||||
|
`+l[o].replace(" at new "," at ");return e.displayName&&d.includes("<anonymous>")&&(d=d.replace("<anonymous>",e.displayName)),d}while(1<=o&&0<=c);break}}}finally{X=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?k(e):""}function Z(e){switch(e.tag){case 5:return k(e.type);case 16:return k("Lazy");case 13:return k("Suspense");case 19:return k("SuspenseList");case 0:case 2:case 15:return e=Y(e.type,!1),e;case 11:return e=Y(e.type.render,!1),e;case 1:return e=Y(e.type,!0),e;default:return""}}function b(e){if(e==null)return null;if(typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case Ne:return"Fragment";case Ee:return"Portal";case rt:return"Profiler";case $e:return"StrictMode";case De:return"Suspense";case I:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case kt:return(e.displayName||"Context")+".Consumer";case pt:return(e._context.displayName||"Context")+".Provider";case He:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return t=e.displayName||null,t!==null?t:b(e.type)||"Memo";case le:t=e._payload,e=e._init;try{return b(e(t))}catch{}}return null}function oe(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=t.render,e=e.displayName||e.name||"",t.displayName||(e!==""?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return b(t);case 8:return t===$e?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if(typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t}return null}function J(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":return e;case"object":return e;default:return""}}function de(e){var t=e.type;return(e=e.nodeName)&&e.toLowerCase()==="input"&&(t==="checkbox"||t==="radio")}function Je(e){var t=de(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&typeof n<"u"&&typeof n.get=="function"&&typeof n.set=="function"){var l=n.get,i=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return l.call(this)},set:function(o){r=""+o,i.call(this,o)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(o){r=""+o},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}function Br(e){e._valueTracker||(e._valueTracker=Je(e))}function _o(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=de(e)?e.checked?"true":"false":e.value),e=r,e!==n?(t.setValue(e),!0):!1}function $r(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function ui(e,t){var n=t.checked;return P({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:n??e._wrapperState.initialChecked})}function wo(e,t){var n=t.defaultValue==null?"":t.defaultValue,r=t.checked!=null?t.checked:t.defaultChecked;n=J(t.value!=null?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:t.type==="checkbox"||t.type==="radio"?t.checked!=null:t.value!=null}}function So(e,t){t=t.checked,t!=null&&Be(e,"checked",t,!1)}function oi(e,t){So(e,t);var n=J(t.value),r=t.type;if(n!=null)r==="number"?(n===0&&e.value===""||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if(r==="submit"||r==="reset"){e.removeAttribute("value");return}t.hasOwnProperty("value")?si(e,t.type,n):t.hasOwnProperty("defaultValue")&&si(e,t.type,J(t.defaultValue)),t.checked==null&&t.defaultChecked!=null&&(e.defaultChecked=!!t.defaultChecked)}function ko(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!(r!=="submit"&&r!=="reset"||t.value!==void 0&&t.value!==null))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}n=e.name,n!==""&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,n!==""&&(e.name=n)}function si(e,t,n){(t!=="number"||$r(e.ownerDocument)!==e)&&(n==null?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var Gn=Array.isArray;function Sn(e,t,n,r){if(e=e.options,t){t={};for(var l=0;l<n.length;l++)t["$"+n[l]]=!0;for(n=0;n<e.length;n++)l=t.hasOwnProperty("$"+e[n].value),e[n].selected!==l&&(e[n].selected=l),l&&r&&(e[n].defaultSelected=!0)}else{for(n=""+J(n),t=null,l=0;l<e.length;l++){if(e[l].value===n){e[l].selected=!0,r&&(e[l].defaultSelected=!0);return}t!==null||e[l].disabled||(t=e[l])}t!==null&&(t.selected=!0)}}function ai(e,t){if(t.dangerouslySetInnerHTML!=
Line truncated
|
||||||
|
`).replace(bf,"")}function al(e,t,n){if(t=zs(t),zs(e)!==t&&n)throw Error(s(425))}function cl(){}var Vi=null,Qi=null;function Xi(e,t){return e==="textarea"||e==="noscript"||typeof t.children=="string"||typeof t.children=="number"||typeof t.dangerouslySetInnerHTML=="object"&&t.dangerouslySetInnerHTML!==null&&t.dangerouslySetInnerHTML.__html!=null}var Yi=typeof setTimeout=="function"?setTimeout:void 0,ed=typeof clearTimeout=="function"?clearTimeout:void 0,Ts=typeof Promise=="function"?Promise:void 0,td=typeof queueMicrotask=="function"?queueMicrotask:typeof Ts<"u"?function(e){return Ts.resolve(null).then(e).catch(nd)}:Yi;function nd(e){setTimeout(function(){throw e})}function Ki(e,t){var n=t,r=0;do{var l=n.nextSibling;if(e.removeChild(n),l&&l.nodeType===8)if(n=l.data,n==="/$"){if(r===0){e.removeChild(l),or(t);return}r--}else n!=="$"&&n!=="$?"&&n!=="$!"||r++;n=l}while(n);or(t)}function Wt(e){for(;e!=null;e=e.nextSibling){var t=e.nodeType;if(t===1||t===3)break;if(t===8){if(t=e.data,t==="$"||t==="$!"||t==="$?")break;if(t==="/$")return null}}return e}function Os(e){e=e.previousSibling;for(var t=0;e;){if(e.nodeType===8){var n=e.data;if(n==="$"||n==="$!"||n==="$?"){if(t===0)return e;t--}else n==="/$"&&t++}e=e.previousSibling}return null}var jn=Math.random().toString(36).slice(2),Ct="__reactFiber$"+jn,gr="__reactProps$"+jn,Pt="__reactContainer$"+jn,Gi="__reactEvents$"+jn,rd="__reactListeners$"+jn,ld="__reactHandles$"+jn;function ln(e){var t=e[Ct];if(t)return t;for(var n=e.parentNode;n;){if(t=n[Pt]||n[Ct]){if(n=t.alternate,t.child!==null||n!==null&&n.child!==null)for(e=Os(e);e!==null;){if(n=e[Ct])return n;e=Os(e)}return t}e=n,n=e.parentNode}return null}function _r(e){return e=e[Ct]||e[Pt],!e||e.tag!==5&&e.tag!==6&&e.tag!==13&&e.tag!==3?null:e}function In(e){if(e.tag===5||e.tag===6)return e.stateNode;throw Error(s(33))}function fl(e){return e[gr]||null}var Zi=[],zn=-1;function Vt(e){return{current:e}}function ce(e){0>zn||(e.current=Zi[zn],Zi[zn]=null,zn--)}function se(e,t){zn++,Zi[zn]=e.current,e.current=t}var Qt={},Te=Vt(Qt),We=Vt(!1),un=Qt;function Tn(e,t){var n=e.type.contextTypes;if(!n)return Qt;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var l={},i;for(i in n)l[i]=t[i];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=l),l}function Ve(e){return e=e.childContextTypes,e!=null}function dl(){ce(We),ce(Te)}function Rs(e,t,n){if(Te.current!==Qt)throw Error(s(168));se(Te,t),se(We,n)}function Fs(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,typeof r.getChildContext!="function")return n;r=r.getChildContext();for(var l in r)if(!(l in t))throw Error(s(108,oe(e)||"Unknown",l));return P({},n,r)}function pl(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Qt,un=Te.current,se(Te,e),se(We,We.current),!0}function Ds(e,t,n){var r=e.stateNode;if(!r)throw Error(s(169));n?(e=Fs(e,t,un),r.__reactInternalMemoizedMergedChildContext=e,ce(We),ce(Te),se(Te,e)):ce(We),se(We,n)}var jt=null,ml=!1,Ji=!1;function As(e){jt===null?jt=[e]:jt.push(e)}function id(e){ml=!0,As(e)}function Xt(){if(!Ji&&jt!==null){Ji=!0;var e=0,t=ue;try{var n=jt;for(ue=1;e<n.length;e++){var r=n[e];do r=r(!0);while(r!==null)}jt=null,ml=!1}catch(l){throw jt!==null&&(jt=jt.slice(e+1)),Bo(_i,Xt),l}finally{ue=t,Ji=!1}}return null}var On=[],Rn=0,hl=null,vl=0,lt=[],it=0,on=null,It=1,zt="";function sn(e,t){On[Rn++]=vl,On[Rn++]=hl,hl=e,vl=t}function Us(e,t,n){lt[it++]=It,lt[it++]=zt,lt[it++]=on,on=e;var r=It;e=zt;var l=32-mt(r)-1;r&=~(1<<l),n+=1;var i=32-mt(t)+l;if(30<i){var o=l-l%5;i=(r&(1<<o)-1).toString(32),r>>=o,l-=o,It=1<<32-mt(t)+l|n<<l|r,zt=i+e}else It=1<<i|n<<l|r,zt=e}function qi(e){e.return!==null&&(sn(e,1),Us(e,1,0))}function bi(e){for(;e===hl;)hl=On[--Rn],On[Rn]=null,vl=On[--Rn],On[Rn]=null;for(;e===on;)on=lt[--it],lt[it]=null,zt=lt[--it],lt[it]=null,It=lt[--it],lt[it]=null}var be=null,et=null,pe=!1,vt=null;function Bs(e,t){var n=at(5,null,null,0);n.elementType="DELETED",n.stateNode=t,n.return=e,t=e.deletions,t===null?(e.deletions=[n],e.flags|=16):t.push(n)}function $s(e,t){switch(e.tag){case 5:var n=e.type;return t=t.nodeType!==1||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t,t!==null?(e.stateNode=t,be=e,et=Wt(t.firstChild),!0):!1;case 6:return t=e.pendingProps===""||t.nodeType!==3?null:t,t!==null?(e.stateNode=t,be=e,et=null,!0):!1;case 13:return t=t.nodeType!==8?null:t,t!==null?(n=on!==null?{id:It,overflow:zt}:null,e.memoizedState={dehydrated:t,treeContext:n,retryLane:1073741824},n=at(18,null,null,0),n.stateNode=t,n.return=e,e.child=n,be=e,et=null,!0):!1;default:return!1}}function eu(e){return(e.mode&1)!==0&&(e.flags&128)===0}function tu(e){if(pe){var t=et;if(t){var n=t;if(!$s(e,t)){if(eu(e))throw Error(s(418));t=Wt(n.nextSibling);var r=be;t&&$s(e,t)?Bs(r,n):(e.flags=e.flags&-4097|2,pe=!1,be=e)}}else{if(eu(e))throw Error(s(418));e.flags=e.flags&-4097|2,pe=!1,be=e}}}function Hs(e){for(e=e.
Line truncated
|
||||||
|
Error generating stack: `+i.message+`
|
||||||
|
`+i.stack}return{value:e,source:t,stack:l,digest:null}}function xu(e,t,n){return{value:e,source:null,stack:n??null,digest:t??null}}function Cu(e,t){try{console.error(t.value)}catch(n){setTimeout(function(){throw n})}}var md=typeof WeakMap=="function"?WeakMap:Map;function ka(e,t,n){n=Ot(-1,n),n.tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Fl||(Fl=!0,Uu=r),Cu(e,t)},n}function xa(e,t,n){n=Ot(-1,n),n.tag=3;var r=e.type.getDerivedStateFromError;if(typeof r=="function"){var l=t.value;n.payload=function(){return r(l)},n.callback=function(){Cu(e,t)}}var i=e.stateNode;return i!==null&&typeof i.componentDidCatch=="function"&&(n.callback=function(){Cu(e,t),typeof r!="function"&&(Zt===null?Zt=new Set([this]):Zt.add(this));var o=t.stack;this.componentDidCatch(t.value,{componentStack:o!==null?o:""})}),n}function Ca(e,t,n){var r=e.pingCache;if(r===null){r=e.pingCache=new md;var l=new Set;r.set(t,l)}else l=r.get(t),l===void 0&&(l=new Set,r.set(t,l));l.has(n)||(l.add(n),e=Md.bind(null,e,t,n),t.then(e,e))}function Ea(e){do{var t;if((t=e.tag===13)&&(t=e.memoizedState,t=t!==null?t.dehydrated!==null:!0),t)return e;e=e.return}while(e!==null);return null}function Na(e,t,n,r,l){return(e.mode&1)===0?(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,n.tag===1&&(n.alternate===null?n.tag=17:(t=Ot(-1,1),t.tag=2,Kt(n,t,1))),n.lanes|=1),e):(e.flags|=65536,e.lanes=l,e)}var hd=ke.ReactCurrentOwner,Qe=!1;function Ae(e,t,n,r){t.child=e===null?Xs(t,null,n,r):Dn(t,e.child,n,r)}function La(e,t,n,r,l){n=n.render;var i=t.ref;return Un(t,l),r=hu(e,t,n,r,i,l),n=vu(),e!==null&&!Qe?(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~l,Rt(e,t,l)):(pe&&n&&qi(t),t.flags|=1,Ae(e,t,r,l),t.child)}function Ma(e,t,n,r,l){if(e===null){var i=n.type;return typeof i=="function"&&!Xu(i)&&i.defaultProps===void 0&&n.compare===null&&n.defaultProps===void 0?(t.tag=15,t.type=i,Pa(e,t,i,r,l)):(e=Hl(n.type,null,r,t,t.mode,l),e.ref=t.ref,e.return=t,t.child=e)}if(i=e.child,(e.lanes&l)===0){var o=i.memoizedProps;if(n=n.compare,n=n!==null?n:pr,n(o,r)&&e.ref===t.ref)return Rt(e,t,l)}return t.flags|=1,e=en(i,r),e.ref=t.ref,e.return=t,t.child=e}function Pa(e,t,n,r,l){if(e!==null){var i=e.memoizedProps;if(pr(i,r)&&e.ref===t.ref)if(Qe=!1,t.pendingProps=r=i,(e.lanes&l)!==0)(e.flags&131072)!==0&&(Qe=!0);else return t.lanes=e.lanes,Rt(e,t,l)}return Eu(e,t,n,r,l)}function ja(e,t,n){var r=t.pendingProps,l=r.children,i=e!==null?e.memoizedState:null;if(r.mode==="hidden")if((t.mode&1)===0)t.memoizedState={baseLanes:0,cachePool:null,transitions:null},se(Wn,tt),tt|=n;else{if((n&1073741824)===0)return e=i!==null?i.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,se(Wn,tt),tt|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=i!==null?i.baseLanes:n,se(Wn,tt),tt|=r}else i!==null?(r=i.baseLanes|n,t.memoizedState=null):r=n,se(Wn,tt),tt|=r;return Ae(e,t,l,n),t.child}function Ia(e,t){var n=t.ref;(e===null&&n!==null||e!==null&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function Eu(e,t,n,r,l){var i=Ve(n)?un:Te.current;return i=Tn(t,i),Un(t,l),n=hu(e,t,n,r,i,l),r=vu(),e!==null&&!Qe?(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~l,Rt(e,t,l)):(pe&&r&&qi(t),t.flags|=1,Ae(e,t,n,l),t.child)}function za(e,t,n,r,l){if(Ve(n)){var i=!0;pl(t)}else i=!1;if(Un(t,l),t.stateNode===null)Il(e,t),wa(t,n,r),ku(t,n,r,l),r=!0;else if(e===null){var o=t.stateNode,c=t.memoizedProps;o.props=c;var d=o.context,w=n.contextType;typeof w=="object"&&w!==null?w=ut(w):(w=Ve(n)?un:Te.current,w=Tn(t,w));var C=n.getDerivedStateFromProps,E=typeof C=="function"||typeof o.getSnapshotBeforeUpdate=="function";E||typeof o.UNSAFE_componentWillReceiveProps!="function"&&typeof o.componentWillReceiveProps!="function"||(c!==r||d!==w)&&Sa(t,o,r,w),Yt=!1;var x=t.memoizedState;o.state=x,kl(t,r,o,l),d=t.memoizedState,c!==r||x!==d||We.current||Yt?(typeof C=="function"&&(Su(t,n,C,r),d=t.memoizedState),(c=Yt||_a(t,n,c,r,x,d,w))?(E||typeof o.UNSAFE_componentWillMount!="function"&&typeof o.componentWillMount!="function"||(typeof o.componentWillMount=="function"&&o.componentWillMount(),typeof o.UNSAFE_componentWillMount=="function"&&o.UNSAFE_componentWillMount()),typeof o.componentDidMount=="function"&&(t.flags|=4194308)):(typeof o.componentDidMount=="function"&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=d),o.props=r,o.state=d,o.context=w,r=c):(typeof o.componentDidMount=="function"&&(t.flags|=4194308),r=!1)}else{o=t.stateNode,Ks(e,t),c=t.memoizedProps,w=t.type===t.elementType?c:yt(t.type,c),o.props=w,E=t.pendingProps,x=o.context,d=n.contextType,typeof d=="object"&&d!==null?d=ut(d):(d=Ve(n)?un:Te.current,d=Tn(t,d));var j=n.getDerivedStateFromProps;(C=typeof j=="function"||typeof o.getSnapshotBeforeUpdate=="function")||typeof o.UNSAFE_componentWillReceiveProps!="function"&&typeof o.componentWillReceiveProps!="function"||(c!==E||x!==d)&&Sa(t,o,r,d),Yt=!1,x=t.memoizedState,o.state=x,kl(t,r,o,
Line truncated
|
||||||
Vendored
+13
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Cutscene Editor</title>
|
||||||
|
<script type="module" crossorigin src="/assets/index-D_5Tak8P.js"></script>
|
||||||
|
<link rel="stylesheet" crossorigin href="/assets/index-B96C0g1n.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Cutscene Editor</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+1890
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "cutscene-editor",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"immer": "^10.1.1",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"zustand": "^5.0.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.3.1",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"typescript": "^5.7.2",
|
||||||
|
"vite": "^6.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import styles from './App.module.css';
|
||||||
|
import LeftPanel from './components/LeftPanel/LeftPanel';
|
||||||
|
import CenterPanel from './components/CenterPanel/CenterPanel';
|
||||||
|
import RightPanel from './components/RightPanel/RightPanel';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<div className={styles.app}>
|
||||||
|
<LeftPanel />
|
||||||
|
<CenterPanel />
|
||||||
|
<RightPanel />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
.panel {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewArea {
|
||||||
|
flex: 0 1 420px;
|
||||||
|
min-height: 120px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #111;
|
||||||
|
padding: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import styles from './CenterPanel.module.css';
|
||||||
|
import Preview from '../Preview/Preview';
|
||||||
|
import Controls from '../Controls/Controls';
|
||||||
|
import Timeline from '../Timeline/Timeline';
|
||||||
|
|
||||||
|
export default function CenterPanel() {
|
||||||
|
return (
|
||||||
|
<div className={styles.panel}>
|
||||||
|
<div className={styles.previewArea}>
|
||||||
|
<Preview />
|
||||||
|
</div>
|
||||||
|
<Controls />
|
||||||
|
<Timeline />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-top: 1px solid #333;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: #2d2d2d;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
color: #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
transition: background 0.1s;
|
||||||
|
min-width: 32px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
|
||||||
|
.btn:disabled { opacity: 0.35; cursor: default; }
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #5ba3e0;
|
||||||
|
border-color: #4a7aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Scrubber ───────────────────────────────────────────────── */
|
||||||
|
.scrubber {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
height: 4px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
/* filled portion via CSS variable set inline */
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#5b9bd5 0%,
|
||||||
|
#5b9bd5 var(--progress, 0%),
|
||||||
|
#3a3a3a var(--progress, 0%),
|
||||||
|
#3a3a3a 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrubber:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrubber::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #5b9bd5;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid #1e1e1e;
|
||||||
|
transition: transform 0.1s;
|
||||||
|
}
|
||||||
|
.scrubber:not(:disabled)::-webkit-slider-thumb:hover {
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrubber::-moz-range-thumb {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #5b9bd5;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid #1e1e1e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrubber::-moz-range-track {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #3a3a3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #888;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||||
|
import { usePlayback } from '../../hooks/usePlayback';
|
||||||
|
import styles from './Controls.module.css';
|
||||||
|
|
||||||
|
function formatMs(ms: number) {
|
||||||
|
const s = Math.floor(ms / 1000);
|
||||||
|
const frac = Math.floor((ms % 1000) / 10).toString().padStart(2, '0');
|
||||||
|
return `${s}.${frac}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Controls() {
|
||||||
|
usePlayback();
|
||||||
|
|
||||||
|
const { playState, currentTimeMs, setPlayState, setCurrentTime } = useCutsceneStore();
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
|
||||||
|
const totalMs = cutscene
|
||||||
|
? Math.max(
|
||||||
|
cutscene.durationMs,
|
||||||
|
cutscene.imageSegments.reduce((m, s) => Math.max(m, s.endMs), 0)
|
||||||
|
) + cutscene.endFadeOutMs + cutscene.endFadeInMs
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
function play() {
|
||||||
|
if (playState === 'stopped' || currentTimeMs >= totalMs) setCurrentTime(0);
|
||||||
|
setPlayState('playing');
|
||||||
|
}
|
||||||
|
|
||||||
|
function pause() { setPlayState('paused'); }
|
||||||
|
function stop() { setPlayState('stopped'); setCurrentTime(0); }
|
||||||
|
|
||||||
|
function handleScrub(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const ms = Number(e.target.value);
|
||||||
|
setCurrentTime(ms);
|
||||||
|
if (playState === 'playing') setPlayState('paused');
|
||||||
|
}
|
||||||
|
|
||||||
|
const progress = totalMs > 0 ? currentTimeMs / totalMs : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.controls}>
|
||||||
|
<button className={styles.btn} onClick={stop} title="Stop" disabled={!cutscene}>⏹</button>
|
||||||
|
<button className={styles.btn} onClick={() => setCurrentTime(0)} title="Rewind" disabled={!cutscene}>⏮</button>
|
||||||
|
{playState === 'playing' ? (
|
||||||
|
<button className={`${styles.btn} ${styles.active}`} onClick={pause} title="Pause" disabled={!cutscene}>⏸</button>
|
||||||
|
) : (
|
||||||
|
<button className={`${styles.btn} ${styles.active}`} onClick={play} title="Play" disabled={!cutscene}>▶</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<input
|
||||||
|
className={styles.scrubber}
|
||||||
|
type="range"
|
||||||
|
min={0}
|
||||||
|
max={totalMs || 1}
|
||||||
|
step={16}
|
||||||
|
value={currentTimeMs}
|
||||||
|
onChange={handleScrub}
|
||||||
|
disabled={!cutscene}
|
||||||
|
style={{ '--progress': `${progress * 100}%` } as React.CSSProperties}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={styles.time}>
|
||||||
|
{formatMs(currentTimeMs)} / {formatMs(totalMs)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
.panel {
|
||||||
|
width: 200px;
|
||||||
|
min-width: 180px;
|
||||||
|
background: #252525;
|
||||||
|
border-right: 1px solid #333;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #888;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: #333;
|
||||||
|
color: #ddd;
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 5px 8px;
|
||||||
|
text-align: center;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover:not(:disabled) { background: #3d3d3d; }
|
||||||
|
.btn:disabled { opacity: 0.4; cursor: default; }
|
||||||
|
|
||||||
|
.btnPrimary {
|
||||||
|
composes: btn;
|
||||||
|
background: #2a4a6e;
|
||||||
|
border-color: #3a6090;
|
||||||
|
color: #a8d0f0;
|
||||||
|
}
|
||||||
|
.btnPrimary:hover { background: #2e5480; }
|
||||||
|
|
||||||
|
.list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
padding: 16px 12px;
|
||||||
|
color: #555;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 7px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover { background: #2e2e2e; }
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background: #1e3a55;
|
||||||
|
border-left-color: #5b9bd5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemId {
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteBtn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #666;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.1s, color 0.1s;
|
||||||
|
}
|
||||||
|
.item:hover .deleteBtn { opacity: 1; }
|
||||||
|
.deleteBtn:hover { color: #e06c6c; }
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import { useRef } from 'react';
|
||||||
|
import { useCutsceneStore } from '../../store/cutsceneStore';
|
||||||
|
import { parseFile, triggerDownload } from '../../utils/fileIO';
|
||||||
|
import styles from './LeftPanel.module.css';
|
||||||
|
|
||||||
|
export default function LeftPanel() {
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const { file, selectedCutsceneId, loadFile, addCutscene, deleteCutscene, selectCutscene, getExportData } = useCutsceneStore();
|
||||||
|
|
||||||
|
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const f = e.target.files?.[0];
|
||||||
|
if (!f) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (ev) => {
|
||||||
|
try {
|
||||||
|
const json = JSON.parse(ev.target!.result as string);
|
||||||
|
loadFile(parseFile(json));
|
||||||
|
} catch {
|
||||||
|
alert('Invalid JSON file');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsText(f);
|
||||||
|
e.target.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSave() {
|
||||||
|
const data = getExportData();
|
||||||
|
if (data) triggerDownload(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(id: string) {
|
||||||
|
if (confirm(`Delete cutscene "${id}"?`)) deleteCutscene(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.panel}>
|
||||||
|
<div className={styles.header}>Cutscenes</div>
|
||||||
|
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<button className={styles.btnPrimary} onClick={() => fileInputRef.current?.click()}>
|
||||||
|
Load JSON
|
||||||
|
</button>
|
||||||
|
<input ref={fileInputRef} type="file" accept=".json" style={{ display: 'none' }} onChange={handleFileChange} />
|
||||||
|
<button className={styles.btn} onClick={handleSave} disabled={!file}>
|
||||||
|
Save JSON
|
||||||
|
</button>
|
||||||
|
<button className={styles.btn} onClick={addCutscene}>
|
||||||
|
+ New
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.list}>
|
||||||
|
{!file || file.cutscenes.length === 0 ? (
|
||||||
|
<div className={styles.empty}>No cutscenes. Load a JSON or create new.</div>
|
||||||
|
) : (
|
||||||
|
file.cutscenes.map(c => (
|
||||||
|
<div
|
||||||
|
key={c.id}
|
||||||
|
className={`${styles.item} ${c.id === selectedCutsceneId ? styles.selected : ''}`}
|
||||||
|
onClick={() => selectCutscene(c.id)}
|
||||||
|
>
|
||||||
|
<span className={styles.itemId}>{c.id}</span>
|
||||||
|
<button
|
||||||
|
className={styles.deleteBtn}
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleDelete(c.id); }}
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #444;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitleBar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 10px 20px 14px;
|
||||||
|
background: linear-gradient(transparent, rgba(0,0,0,0.75));
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f0c060;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { useRef, useEffect, useState } from 'react';
|
||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||||
|
import { computeSegmentState, poseToStyle } from '../../utils/rendering';
|
||||||
|
import styles from './Preview.module.css';
|
||||||
|
|
||||||
|
const LOGICAL_W = 1280;
|
||||||
|
const LOGICAL_H = 720;
|
||||||
|
|
||||||
|
function computeSubtitle(cutscene: ReturnType<typeof useSelectedCutscene>, currentMs: number) {
|
||||||
|
if (!cutscene) return null;
|
||||||
|
let elapsed = 0;
|
||||||
|
for (const line of cutscene.lines) {
|
||||||
|
const dur = line.durationMs > 0
|
||||||
|
? line.durationMs
|
||||||
|
: Math.max(1500, Math.round((line.text.length / 17) * 1000));
|
||||||
|
if (currentMs >= elapsed && currentMs < elapsed + dur) return line;
|
||||||
|
elapsed += dur;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Preview() {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [containerSize, setContainerSize] = useState({ w: LOGICAL_W, h: LOGICAL_H });
|
||||||
|
|
||||||
|
const currentTimeMs = useCutsceneStore(s => s.currentTimeMs);
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = containerRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
const ro = new ResizeObserver(entries => {
|
||||||
|
const e = entries[0];
|
||||||
|
if (e) setContainerSize({ w: e.contentRect.width, h: e.contentRect.height });
|
||||||
|
});
|
||||||
|
ro.observe(el);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const subtitle = computeSubtitle(cutscene, currentTimeMs);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.wrapper}>
|
||||||
|
<div className={styles.viewport} ref={containerRef}>
|
||||||
|
{!cutscene ? (
|
||||||
|
<div className={styles.empty}>Select or create a cutscene</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{cutscene.imageSegments.map((seg, i) => {
|
||||||
|
const state = computeSegmentState(seg, currentTimeMs);
|
||||||
|
if (!state) return null;
|
||||||
|
|
||||||
|
const imgStyle = poseToStyle(
|
||||||
|
state.pose,
|
||||||
|
seg.width || LOGICAL_W,
|
||||||
|
seg.height || LOGICAL_H,
|
||||||
|
containerSize.w,
|
||||||
|
containerSize.h,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
key={i}
|
||||||
|
src={`/${seg.path}`}
|
||||||
|
alt=""
|
||||||
|
style={{ ...imgStyle, opacity: state.alpha }}
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{subtitle && (
|
||||||
|
<div className={styles.subtitleBar}>
|
||||||
|
{subtitle.speaker && (
|
||||||
|
<div className={styles.speaker}>{subtitle.speaker}</div>
|
||||||
|
)}
|
||||||
|
<div className={styles.text}>{subtitle.text}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||||
|
import type { Cutscene } from '../../types/cutscene';
|
||||||
|
import styles from './RightPanel.module.css';
|
||||||
|
|
||||||
|
type CutscenePatch = Partial<Omit<Cutscene, 'imageSegments' | 'lines'>>;
|
||||||
|
|
||||||
|
function NumField({ label, value, onChange, min }: {
|
||||||
|
label: string; value: number; onChange: (v: number) => void; min?: number;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>{label}</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={value}
|
||||||
|
min={min}
|
||||||
|
onChange={e => onChange(Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CutsceneProperties() {
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
const updateCutscene = useCutsceneStore(s => s.updateCutscene);
|
||||||
|
|
||||||
|
if (!cutscene) return <div className={styles.empty}>No cutscene selected</div>;
|
||||||
|
|
||||||
|
function upd(patch: CutscenePatch) {
|
||||||
|
updateCutscene(cutscene!.id, patch);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.section}>
|
||||||
|
<div className={styles.sectionTitle}>Cutscene</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>ID</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={cutscene.id}
|
||||||
|
onChange={e => upd({ id: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Skippable</label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={cutscene.skippable}
|
||||||
|
onChange={e => upd({ skippable: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<NumField label="Duration (ms)" value={cutscene.durationMs} onChange={v => upd({ durationMs: v })} min={0} />
|
||||||
|
<NumField label="Fade out (ms)" value={cutscene.fadeOutMs} onChange={v => upd({ fadeOutMs: v })} min={0} />
|
||||||
|
<NumField label="Fade in (ms)" value={cutscene.fadeInMs} onChange={v => upd({ fadeInMs: v })} min={0} />
|
||||||
|
<NumField label="End fade out (ms)" value={cutscene.endFadeOutMs} onChange={v => upd({ endFadeOutMs: v })} min={0} />
|
||||||
|
<NumField label="End fade in (ms)" value={cutscene.endFadeInMs} onChange={v => upd({ endFadeInMs: v })} min={0} />
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>onFadeIn callback</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={cutscene.onFadeInCallback}
|
||||||
|
onChange={e => upd({ onFadeInCallback: e.target.value })}
|
||||||
|
placeholder="lua function name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||||
|
import { useShallow } from 'zustand/react/shallow';
|
||||||
|
import { AVAILABLE_IMAGES } from '../../constants/images';
|
||||||
|
import { EASING_OPTIONS } from '../../constants/easings';
|
||||||
|
import type { ImagePose } from '../../types/cutscene';
|
||||||
|
import styles from './RightPanel.module.css';
|
||||||
|
|
||||||
|
function NumField({ label, value, onChange, min, step }: {
|
||||||
|
label: string; value: number; onChange: (v: number) => void; min?: number; step?: number;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>{label}</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={value}
|
||||||
|
min={min}
|
||||||
|
step={step ?? 1}
|
||||||
|
onChange={e => onChange(Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PoseFields({ label, pose, onChange }: {
|
||||||
|
label: string;
|
||||||
|
pose: ImagePose;
|
||||||
|
onChange: (patch: Partial<ImagePose>) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={styles.poseGroup}>
|
||||||
|
<div className={styles.poseTitle}>{label}</div>
|
||||||
|
<div className={styles.poseRow}>
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>centerX</label>
|
||||||
|
<input type="number" value={pose.centerX} step={0.01} min={0} max={1}
|
||||||
|
onChange={e => onChange({ centerX: Number(e.target.value) })} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>centerY</label>
|
||||||
|
<input type="number" value={pose.centerY} step={0.01} min={0} max={1}
|
||||||
|
onChange={e => onChange({ centerY: Number(e.target.value) })} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>scale</label>
|
||||||
|
<input type="number" value={pose.scale} step={0.05} min={0.1}
|
||||||
|
onChange={e => onChange({ scale: Number(e.target.value) })} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LayerProperties() {
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
const { selectedLayerIndex, updateLayer, updateLayerFrom, updateLayerTo } = useCutsceneStore(useShallow(s => ({
|
||||||
|
selectedLayerIndex: s.selectedLayerIndex,
|
||||||
|
updateLayer: s.updateLayer,
|
||||||
|
updateLayerFrom: s.updateLayerFrom,
|
||||||
|
updateLayerTo: s.updateLayerTo,
|
||||||
|
})));
|
||||||
|
|
||||||
|
if (!cutscene || selectedLayerIndex === null) return null;
|
||||||
|
const seg = cutscene.imageSegments[selectedLayerIndex];
|
||||||
|
if (!seg) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.section}>
|
||||||
|
<div className={styles.sectionTitle}>Layer {selectedLayerIndex + 1}</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Image</label>
|
||||||
|
<select
|
||||||
|
value={AVAILABLE_IMAGES.includes(seg.path) ? seg.path : '__custom__'}
|
||||||
|
onChange={e => {
|
||||||
|
if (e.target.value !== '__custom__') updateLayer(selectedLayerIndex, { path: e.target.value });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{AVAILABLE_IMAGES.map(img => (
|
||||||
|
<option key={img} value={img}>{img.split('/').pop()}</option>
|
||||||
|
))}
|
||||||
|
{!AVAILABLE_IMAGES.includes(seg.path) && (
|
||||||
|
<option value="__custom__">(custom)</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Path (manual)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={seg.path}
|
||||||
|
onChange={e => updateLayer(selectedLayerIndex, { path: e.target.value })}
|
||||||
|
placeholder="resources/..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.row2}>
|
||||||
|
<NumField label="Width" value={seg.width} onChange={v => updateLayer(selectedLayerIndex, { width: v })} min={1} />
|
||||||
|
<NumField label="Height" value={seg.height} onChange={v => updateLayer(selectedLayerIndex, { height: v })} min={1} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.row2}>
|
||||||
|
<NumField label="Start (ms)" value={seg.startMs} onChange={v => updateLayer(selectedLayerIndex, { startMs: v })} min={0} />
|
||||||
|
<NumField label="End (ms)" value={seg.endMs} onChange={v => updateLayer(selectedLayerIndex, { endMs: v })} min={0} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.row2}>
|
||||||
|
<NumField label="Fade in (ms)" value={seg.fadeInMs} onChange={v => updateLayer(selectedLayerIndex, { fadeInMs: v })} min={0} />
|
||||||
|
<NumField label="Fade out (ms)" value={seg.fadeOutMs} onChange={v => updateLayer(selectedLayerIndex, { fadeOutMs: v })} min={0} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Easing</label>
|
||||||
|
<select value={seg.easing} onChange={e => updateLayer(selectedLayerIndex, { easing: e.target.value as typeof seg.easing })}>
|
||||||
|
{EASING_OPTIONS.map(e => <option key={e} value={e}>{e}</option>)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PoseFields
|
||||||
|
label="From"
|
||||||
|
pose={seg.from}
|
||||||
|
onChange={patch => updateLayerFrom(selectedLayerIndex, patch)}
|
||||||
|
/>
|
||||||
|
<PoseFields
|
||||||
|
label="To"
|
||||||
|
pose={seg.to}
|
||||||
|
onChange={patch => updateLayerTo(selectedLayerIndex, patch)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,208 @@
|
|||||||
|
.panel {
|
||||||
|
width: 260px;
|
||||||
|
min-width: 240px;
|
||||||
|
background: #252525;
|
||||||
|
border-left: 1px solid #333;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 6px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #777;
|
||||||
|
font-size: 11px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
transition: color 0.1s;
|
||||||
|
}
|
||||||
|
.tab:hover { color: #bbb; }
|
||||||
|
.tabActive {
|
||||||
|
color: #5b9bd5;
|
||||||
|
border-bottom-color: #5b9bd5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sections ──────────────────────────────────────────────────── */
|
||||||
|
.section {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #2e2e2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #888;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionHeader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addBtn {
|
||||||
|
background: #2a4a6e;
|
||||||
|
border: 1px solid #3a6090;
|
||||||
|
color: #a8d0f0;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.addBtn:hover { background: #2e5480; }
|
||||||
|
|
||||||
|
/* ── Fields ────────────────────────────────────────────────────── */
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 100px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input[type="text"],
|
||||||
|
.field input[type="number"],
|
||||||
|
.field select,
|
||||||
|
.field textarea {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input[type="checkbox"] {
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row2 {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row2 .field {
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row2 .field label {
|
||||||
|
width: auto;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Pose groups ───────────────────────────────────────────────── */
|
||||||
|
.poseGroup {
|
||||||
|
margin-top: 8px;
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poseTitle {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poseRow {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poseRow .field {
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poseRow .field label {
|
||||||
|
width: auto;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Subtitle line cards ───────────────────────────────────────── */
|
||||||
|
.lineCard {
|
||||||
|
background: #1e1e1e;
|
||||||
|
border: 1px solid #2e2e2e;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineHeader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineIndex {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #666;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconBtn {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #3a3a3a;
|
||||||
|
color: #888;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.iconBtn:hover:not(:disabled) { background: #333; color: #ccc; }
|
||||||
|
.iconBtn:disabled { opacity: 0.3; cursor: default; }
|
||||||
|
|
||||||
|
.iconBtnDanger {
|
||||||
|
composes: iconBtn;
|
||||||
|
color: #a05050;
|
||||||
|
border-color: #5a2a2a;
|
||||||
|
}
|
||||||
|
.iconBtnDanger:hover { background: #3a2020; color: #e06c6c; }
|
||||||
|
|
||||||
|
.emptyLines {
|
||||||
|
color: #555;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
padding: 20px;
|
||||||
|
color: #555;
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { useCutsceneStore } from '../../store/cutsceneStore';
|
||||||
|
import { useShallow } from 'zustand/react/shallow';
|
||||||
|
import CutsceneProperties from './CutsceneProperties';
|
||||||
|
import LayerProperties from './LayerProperties';
|
||||||
|
import SubtitleLines from './SubtitleLines';
|
||||||
|
import styles from './RightPanel.module.css';
|
||||||
|
|
||||||
|
export default function RightPanel() {
|
||||||
|
const { selectedLayerIndex, selectLayer } = useCutsceneStore(useShallow(s => ({
|
||||||
|
selectedLayerIndex: s.selectedLayerIndex,
|
||||||
|
selectLayer: s.selectLayer,
|
||||||
|
})));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.panel}>
|
||||||
|
{/* Tab strip */}
|
||||||
|
<div className={styles.tabs}>
|
||||||
|
<button
|
||||||
|
className={`${styles.tab} ${selectedLayerIndex === null ? styles.tabActive : ''}`}
|
||||||
|
onClick={() => selectLayer(null)}
|
||||||
|
>
|
||||||
|
Cutscene
|
||||||
|
</button>
|
||||||
|
{selectedLayerIndex !== null && (
|
||||||
|
<button className={`${styles.tab} ${styles.tabActive}`}>
|
||||||
|
Layer {selectedLayerIndex + 1}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.scroll}>
|
||||||
|
{selectedLayerIndex !== null ? (
|
||||||
|
<LayerProperties />
|
||||||
|
) : (
|
||||||
|
<CutsceneProperties />
|
||||||
|
)}
|
||||||
|
<SubtitleLines />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||||
|
import { useShallow } from 'zustand/react/shallow';
|
||||||
|
import styles from './RightPanel.module.css';
|
||||||
|
|
||||||
|
export default function SubtitleLines() {
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
const { addLine, removeLine, moveLineUp, moveLineDown, updateLine } = useCutsceneStore(useShallow(s => ({
|
||||||
|
addLine: s.addLine,
|
||||||
|
removeLine: s.removeLine,
|
||||||
|
moveLineUp: s.moveLineUp,
|
||||||
|
moveLineDown: s.moveLineDown,
|
||||||
|
updateLine: s.updateLine,
|
||||||
|
})));
|
||||||
|
|
||||||
|
if (!cutscene) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.section}>
|
||||||
|
<div className={styles.sectionHeader}>
|
||||||
|
<div className={styles.sectionTitle}>Subtitle Lines</div>
|
||||||
|
<button className={styles.addBtn} onClick={addLine}>+ Add</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{cutscene.lines.length === 0 && (
|
||||||
|
<div className={styles.emptyLines}>No lines. Click + Add.</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{cutscene.lines.map((line, i) => (
|
||||||
|
<div key={i} className={styles.lineCard}>
|
||||||
|
<div className={styles.lineHeader}>
|
||||||
|
<span className={styles.lineIndex}>#{i + 1}</span>
|
||||||
|
<button className={styles.iconBtn} onClick={() => moveLineUp(i)} disabled={i === 0} title="Move up">↑</button>
|
||||||
|
<button className={styles.iconBtn} onClick={() => moveLineDown(i)} disabled={i === cutscene.lines.length - 1} title="Move down">↓</button>
|
||||||
|
<button className={styles.iconBtnDanger} onClick={() => removeLine(i)} title="Remove">✕</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Speaker</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={line.speaker}
|
||||||
|
onChange={e => updateLine(i, { speaker: e.target.value })}
|
||||||
|
placeholder="(none)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Text</label>
|
||||||
|
<textarea
|
||||||
|
value={line.text}
|
||||||
|
rows={2}
|
||||||
|
onChange={e => updateLine(i, { text: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.row2}>
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Duration (ms)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={line.durationMs}
|
||||||
|
min={0}
|
||||||
|
onChange={e => updateLine(i, { durationMs: Number(e.target.value) })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Wait confirm</label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={line.waitForConfirm}
|
||||||
|
onChange={e => updateLine(i, { waitForConfirm: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.field}>
|
||||||
|
<label>Lua callback</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={line.luaCallback}
|
||||||
|
onChange={e => updateLine(i, { luaCallback: e.target.value })}
|
||||||
|
placeholder="function name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,192 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
background: #1a1a1a;
|
||||||
|
border-top: 1px solid #333;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: #222;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbBtn {
|
||||||
|
background: #2d2d2d;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
color: #bbb;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
.tbBtn:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
|
||||||
|
.tbBtn:disabled { opacity: 0.3; cursor: default; }
|
||||||
|
|
||||||
|
.spacer { flex: 1; }
|
||||||
|
|
||||||
|
.zoomLabel { font-size: 11px; color: #666; margin-right: 2px; }
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Ruler ────────────────────────────────────────────────────── */
|
||||||
|
.ruler {
|
||||||
|
display: flex;
|
||||||
|
height: 22px;
|
||||||
|
background: #212121;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
user-select: none;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
background: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tickLabel {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 3px;
|
||||||
|
font-size: 9px;
|
||||||
|
color: #666;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Layers area ──────────────────────────────────────────────── */
|
||||||
|
.layersArea {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playhead {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
background: #e05050;
|
||||||
|
z-index: 20;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridLine {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(255,255,255,0.04);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Layer row ────────────────────────────────────────────────── */
|
||||||
|
.row {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #2a2a2a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
.row:hover { background: rgba(255,255,255,0.03); }
|
||||||
|
.rowSelected { background: rgba(91,155,213,0.08); }
|
||||||
|
|
||||||
|
.rowLabel {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 140px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-right: 1px solid #2a2a2a;
|
||||||
|
z-index: 5;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layerName {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #bbb;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Segment bar ──────────────────────────────────────────────── */
|
||||||
|
.bar {
|
||||||
|
position: absolute;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: grab;
|
||||||
|
top: 5px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.15);
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 4px;
|
||||||
|
}
|
||||||
|
.bar:active { cursor: grabbing; }
|
||||||
|
|
||||||
|
.handle {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 6px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.handleLeft { left: 0; border-radius: 3px 0 0 3px; background: rgba(255,255,255,0.15); }
|
||||||
|
.handleRight { right: 0; border-radius: 0 3px 3px 0; background: rgba(255,255,255,0.15); }
|
||||||
|
|
||||||
|
/* ── Subtitle row ─────────────────────────────────────────────── */
|
||||||
|
.subtitleRow {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 14px;
|
||||||
|
border-bottom: 1px solid #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitleLabel {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 140px;
|
||||||
|
height: 100%;
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-right: 1px solid #2a2a2a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 9px;
|
||||||
|
color: #555;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitleBlock {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
height: 10px;
|
||||||
|
background: #8a6040;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #aa7050;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
@@ -0,0 +1,285 @@
|
|||||||
|
import { useRef, useCallback, useState, useEffect } from 'react';
|
||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||||
|
import { useShallow } from 'zustand/react/shallow';
|
||||||
|
import styles from './Timeline.module.css';
|
||||||
|
|
||||||
|
const LABEL_WIDTH = 140;
|
||||||
|
const ROW_HEIGHT = 32;
|
||||||
|
const SUBTITLE_ROW_HEIGHT = 14;
|
||||||
|
const MIN_ZOOM = 20; // px per second
|
||||||
|
const MAX_ZOOM = 400;
|
||||||
|
|
||||||
|
const LAYER_COLORS = ['#4a7fc1', '#c17a4a', '#4ac17a', '#c14a7a', '#7a4ac1', '#c1b44a', '#4ac1c1'];
|
||||||
|
|
||||||
|
function layerColor(i: number) { return LAYER_COLORS[i % LAYER_COLORS.length]; }
|
||||||
|
|
||||||
|
function basename(path: string) {
|
||||||
|
return path.split('/').pop() ?? path;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Timeline() {
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
const { selectedLayerIndex, currentTimeMs, playState } = useCutsceneStore(useShallow(s => ({
|
||||||
|
selectedLayerIndex: s.selectedLayerIndex,
|
||||||
|
currentTimeMs: s.currentTimeMs,
|
||||||
|
playState: s.playState,
|
||||||
|
})));
|
||||||
|
const { selectLayer, addLayer, removeLayer, moveLayerUp, moveLayerDown, updateLayer, setCurrentTime, setPlayState } = useCutsceneStore(useShallow(s => ({
|
||||||
|
selectLayer: s.selectLayer,
|
||||||
|
addLayer: s.addLayer,
|
||||||
|
removeLayer: s.removeLayer,
|
||||||
|
moveLayerUp: s.moveLayerUp,
|
||||||
|
moveLayerDown: s.moveLayerDown,
|
||||||
|
updateLayer: s.updateLayer,
|
||||||
|
setCurrentTime: s.setCurrentTime,
|
||||||
|
setPlayState: s.setPlayState,
|
||||||
|
})));
|
||||||
|
|
||||||
|
const [pxPerSec, setPxPerSec] = useState(60);
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||||||
|
const isDraggingPlayhead = useRef(false);
|
||||||
|
const dragState = useRef<{
|
||||||
|
type: 'move' | 'left' | 'right';
|
||||||
|
layerIndex: number;
|
||||||
|
startX: number;
|
||||||
|
startMs: number;
|
||||||
|
endMs: number;
|
||||||
|
durationMs: number;
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
const msToX = useCallback((ms: number) => (ms / 1000) * pxPerSec, [pxPerSec]);
|
||||||
|
const xToMs = useCallback((x: number) => Math.max(0, Math.round((x / pxPerSec) * 1000)), [pxPerSec]);
|
||||||
|
|
||||||
|
const totalMs = cutscene
|
||||||
|
? Math.max(
|
||||||
|
cutscene.durationMs,
|
||||||
|
cutscene.imageSegments.reduce((m, s) => Math.max(m, s.endMs), 0),
|
||||||
|
10000,
|
||||||
|
) + 2000
|
||||||
|
: 12000;
|
||||||
|
|
||||||
|
const rulerWidth = Math.ceil(msToX(totalMs));
|
||||||
|
|
||||||
|
// Ruler ticks
|
||||||
|
const tickStepMs = pxPerSec >= 100 ? 500 : pxPerSec >= 50 ? 1000 : 2000;
|
||||||
|
const labelStepMs = pxPerSec >= 100 ? 1000 : pxPerSec >= 50 ? 2000 : 4000;
|
||||||
|
const ticks: number[] = [];
|
||||||
|
for (let ms = 0; ms <= totalMs; ms += tickStepMs) ticks.push(ms);
|
||||||
|
|
||||||
|
// Scroll wheel zoom
|
||||||
|
useEffect(() => {
|
||||||
|
const el = scrollRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
function onWheel(e: WheelEvent) {
|
||||||
|
if (!e.ctrlKey && !e.metaKey) return;
|
||||||
|
e.preventDefault();
|
||||||
|
setPxPerSec(prev => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, prev * (e.deltaY < 0 ? 1.15 : 0.87))));
|
||||||
|
}
|
||||||
|
el.addEventListener('wheel', onWheel, { passive: false });
|
||||||
|
return () => el.removeEventListener('wheel', onWheel);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Auto-scroll playhead into view while playing
|
||||||
|
useEffect(() => {
|
||||||
|
if (playState !== 'playing') return;
|
||||||
|
const el = scrollRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
const x = msToX(currentTimeMs) + LABEL_WIDTH;
|
||||||
|
const { scrollLeft, clientWidth } = el;
|
||||||
|
if (x > scrollLeft + clientWidth - 40) {
|
||||||
|
el.scrollLeft = x - clientWidth + 80;
|
||||||
|
}
|
||||||
|
}, [currentTimeMs, playState, msToX]);
|
||||||
|
|
||||||
|
// ── Playhead drag ──────────────────────────────────────────────────────────
|
||||||
|
function onRulerMouseDown(e: React.MouseEvent) {
|
||||||
|
if (e.button !== 0) return;
|
||||||
|
isDraggingPlayhead.current = true;
|
||||||
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left - LABEL_WIDTH + (scrollRef.current?.scrollLeft ?? 0);
|
||||||
|
setCurrentTime(xToMs(x));
|
||||||
|
if (playState === 'playing') setPlayState('paused');
|
||||||
|
|
||||||
|
function onMove(ev: MouseEvent) {
|
||||||
|
const x2 = ev.clientX - rect.left - LABEL_WIDTH + (scrollRef.current?.scrollLeft ?? 0);
|
||||||
|
setCurrentTime(xToMs(x2));
|
||||||
|
}
|
||||||
|
function onUp() {
|
||||||
|
isDraggingPlayhead.current = false;
|
||||||
|
window.removeEventListener('mousemove', onMove);
|
||||||
|
window.removeEventListener('mouseup', onUp);
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', onMove);
|
||||||
|
window.addEventListener('mouseup', onUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Segment bar drag ───────────────────────────────────────────────────────
|
||||||
|
function onBarMouseDown(e: React.MouseEvent, layerIndex: number, type: 'move' | 'left' | 'right') {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
selectLayer(layerIndex);
|
||||||
|
const seg = cutscene!.imageSegments[layerIndex];
|
||||||
|
dragState.current = {
|
||||||
|
type,
|
||||||
|
layerIndex,
|
||||||
|
startX: e.clientX,
|
||||||
|
startMs: seg.startMs,
|
||||||
|
endMs: seg.endMs,
|
||||||
|
durationMs: seg.endMs - seg.startMs,
|
||||||
|
};
|
||||||
|
|
||||||
|
function onMove(ev: MouseEvent) {
|
||||||
|
if (!dragState.current) return;
|
||||||
|
const dx = ev.clientX - dragState.current.startX;
|
||||||
|
const dMs = Math.round((dx / pxPerSec) * 1000);
|
||||||
|
const { type, layerIndex: li, startMs, endMs, durationMs } = dragState.current;
|
||||||
|
|
||||||
|
if (type === 'move') {
|
||||||
|
const newStart = Math.max(0, startMs + dMs);
|
||||||
|
updateLayer(li, { startMs: newStart, endMs: newStart + durationMs });
|
||||||
|
} else if (type === 'left') {
|
||||||
|
const newStart = Math.max(0, Math.min(endMs - 100, startMs + dMs));
|
||||||
|
updateLayer(li, { startMs: newStart });
|
||||||
|
} else {
|
||||||
|
const newEnd = Math.max(startMs + 100, endMs + dMs);
|
||||||
|
updateLayer(li, { endMs: newEnd });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function onUp() {
|
||||||
|
dragState.current = null;
|
||||||
|
window.removeEventListener('mousemove', onMove);
|
||||||
|
window.removeEventListener('mouseup', onUp);
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', onMove);
|
||||||
|
window.addEventListener('mouseup', onUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
const playheadX = msToX(currentTimeMs) + LABEL_WIDTH;
|
||||||
|
|
||||||
|
// Subtitle timing for display
|
||||||
|
let subtitleBlocks: { x: number; w: number; text: string }[] = [];
|
||||||
|
if (cutscene) {
|
||||||
|
let elapsed = 0;
|
||||||
|
for (const line of cutscene.lines) {
|
||||||
|
const dur = line.durationMs > 0
|
||||||
|
? line.durationMs
|
||||||
|
: Math.max(1500, Math.round((line.text.length / 17) * 1000));
|
||||||
|
subtitleBlocks.push({ x: msToX(elapsed), w: msToX(dur), text: line.text || '…' });
|
||||||
|
elapsed += dur;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const layerCount = cutscene?.imageSegments.length ?? 0;
|
||||||
|
const totalHeight = layerCount * ROW_HEIGHT + SUBTITLE_ROW_HEIGHT + 20;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div className={styles.toolbar}>
|
||||||
|
<button className={styles.tbBtn} onClick={addLayer} disabled={!cutscene} title="Add layer">+ Layer</button>
|
||||||
|
{selectedLayerIndex !== null && cutscene && (
|
||||||
|
<>
|
||||||
|
<button className={styles.tbBtn} onClick={() => moveLayerUp(selectedLayerIndex!)} disabled={selectedLayerIndex! <= 0} title="Move up">↑</button>
|
||||||
|
<button className={styles.tbBtn} onClick={() => moveLayerDown(selectedLayerIndex!)} disabled={selectedLayerIndex! >= layerCount - 1} title="Move down">↓</button>
|
||||||
|
<button className={styles.tbBtn} onClick={() => removeLayer(selectedLayerIndex!)} title="Remove layer" style={{ color: '#e06c6c' }}>✕ Layer</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<div className={styles.spacer} />
|
||||||
|
<span className={styles.zoomLabel}>Zoom:</span>
|
||||||
|
<button className={styles.tbBtn} onClick={() => setPxPerSec(p => Math.max(MIN_ZOOM, p * 0.75))}>−</button>
|
||||||
|
<button className={styles.tbBtn} onClick={() => setPxPerSec(p => Math.min(MAX_ZOOM, p * 1.33))}>+</button>
|
||||||
|
<button className={styles.tbBtn} onClick={() => setPxPerSec(60)}>Reset</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scrollable area */}
|
||||||
|
<div className={styles.scroll} ref={scrollRef}>
|
||||||
|
{/* Ruler */}
|
||||||
|
<div
|
||||||
|
className={styles.ruler}
|
||||||
|
style={{ width: LABEL_WIDTH + rulerWidth }}
|
||||||
|
onMouseDown={onRulerMouseDown}
|
||||||
|
>
|
||||||
|
<div style={{ width: LABEL_WIDTH, flexShrink: 0 }} />
|
||||||
|
<div style={{ position: 'relative', flex: 1 }}>
|
||||||
|
{ticks.map(ms => (
|
||||||
|
<div
|
||||||
|
key={ms}
|
||||||
|
className={styles.tick}
|
||||||
|
style={{ left: msToX(ms) }}
|
||||||
|
>
|
||||||
|
{ms % labelStepMs === 0 && (
|
||||||
|
<span className={styles.tickLabel}>{ms / 1000}s</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Layers + playhead overlay */}
|
||||||
|
<div
|
||||||
|
className={styles.layersArea}
|
||||||
|
style={{ width: LABEL_WIDTH + rulerWidth, minHeight: totalHeight }}
|
||||||
|
>
|
||||||
|
{/* Playhead */}
|
||||||
|
<div className={styles.playhead} style={{ left: playheadX }} />
|
||||||
|
|
||||||
|
{/* Grid lines */}
|
||||||
|
{ticks.filter(ms => ms % labelStepMs === 0).map(ms => (
|
||||||
|
<div key={ms} className={styles.gridLine} style={{ left: LABEL_WIDTH + msToX(ms) }} />
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Layer rows */}
|
||||||
|
{cutscene?.imageSegments.map((seg, i) => {
|
||||||
|
const isSelected = selectedLayerIndex === i;
|
||||||
|
const color = layerColor(i);
|
||||||
|
const barX = LABEL_WIDTH + msToX(seg.startMs);
|
||||||
|
const barW = Math.max(4, msToX(seg.endMs) - msToX(seg.startMs));
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`${styles.row} ${isSelected ? styles.rowSelected : ''}`}
|
||||||
|
style={{ top: i * ROW_HEIGHT }}
|
||||||
|
onClick={() => selectLayer(i)}
|
||||||
|
>
|
||||||
|
{/* Label */}
|
||||||
|
<div className={styles.rowLabel} style={{ borderLeft: `3px solid ${color}` }}>
|
||||||
|
<span className={styles.layerName}>{basename(seg.path) || `Layer ${i + 1}`}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bar */}
|
||||||
|
<div
|
||||||
|
className={styles.bar}
|
||||||
|
style={{ left: barX, width: barW, background: color + (isSelected ? 'cc' : '88') }}
|
||||||
|
onMouseDown={e => onBarMouseDown(e, i, 'move')}
|
||||||
|
>
|
||||||
|
<div className={`${styles.handle} ${styles.handleLeft}`}
|
||||||
|
onMouseDown={e => onBarMouseDown(e, i, 'left')} />
|
||||||
|
<div className={`${styles.handle} ${styles.handleRight}`}
|
||||||
|
onMouseDown={e => onBarMouseDown(e, i, 'right')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Subtitle blocks row */}
|
||||||
|
{cutscene && (
|
||||||
|
<div
|
||||||
|
className={styles.subtitleRow}
|
||||||
|
style={{ top: layerCount * ROW_HEIGHT }}
|
||||||
|
>
|
||||||
|
<div className={styles.subtitleLabel}>Subtitles</div>
|
||||||
|
{subtitleBlocks.map((b, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={styles.subtitleBlock}
|
||||||
|
style={{ left: LABEL_WIDTH + b.x, width: Math.max(2, b.w) }}
|
||||||
|
title={b.text}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import type { EasingType } from '../types/cutscene';
|
||||||
|
|
||||||
|
export const EASING_OPTIONS: EasingType[] = [
|
||||||
|
'Linear',
|
||||||
|
'EaseInSine', 'EaseOutSine', 'EaseInOutSine',
|
||||||
|
'EaseInQuad', 'EaseOutQuad', 'EaseInOutQuad',
|
||||||
|
'EaseInCubic', 'EaseOutCubic', 'EaseInOutCubic',
|
||||||
|
];
|
||||||
|
|
||||||
|
export function applyEasing(t: number, easing: EasingType): number {
|
||||||
|
const pi = Math.PI;
|
||||||
|
switch (easing) {
|
||||||
|
case 'Linear': return t;
|
||||||
|
case 'EaseInSine': return 1 - Math.cos((t * pi) / 2);
|
||||||
|
case 'EaseOutSine': return Math.sin((t * pi) / 2);
|
||||||
|
case 'EaseInOutSine': return -(Math.cos(pi * t) - 1) / 2;
|
||||||
|
case 'EaseInQuad': return t * t;
|
||||||
|
case 'EaseOutQuad': return 1 - (1 - t) * (1 - t);
|
||||||
|
case 'EaseInOutQuad': return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
|
||||||
|
case 'EaseInCubic': return t * t * t;
|
||||||
|
case 'EaseOutCubic': return 1 - Math.pow(1 - t, 3);
|
||||||
|
case 'EaseInOutCubic':return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
||||||
|
default: return t;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
export const AVAILABLE_IMAGES: string[] = [
|
||||||
|
'resources/w/cutscenes/cutscene1/cutscene1_wall_x.png',
|
||||||
|
'resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png',
|
||||||
|
'resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png',
|
||||||
|
'resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png',
|
||||||
|
'resources/w/cutscenes/cutscene1/cutscene1_heads_x.png',
|
||||||
|
'resources/w/cutscenes/cutscene2/scr1.png',
|
||||||
|
'resources/w/cutscenes/cutscene2/scr2.png',
|
||||||
|
'resources/w/cutscenes/cutscene2/scr3.png',
|
||||||
|
'resources/w/cutscenes/cutscene2/scr4.png',
|
||||||
|
'resources/black.png',
|
||||||
|
];
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { useCutsceneStore, useSelectedCutscene } from '../store/cutsceneStore';
|
||||||
|
|
||||||
|
export function usePlayback() {
|
||||||
|
const { playState, currentTimeMs, setPlayState, setCurrentTime } = useCutsceneStore();
|
||||||
|
const cutscene = useSelectedCutscene();
|
||||||
|
const rafRef = useRef<number | null>(null);
|
||||||
|
const lastTsRef = useRef<number | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (playState !== 'playing') {
|
||||||
|
lastTsRef.current = null;
|
||||||
|
if (rafRef.current !== null) {
|
||||||
|
cancelAnimationFrame(rafRef.current);
|
||||||
|
rafRef.current = null;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
function totalDuration() {
|
||||||
|
if (!cutscene) return 5000;
|
||||||
|
const segMax = cutscene.imageSegments.reduce((m, s) => Math.max(m, s.endMs), 0);
|
||||||
|
const content = Math.max(cutscene.durationMs, segMax);
|
||||||
|
return content + cutscene.endFadeOutMs + cutscene.endFadeInMs;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick(ts: number) {
|
||||||
|
if (lastTsRef.current === null) lastTsRef.current = ts;
|
||||||
|
const delta = ts - lastTsRef.current;
|
||||||
|
lastTsRef.current = ts;
|
||||||
|
|
||||||
|
const newTime = useCutsceneStore.getState().currentTimeMs + delta;
|
||||||
|
const total = totalDuration();
|
||||||
|
|
||||||
|
if (newTime >= total) {
|
||||||
|
setCurrentTime(total);
|
||||||
|
setPlayState('stopped');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrentTime(newTime);
|
||||||
|
rafRef.current = requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
rafRef.current = requestAnimationFrame(tick);
|
||||||
|
return () => {
|
||||||
|
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
|
||||||
|
};
|
||||||
|
}, [playState, cutscene, setPlayState, setCurrentTime]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #root {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus, select:focus, textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #5b9bd5;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track { background: #1a1a1a; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #666; }
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { immer } from 'zustand/middleware/immer';
|
||||||
|
import type { CutsceneFile, Cutscene, ImageSegment, SubtitleLine, ImagePose } from '../types/cutscene';
|
||||||
|
|
||||||
|
export type PlayState = 'stopped' | 'playing' | 'paused';
|
||||||
|
|
||||||
|
interface CutsceneStore {
|
||||||
|
file: CutsceneFile | null;
|
||||||
|
selectedCutsceneId: string | null;
|
||||||
|
selectedLayerIndex: number | null;
|
||||||
|
playState: PlayState;
|
||||||
|
currentTimeMs: number;
|
||||||
|
|
||||||
|
// File I/O
|
||||||
|
loadFile: (file: CutsceneFile) => void;
|
||||||
|
getExportData: () => CutsceneFile | null;
|
||||||
|
|
||||||
|
// Cutscene CRUD
|
||||||
|
addCutscene: () => void;
|
||||||
|
deleteCutscene: (id: string) => void;
|
||||||
|
selectCutscene: (id: string | null) => void;
|
||||||
|
updateCutscene: (id: string, patch: Partial<Omit<Cutscene, 'imageSegments' | 'lines'>>) => void;
|
||||||
|
|
||||||
|
// Layer CRUD
|
||||||
|
selectLayer: (index: number | null) => void;
|
||||||
|
addLayer: () => void;
|
||||||
|
removeLayer: (index: number) => void;
|
||||||
|
moveLayerUp: (index: number) => void;
|
||||||
|
moveLayerDown: (index: number) => void;
|
||||||
|
updateLayer: (index: number, patch: Partial<ImageSegment>) => void;
|
||||||
|
updateLayerFrom: (index: number, patch: Partial<ImagePose>) => void;
|
||||||
|
updateLayerTo: (index: number, patch: Partial<ImagePose>) => void;
|
||||||
|
|
||||||
|
// Subtitle lines
|
||||||
|
addLine: () => void;
|
||||||
|
removeLine: (index: number) => void;
|
||||||
|
moveLineUp: (index: number) => void;
|
||||||
|
moveLineDown: (index: number) => void;
|
||||||
|
updateLine: (index: number, patch: Partial<SubtitleLine>) => void;
|
||||||
|
|
||||||
|
// Playback
|
||||||
|
setPlayState: (state: PlayState) => void;
|
||||||
|
setCurrentTime: (ms: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function newCutscene(id: string): Cutscene {
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
skippable: true,
|
||||||
|
durationMs: 5000,
|
||||||
|
fadeOutMs: 500,
|
||||||
|
fadeInMs: 500,
|
||||||
|
endFadeOutMs: 500,
|
||||||
|
endFadeInMs: 500,
|
||||||
|
onFadeInCallback: '',
|
||||||
|
imageSegments: [],
|
||||||
|
lines: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function newSegment(): ImageSegment {
|
||||||
|
return {
|
||||||
|
path: '',
|
||||||
|
width: 1280,
|
||||||
|
height: 720,
|
||||||
|
startMs: 0,
|
||||||
|
endMs: 5000,
|
||||||
|
fadeInMs: 0,
|
||||||
|
fadeOutMs: 0,
|
||||||
|
easing: 'Linear',
|
||||||
|
from: { centerX: 0.5, centerY: 0.5, scale: 1.0 },
|
||||||
|
to: { centerX: 0.5, centerY: 0.5, scale: 1.0 },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function newLine(): SubtitleLine {
|
||||||
|
return {
|
||||||
|
speaker: '',
|
||||||
|
text: '',
|
||||||
|
durationMs: 3000,
|
||||||
|
waitForConfirm: false,
|
||||||
|
luaCallback: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSelected(file: CutsceneFile | null, id: string | null): Cutscene | null {
|
||||||
|
if (!file || !id) return null;
|
||||||
|
return file.cutscenes.find(c => c.id === id) ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCutsceneStore = create<CutsceneStore>()(
|
||||||
|
immer((set, get) => ({
|
||||||
|
file: null,
|
||||||
|
selectedCutsceneId: null,
|
||||||
|
selectedLayerIndex: null,
|
||||||
|
playState: 'stopped',
|
||||||
|
currentTimeMs: 0,
|
||||||
|
|
||||||
|
loadFile: (file) => set(s => {
|
||||||
|
s.file = file;
|
||||||
|
s.selectedCutsceneId = file.cutscenes[0]?.id ?? null;
|
||||||
|
s.selectedLayerIndex = null;
|
||||||
|
s.playState = 'stopped';
|
||||||
|
s.currentTimeMs = 0;
|
||||||
|
}),
|
||||||
|
|
||||||
|
getExportData: () => get().file,
|
||||||
|
|
||||||
|
addCutscene: () => set(s => {
|
||||||
|
if (!s.file) s.file = { cutscenes: [] };
|
||||||
|
let base = 'cutscene_new';
|
||||||
|
let n = 1;
|
||||||
|
const ids = new Set(s.file.cutscenes.map(c => c.id));
|
||||||
|
while (ids.has(`${base}_${n}`)) n++;
|
||||||
|
const id = `${base}_${n}`;
|
||||||
|
s.file.cutscenes.push(newCutscene(id));
|
||||||
|
s.selectedCutsceneId = id;
|
||||||
|
s.selectedLayerIndex = null;
|
||||||
|
}),
|
||||||
|
|
||||||
|
deleteCutscene: (id) => set(s => {
|
||||||
|
if (!s.file) return;
|
||||||
|
const idx = s.file.cutscenes.findIndex(c => c.id === id);
|
||||||
|
if (idx === -1) return;
|
||||||
|
s.file.cutscenes.splice(idx, 1);
|
||||||
|
if (s.selectedCutsceneId === id) {
|
||||||
|
s.selectedCutsceneId = s.file.cutscenes[0]?.id ?? null;
|
||||||
|
s.selectedLayerIndex = null;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
selectCutscene: (id) => set(s => {
|
||||||
|
s.selectedCutsceneId = id;
|
||||||
|
s.selectedLayerIndex = null;
|
||||||
|
s.playState = 'stopped';
|
||||||
|
s.currentTimeMs = 0;
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateCutscene: (id, patch) => set(s => {
|
||||||
|
if (!s.file) return;
|
||||||
|
const c = s.file.cutscenes.find(c => c.id === id);
|
||||||
|
if (!c) return;
|
||||||
|
Object.assign(c, patch);
|
||||||
|
}),
|
||||||
|
|
||||||
|
selectLayer: (index) => set(s => { s.selectedLayerIndex = index; }),
|
||||||
|
|
||||||
|
addLayer: () => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
cutscene.imageSegments.push(newSegment());
|
||||||
|
s.selectedLayerIndex = cutscene.imageSegments.length - 1;
|
||||||
|
}),
|
||||||
|
|
||||||
|
removeLayer: (index) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
cutscene.imageSegments.splice(index, 1);
|
||||||
|
if (s.selectedLayerIndex === index) s.selectedLayerIndex = null;
|
||||||
|
else if (s.selectedLayerIndex !== null && s.selectedLayerIndex > index) s.selectedLayerIndex--;
|
||||||
|
}),
|
||||||
|
|
||||||
|
moveLayerUp: (index) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene || index <= 0) return;
|
||||||
|
const segs = cutscene.imageSegments;
|
||||||
|
[segs[index - 1], segs[index]] = [segs[index], segs[index - 1]];
|
||||||
|
if (s.selectedLayerIndex === index) s.selectedLayerIndex = index - 1;
|
||||||
|
else if (s.selectedLayerIndex === index - 1) s.selectedLayerIndex = index;
|
||||||
|
}),
|
||||||
|
|
||||||
|
moveLayerDown: (index) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
const segs = cutscene.imageSegments;
|
||||||
|
if (index >= segs.length - 1) return;
|
||||||
|
[segs[index], segs[index + 1]] = [segs[index + 1], segs[index]];
|
||||||
|
if (s.selectedLayerIndex === index) s.selectedLayerIndex = index + 1;
|
||||||
|
else if (s.selectedLayerIndex === index + 1) s.selectedLayerIndex = index;
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateLayer: (index, patch) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
Object.assign(cutscene.imageSegments[index], patch);
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateLayerFrom: (index, patch) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
Object.assign(cutscene.imageSegments[index].from, patch);
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateLayerTo: (index, patch) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
Object.assign(cutscene.imageSegments[index].to, patch);
|
||||||
|
}),
|
||||||
|
|
||||||
|
addLine: () => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
cutscene.lines.push(newLine());
|
||||||
|
}),
|
||||||
|
|
||||||
|
removeLine: (index) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
cutscene.lines.splice(index, 1);
|
||||||
|
}),
|
||||||
|
|
||||||
|
moveLineUp: (index) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene || index <= 0) return;
|
||||||
|
const lines = cutscene.lines;
|
||||||
|
[lines[index - 1], lines[index]] = [lines[index], lines[index - 1]];
|
||||||
|
}),
|
||||||
|
|
||||||
|
moveLineDown: (index) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
const lines = cutscene.lines;
|
||||||
|
if (index >= lines.length - 1) return;
|
||||||
|
[lines[index], lines[index + 1]] = [lines[index + 1], lines[index]];
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateLine: (index, patch) => set(s => {
|
||||||
|
const cutscene = getSelected(s.file, s.selectedCutsceneId);
|
||||||
|
if (!cutscene) return;
|
||||||
|
Object.assign(cutscene.lines[index], patch);
|
||||||
|
}),
|
||||||
|
|
||||||
|
setPlayState: (state) => set(s => { s.playState = state; }),
|
||||||
|
setCurrentTime: (ms) => set(s => { s.currentTimeMs = ms; }),
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
export function useSelectedCutscene() {
|
||||||
|
return useCutsceneStore(s =>
|
||||||
|
s.file?.cutscenes.find(c => c.id === s.selectedCutsceneId) ?? null
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
export type EasingType =
|
||||||
|
| 'Linear'
|
||||||
|
| 'EaseInSine' | 'EaseOutSine' | 'EaseInOutSine'
|
||||||
|
| 'EaseInQuad' | 'EaseOutQuad' | 'EaseInOutQuad'
|
||||||
|
| 'EaseInCubic' | 'EaseOutCubic' | 'EaseInOutCubic';
|
||||||
|
|
||||||
|
export interface ImagePose {
|
||||||
|
centerX: number;
|
||||||
|
centerY: number;
|
||||||
|
scale: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImageSegment {
|
||||||
|
path: string;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
startMs: number;
|
||||||
|
endMs: number;
|
||||||
|
fadeInMs: number;
|
||||||
|
fadeOutMs: number;
|
||||||
|
easing: EasingType;
|
||||||
|
from: ImagePose;
|
||||||
|
to: ImagePose;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SubtitleLine {
|
||||||
|
speaker: string;
|
||||||
|
text: string;
|
||||||
|
durationMs: number;
|
||||||
|
waitForConfirm: boolean;
|
||||||
|
luaCallback: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Cutscene {
|
||||||
|
id: string;
|
||||||
|
skippable: boolean;
|
||||||
|
durationMs: number;
|
||||||
|
fadeOutMs: number;
|
||||||
|
fadeInMs: number;
|
||||||
|
endFadeOutMs: number;
|
||||||
|
endFadeInMs: number;
|
||||||
|
onFadeInCallback: string;
|
||||||
|
imageSegments: ImageSegment[];
|
||||||
|
lines: SubtitleLine[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CutsceneFile {
|
||||||
|
cutscenes: Cutscene[];
|
||||||
|
}
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import type { CutsceneFile, Cutscene, ImageSegment, SubtitleLine } from '../types/cutscene';
|
||||||
|
|
||||||
|
function parseSegment(raw: Record<string, unknown>): ImageSegment {
|
||||||
|
const from = (raw.from as Record<string, number> | undefined) ?? {};
|
||||||
|
const to = (raw.to as Record<string, number> | undefined) ?? {};
|
||||||
|
return {
|
||||||
|
path: String(raw.path ?? ''),
|
||||||
|
width: Number(raw.width ?? 1280),
|
||||||
|
height: Number(raw.height ?? 720),
|
||||||
|
startMs: Number(raw.startMs ?? 0),
|
||||||
|
endMs: Number(raw.endMs ?? 5000),
|
||||||
|
fadeInMs: Number(raw.fadeInMs ?? 0),
|
||||||
|
fadeOutMs: Number(raw.fadeOutMs ?? 0),
|
||||||
|
easing: String(raw.easing ?? 'Linear') as ImageSegment['easing'],
|
||||||
|
from: {
|
||||||
|
centerX: Number(from.centerX ?? 0.5),
|
||||||
|
centerY: Number(from.centerY ?? 0.5),
|
||||||
|
scale: Number(from.scale ?? 1.0),
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
centerX: Number(to.centerX ?? from.centerX ?? 0.5),
|
||||||
|
centerY: Number(to.centerY ?? from.centerY ?? 0.5),
|
||||||
|
scale: Number(to.scale ?? from.scale ?? 1.0),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseLine(raw: Record<string, unknown>): SubtitleLine {
|
||||||
|
return {
|
||||||
|
speaker: String(raw.speaker ?? ''),
|
||||||
|
text: String(raw.text ?? ''),
|
||||||
|
durationMs: Number(raw.durationMs ?? 0),
|
||||||
|
waitForConfirm: Boolean(raw.waitForConfirm ?? false),
|
||||||
|
luaCallback: String(raw.luaCallback ?? ''),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseCutscene(raw: Record<string, unknown>): Cutscene {
|
||||||
|
const segments = Array.isArray(raw.imageSegments)
|
||||||
|
? (raw.imageSegments as Record<string, unknown>[]).map(parseSegment)
|
||||||
|
: [];
|
||||||
|
const lines = Array.isArray(raw.lines)
|
||||||
|
? (raw.lines as Record<string, unknown>[]).map(parseLine)
|
||||||
|
: [];
|
||||||
|
return {
|
||||||
|
id: String(raw.id ?? 'untitled'),
|
||||||
|
skippable: raw.skippable !== false,
|
||||||
|
durationMs: Number(raw.durationMs ?? 0),
|
||||||
|
fadeOutMs: Number(raw.fadeOutMs ?? 0),
|
||||||
|
fadeInMs: Number(raw.fadeInMs ?? 0),
|
||||||
|
endFadeOutMs: Number(raw.endFadeOutMs ?? 0),
|
||||||
|
endFadeInMs: Number(raw.endFadeInMs ?? 0),
|
||||||
|
onFadeInCallback: String(raw.onFadeInCallback ?? ''),
|
||||||
|
imageSegments: segments,
|
||||||
|
lines,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parseFile(json: unknown): CutsceneFile {
|
||||||
|
const raw = json as Record<string, unknown>;
|
||||||
|
const cutscenes = Array.isArray(raw.cutscenes)
|
||||||
|
? (raw.cutscenes as Record<string, unknown>[]).map(parseCutscene)
|
||||||
|
: [];
|
||||||
|
return { cutscenes };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function triggerDownload(file: CutsceneFile, filename = 'cutscenes.json') {
|
||||||
|
const json = JSON.stringify(file, null, 4);
|
||||||
|
const blob = new Blob([json], { type: 'application/json' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = filename;
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import type { ImageSegment, ImagePose } from '../types/cutscene';
|
||||||
|
import { applyEasing } from '../constants/easings';
|
||||||
|
|
||||||
|
function clamp(v: number, min: number, max: number) {
|
||||||
|
return Math.max(min, Math.min(max, v));
|
||||||
|
}
|
||||||
|
|
||||||
|
function lerp(a: number, b: number, t: number) {
|
||||||
|
return a + (b - a) * t;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SegmentRenderState {
|
||||||
|
alpha: number;
|
||||||
|
pose: ImagePose;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function computeSegmentState(seg: ImageSegment, currentMs: number): SegmentRenderState | null {
|
||||||
|
if (currentMs < seg.startMs || currentMs > seg.endMs) return null;
|
||||||
|
|
||||||
|
const duration = seg.endMs - seg.startMs;
|
||||||
|
const localMs = currentMs - seg.startMs;
|
||||||
|
const t = duration > 0 ? clamp(localMs / duration, 0, 1) : 1;
|
||||||
|
const tEased = applyEasing(t, seg.easing);
|
||||||
|
|
||||||
|
const pose: ImagePose = {
|
||||||
|
centerX: lerp(seg.from.centerX, seg.to.centerX, tEased),
|
||||||
|
centerY: lerp(seg.from.centerY, seg.to.centerY, tEased),
|
||||||
|
scale: lerp(seg.from.scale, seg.to.scale, tEased),
|
||||||
|
};
|
||||||
|
|
||||||
|
let alpha = 1;
|
||||||
|
if (seg.fadeInMs > 0 && localMs < seg.fadeInMs) {
|
||||||
|
alpha = localMs / seg.fadeInMs;
|
||||||
|
} else if (seg.fadeOutMs > 0 && localMs > duration - seg.fadeOutMs) {
|
||||||
|
alpha = (duration - localMs) / seg.fadeOutMs;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { alpha: clamp(alpha, 0, 1), pose };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns CSS for an absolutely-positioned <img> inside the viewport div.
|
||||||
|
*
|
||||||
|
* The image is stretched (object-fit: fill) to exactly logicalW × logicalH
|
||||||
|
* logical pixels on screen — matching how the game engine maps the full
|
||||||
|
* texture quad to those dimensions, regardless of the file's natural size.
|
||||||
|
*
|
||||||
|
* At scale=1 the logical area fills the viewport (aspect-ratio corrected).
|
||||||
|
* The viewport's own overflow:hidden clips anything that extends beyond.
|
||||||
|
*/
|
||||||
|
export function poseToStyle(
|
||||||
|
pose: ImagePose,
|
||||||
|
logicalW: number, // segment.width (e.g. 1280)
|
||||||
|
logicalH: number, // segment.height (e.g. 720)
|
||||||
|
containerW: number,
|
||||||
|
containerH: number,
|
||||||
|
): React.CSSProperties {
|
||||||
|
const baseScale = Math.max(containerW / logicalW, containerH / logicalH);
|
||||||
|
const renderW = logicalW * baseScale * pose.scale;
|
||||||
|
const renderH = logicalH * baseScale * pose.scale;
|
||||||
|
|
||||||
|
const maxOffsetX = Math.max(0, (renderW - containerW) / 2);
|
||||||
|
const maxOffsetY = Math.max(0, (renderH - containerH) / 2);
|
||||||
|
const offsetX = clamp((0.5 - pose.centerX) * renderW, -maxOffsetX, maxOffsetX);
|
||||||
|
// Y axis is inverted: centerY=0 → bottom of image, centerY=1 → top (Y-up convention)
|
||||||
|
const offsetY = clamp((pose.centerY - 0.5) * renderH, -maxOffsetY, maxOffsetY);
|
||||||
|
|
||||||
|
return {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
width: renderW,
|
||||||
|
height: renderH,
|
||||||
|
// Default object-fit (fill) stretches the full texture to these logical
|
||||||
|
// dimensions, exactly as the game engine renders the quad.
|
||||||
|
objectFit: 'fill',
|
||||||
|
transform: `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`,
|
||||||
|
};
|
||||||
|
}
|
||||||
Vendored
+6
@@ -0,0 +1,6 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.module.css' {
|
||||||
|
const classes: Record<string, string>;
|
||||||
|
export default classes;
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"noUnusedParameters": false,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import fs from 'fs';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
{
|
||||||
|
name: 'serve-resources',
|
||||||
|
configureServer(server) {
|
||||||
|
server.middlewares.use('/resources', (req, res, next) => {
|
||||||
|
const filePath = path.join(process.cwd(), 'resources', decodeURIComponent(req.url ?? ''));
|
||||||
|
if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
|
||||||
|
const ext = path.extname(filePath).toLowerCase();
|
||||||
|
const mime = ext === '.png' ? 'image/png' : ext === '.jpg' ? 'image/jpeg' : 'application/octet-stream';
|
||||||
|
res.setHeader('Content-Type', mime);
|
||||||
|
fs.createReadStream(filePath).pipe(res as import('stream').Writable);
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
@@ -13,20 +13,16 @@
|
|||||||
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
"startMs": 0,
|
"startMs": 0,
|
||||||
"endMs": 8000,
|
"endMs": 8000,
|
||||||
"fadeInMs": 300,
|
"fadeInMs": 0,
|
||||||
"width": 1280,
|
"width": 1280,
|
||||||
"height": 720,
|
"height": 720,
|
||||||
"from": {
|
"from": {
|
||||||
"centerX": 0.4,
|
"centerX": 0.3, "scale": 1.2
|
||||||
"centerY": 0.5,
|
|
||||||
"scale": 1.1
|
|
||||||
},
|
},
|
||||||
"to": {
|
"to": {
|
||||||
"centerX": 0.6,
|
"centerX": 0.7, "scale": 1.2
|
||||||
"centerY": 0.5,
|
|
||||||
"scale": 1.0
|
|
||||||
},
|
},
|
||||||
"easing": "EaseInOutSine"
|
"easing": "Linear"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png",
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png",
|
||||||
@@ -50,22 +46,18 @@
|
|||||||
"lines": [
|
"lines": [
|
||||||
{
|
{
|
||||||
"speaker": "Аида Дженибековна",
|
"speaker": "Аида Дженибековна",
|
||||||
"portrait": "resources/dialogue/portrait_teacher.png",
|
"text": "Здравствуйте, студенты.. Кого я вижу, где вы были весь семестр?",
|
||||||
"text": "Здравствуйте, студенты. Кого я вижу, где вы были весь семестр?",
|
|
||||||
"durationMs": 3000
|
"durationMs": 3000
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"speaker": "Аида Дженибековна",
|
"speaker": "Аида Дженибековна",
|
||||||
"portrait": "resources/dialogue/portrait_teacher.png",
|
|
||||||
"text": "В эпизоде \"Семетей\" трилогии \"Манас\", изменники Канчоро и Кыяз захватывают власть над кыргызами.",
|
"text": "В эпизоде \"Семетей\" трилогии \"Манас\", изменники Канчоро и Кыяз захватывают власть над кыргызами.",
|
||||||
"durationMs": 3000
|
"durationMs": 3000
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"speaker": "Аида Дженибековна",
|
"speaker": "Аида Дженибековна",
|
||||||
"portrait": "resources/dialogue/portrait_teacher.png",
|
|
||||||
"text": "На сегодня лекция завершена. Домашнее задание - к практическому занятию вы должны подготовить презентации, каждый по своей теме.",
|
"text": "На сегодня лекция завершена. Домашнее задание - к практическому занятию вы должны подготовить презентации, каждый по своей теме.",
|
||||||
"durationMs": 2000,
|
"durationMs": 2000
|
||||||
"background": "resources/test_cutscene001.png"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,396 @@
|
|||||||
|
{
|
||||||
|
"cutscenes": [
|
||||||
|
{
|
||||||
|
"id": "test_cutscene_01",
|
||||||
|
"background" : "resources/black.png",
|
||||||
|
"skippable": true,
|
||||||
|
"durationMs": 5000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 500,
|
||||||
|
"endFadeInMs": 500,
|
||||||
|
"onFadeInCallback": "",
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 3133,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.51,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.58,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 3150,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.52,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.575,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 3150,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.56,
|
||||||
|
"centerY": 0.64,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.63,
|
||||||
|
"scale": 1.4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 3050,
|
||||||
|
"endMs": 12150,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.56,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 3050,
|
||||||
|
"endMs": 12166,
|
||||||
|
"fadeInMs": 1100,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.52,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 3033,
|
||||||
|
"endMs": 12050,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.58,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 11115,
|
||||||
|
"endMs": 18149,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.59,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.49,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 12032,
|
||||||
|
"endMs": 18165,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.53,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.49,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 11951,
|
||||||
|
"endMs": 18150,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.45,
|
||||||
|
"centerY": 0.8,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.6,
|
||||||
|
"centerY": 0.8,
|
||||||
|
"scale": 1.26
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 23967,
|
||||||
|
"endMs": 30000,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.64,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 24016,
|
||||||
|
"endMs": 30000,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.63,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.51,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 18034,
|
||||||
|
"endMs": 24151,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 700,
|
||||||
|
"easing": "EaseOutSine",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.25,
|
||||||
|
"centerY": 0.2,
|
||||||
|
"scale": 2.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.3,
|
||||||
|
"centerY": 0.2,
|
||||||
|
"scale": 2.3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 30000,
|
||||||
|
"endMs": 33683,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.45,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 30333,
|
||||||
|
"endMs": 33466,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.43,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 30400,
|
||||||
|
"endMs": 33483,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.65,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.6,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Опаздывающие, заходите скорее и занимайте свои места! Лекция начинается!",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В эпизоде \"Семетей\" трилогии \"Манас\", изменники Канчоро и Кыяз захватывают власть над кыргызами.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Чтобы спасти раненого богатыря Семетея, фея Кёкмончок с помощью заклинания уводит его в иной мир.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Этот мир описан в эпосе Манас как Кайып или Аль-Гайб, но некоторые ученые называют его миром теней.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В этом мире обитают феи, духи и джинны. Простым смертным в этот мир дорога закрыта.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Время там течет по другому - за один день в теневом мире могут пройти годы жизни обычного мира.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Обычно, мир теней никак не пересекается с нашим миром живых людей.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "",
|
||||||
|
"text": "Но в критические моменты для народа, обитатели теневого мира могут приходить в наш мир.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Совсем недавно закончилась пандемия, а сегодня мир захлестнули кровавые войны.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В такие кризисные моменты истории, грань между мирами становится особенно тонкой.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "На сегодня лекция завершена. Все свободны! Задания на этот модуль вы получите индивидуально!",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,415 @@
|
|||||||
|
{
|
||||||
|
"cutscenes": [
|
||||||
|
{
|
||||||
|
"id": "test_cutscene_01",
|
||||||
|
"skippable": true,
|
||||||
|
"durationMs": 34000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 0,
|
||||||
|
"endFadeInMs": 0,
|
||||||
|
"onFadeInCallback": "",
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/black.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 34000,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 0,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 3133,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.51,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.58,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 3150,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.52,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.575,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 3150,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.56,
|
||||||
|
"centerY": 0.36,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.37,
|
||||||
|
"scale": 1.4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 3050,
|
||||||
|
"endMs": 12150,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.56,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 3050,
|
||||||
|
"endMs": 12166,
|
||||||
|
"fadeInMs": 1100,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.52,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 3033,
|
||||||
|
"endMs": 12050,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.58,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 11115,
|
||||||
|
"endMs": 18149,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.59,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.49,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 12032,
|
||||||
|
"endMs": 18165,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.53,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.49,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 11951,
|
||||||
|
"endMs": 18150,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.45,
|
||||||
|
"centerY": 0.2,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.6,
|
||||||
|
"centerY": 0.2,
|
||||||
|
"scale": 1.26
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 23967,
|
||||||
|
"endMs": 30000,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.64,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 24016,
|
||||||
|
"endMs": 30000,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.63,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.51,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 18067,
|
||||||
|
"endMs": 24184,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 700,
|
||||||
|
"easing": "EaseOutSine",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.25,
|
||||||
|
"centerY": 0.8,
|
||||||
|
"scale": 2.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.3,
|
||||||
|
"centerY": 0.8,
|
||||||
|
"scale": 2.3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 30000,
|
||||||
|
"endMs": 33683,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.45,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 30333,
|
||||||
|
"endMs": 33466,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.43,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 30400,
|
||||||
|
"endMs": 33483,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.35,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.4,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Опаздывающие, заходите скорее и занимайте свои места! Лекция начинается!",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В эпизоде \"Семетей\" трилогии \"Манас\", изменники Канчоро и Кыяз захватывают власть над кыргызами.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Чтобы спасти раненого богатыря Семетея, фея Кёкмончок с помощью заклинания уводит его в иной мир.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Этот мир описан в эпосе Манас как Кайып или Аль-Гайб, но некоторые ученые называют его миром теней.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В этом мире обитают феи, духи и джинны. Простым смертным в этот мир дорога закрыта.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Время там течет по другому - за один день в теневом мире могут пройти годы жизни обычного мира.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Обычно, мир теней никак не пересекается с нашим миром живых людей.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "",
|
||||||
|
"text": "Но в критические моменты для народа, обитатели теневого мира могут приходить в наш мир.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Совсем недавно закончилась пандемия, а сегодня мир захлестнули кровавые войны.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В такие кризисные моменты истории, грань между мирами становится особенно тонкой.",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "На сегодня лекция завершена. Все свободны! Задания на этот модуль вы получите индивидуально!",
|
||||||
|
"durationMs": 3000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,415 @@
|
|||||||
|
{
|
||||||
|
"cutscenes": [
|
||||||
|
{
|
||||||
|
"id": "lection_cutscene001",
|
||||||
|
"skippable": true,
|
||||||
|
"durationMs": 37000,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"endFadeOutMs": 0,
|
||||||
|
"endFadeInMs": 2000,
|
||||||
|
"onFadeInCallback": "",
|
||||||
|
"imageSegments": [
|
||||||
|
{
|
||||||
|
"path": "resources/black.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 37052,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 0,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 6133,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.51,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.58,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida1_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 6150,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.52,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.575,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 0,
|
||||||
|
"endMs": 6167,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 2000,
|
||||||
|
"easing": "EaseOutCubic",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.56,
|
||||||
|
"centerY": 0.36,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.37,
|
||||||
|
"scale": 1.4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 6000,
|
||||||
|
"endMs": 15100,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.56,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 6050,
|
||||||
|
"endMs": 15166,
|
||||||
|
"fadeInMs": 1100,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.52,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 6066,
|
||||||
|
"endMs": 15083,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.58,
|
||||||
|
"centerY": 0.3,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 14436,
|
||||||
|
"endMs": 21470,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.59,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.49,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 15348,
|
||||||
|
"endMs": 21481,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.53,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.49,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 15388,
|
||||||
|
"endMs": 21587,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.45,
|
||||||
|
"centerY": 0.2,
|
||||||
|
"scale": 1.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.6,
|
||||||
|
"centerY": 0.2,
|
||||||
|
"scale": 1.26
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 26588,
|
||||||
|
"endMs": 32621,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.64,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida3_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 26637,
|
||||||
|
"endMs": 32621,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 500,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.63,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.51,
|
||||||
|
"centerY": 0.7,
|
||||||
|
"scale": 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 20744,
|
||||||
|
"endMs": 26861,
|
||||||
|
"fadeInMs": 1000,
|
||||||
|
"fadeOutMs": 700,
|
||||||
|
"easing": "EaseOutSine",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.25,
|
||||||
|
"centerY": 0.8,
|
||||||
|
"scale": 2.3
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.3,
|
||||||
|
"centerY": 0.8,
|
||||||
|
"scale": 2.3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_wall_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 32546,
|
||||||
|
"endMs": 36229,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.45,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_aida2_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 32542,
|
||||||
|
"endMs": 35675,
|
||||||
|
"fadeInMs": 500,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.43,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1.1
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.5,
|
||||||
|
"scale": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "resources/w/cutscenes/cutscene1/cutscene1_heads_x.png",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 720,
|
||||||
|
"startMs": 32497,
|
||||||
|
"endMs": 35580,
|
||||||
|
"fadeInMs": 0,
|
||||||
|
"fadeOutMs": 1000,
|
||||||
|
"easing": "Linear",
|
||||||
|
"from": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.35,
|
||||||
|
"scale": 1.2
|
||||||
|
},
|
||||||
|
"to": {
|
||||||
|
"centerX": 0.5,
|
||||||
|
"centerY": 0.4,
|
||||||
|
"scale": 1.2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lines": [
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Опаздывающие, заходите скорее и занимайте свои места! Лекция начинается!",
|
||||||
|
"durationMs": 4000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В эпизоде \"Семетей\" трилогии \"Манас\", изменники Канчоро и Кыяз захватывают власть над кыргызами.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Чтобы спасти раненого богатыря Семетея, фея Кёкмончок с помощью заклинания уводит его в иной мир.",
|
||||||
|
"durationMs": 3201,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Этот мир описан в эпосе Манас как Кайып или Аль-Гайб, но некоторые ученые называют его миром теней.",
|
||||||
|
"durationMs": 3202,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В этом мире обитают феи, духи и джинны. Простым смертным в этот мир дорога закрыта.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Время там течет по другому - за один день в теневом мире могут пройти годы жизни обычного мира.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Обычно, мир теней никак не пересекается с нашим миром живых людей.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Но в критические моменты для народа, обитатели теневого мира могут приходить в наш мир.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "Совсем недавно закончилась пандемия, а сегодня мир захлестнули кровавые войны.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "В такие кризисные моменты истории, грань между мирами становится особенно тонкой.",
|
||||||
|
"durationMs": 3200,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"speaker": "Аида Дженибековна",
|
||||||
|
"text": "На сегодня лекция завершена. Все свободны! Задания на этот модуль вы получите индивидуально!",
|
||||||
|
"durationMs": 4000,
|
||||||
|
"waitForConfirm": false,
|
||||||
|
"luaCallback": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -34,7 +34,7 @@ function lection_hall_zone001_enter_callback()
|
|||||||
--Start cutscene
|
--Start cutscene
|
||||||
if (lection_is_over == false) then
|
if (lection_is_over == false) then
|
||||||
game_api.player_stop()
|
game_api.player_stop()
|
||||||
game_api.start_cutscene("test_cutscene_01")
|
game_api.start_cutscene("lection_cutscene001")
|
||||||
game_api.quest_set_objective_completed("study_beginning", "study_beginning_lecture")
|
game_api.quest_set_objective_completed("study_beginning", "study_beginning_lecture")
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
@@ -559,7 +559,7 @@ function on_teacher_arrived_intermediate()
|
|||||||
teacher_arrived = true
|
teacher_arrived = true
|
||||||
end
|
end
|
||||||
|
|
||||||
game_api.set_cutscene_callback("test_cutscene_01", function()
|
game_api.set_cutscene_callback("lection_cutscene001", function()
|
||||||
print("Cutscene done!")
|
print("Cutscene done!")
|
||||||
lection_is_over = true
|
lection_is_over = true
|
||||||
game_api.set_npc_enabled(1, true)
|
game_api.set_npc_enabled(1, true)
|
||||||
|
|||||||
+1
-1
@@ -801,7 +801,7 @@ namespace ZL
|
|||||||
|
|
||||||
break;
|
break;
|
||||||
case SDLK_e:
|
case SDLK_e:
|
||||||
currentLocation->dialogueSystem.startCutscene("test_cutscene_01"); //.startDialogue("test_cutscene_pan_dialogue");
|
currentLocation->dialogueSystem.startCutscene("lection_cutscene001"); //.startDialogue("test_cutscene_pan_dialogue");
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case SDLK_n:
|
case SDLK_n:
|
||||||
|
|||||||
+2
-1
@@ -128,9 +128,10 @@ namespace ZL
|
|||||||
|
|
||||||
setupNavigation(params.navigationJsonPaths);
|
setupNavigation(params.navigationJsonPaths);
|
||||||
|
|
||||||
|
|
||||||
dialogueSystem.init(renderer, CONST_ZIP_FILE);
|
dialogueSystem.init(renderer, CONST_ZIP_FILE);
|
||||||
dialogueSystem.loadDatabase(params.dialoguesJsonPath);
|
dialogueSystem.loadDatabase(params.dialoguesJsonPath);
|
||||||
dialogueSystem.loadCutsceneDatabase("resources/dialogue/cutscenes.json");
|
dialogueSystem.loadCutsceneDatabase("resources/dialogue/cutscenes003.json");
|
||||||
dialogueSystem.setQuestJournal(journal);
|
dialogueSystem.setQuestJournal(journal);
|
||||||
|
|
||||||
npcNameText = std::make_unique<TextRenderer>();
|
npcNameText = std::make_unique<TextRenderer>();
|
||||||
|
|||||||
@@ -203,6 +203,8 @@ void CutsceneOverlay::draw(Renderer& renderer, const ZL::Dialogue::PresentationM
|
|||||||
|
|
||||||
// --- Text ---
|
// --- Text ---
|
||||||
if (model.showCutsceneSubtitle) {
|
if (model.showCutsceneSubtitle) {
|
||||||
|
const std::string wrapped = wrapTextToWidth(model.visibleText, *cutsceneRenderer, subtitleRect.w - 48.0f, 1.0f);
|
||||||
|
|
||||||
if (!model.speaker.empty()) {
|
if (!model.speaker.empty()) {
|
||||||
nameRenderer->drawText(
|
nameRenderer->drawText(
|
||||||
model.speaker,
|
model.speaker,
|
||||||
@@ -210,10 +212,14 @@ void CutsceneOverlay::draw(Renderer& renderer, const ZL::Dialogue::PresentationM
|
|||||||
subtitleRect.y + subtitleRect.h - 32.0f,
|
subtitleRect.y + subtitleRect.h - 32.0f,
|
||||||
1.0f, false, { 1.0f, 0.88f, 0.45f, 1.0f }
|
1.0f, false, { 1.0f, 0.88f, 0.45f, 1.0f }
|
||||||
);
|
);
|
||||||
|
cutsceneRenderer->drawText(wrapped, subtitleRect.x + 24.0f, subtitleRect.y + subtitleRect.h - 60.0f,
|
||||||
|
1.0f, false, { 1.0f, 1.0f, 1.0f, 1.0f });
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
cutsceneRenderer->drawText(wrapped, subtitleRect.x + 24.0f, subtitleRect.y + subtitleRect.h - 32.0f,
|
||||||
|
1.0f, false, { 1.0f, 1.0f, 1.0f, 1.0f });
|
||||||
}
|
}
|
||||||
const std::string wrapped = wrapTextToWidth(model.visibleText, *cutsceneRenderer, subtitleRect.w - 48.0f, 1.0f);
|
|
||||||
cutsceneRenderer->drawText(wrapped, subtitleRect.x + 24.0f, subtitleRect.y + 30.0f,
|
|
||||||
1.0f, false, { 1.0f, 1.0f, 1.0f, 1.0f });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (model.cutsceneSkippable && cutsceneSkipHintVisible) {
|
if (model.cutsceneSkippable && cutsceneSkipHintVisible) {
|
||||||
|
|||||||
Reference in new issue
Block a user