')
- .attr('id', this.backgroundId)
- .attr('layer-name', this.sceneData.name || 'Background')
- .css(this.buildBaseStyle({
- 'background-size': this.backgroundSize,
- 'background-repeat': this.backgroundRepeat,
- 'background-position': this.backgroundPosition,
- 'transition': this.transition || 'none',
- }))
- [0];
-
- super.syncDom();
+
+ this.domElement = $("
")
+ .attr("id", this.backgroundId)
+ .attr("layer-name", this.sceneData.name || "Background")
+ .css(
+ this.buildBaseStyle({
+ "background-size": this.backgroundSize,
+ "background-repeat": this.backgroundRepeat,
+ "background-position": this.backgroundPosition,
+ transition: this.transition || "none",
+ }),
+ )[0];
+
+ super.syncDom();
}
async loadImage(path) {
@@ -50,14 +52,14 @@ export class Background extends SceneElement {
updateBackgroundImage(backgroundImageUrl = null) {
if (!this.domElement) return;
this.backgroundImageUrl = backgroundImageUrl;
- if(!backgroundImageUrl) this.backgroundImageUrl = '';
- $(this.domElement).css('background-image', `url('${this.backgroundImageUrl}')`);
+ if (!backgroundImageUrl) this.backgroundImageUrl = "";
+ $(this.domElement).css("background-image", `url('${this.backgroundImageUrl}')`);
this.updateScrollPosition();
}
updateScrollPosition() {
- if (!this.domElement || (this.scrollSpeed?.x || 0) == 0 && (this.scrollSpeed?.y || 0) == 0) return;
- $(this.domElement).css('background-position', `${this.scrollOffset?.x || 0}px ${this.scrollOffset?.y || 0}px`);
+ if (!this.domElement || ((this.scrollSpeed?.x || 0) == 0 && (this.scrollSpeed?.y || 0) == 0)) return;
+ $(this.domElement).css("background-position", `${this.scrollOffset?.x || 0}px ${this.scrollOffset?.y || 0}px`);
}
resetScrollOffset() {
@@ -69,7 +71,7 @@ export class Background extends SceneElement {
update(deltaTime) {
// Handle scroll offset
if ((this.scrollSpeed?.x || 0) !== 0 || (this.scrollSpeed?.y || 0) !== 0) {
- if(isNaN(this.scrollOffset.x) || isNaN(this.scrollOffset.y)) {
+ if (isNaN(this.scrollOffset.x) || isNaN(this.scrollOffset.y)) {
this.scrollOffset.x = 0;
this.scrollOffset.y = 0;
}
@@ -83,16 +85,16 @@ export class Background extends SceneElement {
export function toBackground(element, options = {}) {
const {
- backgroundSize = 'cover',
- backgroundPosition = 'center',
- backgroundRepeat = 'repeat',
+ backgroundSize = "cover",
+ backgroundPosition = "center",
+ backgroundRepeat = "repeat",
scrollSpeedX = 0,
scrollSpeedY = 0,
transition = null,
} = options;
if (!element || !element.sceneData) {
- console.error('Element must be a valid SceneElement to elevate to Background');
+ console.error("Element must be a valid SceneElement to elevate to Background");
return null;
}
diff --git a/src/Graphics/Graphics.Button.js b/src/Graphics/Graphics.Button.js
index 6bc440d8..d685680e 100644
--- a/src/Graphics/Graphics.Button.js
+++ b/src/Graphics/Graphics.Button.js
@@ -1,5 +1,6 @@
import { FocusableElement } from './Graphics.FocusableElement.js';
import { preserveLayerIndex } from './Graphics.SceneElement.js';
+import $ from 'jquery';
export class Button extends FocusableElement {
constructor(data, parent = null, scene) {
diff --git a/src/Graphics/Graphics.FocusableElement.js b/src/Graphics/Graphics.FocusableElement.js
index 372ccb24..6490ee9e 100644
--- a/src/Graphics/Graphics.FocusableElement.js
+++ b/src/Graphics/Graphics.FocusableElement.js
@@ -1,4 +1,5 @@
import { SceneElement } from './Graphics.SceneElement.js';
+import $ from 'jquery'
export class FocusableElement extends SceneElement {
constructor(data, parent = null, scene) {
diff --git a/src/Graphics/Graphics.SceneElement.js b/src/Graphics/Graphics.SceneElement.js
index 081844e3..31bfa8ab 100644
--- a/src/Graphics/Graphics.SceneElement.js
+++ b/src/Graphics/Graphics.SceneElement.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
export class SceneElement {
constructor(data, parent = null, scene = null) {
// Core transform grouped
diff --git a/src/Graphics/Graphics.TextMessPoor.js b/src/Graphics/Graphics.TextMessPoor.js
index cf55ca8b..652891a7 100644
--- a/src/Graphics/Graphics.TextMessPoor.js
+++ b/src/Graphics/Graphics.TextMessPoor.js
@@ -1,22 +1,23 @@
-import { SceneElement } from './Graphics.SceneElement.js';
+import $ from "jquery";
+import { SceneElement } from "./Graphics.SceneElement.js";
export class TMP_Text extends SceneElement {
constructor(data, parent = null, scene = null) {
super(data, parent, scene);
- this.text = data.text || '';
+ this.text = data.text || "";
this.fontSize = data.fontSize || 16;
- this.fontFamily = data.fontFamily || '';
- this.fontWeight = data.fontWeight || 'normal';
- this.color = data.color || '#000000';
-
+ this.fontFamily = data.fontFamily || "";
+ this.fontWeight = data.fontWeight || "normal";
+ this.color = data.color || "#000000";
+
this.setText(this.text);
this.updateTextStyle();
}
createDOMElement() {
- this.domElement = $('
')
- .attr('layer-name', this.sceneData.name || '')
+ this.domElement = $("")
+ .attr("layer-name", this.sceneData.name || "")
.text(this.text)
.css(this.buildBaseStyle())[0];
super.syncDom();
@@ -24,14 +25,14 @@ export class TMP_Text extends SceneElement {
buildBaseStyle(extra = {}) {
const baseStyle = super.buildBaseStyle({
- 'font-size': `${this.fontSize}px`,
- 'color': this.color,
- 'display': this.visible ? 'inline-block' : 'none',
- 'font-family': this.fontFamily,
- 'font-weight': this.fontWeight,
- ...extra
+ "font-size": `${this.fontSize}px`,
+ color: this.color,
+ display: this.visible ? "inline-block" : "none",
+ "font-family": this.fontFamily,
+ "font-weight": this.fontWeight,
+ ...extra,
});
-
+
return baseStyle;
}
@@ -62,20 +63,20 @@ export class TMP_Text extends SceneElement {
export class TMP_TypeWriter extends TMP_Text {
constructor(data, parent = null, scene = null) {
super(data, parent, scene);
-
+
this.fullText = this.text;
this.currentCharIndex = 0;
this.isAnimating = false;
this.charsPerSecond = data.charsPerSecond || 30;
this.timeAccumulator = 0;
-
+
this.cancelAnimation();
this.setText(this.text);
}
update(deltaTime) {
super.update(deltaTime);
-
+
if (!this.isAnimating || this.currentCharIndex >= this.fullText.length) {
if (this.isAnimating) {
this.isAnimating = false;
@@ -108,7 +109,7 @@ export class TMP_TypeWriter extends TMP_Text {
}
animateText(newText) {
- if(this.fullText == newText && this.isAnimating) {
+ if (this.fullText == newText && this.isAnimating) {
this.cancelAnimation();
return;
}
@@ -116,6 +117,6 @@ export class TMP_TypeWriter extends TMP_Text {
this.isAnimating = true;
this.currentCharIndex = 0;
this.timeAccumulator = 0;
- this.setText('');
+ this.setText("");
}
}
diff --git a/src/InputSystem/InputSystem.Gamepad.js b/src/InputSystem/InputSystem.Gamepad.ts
similarity index 89%
rename from src/InputSystem/InputSystem.Gamepad.js
rename to src/InputSystem/InputSystem.Gamepad.ts
index 633dbcb2..c8eeb102 100644
--- a/src/InputSystem/InputSystem.Gamepad.js
+++ b/src/InputSystem/InputSystem.Gamepad.ts
@@ -1,7 +1,10 @@
+import $ from 'jquery';
+import { confirmListener, exitListener } from './InputSystem.Keyboard';
+
// Gamepad support
-let gamepadState = {
- buttons: [],
- axes: [],
+const gamepadState = {
+ buttons: [] as boolean[],
+ axes: [] as number[],
lastUpdate: 0
};
const GAMEPAD_DEADZONE = 0.3;
@@ -35,7 +38,7 @@ function pollGamepad() {
if (confirmListener) {
confirmListener(null, $current);
} else {
- $current.click();
+ $current.trigger("click");
}
}
}
@@ -49,7 +52,7 @@ function pollGamepad() {
}
// D-pad and analog stick navigation
- let navigationDirection = null;
+ let navigationDirection: 'prev' | 'next' | null = null;
if (gamepad.buttons[12]?.pressed) navigationDirection = 'prev';
else if (gamepad.buttons[13]?.pressed) navigationDirection = 'next';
else if (gamepad.buttons[14]?.pressed) navigationDirection = 'prev';
@@ -64,7 +67,7 @@ function pollGamepad() {
// Navigation with repeat delay
if (navigationDirection && (now - lastNavigationTime > GAMEPAD_REPEAT_DELAY)) {
if (!$focused.length) {
- $('.focusable').first().focus();
+ $('.focusable').first().trigger('focus');
} else {
let $current = $focused;
$current.removeClass('active');
@@ -72,7 +75,7 @@ function pollGamepad() {
const $target = $current[navigationDirection]('.focusable');
if (!$target.length) break;
if ($target.is(':visible')) {
- $target.focus();
+ $target.trigger('focus');
break;
}
$current = $target;
diff --git a/src/InputSystem/InputSystem.Keyboard.js b/src/InputSystem/InputSystem.Keyboard.ts
similarity index 61%
rename from src/InputSystem/InputSystem.Keyboard.js
rename to src/InputSystem/InputSystem.Keyboard.ts
index 05a5c48b..34431e9c 100644
--- a/src/InputSystem/InputSystem.Keyboard.js
+++ b/src/InputSystem/InputSystem.Keyboard.ts
@@ -1,14 +1,18 @@
+import $ from 'jquery'
// Handle keyboard navigation
-const CONFIRM_KEYS = [13, 74, 90]; // Enter(Keyboard), J(Keyboard Joysdick), Z(Touhou)
-const CANCEL_KEYS = [27, 75, 88]; // Esc(Keyboard), K(Keyboard Joystick), X(Touhou)
-const NAVIGATION_KEYS = {
- 40: 'next', 39: 'next', 38: 'prev', 37: 'prev', // arrow keys
- 83: 'next', 87: 'prev', 65: 'prev', 68: 'next' // WASD keys
+const CONFIRM_KEYS = ['Enter', 'KeyJ', 'KeyZ']; // Enter(Keyboard), J(Keyboard Joysdick), Z(Touhou)
+const CANCEL_KEYS = ['Escape', 'KeyK', 'KeyX']; // Esc(Keyboard), K(Keyboard Joystick), X(Touhou)
+const NAVIGATION_KEYS: Record = {
+ 'ArrowDown': 'next', 'ArrowRight': 'next', 'ArrowUp': 'prev', 'ArrowLeft': 'prev', // arrow keys
+ 'KeyS': 'next', 'KeyD': 'next', 'KeyW': 'prev', 'KeyA': 'prev' // WASD keys
};
-let confirmListener = null;
-let exitListener = null;
+export type ConfirmListener = (e: JQuery.KeyUpEvent | null, focused: JQuery) => void;
+export type ExitListener = (e: JQuery.KeyDownEvent | JQuery.ContextMenuEvent | null) => void | Promise;
+
+export let confirmListener: ConfirmListener | null = null;
+export let exitListener: ExitListener | null = null;
// Single-flight guard state for exit listener to prevent duplicate scene pushes
let exitListenerInFlight = false;
let exitListenerOptions = { singleFlight: false };
@@ -17,8 +21,8 @@ let overrideRightKeys = false;
// Skipping state
window.skipping = false;
-export function setConfirmListener(fn) { confirmListener = fn; }
-export function setExitListener(fn, options = {}) {
+export function setConfirmListener(fn: ConfirmListener) { confirmListener = fn; }
+export function setExitListener(fn: ExitListener, options = {}) {
exitListenerOptions = { singleFlight: true, ...options };
// Wrap the original listener if singleFlight enabled
if (!fn) { exitListener = null; return; }
@@ -42,7 +46,7 @@ export function setExitListener(fn, options = {}) {
}
export function clearKeyboardListeners() { confirmListener = null; exitListener = null; exitListenerInFlight = false; }
-export function setOverrideRightKeys(override) {
+export function setOverrideRightKeys(override: boolean) {
overrideRightKeys = override;
// remove all right-click listeners if overriding
$(document).off('contextmenu');
@@ -55,7 +59,7 @@ export function setOverrideRightKeys(override) {
$(document).on('keydown', function(e) {
// Handle Ctrl key for skipping
- if (e.keyCode === 17 && !window.skipping && !window.isSelecting) { // Ctrl key
+ if (e.key === 'Control' && !window.skipping && !window.isSelecting) { // Ctrl key
window.skipping = true;
// Trigger the first line advance immediately
setTimeout(() => {
@@ -66,24 +70,28 @@ $(document).on('keydown', function(e) {
}
const $focused = $('.focusable:focus');
- const op = NAVIGATION_KEYS[e.keyCode];
- if(!$focused.length && (Object.keys(NAVIGATION_KEYS).includes(e.keyCode.toString()))) {
- $('.focusable')[{'prev': 'last', 'next': 'first'}[op]]().focus(); return;
+ const op = NAVIGATION_KEYS[e.code];
+ // Use explicit check for key existing in NAVIGATION_KEYS
+ if(!$focused.length && (e.code in NAVIGATION_KEYS)) {
+ const $focusable = $('.focusable');
+ const $target = op === 'prev' ? $focusable.last() : $focusable.first();
+ $target.trigger("focus");
+ return;
}
- if(CONFIRM_KEYS.includes(e.keyCode)) {
+ if(CONFIRM_KEYS.includes(e.code)) {
$focused.addClass('active'); e.preventDefault(); return;
}
- if(CANCEL_KEYS.includes(e.keyCode) && exitListener) {
+ if(CANCEL_KEYS.includes(e.code) && exitListener) {
exitListener(e); e.preventDefault(); return;
}
if(!op) return;
let $current = $focused;
$current.removeClass('active');
while (true) {
- const $target = $current[op]('.focusable');
+ const $target = op === 'next' ? $current.next('.focusable') : $current.prev('.focusable');
if(!$target.length) break;
if($target.is(':visible')) {
- $target.focus();
+ $target.trigger("focus");
break;
}
$current = $target;
@@ -91,7 +99,7 @@ $(document).on('keydown', function(e) {
});
$(document).on('keyup', function(e) {
// Handle Ctrl key release to stop skipping
- if (e.keyCode === 17 && window.skipping) { // Ctrl key
+ if (e.key === 'Control' && window.skipping) { // Ctrl key
window.skipping = false;
// Notify systems that skip mode has ended so they can resume behaviors
try {
@@ -99,14 +107,14 @@ $(document).on('keyup', function(e) {
} catch {}
}
- if(CONFIRM_KEYS.includes(e.keyCode)) {
+ if(CONFIRM_KEYS.includes(e.code)) {
const $focused = $('.focusable:focus');
if($focused.length) {
$focused.removeClass('active');
if(confirmListener) {
confirmListener(e, $focused);
} else {
- $focused.click();
+ $focused.trigger("click");
}
}
}
diff --git a/src/Scene/Scene.js b/src/Scene/Scene.js
index 855a5062..8b7fad1e 100644
--- a/src/Scene/Scene.js
+++ b/src/Scene/Scene.js
@@ -1,3 +1,5 @@
+import $ from "jquery";
+
export class Scene {
constructor(name, engine, baseZOffset = 0) {
this.name = name;
@@ -47,7 +49,7 @@ export class Scene {
findInChildren(obj, name) {
if (!obj.children || obj.children.length === 0) return null;
-
+
for (const child of obj.children) {
if (child.sceneData && child.sceneData.name === name) {
return child;
@@ -68,16 +70,19 @@ export class Scene {
else this.onBeforeUnfocusCallbacks.forEach(cb => cb());
this.sceneObjects.forEach(obj => {
- if (typeof FocusableElement !== 'undefined' && typeof FocusableElement.updateFocusabilityRecursive === 'function') {
+ if (
+ typeof FocusableElement !== "undefined" &&
+ typeof FocusableElement.updateFocusabilityRecursive === "function"
+ ) {
FocusableElement.updateFocusabilityRecursive(obj);
- } else if (typeof obj.updateFocusability === 'function') {
+ } else if (typeof obj.updateFocusability === "function") {
obj.updateFocusability();
}
});
if (!this.lastFocusedElement) return;
const $last = $(this.lastFocusedElement);
- if ($last.length && $last.is(':visible')) {
+ if ($last.length && $last.is(":visible")) {
$last.focus();
}
diff --git a/src/Scene/SceneManagement.js b/src/Scene/SceneManagement.js
index 27b92c1d..e9e7a854 100644
--- a/src/Scene/SceneManagement.js
+++ b/src/Scene/SceneManagement.js
@@ -1,6 +1,7 @@
import { Scene } from './Scene.js';
import { SceneElement } from '../Graphics/Graphics.SceneElement.js';
import { AnimatedSceneElement } from '../Graphics/Graphics.AnimatedSceneElement.js';
+import $ from 'jquery'
const currentExclusionList = [];
const loadingScenes = new Set();
diff --git a/src/Scripts/BACKGROUND.js b/src/Scripts/BACKGROUND.js
index a095d755..e5533af3 100644
--- a/src/Scripts/BACKGROUND.js
+++ b/src/Scripts/BACKGROUND.js
@@ -1,62 +1,72 @@
-import { Background } from '../Graphics/Graphics.Background.js';
-import { createBlankScene } from '../Scene/SceneManagement.js';
+import $ from "jquery";
+import { Background } from "../Graphics/Graphics.Background.js";
+import { createBlankScene } from "../Scene/SceneManagement.js";
export async function loadBackgroundScene() {
const backgroundScene = createBlankScene("BACKGROUND");
- const backgroundCG = backgroundScene.addObject(new Background({
- name: "BackgroundCG",
- transform: { x: 0, y: 0, width: 640, height: 480 },
- zIndex: -1,
- transition: 'background-image 0.5s ease-in-out'
- }));
-
+ const backgroundCG = backgroundScene.addObject(
+ new Background({
+ name: "BackgroundCG",
+ transform: { x: 0, y: 0, width: 640, height: 480 },
+ zIndex: -1,
+ transition: "background-image 0.5s ease-in-out",
+ }),
+ );
+
// Update transition based on skipping state
const updateTransition = () => {
- const transition = window.skipping ? 'none' : 'background-image 0.5s ease-in-out';
- $(backgroundCG.domElement).css('transition', transition);
- $(portrait.domElement).css('transition', window.skipping ? 'none' : 'background-image 0.5s ease-in-out, background-size 0s linear');
+ const transition = window.skipping ? "none" : "background-image 0.5s ease-in-out";
+ $(backgroundCG.domElement).css("transition", transition);
+ $(portrait.domElement).css(
+ "transition",
+ window.skipping ? "none" : "background-image 0.5s ease-in-out, background-size 0s linear",
+ );
};
setInterval(updateTransition, 50);
- const portrait = backgroundScene.addObject(new Background({
- name: "PortraitCG",
- transform: { x: 0, y: 0, width: 640, height: 480 },
- zIndex: -1,
- backgroundPosition: 'left bottom',
- transition: 'background-image 0.5s ease-in-out, background-size 0s linear',
- }));
- $(portrait.domElement).css({'background-size': 'none'});
+ const portrait = backgroundScene.addObject(
+ new Background({
+ name: "PortraitCG",
+ transform: { x: 0, y: 0, width: 640, height: 480 },
+ zIndex: -1,
+ backgroundPosition: "left bottom",
+ transition: "background-image 0.5s ease-in-out, background-size 0s linear",
+ }),
+ );
+ $(portrait.domElement).css({ "background-size": "none" });
- const setBgImgHandler = (e) => {
+ const setBgImgHandler = e => {
const { stringParams } = e.detail;
if (stringParams.length < 2) return;
- if (stringParams[0] === '0' || stringParams[1] === '0') {
+ if (stringParams[0] === "0" || stringParams[1] === "0") {
backgroundCG.updateBackgroundImage(null);
return;
}
backgroundCG.updateBackgroundImage(`/assets/scenes/BG/${stringParams[0]}/${stringParams[1]}.webp`);
};
- const transitionToGraphicsHandler = (e) => {
+ const transitionToGraphicsHandler = e => {
const { stringParams } = e.detail;
if (stringParams.length < 4) return;
- if(stringParams[2] === '0' || stringParams[3] === '0') {
+ if (stringParams[2] === "0" || stringParams[3] === "0") {
backgroundCG.updateBackgroundImage(`/assets/scenes/CG/BLACK/BLACK.webp`);
return;
}
backgroundCG.updateBackgroundImage(`/assets/scenes/BG/${stringParams[2]}/${stringParams[3]}.webp`);
};
- const setCgHandler = (e) => {
+ const setCgHandler = e => {
const { stringParams } = e.detail;
if (stringParams.length < 1) return;
portrait.updateBackgroundImage(null);
- backgroundCG.updateBackgroundImage(`/assets/scenes/CG/${stringParams[0].toUpperCase()}/${stringParams[0].toUpperCase()}.webp`);
+ backgroundCG.updateBackgroundImage(
+ `/assets/scenes/CG/${stringParams[0].toUpperCase()}/${stringParams[0].toUpperCase()}.webp`,
+ );
};
- const setCharaImgHandler = (e) => {
+ const setCharaImgHandler = e => {
const { stringParams } = e.detail;
if (stringParams.length < 2) return;
- if (stringParams[0] === '0' || stringParams[1] === '0') {
+ if (stringParams[0] === "0" || stringParams[1] === "0") {
portrait.updateBackgroundImage(null);
return;
}
@@ -64,24 +74,24 @@ export async function loadBackgroundScene() {
};
// Handler to restore background image from saved state
- const restoreGraphicsHandler = (e) => {
+ const restoreGraphicsHandler = e => {
const { bg, character } = e.detail;
backgroundCG.updateBackgroundImage(bg);
portrait.updateBackgroundImage(character);
};
- $(document).on('SetBgImg', setBgImgHandler);
- $(document).on('TransitionToGraphics TransitionToGraphicsFade', transitionToGraphicsHandler);
- $(document).on('ShowCg', setCgHandler);
- $(document).on('SetCharaImg', setCharaImgHandler);
- $(document).on('RestoreGraphics', restoreGraphicsHandler);
+ $(document).on("SetBgImg", setBgImgHandler);
+ $(document).on("TransitionToGraphics TransitionToGraphicsFade", transitionToGraphicsHandler);
+ $(document).on("ShowCg", setCgHandler);
+ $(document).on("SetCharaImg", setCharaImgHandler);
+ $(document).on("RestoreGraphics", restoreGraphicsHandler);
backgroundScene.onDestroyCallbacks.push(() => {
- $(document).off('SetBgImg', setBgImgHandler);
- $(document).off('TransitionToGraphics TransitionToGraphicsFade', transitionToGraphicsHandler);
- $(document).off('ShowCg', setCgHandler);
- $(document).off('SetCharaImg', setCharaImgHandler);
- $(document).off('RestoreGraphics', restoreGraphicsHandler);
+ $(document).off("SetBgImg", setBgImgHandler);
+ $(document).off("TransitionToGraphics TransitionToGraphicsFade", transitionToGraphicsHandler);
+ $(document).off("ShowCg", setCgHandler);
+ $(document).off("SetCharaImg", setCharaImgHandler);
+ $(document).off("RestoreGraphics", restoreGraphicsHandler);
});
return backgroundScene;
}
diff --git a/src/Scripts/GALLERY.js b/src/Scripts/GALLERY.js
index eee64de7..d6a40c1f 100644
--- a/src/Scripts/GALLERY.js
+++ b/src/Scripts/GALLERY.js
@@ -1,5 +1,5 @@
import { toButton } from '../Graphics/Graphics.Button.js';
-import { setExitListener } from '../InputSystem/InputSystem.Keyboard.js';
+import { setExitListener } from '../InputSystem/InputSystem.Keyboard.ts';
import { loadScene } from '../Scene/SceneManagement.js';
import { CharacterNameToVoiceKey } from '../Constants.js';
diff --git a/src/Scripts/START.js b/src/Scripts/START.js
index f16a727e..bb6c503a 100644
--- a/src/Scripts/START.js
+++ b/src/Scripts/START.js
@@ -1,6 +1,6 @@
import { loadScene } from '../Scene/SceneManagement.js';
import { toButton } from '../Graphics/Graphics.Button.js';
-import { setExitListener, setOverrideRightKeys } from '../InputSystem/InputSystem.Keyboard.js';
+import { setExitListener, setOverrideRightKeys } from '../InputSystem/InputSystem.Keyboard.ts';
import { playBGM } from '../Audio/Audio.Bgm.js';
import { pushDialogWindow } from './WINDOW/WINDOW.js';
import { initGallery } from './GALLERY.js';
diff --git a/src/Scripts/SYSTEM.js b/src/Scripts/SYSTEM.js
index 7310e329..68a730b4 100644
--- a/src/Scripts/SYSTEM.js
+++ b/src/Scripts/SYSTEM.js
@@ -1,7 +1,7 @@
import { loadScene, destroyScene } from '../Scene/SceneManagement.js';
import { toButton } from '../Graphics/Graphics.Button.js';
import { toBackground } from '../Graphics/Graphics.Background.js';
-import { setExitListener, setOverrideRightKeys } from '../InputSystem/InputSystem.Keyboard.js';
+import { setExitListener, setOverrideRightKeys } from '../InputSystem/InputSystem.Keyboard.ts';
import { saveGame, loadGame, applyGameState } from '../Core/GameSave.js';
import { execUntilNextLine } from '../Core/Events.js';
diff --git a/src/Scripts/WINDOW/WINDOW.DialogHider.js b/src/Scripts/WINDOW/WINDOW.DialogHider.js
index 5f03891b..f99b2c79 100644
--- a/src/Scripts/WINDOW/WINDOW.DialogHider.js
+++ b/src/Scripts/WINDOW/WINDOW.DialogHider.js
@@ -1,4 +1,4 @@
-import { setExitListener } from '../../InputSystem/InputSystem.Keyboard.js';
+import { setExitListener } from '../../InputSystem/InputSystem.Keyboard.ts';
import { pushPauseScreen } from '../SYSTEM.js';
export function hideDialogWindow() {
diff --git a/src/Scripts/WINDOW/WINDOW.SelectionsBox.js b/src/Scripts/WINDOW/WINDOW.SelectionsBox.js
index 03623dff..90170a9e 100644
--- a/src/Scripts/WINDOW/WINDOW.SelectionsBox.js
+++ b/src/Scripts/WINDOW/WINDOW.SelectionsBox.js
@@ -1,7 +1,8 @@
-import { toButton } from '../../Graphics/Graphics.Button.js';
-import { TMP_Text } from '../../Graphics/Graphics.TextMessPoor.js';
-import { AnimatedSceneElement } from '../../Graphics/Graphics.AnimatedSceneElement.js';
-import { SceneElement } from '../../Graphics/Graphics.SceneElement.js';
+import $ from "jquery";
+import { AnimatedSceneElement } from "../../Graphics/Graphics.AnimatedSceneElement.js";
+import { toButton } from "../../Graphics/Graphics.Button.js";
+import { SceneElement } from "../../Graphics/Graphics.SceneElement.js";
+import { TMP_Text } from "../../Graphics/Graphics.TextMessPoor.js";
export function initSelectionsBox(dialogWindow) {
window.isSelecting = false;
@@ -9,45 +10,52 @@ export function initSelectionsBox(dialogWindow) {
const selectionButtons = [null, null, null];
for (let i = 1; i <= 3; i++) {
- selectionButtons[i - 1] = toButton(dialogWindow.getObjectByName(`選択肢${['１','２','３'][i-1]}`), {
+ selectionButtons[i - 1] = toButton(dialogWindow.getObjectByName(`選択肢${["１", "２", "３"][i - 1]}`), {
z: 10,
- stateIndexes: [-1,0,1,-1],
- defaultTransform: [64, 238 + (i-1) * 29, 514, 28],
+ stateIndexes: [-1, 0, 1, -1],
+ defaultTransform: [64, 238 + (i - 1) * 29, 514, 28],
callback: () => OnSelectionCallback(i),
});
selectionButtons[i - 1].hide();
}
- const selectionsText = dialogWindow.addObject(new TMP_Text({
- name: "SelectionsText",
- text: "你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。\n你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。\n你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。",
- fontSize: 16,
- color: "#FFFFFF",
- fontWeight: "medium",
- zIndex: 11,
- transform: { x: 70, y: 238, width: 502, height: 86 },
- }));
- $(selectionsText.domElement).css({'white-space': 'pre-line', 'line-height': '29px', 'pointer-events': 'none', 'text-shadow': '1px 1px 0px #000000'});
+ const selectionsText = dialogWindow.addObject(
+ new TMP_Text({
+ name: "SelectionsText",
+ text: "你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。\n你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。\n你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。",
+ fontSize: 16,
+ color: "#FFFFFF",
+ fontWeight: "medium",
+ zIndex: 11,
+ transform: { x: 70, y: 238, width: 502, height: 86 },
+ }),
+ );
+ $(selectionsText.domElement).css({
+ "white-space": "pre-line",
+ "line-height": "29px",
+ "pointer-events": "none",
+ "text-shadow": "1px 1px 0px #000000",
+ });
selectionsText.hide();
// Load the frame animation data from the scene JSON
const loadFrameAnimation = async () => {
- const sceneData = await $.getJSON('/assets/scenes/UI/WINDOW/WINDOW.json');
+ const sceneData = await $.getJSON("/assets/scenes/UI/WINDOW/WINDOW.json");
const frameAnimNode = sceneData.children.find(child => child.name === "枠アニメ");
-
+
if (!frameAnimNode) {
- console.error('枠アニメ not found in WINDOW.json');
+ console.error("枠アニメ not found in WINDOW.json");
return null;
}
-
+
const frameAnimData = {
...frameAnimNode,
fps: 60,
loop: false,
- autoPlay: false
+ autoPlay: false,
};
-
+
const frameAnim = dialogWindow.addObject(new AnimatedSceneElement(frameAnimData, null, dialogWindow));
-
+
// Create frame children from the JSON data
frameAnimNode.children.forEach((childData, index) => {
const child = new SceneElement(childData, frameAnim, dialogWindow);
@@ -56,22 +64,24 @@ export function initSelectionsBox(dialogWindow) {
child.updateDOMStyle();
}
});
-
+
frameAnim.initializeFrames();
frameAnim.hide();
-
+
return frameAnim;
};
-
+
// Initialize frame animation asynchronously
loadFrameAnimation().then(frameAnim => {
dialogWindow._frameAnimation = frameAnim;
});
- const OnSelectionCallback = (i) => {
- document.dispatchEvent(new CustomEvent('MakeDecisionInternal', {
- detail: { params: [i - 1] }
- }));
+ const OnSelectionCallback = i => {
+ document.dispatchEvent(
+ new CustomEvent("MakeDecisionInternal", {
+ detail: { params: [i - 1] },
+ }),
+ );
closeSelectionsBox();
};
@@ -84,7 +94,7 @@ export function initSelectionsBox(dialogWindow) {
if (animationInProgress) return;
animationInProgress = true;
window.isSelecting = true;
-
+
const frameAnim = dialogWindow._frameAnimation;
if (!frameAnim) return;
@@ -93,7 +103,7 @@ export function initSelectionsBox(dialogWindow) {
normalDialogBox?.hide();
sayDialogBox?.hide();
dialogWindow.getObjectByName("NextLineButton")?.hide();
-
+
frameAnim.show();
frameAnim.setFrame(0);
frameAnim.onComplete = () => {
@@ -104,14 +114,14 @@ export function initSelectionsBox(dialogWindow) {
frameAnim.play();
};
- const closeSelectionsBox = (isSelectionsBoxVisible) => {
+ const closeSelectionsBox = isSelectionsBoxVisible => {
if (animationInProgress) return;
animationInProgress = true;
window.isSelecting = false;
-
+
const frameAnim = dialogWindow._frameAnimation;
if (!frameAnim) return;
-
+
// Hide animation (reverse: frames 9-0)
frameAnim.setFrame(9);
frameAnim.fps = -60; // Negative fps for reverse playback
@@ -123,28 +133,28 @@ export function initSelectionsBox(dialogWindow) {
selectingDialogBox?.hide();
dialogWindow.getObjectByName("NextLineButton")?.show();
dialogWindow.getObjectByName("NextLineButton")?.setFocus();
-
+
// Restore previous dialog box state
const nameText = dialogWindow.getObjectByName("NameText");
- if (nameText && nameText.text && nameText.text !== '祐二') {
+ if (nameText && nameText.text && nameText.text !== "祐二") {
sayDialogBox?.show();
} else {
normalDialogBox?.show();
}
-
+
animationInProgress = false;
};
frameAnim.play();
- }
+ };
- document.addEventListener('ShowDecisionInternal', (e) => {
+ document.addEventListener("ShowDecisionInternal", e => {
openSelectionsBox();
- selectionsText.setText(e.detail.stringParams.join('\n'));
+ selectionsText.setText(e.detail.stringParams.join("\n"));
});
// V key listener for toggling
- const vKeyHandler = (e) => {
- if (e.key === 'v' || e.key === 'V') {
+ const vKeyHandler = e => {
+ if (e.key === "v" || e.key === "V") {
if (window.isSelecting) {
closeSelectionsBox();
} else {
@@ -153,10 +163,10 @@ export function initSelectionsBox(dialogWindow) {
}
};
- document.addEventListener('keydown', vKeyHandler);
-
+ document.addEventListener("keydown", vKeyHandler);
+
// Clean up on destroy
dialogWindow.onDestroyCallbacks.push(() => {
- document.removeEventListener('keydown', vKeyHandler);
+ document.removeEventListener("keydown", vKeyHandler);
});
}
diff --git a/src/Scripts/WINDOW/WINDOW.js b/src/Scripts/WINDOW/WINDOW.js
index c59f56c3..c852283d 100644
--- a/src/Scripts/WINDOW/WINDOW.js
+++ b/src/Scripts/WINDOW/WINDOW.js
@@ -1,66 +1,81 @@
-import { loadScene } from '../../Scene/SceneManagement.js';
-import { Button, toButton } from '../../Graphics/Graphics.Button.js';
-import { TMP_Text, TMP_TypeWriter } from '../../Graphics/Graphics.TextMessPoor.js';
-import { setExitListener, setOverrideRightKeys } from '../../InputSystem/InputSystem.Keyboard.js';
-import { execUntilNextLine } from '../../Core/Events.js';
-import { initSelectionsBox } from './WINDOW.SelectionsBox.js';
-import { _hideDialogWindow } from './WINDOW.DialogHider.js';
-import { pushPauseScreen } from '../SYSTEM.js';
+import $ from "jquery";
+import { execUntilNextLine } from "../../Core/Events.js";
+import { Button, toButton } from "../../Graphics/Graphics.Button.js";
+import { TMP_Text, TMP_TypeWriter } from "../../Graphics/Graphics.TextMessPoor.js";
+import { setExitListener, setOverrideRightKeys } from "../../InputSystem/InputSystem.Keyboard.ts";
+import { loadScene } from "../../Scene/SceneManagement.js";
+import { pushPauseScreen } from "../SYSTEM.js";
+import { _hideDialogWindow } from "./WINDOW.DialogHider.js";
+import { initSelectionsBox } from "./WINDOW.SelectionsBox.js";
export async function pushDialogWindow() {
-
const dialogWindow = await loadScene("UI/WINDOW", {
- exclusionList: [
- "通常クリック範囲",
- "メッセージ文字",
- "選択肢文字",
- "名前ウィンドウ",
- "名前文字",
- "枠アニメ",
- ]
+ exclusionList: ["通常クリック範囲", "メッセージ文字", "選択肢文字", "名前ウィンドウ", "名前文字", "枠アニメ"],
});
initSelectionsBox(dialogWindow);
- const nextLineBtn = dialogWindow.addObject(new Button({
- name: "NextLineButton", cursor: 'default',
- stateIndexes: [-1,-1,-1,-1],
- transforms: [[0, 0, 640, 480],[0, 0, 640, 480],[0, 0, 640, 480],[0, 0, 640, 480]],
- images: ['', '', '', ''],
- zIndex: 10,
- callback: async () => {
- onNextLineRequest();
- }
- }));
+ const nextLineBtn = dialogWindow.addObject(
+ new Button({
+ name: "NextLineButton",
+ cursor: "default",
+ stateIndexes: [-1, -1, -1, -1],
+ transforms: [
+ [0, 0, 640, 480],
+ [0, 0, 640, 480],
+ [0, 0, 640, 480],
+ [0, 0, 640, 480],
+ ],
+ images: ["", "", "", ""],
+ zIndex: 10,
+ callback: async () => {
+ onNextLineRequest();
+ },
+ }),
+ );
const pauseButton = toButton(dialogWindow.getObjectByName("システムボタン"), {
- stateIndexes: [0,1,1,0],
+ stateIndexes: [0, 1, 1, 0],
z: 10,
focusable: false,
callback: async () => {
- $(document).off('contextmenu', _hideDialogWindow);
+ $(document).off("contextmenu", _hideDialogWindow);
await pushPauseScreen();
- }
+ },
+ });
+ const dialogText = dialogWindow.addObject(
+ new TMP_TypeWriter({
+ name: "DialogText",
+ text: "你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。",
+ fontSize: 23,
+ color: "#FFFFFF",
+ fontWeight: "medium",
+ transform: { x: 80, y: 346, width: 480, height: 112 },
+ }),
+ );
+ $(dialogText.domElement).css({
+ "white-space": "pre-line",
+ "line-height": "29px",
+ "pointer-events": "none",
+ "text-shadow": "1px 1px 0px #000000",
+ });
+
+ const nameText = dialogWindow.addObject(
+ new TMP_Text({
+ name: "NameText",
+ text: "电棍",
+ fontSize: 20,
+ color: "#FFFFFF",
+ fontWeight: "medium",
+ transform: { x: 40, y: 288, width: 146, height: 32 },
+ }),
+ );
+ $(nameText.domElement).css({
+ "white-space": "pre-line",
+ "pointer-events": "none",
+ "text-shadow": "1px 1px 0px #000000",
+ "text-align": "center",
});
- const dialogText = dialogWindow.addObject(new TMP_TypeWriter({
- name: "DialogText",
- text: "你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。你说得对，但是原神是一款由米哈游自主研发的开放世界冒险游戏。",
- fontSize: 23,
- color: "#FFFFFF",
- fontWeight: "medium",
- transform: { x: 80, y: 346, width: 480, height: 112 }
- }));
- $(dialogText.domElement).css({'white-space': 'pre-line', 'line-height': '29px', 'pointer-events': 'none', 'text-shadow': '1px 1px 0px #000000'});
-
- const nameText = dialogWindow.addObject(new TMP_Text({
- name: "NameText",
- text: "电棍",
- fontSize: 20,
- color: "#FFFFFF",
- fontWeight: "medium",
- transform: { x: 40, y: 288, width: 146, height: 32 }
- }));
- $(nameText.domElement).css({'white-space': 'pre-line', 'pointer-events': 'none', 'text-shadow': '1px 1px 0px #000000', 'text-align': 'center'});
const selectingDialogBox = dialogWindow.getObjectByName("選択中");
const normalDialogBox = dialogWindow.getObjectByName("通常");
@@ -70,20 +85,19 @@ export async function pushDialogWindow() {
sayDialogBox.hide();
// Hook PlayDialogInternal event to animate next line
- const playDialogHandler = (e) => {
+ const playDialogHandler = e => {
const { stringParams, params } = e.detail;
const [characterName, dialogContent] = stringParams;
- if(params[0] == 'Hidden' || !characterName) {
+ if (params[0] == "Hidden" || !characterName) {
nameWindow.visible = false;
- nameText.setText('');
- } else if(params[0] == 'Special') {
-
+ nameText.setText("");
+ } else if (params[0] == "Special") {
} else {
nameWindow.visible = true;
nameText.setText(characterName);
}
- if(characterName && characterName !== '祐二') {
+ if (characterName && characterName !== "祐二") {
sayDialogBox.show();
normalDialogBox.hide();
} else {
@@ -93,8 +107,8 @@ export async function pushDialogWindow() {
nameWindow.syncDom();
// Animate the dialog text
- dialogText.animateText(dialogContent + ' ▾');
-
+ dialogText.animateText(dialogContent + " ▾");
+
// Auto-advance when skipping
if (window.skipping) {
setTimeout(() => {
@@ -105,9 +119,9 @@ export async function pushDialogWindow() {
}
};
- document.addEventListener('PlayDialogInternal', playDialogHandler);
+ document.addEventListener("PlayDialogInternal", playDialogHandler);
dialogWindow.onDestroyCallbacks.push(() => {
- document.removeEventListener('PlayDialogInternal', playDialogHandler);
+ document.removeEventListener("PlayDialogInternal", playDialogHandler);
});
// Handle skip mode starting
@@ -116,22 +130,22 @@ export async function pushDialogWindow() {
onNextLineRequest();
}
};
- document.addEventListener('SkipModeStarted', skipModeStartHandler);
+ document.addEventListener("SkipModeStarted", skipModeStartHandler);
dialogWindow.onDestroyCallbacks.push(() => {
- document.removeEventListener('SkipModeStarted', skipModeStartHandler);
+ document.removeEventListener("SkipModeStarted", skipModeStartHandler);
});
setExitListener(() => pushPauseScreen());
dialogWindow.onAfterFocusCallbacks.push(() => {
setOverrideRightKeys(true);
setExitListener(() => pushPauseScreen());
- $(document).on('contextmenu', _hideDialogWindow);
+ $(document).on("contextmenu", _hideDialogWindow);
});
setOverrideRightKeys(true);
- $(document).on('contextmenu', _hideDialogWindow);
+ $(document).on("contextmenu", _hideDialogWindow);
dialogWindow.onDestroyCallbacks.push(() => {
setOverrideRightKeys(false);
- $(document).off('contextmenu', _hideDialogWindow);
+ $(document).off("contextmenu", _hideDialogWindow);
});
nextLineBtn.setFocus();
@@ -140,14 +154,14 @@ export async function pushDialogWindow() {
export function onNextLineRequest() {
const dialogWindow = window.getEngine().getSceneByName("UI/WINDOW");
if (!dialogWindow) return;
-
+
const dialogText = dialogWindow.getObjectByName("DialogText");
if (!dialogText) return;
-
+
if (dialogText.isAnimating && !window.skipping) {
dialogText.cancelAnimation();
return;
}
-
+
execUntilNextLine();
}
diff --git a/src/main.js b/src/main.ts
similarity index 70%
rename from src/main.js
rename to src/main.ts
index b3ee7378..59059db2 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -1,8 +1,10 @@
+import $ from 'jquery';
+
import { GameEngine } from './Core/NotUnityEngine.js';
import { loadEvents } from './Core/Events.js';
import { loadStartScene } from './Scripts/START.js';
-import './InputSystem/InputSystem.Keyboard.js';
-import './InputSystem/InputSystem.Gamepad.js';
+import './InputSystem/InputSystem.Keyboard.ts';
+import './InputSystem/InputSystem.Gamepad.ts';
import './Audio/Audio.🔓.js';
import { initBGM } from './Audio/Audio.Bgm.js';
@@ -12,9 +14,19 @@ import { initSE } from './Audio/Audio.Se.js';
import { initEnginePane } from './Debug/EnginePane.js';
import { initSceneGraphPane } from './Debug/SceneGraphPane.js';
+// Define types for existing classes if needed, or use any for now
+declare global {
+ interface Window {
+ getEngine: () => GameEngine;
+ exit: () => void;
+ skipping: boolean;
+ isSelecting: boolean;
+ }
+}
+
let notUnityEngine = new GameEngine('gameContainer');
initEnginePane(notUnityEngine);
-initSceneGraphPane(notUnityEngine);
+initSceneGraphPane();
notUnityEngine.start();
window.getEngine = () => notUnityEngine;
@@ -27,7 +39,7 @@ async function main() {
initSE();
await loadStartScene();
$('#black-overlay').fadeOut(600);
- } catch (error) {
+ } catch (error: any) {
alert(`Failed to initialize:\n${error.message}`);
console.error(error);
}
@@ -36,7 +48,7 @@ async function main() {
window.exit = () => {
$('#black-overlay').fadeIn(600, () => {
window.close();
- $(gameContainer).remove();
+ $('#gameContainer').remove();
});
};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..22f37277
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ESNext", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+ "allowJs": true,
+ "checkJs": false,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ },
+ "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.js", "vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..999a33bd
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import path from "path";
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ build: {
+ outDir: "dist",
+ target: "esnext",
+ },
+ server: {
+ open: true,
+ },
+});
From 4f503d5083e3c19c285fef8c00aea64b6262d160 Mon Sep 17 00:00:00 2001
From: DonovanLi
Date: Tue, 3 Feb 2026 10:37:22 +0800
Subject: [PATCH 3/7] refactor phase 2: Events, Save, Engine
---
src/Audio/Audio.Voice.js | 26 +-
src/Core/{Events.js => Events.ts} | 178 ++++++----
src/Core/{GameSave.js => GameSave.ts} | 82 +++--
.../{NotUnityEngine.js => NotUnityEngine.ts} | 77 ++--
src/Debug/SceneGraphPane.js | 334 +++++++++---------
src/Scripts/START.js | 115 +++---
src/Scripts/SYSTEM.js | 80 +++--
src/Scripts/WINDOW/WINDOW.js | 2 +-
src/main.ts | 34 +-
9 files changed, 508 insertions(+), 420 deletions(-)
rename src/Core/{Events.js => Events.ts} (51%)
rename src/Core/{GameSave.js => GameSave.ts} (69%)
rename src/Core/{NotUnityEngine.js => NotUnityEngine.ts} (69%)
diff --git a/src/Audio/Audio.Voice.js b/src/Audio/Audio.Voice.js
index 5e4c80f1..20f008af 100644
--- a/src/Audio/Audio.Voice.js
+++ b/src/Audio/Audio.Voice.js
@@ -1,28 +1,25 @@
-import { isAudioUnlocked } from './Audio.🔓.js';
-import { resolveLastInstruction, getCurrentBlockIndex } from '../Core/Events.js';
+import { getCurrentBlockIndex, resolveLastInstruction } from "../Core/Events";
import { extractDialogData, GetCharacterVoiceName, GetVoiceEventName } from "../Utils/DialogHelper.js";
+import { isAudioUnlocked } from "./Audio.🔓.js";
-
-export function OnPlayDialog(instruction)
-{
- if(instruction.params.length < 3) return;
+export function OnPlayDialog(instruction) {
+ if (instruction.params.length < 3) return;
var voiceName = instruction.stringParams[0];
var blockIndex = instruction.params[1];
var lineCount = instruction.params[2];
var voiceKey = GetCharacterVoiceName(voiceName);
var eventName = GetVoiceEventName(blockIndex + 1);
- console.log(instruction)
+ console.log(instruction);
if (voiceName == "祐二" || !voiceKey) return;
-
if (window.skipping === true) return;
- PlayCharacterVoice(voiceKey, eventName, lineCount.toString().padStart(3, '0'));
+ PlayCharacterVoice(voiceKey, eventName, lineCount.toString().padStart(3, "0"));
}
export function PlayCurrentVoice() {
const instruction = resolveLastInstruction();
- if(instruction.type !== "PlayDialog") return;
+ if (instruction.type !== "PlayDialog") return;
const lineText = instruction.stringParams[0];
const lineData = extractDialogData(lineText);
var voiceName = lineData[0];
@@ -34,10 +31,9 @@ export function PlayCurrentVoice() {
if (voiceName == "祐二" || !voiceKey) return;
if (window.skipping === true) return;
if (lineCount == null) return;
- PlayCharacterVoice(voiceKey, eventName, lineCount.toString().padStart(3, '0'));
+ PlayCharacterVoice(voiceKey, eventName, lineCount.toString().padStart(3, "0"));
}
-
const characterAudioElement = new Audio();
let isCharacterAudioPlaying = false;
@@ -46,18 +42,18 @@ characterAudioElement.volume = 0.7;
function PlayCharacterVoice(characterKey, eventName, lineNumber) {
if (!isAudioUnlocked()) {
- console.error('Audio locked');
+ console.error("Audio locked");
return;
}
characterAudioElement.pause();
characterAudioElement.src = `/assets/audio/voice/${characterKey}.${eventName}.${lineNumber}.ogg`;
isCharacterAudioPlaying = true;
characterAudioElement.play().catch(err => {
- console.warn('Play character voice failed:', err);
+ console.warn("Play character voice failed:", err);
});
}
-document.addEventListener("PlayDialogInternal", (e) => {
+document.addEventListener("PlayDialogInternal", e => {
OnPlayDialog(e.detail);
});
diff --git a/src/Core/Events.js b/src/Core/Events.ts
similarity index 51%
rename from src/Core/Events.js
rename to src/Core/Events.ts
index bef9f956..424f8d93 100644
--- a/src/Core/Events.js
+++ b/src/Core/Events.ts
@@ -1,8 +1,45 @@
+import $ from "jquery";
+import protobuf from "protobufjs";
import { extractDialogData } from "../Utils/DialogHelper.js";
-import protobuf from 'protobufjs';
-import $ from 'jquery';
-let ScreenplayContext = {
+// -- Interfaces --
+
+export interface Instruction {
+ type: string;
+ params: number[];
+ stringParams: string[];
+}
+
+export interface EventBlock {
+ evId: number;
+ instructions: Instruction[];
+ returnValues: number[];
+}
+
+export interface ScreenplayContextState {
+ blocks: EventBlock[];
+ textPool: string[];
+ currentBlockIndex: number;
+ currentInstructionIndex: number;
+ evIdToBlockIndex: Record;
+}
+
+export interface ResolvedInstruction {
+ type: string;
+ params: number[];
+ stringParams: string[];
+}
+
+// Global declaration for window
+declare global {
+ interface Window {
+ ScreenplayContext: ScreenplayContextState;
+ }
+}
+
+// -- State --
+
+let ScreenplayContext: ScreenplayContextState = {
blocks: [],
textPool: [],
currentBlockIndex: 0,
@@ -10,45 +47,49 @@ let ScreenplayContext = {
evIdToBlockIndex: {},
};
-let lastInstruction = null;
+let lastInstruction: Instruction | null = null;
+
+// -- Functions --
+
+export function initScreenplayContext(blocks: EventBlock[], textPool: string[]): void {
+ const evIdToBlockIndex: Record = {};
+
+ blocks.forEach((block, i) => {
+ const evId = block.evId;
+ evIdToBlockIndex[evId] = i;
+ });
-export function initScreenplayContext(blocks, textPool) {
ScreenplayContext = {
blocks: blocks || [],
textPool: textPool || [],
currentBlockIndex: 0,
currentInstructionIndex: 0,
- evIdToBlockIndex: {},
+ evIdToBlockIndex,
};
-
- blocks.forEach((block, i) => {
- const evId = block.evId;
- ScreenplayContext.evIdToBlockIndex[evId] = i;
- });
-
- // Expose ScreenplayContext globally for GameSave.js
+
+ // Expose ScreenplayContext globally for GameSave
window.ScreenplayContext = ScreenplayContext;
}
-export function getCurrentBlockIndex() {
+export function getCurrentBlockIndex(): number {
return ScreenplayContext.currentBlockIndex;
}
-export function getCurrentEvent() {
+export function getCurrentEvent(): EventBlock {
return ScreenplayContext.blocks[ScreenplayContext.currentBlockIndex];
}
-export function getCurrentInstruction() {
+export function getCurrentInstruction(): Instruction {
const currentEvent = getCurrentEvent();
return currentEvent.instructions[ScreenplayContext.currentInstructionIndex];
}
-export function resolveStrings(instruction, textPool) {
- const result = [];
+export function resolveStrings(instruction: Instruction | null, textPool: string[]): string[] {
+ const result: string[] = [];
if (!instruction?.stringParams) return result;
for (const token of instruction.stringParams) {
- if (token.length > 1 && token[0] === '$') {
+ if (token.length > 1 && token[0] === "$") {
const inner = token.slice(1);
const idx = parseInt(inner);
if (!isNaN(idx) && idx >= 0 && idx < textPool.length) {
@@ -61,127 +102,138 @@ export function resolveStrings(instruction, textPool) {
return result;
}
-function updateBlockIndex(eventBlock, returnValueIndex = 0) {
+function updateBlockIndex(eventBlock: EventBlock, returnValueIndex: number = 0): void {
const currentEvent = getCurrentEvent();
lastInstruction = getCurrentInstruction();
if (ScreenplayContext.currentInstructionIndex === currentEvent.instructions.length - 1) {
- console.log('Moving to next event block:', eventBlock);
+ console.log("Moving to next event block:", eventBlock);
const nextEvId = eventBlock.returnValues[returnValueIndex];
ScreenplayContext.currentBlockIndex = ScreenplayContext.evIdToBlockIndex[nextEvId];
ScreenplayContext.currentInstructionIndex = 0;
return;
}
-
+
ScreenplayContext.currentInstructionIndex++;
}
-function dispatchEvent(type, detail = {}) {
+function dispatchEvent(type: string, detail: any = {}): void {
document.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, cancelable: true }));
}
-export function execUntilNextLine(decisionIndex = -1) {
+export function execUntilNextLine(decisionIndex: number = -1): string[] | undefined {
while (true) {
if (decisionIndex !== -1) {
updateBlockIndex(getCurrentEvent(), decisionIndex);
decisionIndex = -1;
continue;
}
-
+
const currentEvent = getCurrentEvent();
const instruction = getCurrentInstruction();
-
+
const resolvedInstruction = resolveCurrentInstruction();
- console.log(`${ScreenplayContext.currentInstructionIndex} / ${currentEvent.instructions.length} /`, resolvedInstruction);
-
+ console.log(
+ `${ScreenplayContext.currentInstructionIndex} / ${currentEvent.instructions.length} /`,
+ resolvedInstruction,
+ );
+
+ if (!resolvedInstruction) break;
+
dispatchEvent(instruction.type, resolvedInstruction);
-
+
switch (resolvedInstruction.type) {
- case 'PlayDialog':
+ case "PlayDialog":
updateBlockIndex(currentEvent);
const lineText = resolvedInstruction.stringParams[0];
const lineData = extractDialogData(lineText);
- dispatchEvent('PlayDialogInternal', {
+ dispatchEvent("PlayDialogInternal", {
params: [lineData[2], ScreenplayContext.currentBlockIndex, resolvedInstruction.params[1]],
- stringParams: [lineData[0], lineData[1]]
+ stringParams: [lineData[0], lineData[1]],
});
- return [lineData[0]];
+ return [lineData[0]]; // Returning dialog text essentially
- case 'ShowDecision':
+ case "ShowDecision":
const stringParams = resolvedInstruction.stringParams.filter(s => s && s.length > 0);
- dispatchEvent('ShowDecisionInternal', {
+ dispatchEvent("ShowDecisionInternal", {
params: [],
- stringParams
+ stringParams,
});
return stringParams;
}
-
+
updateBlockIndex(currentEvent);
}
+ return undefined;
}
-export function resolveLastInstruction() {
+export function resolveLastInstruction(): ResolvedInstruction | null {
const instruction = lastInstruction;
if (!instruction) return null;
return {
type: instruction.type,
params: instruction.params,
- stringParams: resolveStrings(instruction, ScreenplayContext.textPool)
+ stringParams: resolveStrings(instruction, ScreenplayContext.textPool),
};
}
-export function resolveCurrentInstruction() {
+
+export function resolveCurrentInstruction(): ResolvedInstruction | null {
const instruction = getCurrentInstruction();
if (!instruction) return null;
return {
type: instruction.type,
params: instruction.params,
- stringParams: resolveStrings(instruction, ScreenplayContext.textPool)
+ stringParams: resolveStrings(instruction, ScreenplayContext.textPool),
};
}
-document.addEventListener('MakeDecisionInternal', (e) => {
+// @ts-expect-error - CustomEvent type
+document.addEventListener("MakeDecisionInternal", (e: CustomEvent) => {
const decisionIndex = e.detail.params[0];
execUntilNextLine(decisionIndex);
});
-export async function loadEvents() {
+export async function loadEvents(): Promise {
try {
- const EventMappings = (await protobuf.load('/assets/events/events.proto'))
- .lookupType('events.EventMappings');
- const response = await fetch('/assets/events/events.pb');
+ const root = await protobuf.load("/assets/events/events.proto");
+ const EventMappings = root.lookupType("events.EventMappings");
+ const response = await fetch("/assets/events/events.pb");
const arrayBuffer = await response.arrayBuffer();
const decodedEvents = EventMappings.decode(new Uint8Array(arrayBuffer));
const eventMappings = EventMappings.toObject(decodedEvents, {
- enums: String, // enums as string names
+ enums: String, // enums as string names
defaults: true, // includes default values
- });
+ }) as { events: EventBlock[]; textPool: string[] };
- console.log('Events loaded successfully!', eventMappings.events);
- console.log('Events loaded successfully!', eventMappings.events[0].instructions);
+ console.log("Events loaded successfully!", eventMappings.events);
+ if (eventMappings.events && eventMappings.events.length > 0) {
+ console.log("Events loaded successfully!", eventMappings.events[0].instructions);
+ }
// Initialize screenplay context with loaded data
- initScreenplayContext(
- eventMappings.events || [],
- eventMappings.textPool || []
- );
+ initScreenplayContext(eventMappings.events || [], eventMappings.textPool || []);
- $(document).on('RestoreSave', (e) => {
+ $(document).on("RestoreSave", (e: any) => {
const { currentBg, currentBgm, currentPortrait, currentBlockIndex, currentInstructionIndex } = e.detail;
window.ScreenplayContext.currentBlockIndex = currentBlockIndex || 0;
window.ScreenplayContext.currentInstructionIndex = currentInstructionIndex || 0;
- document.dispatchEvent(new CustomEvent('RestoreGraphics', {
- detail: { bg: currentBg, character: currentPortrait }
- }));
- document.dispatchEvent(new CustomEvent('PlayBgm', {
- detail: { stringParams: [currentBgm] }
- }));
+ document.dispatchEvent(
+ new CustomEvent("RestoreGraphics", {
+ detail: { bg: currentBg, character: currentPortrait },
+ }),
+ );
+ document.dispatchEvent(
+ new CustomEvent("PlayBgm", {
+ detail: { stringParams: [currentBgm] },
+ }),
+ );
});
- document.dispatchEvent(new CustomEvent('EventsLoaded', { bubbles: true, cancelable: true }));
+ document.dispatchEvent(new CustomEvent("EventsLoaded", { bubbles: true, cancelable: true }));
return eventMappings;
} catch (error) {
- console.error('Error loading events:', error);
+ console.error("Error loading events:", error);
throw error;
}
}
diff --git a/src/Core/GameSave.js b/src/Core/GameSave.ts
similarity index 69%
rename from src/Core/GameSave.js
rename to src/Core/GameSave.ts
index 44e8e488..65ed68ba 100644
--- a/src/Core/GameSave.js
+++ b/src/Core/GameSave.ts
@@ -1,16 +1,26 @@
-import { getCurrentEvent } from './Events.js';
-import { getCurrentBGM } from '../Audio/Audio.Bgm.js';
+import { getCurrentBGM } from "../Audio/Audio.Bgm.js";
+import { getCurrentEvent } from "./Events";
-const SAVE_KEY_PREFIX = 'alive_save_';
+const SAVE_KEY_PREFIX = "alive_save_";
const MAX_SAVE_SLOTS = 20;
-export function getCurrentGameState() {
+export interface GameState {
+ currentBlockIndex: number;
+ currentInstructionIndex: number;
+ currentBg: any;
+ currentBgm: any;
+ currentPortrait: any;
+ timestamp: string;
+ eventName: string | number;
+}
+
+export function getCurrentGameState(): GameState {
const engine = window.getEngine();
const backgroundScene = engine?.getSceneByName("BACKGROUND");
-
+
let currentBg = null;
let currentPortrait = null;
-
+
if (backgroundScene) {
const bgObject = backgroundScene.getObjectByName("BackgroundCG");
const portraitObject = backgroundScene.getObjectByName("PortraitCG");
@@ -22,10 +32,10 @@ export function getCurrentGameState() {
currentPortrait = portraitObject.backgroundImageUrl;
}
}
-
- // Get screenplay context from Events.js
+
+ // Get screenplay context from Events
const currentEvent = getCurrentEvent();
-
+
return {
currentBlockIndex: window.ScreenplayContext?.currentBlockIndex || 0,
currentInstructionIndex: window.ScreenplayContext?.currentInstructionIndex - 1 || 0,
@@ -33,93 +43,95 @@ export function getCurrentGameState() {
currentBgm: getCurrentBGM(),
currentPortrait: currentPortrait,
timestamp: new Date().toISOString(),
- eventName: currentEvent?.evId || 'Unknown'
+ eventName: currentEvent?.evId || "Unknown",
};
}
-export function saveGame(slotIndex) {
+export function saveGame(slotIndex: number): boolean {
if (slotIndex < 0 || slotIndex >= MAX_SAVE_SLOTS) {
throw new Error(`Invalid slot index: ${slotIndex}`);
}
-
- const gameState = getCurrentGameState();
+
+ const gameState: GameState = getCurrentGameState();
const saveKey = SAVE_KEY_PREFIX + slotIndex;
-
+
try {
localStorage.setItem(saveKey, JSON.stringify(gameState));
console.log(`Game saved to slot ${slotIndex}`, gameState);
return true;
} catch (error) {
- console.error('Failed to save game:', error);
+ console.error("Failed to save game:", error);
return false;
}
}
-export function loadGame(slotIndex) {
+export function loadGame(slotIndex: number) {
if (slotIndex < 0 || slotIndex >= MAX_SAVE_SLOTS) {
throw new Error(`Invalid slot index: ${slotIndex}`);
}
-
+
const saveKey = SAVE_KEY_PREFIX + slotIndex;
const saveData = localStorage.getItem(saveKey);
-
+
if (!saveData) {
return null;
}
-
+
try {
const gameState = JSON.parse(saveData);
console.log(`Game loaded from slot ${slotIndex}`, gameState);
return gameState;
} catch (error) {
- console.error('Failed to load game:', error);
+ console.error("Failed to load game:", error);
return null;
}
}
-export function getAllSaves() {
+export function getAllSaves(): GameState[] {
const saves = [];
-
+
for (let i = 0; i < MAX_SAVE_SLOTS; i++) {
const saveKey = SAVE_KEY_PREFIX + i;
const saveData = localStorage.getItem(saveKey);
-
+
if (saveData) {
try {
const gameState = JSON.parse(saveData);
saves.push({
slotIndex: i,
- ...gameState
+ ...gameState,
});
} catch (error) {
console.error(`Failed to parse save in slot ${i}:`, error);
}
}
}
-
+
return saves;
}
-export function deleteSave(slotIndex) {
+export function deleteSave(slotIndex: number) {
if (slotIndex < 0 || slotIndex >= MAX_SAVE_SLOTS) {
throw new Error(`Invalid slot index: ${slotIndex}`);
}
-
+
const saveKey = SAVE_KEY_PREFIX + slotIndex;
localStorage.removeItem(saveKey);
console.log(`Save deleted from slot ${slotIndex}`);
}
-export function applyGameState(gameState) {
+export function applyGameState(gameState: GameState): boolean {
if (!gameState) {
- console.error('No game state to apply');
+ console.error("No game state to apply");
return false;
}
-
- document.dispatchEvent(new CustomEvent('RestoreSave', {
- detail: gameState
- }));
-
- console.log('Game state applied:', gameState);
+
+ document.dispatchEvent(
+ new CustomEvent("RestoreSave", {
+ detail: gameState,
+ }),
+ );
+
+ console.log("Game state applied:", gameState);
return true;
}
diff --git a/src/Core/NotUnityEngine.js b/src/Core/NotUnityEngine.ts
similarity index 69%
rename from src/Core/NotUnityEngine.js
rename to src/Core/NotUnityEngine.ts
index e380f271..f8d81608 100644
--- a/src/Core/NotUnityEngine.js
+++ b/src/Core/NotUnityEngine.ts
@@ -1,39 +1,48 @@
-import $ from 'jquery';
+import $ from "jquery";
+
+export interface IGameEngine {
+ start(): void;
+ stop(): void;
+ getObjectByName(name: string): any;
+ getAllObjects(): any[];
+ pushScene(scene: any): void;
+ popScene(): any;
+ getTopScene(): any;
+ getSceneByName(name: string): any;
+ clearAllScenes(): void;
+ isMountedScene(name: string): boolean;
+ getContainer(): HTMLElement;
+}
-export class GameEngine {
- constructor(containerId = 'gameContainer') {
- this.container = $(`#${containerId}`)[0] || this.createContainer();
- this.running = false;
- this.deltaTime = 0;
- this.lastFrameTime = 0;
- this.fps = 24;
- this.frameTime = 1000 / this.fps;
-
- this.callbacks = {
- init: null,
- update: null,
- updatePost: null,
- };
-
- this.scenes = []; // Array to hold all scenes
- this.scenePaths = []; // Array to hold scene paths
- }
+export class GameEngine implements IGameEngine {
+ containerId: string = "gameContainer";
+ container = $(`#${this.containerId}`)[0] || this.createContainer();
+ running: boolean = false;
+ deltaTime: number = 0;
+ lastFrameTime: number = 0;
+ fps: number = 24;
+ frameTime: number = 1000 / this.fps;
+ callbacks: {
+ init: (() => void) | null;
+ update: ((deltaTime: number) => void) | null;
+ updatePost: ((deltaTime: number) => void) | null;
+ } = {
+ init: null,
+ update: null,
+ updatePost: null,
+ };
+ scenes: any[] = []; // Array to hold all scenes
+ scenePaths: string[] = []; // Array to hold scene paths
createContainer() {
const $container = $('');
- $('body').append($container);
+ $("body").append($container);
return $container[0];
}
- registerCallbacks(init, update, updatePost) {
- this.callbacks.init = init;
- this.callbacks.update = update;
- this.callbacks.updatePost = updatePost;
- }
-
start() {
if (this.running) return;
-
+
this.running = true;
this.lastFrameTime = performance.now();
@@ -73,11 +82,11 @@ export class GameEngine {
requestAnimationFrame(this.gameLoop);
};
- updateScenes(deltaTime) {
+ updateScenes(deltaTime: number) {
this.scenes.forEach(scene => scene.update(deltaTime));
}
- getObjectByName(name) {
+ getObjectByName(name: string) {
for (const scene of this.scenes) {
const obj = scene.getObjectByName(name);
if (obj) return obj;
@@ -98,28 +107,28 @@ export class GameEngine {
pushScene(scene) {
// Disable focusability on all existing scenes
this.scenes.forEach(s => s.setFocusable(false));
-
+
// Add new scene
this.scenes.push(scene);
this.scenePaths.push(scene.name);
-
+
// Enable focusability only on the new scene
scene.setFocusable(true);
}
popScene() {
if (this.scenes.length === 0) return null;
-
+
// Remove and destroy the top scene
const scene = this.scenes.pop();
scene.destroy();
this.scenePaths.pop();
-
+
// Enable focus on the new top scene
if (this.scenes.length > 0) {
this.scenes[this.scenes.length - 1].setFocusable(true);
}
-
+
return scene;
}
diff --git a/src/Debug/SceneGraphPane.js b/src/Debug/SceneGraphPane.js
index a3053882..1d257412 100644
--- a/src/Debug/SceneGraphPane.js
+++ b/src/Debug/SceneGraphPane.js
@@ -1,20 +1,20 @@
-import { Pane } from '../../lib/tweakpane-4.0.5.min.js';
-import { execUntilNextLine } from '../Core/Events.js';
-import { createPaneContainer } from './DebugPane.js';
-import $ from 'jquery';
-import * as d3 from 'd3';
+import * as d3 from "d3";
+import $ from "jquery";
+import { Pane } from "../../lib/tweakpane-4.0.5.min.js";
+import { execUntilNextLine } from "../Core/Events";
+import { createPaneContainer } from "./DebugPane.js";
const container = createPaneContainer();
$(container).css({
- height: '90vh',
- position: 'fixed',
- right: '10px',
- top: '10px',
+ height: "90vh",
+ position: "fixed",
+ right: "10px",
+ top: "10px",
});
const pane = new Pane({
- title: 'Events Graph',
+ title: "Events Graph",
container: container,
});
@@ -26,152 +26,155 @@ let lastIndex = -1;
export function initSceneGraphPane() {
// Create a custom HTML container for the graph
- const container = document.createElement('div');
+ const container = document.createElement("div");
container.style.width = `${currentWidth}px`;
container.style.height = `${currentHeight}px`;
// Add it to the pane container
pane.element.appendChild(container);
// Create SVG with zoom/pan capability
- svgElement = d3.select(container)
- .append('svg')
- .attr('width', currentWidth)
- .attr('height', currentHeight)
- .style('display', 'block');
-
+ svgElement = d3
+ .select(container)
+ .append("svg")
+ .attr("width", currentWidth)
+ .attr("height", currentHeight)
+ .style("display", "block");
+
// Create a group for zoom/pan
- const g = svgElement.append('g');
+ const g = svgElement.append("g");
+
+ const linkGroup = g.append("g").attr("class", "links");
+ const nodeGroup = g.append("g").attr("class", "nodes");
- const linkGroup = g.append('g').attr('class', 'links');
- const nodeGroup = g.append('g').attr('class', 'nodes');
-
// Add zoom behavior
- const zoom = d3.zoom()
+ const zoom = d3
+ .zoom()
.scaleExtent([0.1, 4])
- .on('zoom', (event) => {
- g.attr('transform', event.transform);
+ .on("zoom", event => {
+ g.attr("transform", event.transform);
});
-
+
svgElement.call(zoom);
-
+
// Store zoom for later use
svgElement.zoom = zoom;
svgElement.zoomGroup = g;
-
+
// Listen for event progression
- document.addEventListener('PlayDialogInternal', () => {
+ document.addEventListener("PlayDialogInternal", () => {
updateCurrentEventHighlight();
});
-
- document.addEventListener('ShowDecisionInternal', () => {
+
+ document.addEventListener("ShowDecisionInternal", () => {
updateCurrentEventHighlight();
});
-
+
// Add refresh button
const refreshBtn = pane.addButton({
- title: 'Refresh Graph',
+ title: "Refresh Graph",
});
- refreshBtn.on('click', () => {
+ refreshBtn.on("click", () => {
renderGraph(svgElement, linkGroup, nodeGroup, currentWidth, currentHeight);
});
- $(document).on('EventsLoaded', () => {
+ $(document).on("EventsLoaded", () => {
renderGraph(svgElement, linkGroup, nodeGroup, currentWidth, currentHeight);
updateCurrentEventHighlight();
});
}
function renderGraph(svgElement, linkGroup, nodeGroup, width, height) {
const { nodes, links } = getEventsGraphData();
-
+
// Stop existing simulation
if (simulation) {
simulation.stop();
}
-
+
// Create force simulation
- simulation = d3.forceSimulation(nodes)
+ simulation = d3
+ .forceSimulation(nodes)
// .alphaTarget(1)
.alphaDecay(0.001)
.alpha(2)
.alphaMin(0)
- .force('link', d3.forceLink(links)
- .id(d => d.id)
- .distance(20 ))
- .force('charge', d3.forceManyBody().strength(-20))
- .force('center', d3.forceCenter(width / 2, height / 2))
- .force('collision', d3.forceCollide().radius(15));
-
+ .force(
+ "link",
+ d3
+ .forceLink(links)
+ .id(d => d.id)
+ .distance(20),
+ )
+ .force("charge", d3.forceManyBody().strength(-20))
+ .force("center", d3.forceCenter(width / 2, height / 2))
+ .force("collision", d3.forceCollide().radius(15));
+
// Update links with arrows
const linkSelection = linkGroup
- .selectAll('line')
+ .selectAll("line")
.data(links)
- .join('line')
- .attr('stroke', d => d.color || '#666')
- .attr('stroke-width', d => d.color !== '#666' ? 2.5 : 1.5)
- .attr('stroke-opacity', d => d.color !== '#666' ? 0.8 : 0.6)
- .attr('marker-end', d => d.color !== '#666' ? `url(#arrowhead-${d.color.substring(1)})` : 'url(#arrowhead)');
-
+ .join("line")
+ .attr("stroke", d => d.color || "#666")
+ .attr("stroke-width", d => (d.color !== "#666" ? 2.5 : 1.5))
+ .attr("stroke-opacity", d => (d.color !== "#666" ? 0.8 : 0.6))
+ .attr("marker-end", d => (d.color !== "#666" ? `url(#arrowhead-${d.color.substring(1)})` : "url(#arrowhead)"));
+
// Add arrow marker definitions
- const defs = svgElement.selectAll('defs').data([0]).join('defs');
-
+ const defs = svgElement.selectAll("defs").data([0]).join("defs");
+
// Default arrow marker
- defs.selectAll('marker#arrowhead')
+ defs.selectAll("marker#arrowhead")
.data([0])
- .join('marker')
- .attr('id', 'arrowhead')
- .attr('viewBox', '-0 -5 10 10')
- .attr('refX', 24)
- .attr('refY', 0)
- .attr('orient', 'auto')
- .attr('markerWidth', 6)
- .attr('markerHeight', 6)
- .selectAll('path')
+ .join("marker")
+ .attr("id", "arrowhead")
+ .attr("viewBox", "-0 -5 10 10")
+ .attr("refX", 24)
+ .attr("refY", 0)
+ .attr("orient", "auto")
+ .attr("markerWidth", 6)
+ .attr("markerHeight", 6)
+ .selectAll("path")
.data([0])
- .join('path')
- .attr('d', 'M 0,-5 L 10,0 L 0,5')
- .attr('fill', '#666');
-
+ .join("path")
+ .attr("d", "M 0,-5 L 10,0 L 0,5")
+ .attr("fill", "#666");
+
// Colored arrow markers for END paths
- const uniqueColors = [...new Set(links.filter(l => l.color !== '#666').map(l => l.color))];
+ const uniqueColors = [...new Set(links.filter(l => l.color !== "#666").map(l => l.color))];
uniqueColors.forEach(color => {
const markerId = `arrowhead-${color.substring(1)}`;
defs.selectAll(`marker#${markerId}`)
.data([0])
- .join('marker')
- .attr('id', markerId)
- .attr('viewBox', '-0 -5 10 10')
- .attr('refX', 12)
- .attr('refY', 0)
- .attr('orient', 'auto')
- .attr('markerWidth', 7)
- .attr('markerHeight', 7)
- .selectAll('path')
+ .join("marker")
+ .attr("id", markerId)
+ .attr("viewBox", "-0 -5 10 10")
+ .attr("refX", 12)
+ .attr("refY", 0)
+ .attr("orient", "auto")
+ .attr("markerWidth", 7)
+ .attr("markerHeight", 7)
+ .selectAll("path")
.data([0])
- .join('path')
- .attr('d', 'M 0,-5 L 10,0 L 0,5')
- .attr('fill', color);
+ .join("path")
+ .attr("d", "M 0,-5 L 10,0 L 0,5")
+ .attr("fill", color);
});
-
+
// Update nodes
- const nodeSelection = nodeGroup
- .selectAll('g')
- .data(nodes)
- .join('g')
- .call(createDrag(simulation));
-
+ const nodeSelection = nodeGroup.selectAll("g").data(nodes).join("g").call(createDrag(simulation));
+
// Add circles to nodes
nodeSelection
- .selectAll('circle')
+ .selectAll("circle")
.data(d => [d])
- .join('circle')
- .attr('r', d => d.radius || 8)
- .attr('fill', d => d.color || '#00ffd6')
- .style('cursor', 'pointer')
- .on('mouseenter', function() {
- d3.select(this).attr('stroke', '#fff').attr('stroke-width', 2);
+ .join("circle")
+ .attr("r", d => d.radius || 8)
+ .attr("fill", d => d.color || "#00ffd6")
+ .style("cursor", "pointer")
+ .on("mouseenter", function () {
+ d3.select(this).attr("stroke", "#fff").attr("stroke-width", 2);
})
- .on('mouseleave', function() {
- d3.select(this).attr('stroke', null);
+ .on("mouseleave", function () {
+ d3.select(this).attr("stroke", null);
})
- .on('click', function(event, d) {
+ .on("click", function (event, d) {
if (d.index !== undefined && d.index >= 0) {
const screenplayContext = window.ScreenplayContext;
if (screenplayContext && screenplayContext.blocks[d.index]) {
@@ -179,37 +182,36 @@ function renderGraph(svgElement, linkGroup, nodeGroup, width, height) {
screenplayContext.currentInstructionIndex = 0;
updateCurrentEventHighlight();
execUntilNextLine();
-
+
console.log(`Jumped to event block ${d.index} (evId: ${d.id})`);
}
}
});
-
+
// Add labels to nodes
nodeSelection
- .selectAll('text')
+ .selectAll("text")
.data(d => [d])
- .join('text')
+ .join("text")
.attr("class", "node-label")
.attr("text-anchor", "middle")
.attr("dy", 4)
- .attr('fill', '#000')
- .attr('font-size', '11px')
- .attr('font-family', 'Segoe UI, Arial, sans-serif')
- .style('pointer-events', 'none')
+ .attr("fill", "#000")
+ .attr("font-size", "11px")
+ .attr("font-family", "Segoe UI, Arial, sans-serif")
+ .style("pointer-events", "none")
.text(d => d.label || d.id);
-
+
// Update positions on tick
- simulation.on('tick', () => {
+ simulation.on("tick", () => {
linkSelection
- .attr('x1', d => d.source.x)
- .attr('y1', d => d.source.y)
- .attr('x2', d => d.target.x)
- .attr('y2', d => d.target.y);
- nodeSelection
- .attr('transform', d => `translate(${d.x},${d.y})`);
+ .attr("x1", d => d.source.x)
+ .attr("y1", d => d.source.y)
+ .attr("x2", d => d.target.x)
+ .attr("y2", d => d.target.y);
+ nodeSelection.attr("transform", d => `translate(${d.x},${d.y})`);
});
-
+
// Store node selection for updates
svgElement.nodeSelection = nodeSelection;
}
@@ -225,22 +227,23 @@ function updateCurrentEventHighlight() {
lastIndex = currentIndex;
// Update node colors
- svgElement.nodeSelection.selectAll('circle')
+ svgElement.nodeSelection
+ .selectAll("circle")
.transition()
.duration(300)
- .attr('fill', d => {
- if(!d || !d.index || d.index < 0) return '#4ecdc4';
+ .attr("fill", d => {
+ if (!d || !d.index || d.index < 0) return "#4ecdc4";
const blk = screenplayContext.blocks[d.index];
- if (d.index === currentIndex) return '#ff6b6b';
- if (blk && blk.hasChoices) return '#ff9ff3';
- if (blk && blk.evFunc && blk.evFunc.length > 0) return '#feca57';
- return '#4ecdc4';
+ if (d.index === currentIndex) return "#ff6b6b";
+ if (blk && blk.hasChoices) return "#ff9ff3";
+ if (blk && blk.evFunc && blk.evFunc.length > 0) return "#feca57";
+ return "#4ecdc4";
})
- .attr('r', d => {
+ .attr("r", d => {
if (d.index === currentIndex) return (d.radius || 10) + 4;
return d.radius || 10;
});
-
+
// Center on current node
const currentNode = svgElement.nodeSelection.data().find(d => d.index === currentIndex);
if (currentNode && currentNode.x && currentNode.y) {
@@ -248,25 +251,24 @@ function updateCurrentEventHighlight() {
.scale(1)
.translate(-currentNode.x, -currentNode.y)
.translate(currentWidth / 2, currentHeight / 2);
-
- svgElement.transition()
- .duration(750)
- .call(svgElement.zoom.transform, transform);
+
+ svgElement.transition().duration(750).call(svgElement.zoom.transform, transform);
}
}
function createDrag(simulation) {
- return d3.drag()
- .on('start', (e) => {
+ return d3
+ .drag()
+ .on("start", e => {
if (!e.active) simulation.alphaTarget(0.3).restart();
e.subject.fx = e.subject.x;
e.subject.fy = e.subject.y;
})
- .on('drag', (e) => {
+ .on("drag", e => {
e.subject.fx = e.x;
e.subject.fy = e.y;
})
- .on('end', (e) => {
+ .on("end", e => {
if (!e.active) simulation.alphaTarget(0);
e.subject.fx = null;
e.subject.fy = null;
@@ -283,10 +285,10 @@ function getEventsGraphData() {
screenplayContext.blocks.forEach((event, index) => {
const evId = event.evId;
const nodeId = evId;
- let color = '#4ecdc4';
- if (event.hasChoices) color = '#ff9ff3';
- else if (event.evFunc && event.evFunc.length > 0) color = '#feca57';
- if (index === screenplayContext.currentBlockIndex) color = '#ff6b6b';
+ let color = "#4ecdc4";
+ if (event.hasChoices) color = "#ff9ff3";
+ else if (event.evFunc && event.evFunc.length > 0) color = "#feca57";
+ if (index === screenplayContext.currentBlockIndex) color = "#ff6b6b";
const node = {
id: nodeId,
@@ -294,31 +296,29 @@ function getEventsGraphData() {
color: color,
radius: event.hasChoices ? 12 : 10,
};
-
+
nodeMap.set(evId, node);
});
- nodeMap.set(7090644, {id: 7090644, radius: 16, color: '#dd1effff', label: 'END'});
-
+ nodeMap.set(7090644, { id: 7090644, radius: 16, color: "#dd1effff", label: "END" });
+
// Build links first
- screenplayContext.blocks.forEach((event) => {
+ screenplayContext.blocks.forEach(event => {
const sourceId = event.evId;
if (event.returnValues && event.returnValues.length > 0) {
- event.returnValues.forEach((targetEvId) => {
+ event.returnValues.forEach(targetEvId => {
if (!nodeMap.has(targetEvId)) return;
links.push({
source: sourceId,
target: targetEvId,
- color: '#666'
+ color: "#666",
});
});
}
});
-
+
// Find all nodes that point to END (7090644)
- const nodesPointingToEnd = links
- .filter(link => link.target === 7090644)
- .map(link => link.source);
-
+ const nodesPointingToEnd = links.filter(link => link.target === 7090644).map(link => link.source);
+
// Build adjacency map (reverse - who points to whom)
const incomingMap = new Map();
links.forEach(link => {
@@ -327,54 +327,64 @@ function getEventsGraphData() {
}
incomingMap.get(link.target).push(link.source);
});
-
+
// Color palette
const pathColors = [
- '#ff6b6b', '#4ecdc4', '#f7b731',
- '#5f27cd', '#86d300ff', '#ff9ff3', '#fe57fbff',
- '#b0e4efff', '#ff6348', '#1dd1a1',
- '#c44569', '#dff800ff', '#778beb', '#e77f67'
+ "#ff6b6b",
+ "#4ecdc4",
+ "#f7b731",
+ "#5f27cd",
+ "#86d300ff",
+ "#ff9ff3",
+ "#fe57fbff",
+ "#b0e4efff",
+ "#ff6348",
+ "#1dd1a1",
+ "#c44569",
+ "#dff800ff",
+ "#778beb",
+ "#e77f67",
];
-
+
// Trace back from each node pointing to END to find root nodes
const pathColorMap = new Map(); // Maps each node to its path color
let colorIndex = 0;
-
+
nodesPointingToEnd.forEach(nodeId => {
// Trace backward to find root
const visited = new Set();
- const traceBackToRoot = (currentNode) => {
+ const traceBackToRoot = currentNode => {
if (visited.has(currentNode)) return currentNode;
visited.add(currentNode);
-
+
const parents = incomingMap.get(currentNode) || [];
if (parents.length === 0) {
// This is a root node
return currentNode;
}
-
+
// Continue tracing back through all parents
const roots = parents.map(parent => traceBackToRoot(parent));
return roots[0]; // Return first root found
};
-
+
const rootNode = traceBackToRoot(nodeId);
-
+
// Assign color based on root node
if (!pathColorMap.has(rootNode)) {
pathColorMap.set(rootNode, pathColors[colorIndex % pathColors.length]);
colorIndex++;
}
-
+
const pathColor = pathColorMap.get(rootNode);
-
+
// Now color all nodes in the path from root to END
const colorPath = (node, color) => {
if (pathColorMap.has(node) && pathColorMap.get(node) !== color) {
return; // Already colored by another path
}
pathColorMap.set(node, color);
-
+
// Color all links from this node
links.forEach(link => {
if (link.source === node) {
@@ -386,7 +396,7 @@ function getEventsGraphData() {
}
});
};
-
+
colorPath(rootNode, pathColor);
});
diff --git a/src/Scripts/START.js b/src/Scripts/START.js
index bb6c503a..8ab71f01 100644
--- a/src/Scripts/START.js
+++ b/src/Scripts/START.js
@@ -1,64 +1,72 @@
-import { loadScene } from '../Scene/SceneManagement.js';
-import { toButton } from '../Graphics/Graphics.Button.js';
-import { setExitListener, setOverrideRightKeys } from '../InputSystem/InputSystem.Keyboard.ts';
-import { playBGM } from '../Audio/Audio.Bgm.js';
-import { pushDialogWindow } from './WINDOW/WINDOW.js';
-import { initGallery } from './GALLERY.js';
-import { loadBackgroundScene } from './BACKGROUND.js';
-import { loadGame, applyGameState } from '../Core/GameSave.js';
-import { execUntilNextLine } from '../Core/Events.js';
+import { playBGM } from "../Audio/Audio.Bgm.js";
+import { execUntilNextLine } from "../Core/Events";
+import { applyGameState, loadGame } from "../Core/GameSave";
+import { toButton } from "../Graphics/Graphics.Button.js";
+import { setExitListener, setOverrideRightKeys } from "../InputSystem/InputSystem.Keyboard.ts";
+import { loadScene } from "../Scene/SceneManagement.js";
+import { loadBackgroundScene } from "./BACKGROUND.js";
+import { initGallery } from "./GALLERY.js";
+import { pushDialogWindow } from "./WINDOW/WINDOW.js";
-export async function loadStartScene(hasGallery=true) {
+export async function loadStartScene(hasGallery = true) {
const startScene = await loadScene("UI/START");
let exitBtn = hasGallery ? startScene.getObjectByName("EXIT2") : startScene.getObjectByName("EXIT1");
- toButton(startScene.getObjectByName("START"), {callback: async () => {
- await loadBackgroundScene();
- await pushDialogWindow();
- }});
-
- toButton(startScene.getObjectByName("LOAD"), {callback: () => {
- console.log('LOAD button clicked');
- const loadWindow = window.open('/save_load.html?mode=load', 'LoadGame', 'width=600,height=600');
-
- // Listen for messages from the save/load window
- const messageHandler = (event) => {
- if (event.data.type === 'load-game') {
- const slotIndex = event.data.slotIndex;
- console.log('Loading game from slot:', slotIndex);
-
- const gameState = loadGame(slotIndex);
- if (gameState) {
- // Load background scene and dialog window first
- loadBackgroundScene().then(() => {
- pushDialogWindow().then(() => {
- // Apply the loaded state
- applyGameState(gameState);
- // Execute to the next line to refresh UI
- execUntilNextLine();
+ toButton(startScene.getObjectByName("START"), {
+ callback: async () => {
+ await loadBackgroundScene();
+ await pushDialogWindow();
+ },
+ });
+
+ toButton(startScene.getObjectByName("LOAD"), {
+ callback: () => {
+ console.log("LOAD button clicked");
+ const loadWindow = window.open("/save_load.html?mode=load", "LoadGame", "width=600,height=600");
+
+ // Listen for messages from the save/load window
+ const messageHandler = event => {
+ if (event.data.type === "load-game") {
+ const slotIndex = event.data.slotIndex;
+ console.log("Loading game from slot:", slotIndex);
+
+ const gameState = loadGame(slotIndex);
+ if (gameState) {
+ // Load background scene and dialog window first
+ loadBackgroundScene().then(() => {
+ pushDialogWindow().then(() => {
+ // Apply the loaded state
+ applyGameState(gameState);
+ // Execute to the next line to refresh UI
+ execUntilNextLine();
+ });
});
- });
+ }
+
+ window.removeEventListener("message", messageHandler);
+ } else if (event.data.type === "save-load-cancelled") {
+ window.removeEventListener("message", messageHandler);
}
-
- window.removeEventListener('message', messageHandler);
- } else if (event.data.type === 'save-load-cancelled') {
- window.removeEventListener('message', messageHandler);
- }
- };
-
- window.addEventListener('message', messageHandler);
- }});
-
- toButton(startScene.getObjectByName("CONFIG"), {callback: () => {
- console.log('CONFIG button clicked');
- }});
+ };
+
+ window.addEventListener("message", messageHandler);
+ },
+ });
+
+ toButton(startScene.getObjectByName("CONFIG"), {
+ callback: () => {
+ console.log("CONFIG button clicked");
+ },
+ });
if (hasGallery) {
- toButton(startScene.getObjectByName("GALLERY"), {callback: () => {
- initGallery();
- }});
+ toButton(startScene.getObjectByName("GALLERY"), {
+ callback: () => {
+ initGallery();
+ },
+ });
}
- exitBtn = toButton(exitBtn, {callback: window.exit});
+ exitBtn = toButton(exitBtn, { callback: window.exit });
setExitListener(() => {
if ($(exitBtn.domElement).is(":focus")) {
@@ -77,8 +85,7 @@ export async function loadStartScene(hasGallery=true) {
}
});
});
-
+
playBGM("M07");
setOverrideRightKeys(false);
}
-
diff --git a/src/Scripts/SYSTEM.js b/src/Scripts/SYSTEM.js
index 68a730b4..debf5961 100644
--- a/src/Scripts/SYSTEM.js
+++ b/src/Scripts/SYSTEM.js
@@ -1,46 +1,46 @@
-import { loadScene, destroyScene } from '../Scene/SceneManagement.js';
-import { toButton } from '../Graphics/Graphics.Button.js';
-import { toBackground } from '../Graphics/Graphics.Background.js';
-import { setExitListener, setOverrideRightKeys } from '../InputSystem/InputSystem.Keyboard.ts';
-import { saveGame, loadGame, applyGameState } from '../Core/GameSave.js';
-import { execUntilNextLine } from '../Core/Events.js';
+import { execUntilNextLine } from "../Core/Events";
+import { applyGameState, loadGame, saveGame } from "../Core/GameSave";
+import { toBackground } from "../Graphics/Graphics.Background.js";
+import { toButton } from "../Graphics/Graphics.Button.js";
+import { setExitListener, setOverrideRightKeys } from "../InputSystem/InputSystem.Keyboard.ts";
+import { destroyScene, loadScene } from "../Scene/SceneManagement.js";
export async function pushPauseScreen() {
const pauseScene = await loadScene("UI/SYSTEM", { singleInstance: true });
if (!pauseScene) return;
-
+
toButton(pauseScene.getObjectByName("SAVE"), {
callback: () => {
- console.log('SAVE button clicked');
- const saveWindow = window.open('/save_load.html?mode=save', 'SaveGame', 'width=600,height=600');
-
+ console.log("SAVE button clicked");
+ const saveWindow = window.open("/save_load.html?mode=save", "SaveGame", "width=600,height=600");
+
// Listen for messages from the save/load window
- const messageHandler = (event) => {
- if (event.data.type === 'save-game') {
+ const messageHandler = event => {
+ if (event.data.type === "save-game") {
const slotIndex = event.data.slotIndex;
- console.log('Saving game to slot:', slotIndex);
+ console.log("Saving game to slot:", slotIndex);
saveGame(slotIndex);
- window.removeEventListener('message', messageHandler);
- } else if (event.data.type === 'save-load-cancelled') {
- window.removeEventListener('message', messageHandler);
+ window.removeEventListener("message", messageHandler);
+ } else if (event.data.type === "save-load-cancelled") {
+ window.removeEventListener("message", messageHandler);
}
};
-
- window.addEventListener('message', messageHandler);
- }
+
+ window.addEventListener("message", messageHandler);
+ },
});
-
+
toButton(pauseScene.getObjectByName("LOAD"), {
callback: () => {
- console.log('LOAD button clicked');
- const loadWindow = window.open('/save_load.html?mode=load', 'LoadGame', 'width=600,height=600');
-
+ console.log("LOAD button clicked");
+ const loadWindow = window.open("/save_load.html?mode=load", "LoadGame", "width=600,height=600");
+
// Listen for messages from the save/load window
- const messageHandler = (event) => {
- if (event.data.type === 'load-game') {
+ const messageHandler = event => {
+ if (event.data.type === "load-game") {
const slotIndex = event.data.slotIndex;
- console.log('Loading game from slot:', slotIndex);
-
+ console.log("Loading game from slot:", slotIndex);
+
const gameState = loadGame(slotIndex);
if (gameState) {
// Apply the loaded state
@@ -50,31 +50,33 @@ export async function pushPauseScreen() {
// Execute to the next line to refresh UI
execUntilNextLine();
}
-
- window.removeEventListener('message', messageHandler);
- } else if (event.data.type === 'save-load-cancelled') {
- window.removeEventListener('message', messageHandler);
+
+ window.removeEventListener("message", messageHandler);
+ } else if (event.data.type === "save-load-cancelled") {
+ window.removeEventListener("message", messageHandler);
}
};
-
- window.addEventListener('message', messageHandler);
- }
+
+ window.addEventListener("message", messageHandler);
+ },
});
-
+
toButton(pauseScene.getObjectByName("CONFIG"));
toButton(pauseScene.getObjectByName("EXIT"), {
callback: () => {
window.exit();
- }
+ },
});
const feather = pauseScene.getObjectByName("羽セット");
toBackground(feather.findChildByName("光玉(奥)"), { scrollSpeedY: -100 });
- const bg2 = toBackground(feather.findChildByName("光玉(中)"), { scrollSpeedY: -200});
- const bg3 = toBackground(feather.findChildByName("光玉(前)"), { scrollSpeedY: -300});
+ const bg2 = toBackground(feather.findChildByName("光玉(中)"), { scrollSpeedY: -200 });
+ const bg3 = toBackground(feather.findChildByName("光玉(前)"), { scrollSpeedY: -300 });
bg2.transform.y = 0;
bg3.transform.y = 0;
bg2.syncDom();
bg3.syncDom();
- setExitListener(() => { destroyScene(); });
+ setExitListener(() => {
+ destroyScene();
+ });
setOverrideRightKeys(false);
}
diff --git a/src/Scripts/WINDOW/WINDOW.js b/src/Scripts/WINDOW/WINDOW.js
index c852283d..ebcf2244 100644
--- a/src/Scripts/WINDOW/WINDOW.js
+++ b/src/Scripts/WINDOW/WINDOW.js
@@ -1,5 +1,5 @@
import $ from "jquery";
-import { execUntilNextLine } from "../../Core/Events.js";
+import { execUntilNextLine } from "../../Core/Events";
import { Button, toButton } from "../../Graphics/Graphics.Button.js";
import { TMP_Text, TMP_TypeWriter } from "../../Graphics/Graphics.TextMessPoor.js";
import { setExitListener, setOverrideRightKeys } from "../../InputSystem/InputSystem.Keyboard.ts";
diff --git a/src/main.ts b/src/main.ts
index 59059db2..f7c05dbf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +1,18 @@
-import $ from 'jquery';
+import $ from "jquery";
-import { GameEngine } from './Core/NotUnityEngine.js';
-import { loadEvents } from './Core/Events.js';
-import { loadStartScene } from './Scripts/START.js';
-import './InputSystem/InputSystem.Keyboard.ts';
-import './InputSystem/InputSystem.Gamepad.ts';
+import { loadEvents } from "./Core/Events";
+import { GameEngine } from "./Core/NotUnityEngine";
+import "./InputSystem/InputSystem.Gamepad.ts";
+import "./InputSystem/InputSystem.Keyboard.ts";
+import { loadStartScene } from "./Scripts/START.js";
-import './Audio/Audio.🔓.js';
-import { initBGM } from './Audio/Audio.Bgm.js';
-import './Audio/Audio.Voice.js';
-import { initSE } from './Audio/Audio.Se.js';
+import { initBGM } from "./Audio/Audio.Bgm.js";
+import { initSE } from "./Audio/Audio.Se.js";
+import "./Audio/Audio.Voice.js";
+import "./Audio/Audio.🔓.js";
-import { initEnginePane } from './Debug/EnginePane.js';
-import { initSceneGraphPane } from './Debug/SceneGraphPane.js';
+import { initEnginePane } from "./Debug/EnginePane.js";
+import { initSceneGraphPane } from "./Debug/SceneGraphPane.js";
// Define types for existing classes if needed, or use any for now
declare global {
@@ -24,7 +24,7 @@ declare global {
}
}
-let notUnityEngine = new GameEngine('gameContainer');
+let notUnityEngine = new GameEngine("gameContainer");
initEnginePane(notUnityEngine);
initSceneGraphPane();
notUnityEngine.start();
@@ -33,12 +33,12 @@ window.getEngine = () => notUnityEngine;
async function main() {
try {
- console.log('Initializing application...');
+ console.log("Initializing application...");
const events = await loadEvents();
initBGM();
initSE();
await loadStartScene();
- $('#black-overlay').fadeOut(600);
+ $("#black-overlay").fadeOut(600);
} catch (error: any) {
alert(`Failed to initialize:\n${error.message}`);
console.error(error);
@@ -46,9 +46,9 @@ async function main() {
}
window.exit = () => {
- $('#black-overlay').fadeIn(600, () => {
+ $("#black-overlay").fadeIn(600, () => {
window.close();
- $('#gameContainer').remove();
+ $("#gameContainer").remove();
});
};
From 0e4b2ccd8eea0f852b2f096ba16264090664bcd7 Mon Sep 17 00:00:00 2001
From: DonovanLi
Date: Tue, 3 Feb 2026 11:02:44 +0800
Subject: [PATCH 4/7] refactor phase 3: Scene, SceneElement
---
src/Core/NotUnityEngine.ts | 34 +++-
src/Graphics/Graphics.AnimatedSceneElement.js | 56 +++---
src/Graphics/Graphics.Background.js | 2 +-
src/Graphics/Graphics.Button.js | 95 +++++----
src/Graphics/Graphics.FocusableElement.js | 62 +++---
...eneElement.js => Graphics.SceneElement.ts} | 187 ++++++++++++++----
src/Graphics/Graphics.TextMessPoor.js | 2 +-
src/Graphics/Graphics.Toggle.js | 73 +++----
src/Scene/{Scene.js => Scene.ts} | 61 ++++--
...{SceneManagement.js => SceneManagement.ts} | 51 +++--
src/Scripts/GALLERY.js | 26 +--
src/Scripts/WINDOW/WINDOW.SelectionsBox.js | 4 +-
12 files changed, 417 insertions(+), 236 deletions(-)
rename src/Graphics/{Graphics.SceneElement.js => Graphics.SceneElement.ts} (52%)
rename src/Scene/{Scene.js => Scene.ts} (60%)
rename src/Scene/{SceneManagement.js => SceneManagement.ts} (66%)
diff --git a/src/Core/NotUnityEngine.ts b/src/Core/NotUnityEngine.ts
index f8d81608..eb2b8445 100644
--- a/src/Core/NotUnityEngine.ts
+++ b/src/Core/NotUnityEngine.ts
@@ -1,5 +1,13 @@
+import type { ISceneElement } from "@/Graphics/Graphics.SceneElement";
+import type { IScene } from "@/Scene/Scene";
import $ from "jquery";
+export interface GameEngineCallbacks {
+ init: (() => void) | null;
+ update: ((deltaTime: number) => void) | null;
+ updatePost: ((deltaTime: number) => void) | null;
+}
+
export interface IGameEngine {
start(): void;
stop(): void;
@@ -12,6 +20,16 @@ export interface IGameEngine {
clearAllScenes(): void;
isMountedScene(name: string): boolean;
getContainer(): HTMLElement;
+ containerId: string;
+ container: HTMLElement;
+ running: boolean;
+ deltaTime: number;
+ lastFrameTime: number;
+ fps: number;
+ frameTime: number;
+ callbacks: GameEngineCallbacks;
+ scenes: any[];
+ scenePaths: string[];
}
export class GameEngine implements IGameEngine {
@@ -22,11 +40,7 @@ export class GameEngine implements IGameEngine {
lastFrameTime: number = 0;
fps: number = 24;
frameTime: number = 1000 / this.fps;
- callbacks: {
- init: (() => void) | null;
- update: ((deltaTime: number) => void) | null;
- updatePost: ((deltaTime: number) => void) | null;
- } = {
+ callbacks: GameEngineCallbacks = {
init: null,
update: null,
updatePost: null,
@@ -96,7 +110,7 @@ export class GameEngine implements IGameEngine {
getAllObjects() {
// Collect all objects from all scenes
- const allObjects = [];
+ const allObjects: ISceneElement[] = [];
this.scenes.forEach(scene => {
allObjects.push(...scene.getAllObjects());
});
@@ -104,7 +118,7 @@ export class GameEngine implements IGameEngine {
}
// Scene management methods
- pushScene(scene) {
+ pushScene(scene: IScene) {
// Disable focusability on all existing scenes
this.scenes.forEach(s => s.setFocusable(false));
@@ -116,7 +130,7 @@ export class GameEngine implements IGameEngine {
scene.setFocusable(true);
}
- popScene() {
+ popScene(): IScene | null {
if (this.scenes.length === 0) return null;
// Remove and destroy the top scene
@@ -136,7 +150,7 @@ export class GameEngine implements IGameEngine {
return this.scenes.length > 0 ? this.scenes[this.scenes.length - 1] : null;
}
- getSceneByName(name) {
+ getSceneByName(name: string): IScene | null {
return this.scenes.find(s => s.name === name) || null;
}
@@ -144,7 +158,7 @@ export class GameEngine implements IGameEngine {
while (this.scenes.length > 0) this.popScene();
}
- isMountedScene(name) {
+ isMountedScene(name: string): boolean {
return this.scenePaths.includes(name);
}
diff --git a/src/Graphics/Graphics.AnimatedSceneElement.js b/src/Graphics/Graphics.AnimatedSceneElement.js
index c2de00c4..a5e6f88a 100644
--- a/src/Graphics/Graphics.AnimatedSceneElement.js
+++ b/src/Graphics/Graphics.AnimatedSceneElement.js
@@ -1,14 +1,14 @@
-import { SceneElement } from './Graphics.SceneElement.js';
+import { SceneElement } from "./Graphics.SceneElement";
export class AnimatedSceneElement extends SceneElement {
constructor(data, parent = null, scene = null) {
super(data, parent, scene);
-
+
// Animation properties
this.fps = data.fps || 12;
this.loop = data.loop !== false;
this.autoPlay = data.autoPlay !== false;
-
+
// Animation state
this.currentFrame = 0;
this.isPlaying = false;
@@ -16,7 +16,7 @@ export class AnimatedSceneElement extends SceneElement {
this.elapsedTime = 0;
this.onComplete = data.onComplete || null;
}
-
+
initializeFrames() {
// Hide all frames initially except the first one
this.children.forEach((child, index) => {
@@ -25,35 +25,35 @@ export class AnimatedSceneElement extends SceneElement {
child.updateDOMStyle();
}
});
-
+
if (this.autoPlay && this.children.length > 0) {
this.play();
}
}
-
+
play() {
if (this.children.length === 0) return;
this.isPlaying = true;
this.elapsedTime = 0;
}
-
+
stop() {
this.isPlaying = false;
this.setFrame(0);
}
-
+
setFrame(frameIndex) {
if (this.children.length === 0) return;
-
+
// Clamp frame index
frameIndex = Math.max(0, Math.min(frameIndex, this.children.length - 1));
-
+
// Hide current frame
if (this.children[this.currentFrame]) {
this.children[this.currentFrame].visible = false;
this.children[this.currentFrame].updateDOMStyle();
}
-
+
// Show new frame
this.currentFrame = frameIndex;
if (this.children[this.currentFrame]) {
@@ -61,13 +61,13 @@ export class AnimatedSceneElement extends SceneElement {
this.children[this.currentFrame].updateDOMStyle();
}
}
-
+
nextFrame() {
if (this.children.length === 0) return;
-
+
const direction = this.fps >= 0 ? 1 : -1;
let nextIndex = this.currentFrame + direction;
-
+
// Handle forward playback
if (direction > 0) {
if (nextIndex >= this.children.length) {
@@ -96,15 +96,15 @@ export class AnimatedSceneElement extends SceneElement {
}
}
}
-
+
this.setFrame(nextIndex);
}
-
+
previousFrame() {
if (this.children.length === 0) return;
-
+
let prevIndex = this.currentFrame - 1;
-
+
if (prevIndex < 0) {
if (this.loop) {
prevIndex = this.children.length - 1;
@@ -112,33 +112,33 @@ export class AnimatedSceneElement extends SceneElement {
prevIndex = 0;
}
}
-
+
this.setFrame(prevIndex);
}
-
+
update(deltaTime) {
super.update(deltaTime);
-
+
if (!this.isPlaying || this.children.length === 0) return;
-
+
this.elapsedTime += deltaTime;
-
+
// Calculate frame time based on absolute fps value
const absFrameTime = 1 / Math.abs(this.fps);
-
+
// Check if it's time to advance to the next frame
if (this.elapsedTime >= absFrameTime) {
// Calculate how many frames to advance (in case of lag)
const framesToAdvance = Math.floor(this.elapsedTime / absFrameTime);
this.elapsedTime %= absFrameTime;
-
+
for (let i = 0; i < framesToAdvance; i++) {
this.nextFrame();
if (!this.isPlaying) break; // Stop if animation ended
}
}
}
-
+
show(fromParent = false) {
if (fromParent) {
this.visible = this.originallyVisible;
@@ -146,7 +146,7 @@ export class AnimatedSceneElement extends SceneElement {
this.visible = true;
}
this.updateDOMStyle();
-
+
// Only show the current frame, keep others hidden
this.children.forEach((child, index) => {
if (index === this.currentFrame) {
@@ -157,7 +157,7 @@ export class AnimatedSceneElement extends SceneElement {
}
});
}
-
+
hide(fromParent = false) {
if (fromParent) {
this.originallyVisible = this.visible;
diff --git a/src/Graphics/Graphics.Background.js b/src/Graphics/Graphics.Background.js
index fb4318a3..d6943e51 100644
--- a/src/Graphics/Graphics.Background.js
+++ b/src/Graphics/Graphics.Background.js
@@ -1,5 +1,5 @@
import $ from "jquery";
-import { SceneElement, preserveLayerIndex } from "./Graphics.SceneElement.js";
+import { SceneElement, preserveLayerIndex } from "./Graphics.SceneElement";
export class Background extends SceneElement {
constructor(data, parent = null, scene = null) {
diff --git a/src/Graphics/Graphics.Button.js b/src/Graphics/Graphics.Button.js
index d685680e..992ee22e 100644
--- a/src/Graphics/Graphics.Button.js
+++ b/src/Graphics/Graphics.Button.js
@@ -1,11 +1,11 @@
-import { FocusableElement } from './Graphics.FocusableElement.js';
-import { preserveLayerIndex } from './Graphics.SceneElement.js';
-import $ from 'jquery';
+import $ from "jquery";
+import { FocusableElement } from "./Graphics.FocusableElement.js";
+import { preserveLayerIndex } from "./Graphics.SceneElement";
export class Button extends FocusableElement {
constructor(data, parent = null, scene) {
data.isButton = true;
-
+
super(data, parent, scene);
this.transforms = data.transforms || [];
@@ -17,55 +17,64 @@ export class Button extends FocusableElement {
this.buttonId = `btn-${Math.random().toString(36).substr(2, 9)}`;
this.isButton = true;
this.transform.z = data.z || 0;
- this.cursor = data.cursor || 'pointer';
-
+ this.cursor = data.cursor || "pointer";
+
this.recreateDOMAsButton();
this.injectCSSRules();
- if(data.callback) this.onClick(data.callback);
+ if (data.callback) this.onClick(data.callback);
}
recreateDOMAsButton() {
- let classNames = ''
+ let classNames = "";
if (this.domElement) {
- classNames = $(this.domElement).attr('class').split(' ');
+ classNames = $(this.domElement).attr("class").split(" ");
$(this.domElement).remove();
}
-
- this.domElement = $('