diff --git a/index.html b/index.html
index f6db8ae..674f064 100644
--- a/index.html
+++ b/index.html
@@ -191,6 +191,9 @@
+
diff --git a/package.json b/package.json
index d023a1c..0dfb6e9 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,13 @@
"@web-media/event-target": "^0.0.2",
"@web-media/phonograph": "2.3.2",
"debug": "^4.3.4",
+ "moment": "^2.30.1",
"standardized-audio-context": "^25.3.72",
"stats.js": "^0.17.0",
"three": "0.138.3",
- "tslib": "^2.3.1"
+ "tslib": "^2.3.1",
+ "vis-data": "^7.1.9",
+ "vis-timeline": "^7.7.3"
},
"devDependencies": {
"@biomejs/biome": "1.7.3",
diff --git a/src/components/Grass.ts b/src/components/Grass.ts
index 537b4f5..acb852c 100644
--- a/src/components/Grass.ts
+++ b/src/components/Grass.ts
@@ -1,5 +1,5 @@
import * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import { THEME_VALUE } from '../manager/ColorManager';
import { timeManager } from '../manager/TimeManager';
import { VISUAL_LOAD } from '../stores/settings';
diff --git a/src/components/Ground2.ts b/src/components/Ground2.ts
index 078be55..967b10e 100644
--- a/src/components/Ground2.ts
+++ b/src/components/Ground2.ts
@@ -1,6 +1,6 @@
import * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import { CylinderGeometry2 } from './CylinderGeometry2';
export const RADIUS = 120;
diff --git a/src/components/GroundObject.ts b/src/components/GroundObject.ts
index 252806d..27d03da 100644
--- a/src/components/GroundObject.ts
+++ b/src/components/GroundObject.ts
@@ -1,6 +1,6 @@
import * as THREE from 'three';
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import { timeManager } from '../manager/TimeManager';
import { GROUND_Y_OFFSET, RADIUS, SCALE_Z } from './Ground2';
diff --git a/src/components/SkyBox.ts b/src/components/SkyBox.ts
index 73d5311..f2b70ee 100644
--- a/src/components/SkyBox.ts
+++ b/src/components/SkyBox.ts
@@ -1,5 +1,5 @@
import * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
export const SkyBox = (tracker: ResourceTracker) => {
const geometry = new THREE.SphereGeometry(500, 20, 20);
diff --git a/src/initializeThreeCanvas.ts b/src/initializeThreeCanvas.ts
index 84aaa57..626fdea 100644
--- a/src/initializeThreeCanvas.ts
+++ b/src/initializeThreeCanvas.ts
@@ -9,7 +9,7 @@ import { SepiaShader } from 'three/examples/jsm/shaders/SepiaShader';
import { VignetteShader } from 'three/examples/jsm/shaders/VignetteShader';
import { CANVAS_SIZE, updateCanvasSize } from './stores/settings';
-import { ResourceTracker } from './ResourceTracker';
+import { ResourceTracker } from './utils/ResourceTracker';
import { timeManager } from './manager/TimeManager';
import { FrameRateLevel } from './utils/TimeMagic';
import { GlitchShader } from './utils/shaders/GlitchPass';
diff --git a/src/main.css b/src/main.css
index d1fcca8..2267bb1 100644
--- a/src/main.css
+++ b/src/main.css
@@ -607,4 +607,56 @@ button {
.disconnected {
font-size: 1.3em;
font-weight: 800;
+}
+
+/** Other debugging tools **/
+.story-visualize-container {
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 30vh;
+ position: fixed;
+ background: rgba(0, 0, 0, 0.24);
+ backdrop-filter: blur(6px);
+}
+
+.story-visualize-container canvas {
+ height: 100%;
+}
+
+.vis-time-axis .vis-text {
+ color: white;
+ font-weight: 400;
+}
+
+.vis-item-content {
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.vis-timeline {
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vis-time-axis .vis-grid.vis-minor {
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-panel.vis-bottom {
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vis-item {
+ border-radius: 0;
+ background: rgba(0, 0, 0, 0.24);
+ border-image: linear-gradient(60deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)) 10%;
+ box-shadow: 0 0 0 rgba(255, 255, 255, 0.0), inset 0 0 0 rgba(255, 255, 255, 0);
+ color: white;
+}
+
+.vis-item.vis-selected {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.3);
+ box-shadow: 0 0 4px rgba(255, 255, 255, 0.5), inset 0 0 4px rgba(255, 255, 255, 0.5);
+ border-image: linear-gradient(60deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1)) 10%;
}
\ No newline at end of file
diff --git a/src/manager/DebugManager.ts b/src/manager/DebugManager.ts
index 3ec1dd8..bac4638 100644
--- a/src/manager/DebugManager.ts
+++ b/src/manager/DebugManager.ts
@@ -1,6 +1,6 @@
import type * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
export const DebugManager = (
camera: THREE.Camera,
diff --git a/src/manager/GrassManager.ts b/src/manager/GrassManager.ts
index 883947a..9af9c11 100644
--- a/src/manager/GrassManager.ts
+++ b/src/manager/GrassManager.ts
@@ -1,6 +1,6 @@
import type * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import {
GRID_HEIGHT,
GRID_WIDTH,
diff --git a/src/manager/GroundManager2.ts b/src/manager/GroundManager2.ts
index adef1ce..df2f44b 100644
--- a/src/manager/GroundManager2.ts
+++ b/src/manager/GroundManager2.ts
@@ -1,6 +1,6 @@
import * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import type { CylinderGeometry2 } from '../components/CylinderGeometry2';
import { Ground } from '../components/Ground2';
import { STEP_ANGLE } from '../constants/ground';
diff --git a/src/manager/GroundObjectManager.ts b/src/manager/GroundObjectManager.ts
index 20b0f93..1a920b8 100644
--- a/src/manager/GroundObjectManager.ts
+++ b/src/manager/GroundObjectManager.ts
@@ -1,6 +1,6 @@
import type * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import { GroundObject } from '../components/GroundObject';
import { STEP_ANGLE } from '../constants/ground';
import { CompressedTexture } from '../utils/CompressedTexture';
diff --git a/src/manager/SkyBoxManager.ts b/src/manager/SkyBoxManager.ts
index 0a65f19..1fbcfb6 100644
--- a/src/manager/SkyBoxManager.ts
+++ b/src/manager/SkyBoxManager.ts
@@ -1,6 +1,6 @@
import type * as THREE from 'three';
-import type { ResourceTracker } from '../ResourceTracker';
+import type { ResourceTracker } from '../utils/ResourceTracker';
import { SkyBox } from '../components/SkyBox';
import { THEME_VALUE } from './ColorManager';
diff --git a/src/manager/StoryManager.ts b/src/manager/StoryManager.ts
index 95a6989..22f1805 100644
--- a/src/manager/StoryManager.ts
+++ b/src/manager/StoryManager.ts
@@ -1,5 +1,7 @@
import debug from 'debug';
import { Clip, Mp3DeMuxAdapter } from '@web-media/phonograph';
+import { type DataItem, Timeline, type DataItemCollectionType, type TimelineOptions } from 'vis-timeline';
+import 'vis-timeline/dist/vis-timeline-graph2d.css';
import { THEME_ID } from './ColorManager';
@@ -13,6 +15,7 @@ import { QUERY_PARAMETER, ROUTER_ID, isStory } from '../stores/router';
import { type ITimelineEvent, TimelineManager } from '../utils/TimeLine';
import { timeManager } from './TimeManager';
+import { forceSelect } from '../utils/forceSelect';
export const STORY_AUDIO_URL_BASE = 'https://resource.alice.is.not.ci/';
@@ -22,66 +25,67 @@ const logEnd = log.extend('end');
const logTheme = log.extend('theme');
const logLowRpm = log.extend('low-rpm');
-export const timeLine = new TimelineManager(
- stories,
- {
- audio: (x: ITimelineEvent<'audio', IPlayAudioStoryEvent>) => {
- const clip = new Clip({
- context: globalAudioContext,
- url: STORY_AUDIO_URL_BASE + x.detail.url,
- adapter: new Mp3DeMuxAdapter(),
- });
+export const timeLine = new TimelineManager(stories, {
+ audio: (x: ITimelineEvent<'audio', IPlayAudioStoryEvent>) => {
+ const clip = new Clip({
+ context: globalAudioContext,
+ url: STORY_AUDIO_URL_BASE + x.detail.url,
+ adapter: new Mp3DeMuxAdapter(),
+ });
- const id = x.detail.url;
+ const id = x.detail.url;
- logAudio(`[load] [start] ${id}`);
- clip.canPlayThough.then((x) => {
- logAudio(`[play] [start] ${id}`);
- clip.play().then((x) => {
- logAudio(`[play] [ end ] ${id}`);
- });
+ logAudio(`[load] [start] ${id}`);
+ clip.canPlayThough.then((x) => {
+ logAudio(`[play] [start] ${id}`);
+ clip.play().then((x) => {
+ logAudio(`[play] [ end ] ${id}`);
});
+ });
- clip.buffer().then(async () => {
- logAudio(`[load] [ end ] ${id}`);
- });
+ clip.buffer().then(async () => {
+ logAudio(`[load] [ end ] ${id}`);
+ });
- return () => {
- clip.dispose();
- };
- },
- end: (x: ITimelineEvent<'end', null>) => {
- logEnd('Session finished');
- const $finishTraining = document.querySelector('.finish-training') as HTMLDivElement | null;
- if ($finishTraining) {
- $finishTraining.click();
- }
- },
- theme: (x: ITimelineEvent<'theme', string>) => {
- logTheme(x.detail);
- THEME_ID.value = x.detail;
- },
- lowRpm: (x: ITimelineEvent<'lowRpm', number>) => {
- logLowRpm(x.detail);
- const d = DIFFICULTY.value;
- LOW_LIMIT.value = x.detail + ((d > 0) ? (d * (-1/120 * d + 5 / 2)) : d);
- },
- debugAlert: (x: ITimelineEvent<'debugAlert', string>) => {
- alert(x.detail);
- },
+ return () => {
+ clip.dispose();
+ };
+ },
+ end: (x: ITimelineEvent<'end', null>) => {
+ logEnd('Session finished');
+ const $finishTraining = document.querySelector(
+ '.finish-training',
+ ) as HTMLDivElement | null;
+ if ($finishTraining) {
+ $finishTraining.click();
+ }
+ },
+ theme: (x: ITimelineEvent<'theme', string>) => {
+ logTheme(x.detail);
+ THEME_ID.value = x.detail;
},
-);
+ lowRpm: (x: ITimelineEvent<'lowRpm', number>) => {
+ logLowRpm(x.detail);
+ const d = DIFFICULTY.value;
+ LOW_LIMIT.value = x.detail + (d > 0 ? d * ((-1 / 120) * d + 5 / 2) : d);
+ },
+ debugAlert: (x: ITimelineEvent<'debugAlert', string>) => {
+ alert(x.detail);
+ },
+});
// @ts-ignore
window.nextEvent = timeLine.nextEvent;
export const StoryManager = () => {
- ROUTER_ID.subscribe(() => {
+ ROUTER_ID.subscribe(() => {
if (isStory()) {
- const episode = Math.floor(Number.parseFloat(QUERY_PARAMETER.value.get('episode') ?? '0'));
+ const episode = Math.floor(
+ Number.parseFloat(QUERY_PARAMETER.value.get('episode') ?? '0'),
+ );
timeLine.storyId = episode;
-
+
timeManager.addFn(timeLine.tick, FrameRateLevel.D0);
} else {
timeManager.removeFn(timeLine.tick);
@@ -89,3 +93,39 @@ export const StoryManager = () => {
}
});
};
+
+const convertTime = (totalMilliseconds: number) => {
+ const milliseconds = totalMilliseconds % 1000;
+ const totalSeconds = Math.floor(totalMilliseconds / 1000);
+ const seconds = totalSeconds % 60;
+ const totalMinutes = Math.floor(totalSeconds / 60);
+ const minutes = totalMinutes % 60;
+ const hours = Math.floor(totalMinutes / 60);
+
+ return new Date(0, 0, 0, hours, minutes, seconds, milliseconds);
+};
+
+const convertStory = (x: ITimelineEvent