Add preview options (#55)

Author: NonSpicyBurrito

preview/src/engine/previewData/archetypes/BpmChange.mts

@@ -1,4 +1,5 @@
 import { EngineArchetypeDataName } from '@sonolus/core'
+import { options } from '../../configuration/options.mjs'
 import { print } from '../print.mjs'
 import { line, skin } from '../skin.mjs'
 
@@ -9,6 +10,8 @@ export class BpmChange extends Archetype {
     })
 
     render() {
+        if (!options.previewBpm) return
+
         line(skin.sprites.bpmChangeLine, this.import.beat, 0.5)
 
         print(

preview/src/engine/previewData/archetypes/Stage.mts

@@ -1,3 +1,4 @@
+import { options } from '../../configuration/options.mjs'
 import { chart } from '../chart.mjs'
 import { panel } from '../panel.mjs'
 import { print } from '../print.mjs'
@@ -65,18 +66,24 @@ export class Stage extends Archetype {
     }
 
     renderBeats() {
+        if (!options.previewBeat) return
+
         for (let i = 0; i <= Math.floor(chart.beats); i++) {
             line(skin.sprites.beatLine, i, i % 4 === 0 ? 0.25 : 0.125)
         }
     }
 
     printTimes() {
+        if (!options.previewTime) return
+
         for (let i = 1; i <= Math.floor(chart.duration); i++) {
             print(i, i, PrintFormat.Time, 0, PrintColor.Neutral, 'left')
         }
     }
 
     printMeasures() {
+        if (!options.previewMeasure) return
+
         for (let i = 4; i <= Math.floor(chart.beats); i += 4) {
             print(
                 i / 4 + 1,

preview/src/engine/previewData/archetypes/TimeScaleChange.mts

@@ -1,4 +1,5 @@
 import { EngineArchetypeDataName } from '@sonolus/core'
+import { options } from '../../configuration/options.mjs'
 import { print } from '../print.mjs'
 import { line, skin } from '../skin.mjs'
 
@@ -9,6 +10,8 @@ export class TimeScaleChange extends Archetype {
     })
 
     render() {
+        if (!options.previewTimeScale) return
+
         line(skin.sprites.timeScaleChangeLine, this.import.beat, 0.5)
 
         print(

preview/src/engine/previewData/panel.mts

@@ -1,8 +1,11 @@
+import { options } from '../configuration/options.mjs'
 import { chart } from './chart.mjs'
 
 export const panel = {
     w: 20,
-    h: 2,
+    get h() {
+        return 2 / options.previewVerticalScale
+    },
 
     get count() {
         return Math.ceil(chart.duration / this.h)

shared/src/engine/configuration/options.mts

@@ -132,4 +132,44 @@ export const optionsDefinition = {
         type: 'toggle',
         def: 1,
     },
+    previewVerticalScale: {
+        name: Text.PreviewScaleVertical,
+        scope: 'Sekai',
+        type: 'slider',
+        def: 1,
+        min: 0.5,
+        max: 2,
+        step: 0.05,
+        unit: Text.PercentageUnit,
+    },
+    previewMeasure: {
+        name: Text.PreviewMeasure,
+        scope: 'Sekai',
+        type: 'toggle',
+        def: 1,
+    },
+    previewBeat: {
+        name: Text.PreviewBeat,
+        scope: 'Sekai',
+        type: 'toggle',
+        def: 1,
+    },
+    previewTime: {
+        name: Text.PreviewTime,
+        scope: 'Sekai',
+        type: 'toggle',
+        def: 1,
+    },
+    previewBpm: {
+        name: Text.PreviewBpm,
+        scope: 'Sekai',
+        type: 'toggle',
+        def: 1,
+    },
+    previewTimeScale: {
+        name: Text.PreviewTimescale,
+        scope: 'Sekai',
+        type: 'toggle',
+        def: 1,
+    },
 } satisfies Record<string, EngineConfigurationOption>