Merge pull request #114 from tillvit/pump

Pump/Noteskin support

app/index.css

@@ -2743,3 +2743,79 @@ input[type="color"] {
 .animated .po-collapse img {
   transition: 0.15s cubic-bezier(0.61, 0.04, 0.38, 1.02);
 }
+
+.noteskin-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+  gap: 15px;
+  padding: 10px;
+  background: var(--bg-secondary);
+  margin-top: 10px;
+  border-radius: 5px;
+  overflow: auto;
+  height: 330px;
+}
+
+.noteskin-cell {
+  height: 250px;
+  position: relative;
+  border-radius: 5px;
+}
+
+.noteskin-cell img {
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 9 / 21;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.noteskin-label {
+  position: absolute;
+  bottom: 0;
+  padding: 10px;
+  width: 100%;
+  padding-top: 100px;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.7),
+    rgba(0, 0, 0, 0.7) 30%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  border-radius: 5px;
+}
+
+.noteskin-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.noteskin-subtitle {
+  font-style: italic;
+  font-size: 12px;
+}
+
+.noteskin-cell:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
+}
+
+.noteskin-cell:hover img {
+  filter: brightness(1.1);
+}
+
+.noteskin-cell:active {
+  transform: scale(0.98);
+}
+
+.noteskin-cell.selected img {
+  box-shadow: 0 0 5px 2px rgba(24, 147, 195, 0.6);
+  filter: brightness(1.2);
+}
+
+.animated .noteskin-cell,
+.animated .noteskin-cell img {
+  transition: 0.2s cubic-bezier(0.26, 0.64, 0.47, 1.6);
+}

app/src/App.ts

@@ -12,6 +12,8 @@ import "tippy.js/animations/scale-subtle.css"
 import "tippy.js/dist/tippy.css"
 import WebFont from "webfontloader"
 import { ChartManager } from "./chart/ChartManager"
+import { GameTypeRegistry } from "./chart/gameTypes/GameTypeRegistry"
+import { NoteskinRegistry } from "./chart/gameTypes/noteskin/NoteskinRegistry"
 import { Chart } from "./chart/sm/Chart"
 import { ContextMenuPopup } from "./gui/element/ContextMenu"
 import { MenubarManager } from "./gui/element/MenubarManager"
@@ -37,6 +39,8 @@ declare global {
   interface Window {
     app: App
     Parity?: ParityGenerator
+    GameTypeRegistry: GameTypeRegistry
+    NoteskinRegistry: NoteskinRegistry
   }
   interface File {
     path?: string
@@ -59,6 +63,7 @@ interface Version {
 }
 
 export class App {
+  options = Options
   renderer: Renderer
   ticker: Ticker
   stage: Container
@@ -442,5 +447,7 @@ function init() {
     </div>`
   } else {
     window.app = new App()
+    window.GameTypeRegistry = GameTypeRegistry
+    window.NoteskinRegistry = NoteskinRegistry
   }
 }

app/src/chart/ChartManager.ts

@@ -41,6 +41,7 @@ import { FileHandler } from "../util/file-handler/FileHandler"
 import { ChartRenderer } from "./ChartRenderer"
 import { ChartAudio } from "./audio/ChartAudio"
 import { GameTypeRegistry } from "./gameTypes/GameTypeRegistry"
+import { NoteskinRegistry } from "./gameTypes/noteskin/NoteskinRegistry"
 import { GameplayStats } from "./play/GameplayStats"
 import { TIMING_WINDOW_AUTOPLAY } from "./play/StandardTimingWindow"
 import { Chart } from "./sm/Chart"
@@ -425,7 +426,7 @@ export class ChartManager {
           )
         ) {
           if (this.mode != EditMode.Play)
-            this.chartView.doJudgment(
+            this.chartView.doJudgement(
               notedata[this.noteIndex],
               0,
               TIMING_WINDOW_AUTOPLAY
@@ -776,6 +777,25 @@ export class ChartManager {
     Options.play.timingCollection =
       Options.play.defaultTimingCollection[chart.gameType.id] ?? "ITG"
 
+    // Check if the same noteskin is compatible with the current chart
+    const oldType = GameTypeRegistry.getGameType(Options.chart.noteskin.type)
+    const newNoteskin = {
+      type: chart.gameType.id,
+      name: Options.chart.lastNoteskins[chart.gameType.id] ?? "default",
+    }
+    if (oldType) {
+      const oldSkin = NoteskinRegistry.getNoteskinData(
+        oldType,
+        Options.chart.noteskin.name
+      )
+      if (oldSkin?.gameTypes.includes(chart.gameType.id)) {
+        // Use the old note skin
+        newNoteskin.name = oldSkin.id
+      }
+    }
+    Options.chart.noteskin = newNoteskin
+    Options.chart.lastNoteskins[chart.gameType.id] = newNoteskin.name
+
     this.getAssistTickIndex()
     this.chartView = new ChartRenderer(this)
     this.chartView.x = this.app.renderer.screen.width / 2
@@ -1417,16 +1437,18 @@ export class ChartManager {
         if (note.second < this.time) note.gameplay!.hasHit = true
         else break
       }
-      this.loadedChart.gameType.gameLogic.endPlay(this)
+      this.loadedChart.gameType.gameLogic.startPlay(this)
       this.gameStats = new GameplayStats(this)
       this.widgetManager.startPlay()
       this.chartAudio.seek(Math.max(0, this.time) - 1)
       this.chartAudio.play()
+      this.chartView.startPlay()
     } else if (this.mode == EditMode.Record) {
       this.chartAudio.seek(Math.max(0, this.time) - 1)
       this.chartAudio.play()
     } else {
       this.chartView.endPlay()
+
       notedata.forEach(note => (note.gameplay = undefined))
     }
   }

app/src/chart/ChartRenderer.ts

@@ -20,7 +20,7 @@ import { Waveform } from "./component/edit/Waveform"
 import { Notefield } from "./component/notefield/Notefield"
 import { ComboNumber } from "./component/play/ComboNumber"
 import { ErrorBarContainer } from "./component/play/ErrorBarContainer"
-import { JudgmentSprite } from "./component/play/JudgmentSprite"
+import { JudgementSprite } from "./component/play/JudgementSprite"
 import { SelectionTimingEventContainer } from "./component/timing/SelectionTimingEventContainer"
 import { TimingAreaContainer } from "./component/timing/TimingAreaContainer"
 import { TimingTrackContainer } from "./component/timing/TimingTrackContainer"
@@ -56,9 +56,9 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
   private readonly timingTracks: TimingTrackContainer
   private readonly selectedEvents: SelectionTimingEventContainer
   private readonly timingBar: ErrorBarContainer
-  private readonly notefield: Notefield
+  private notefield: Notefield
   private readonly snapDisplay: SnapContainer
-  private readonly judgment: JudgmentSprite
+  private readonly judgement: JudgementSprite
   private readonly combo: ComboNumber
   private readonly selectionBoundary: SelectionBoundary
   private readonly selectionArea: SelectionAreaContainer
@@ -82,7 +82,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     this.snapDisplay = new SnapContainer(this)
     this.previewArea = new PreviewAreaContainer(this)
     this.selectionArea = new SelectionAreaContainer(this)
-    this.judgment = new JudgmentSprite()
+    this.judgement = new JudgementSprite()
     this.combo = new ComboNumber(this)
     this.selectionBoundary = new SelectionBoundary(this)
     this.scrollDebug = new ScrollDebug(this)
@@ -99,7 +99,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
       this.combo,
       this.notefield,
       this.snapDisplay,
-      this.judgment,
+      this.judgement,
       this.selectionBoundary,
       this.scrollDebug
     )
@@ -264,39 +264,40 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     return !!this.selectionBounds
   }
 
-  doJudgment(note: NotedataEntry, error: number, judgment: TimingWindow) {
+  doJudgement(
+    note: NotedataEntry,
+    error: number | null,
+    judgement: TimingWindow
+  ) {
     if (this.chartManager.getMode() == EditMode.Play) {
-      this.judgment.doJudge(error, judgment)
-      this.timingBar.addBar(error, judgment)
+      this.judgement.doJudge(error, judgement)
+      this.timingBar.addBar(error, judgement)
     }
-    this.notefield.onJudgment(note.col, judgment)
+    this.notefield.onJudgement(note.col, judgement)
   }
 
-  activateHold(col: number) {
-    this.notefield.activateHold(col)
-  }
-
-  keyDown(col: number) {
-    this.notefield.keyDown(col)
-  }
-
-  keyUp(col: number) {
-    this.notefield.keyUp(col)
+  startPlay() {
+    this.notefield.startPlay()
   }
 
   endPlay() {
     this.notefield.endPlay()
     this.timingBar.reset()
-    this.judgment.reset()
+    this.judgement.reset()
   }
 
   update() {
+    if (this.destroyed) return
+
     this.speedMult = Options.chart.doSpeedChanges
       ? this.getCurrentSpeedMult()
       : 1
 
-    const firstBeat = this.getEarliestOnScreenBeat()
-    const lastBeat = this.getLastOnScreenBeat()
+    const topBeat = this.getTopOnScreenBeat()
+    const bottomBeat = this.getBottomOnScreenBeat()
+
+    const firstBeat = Math.min(topBeat, bottomBeat)
+    const lastBeat = Math.max(topBeat, bottomBeat)
 
     this.scale.x = Options.chart.zoom
     this.scale.y = Options.chart.zoom
@@ -528,6 +529,19 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     return currentBeat + deltaBeat
   }
 
+  getColumnFromXPos(xp: number) {
+    const gt = this.chart.gameType
+    let lastDist = null
+    for (let i = 0; i < gt.numCols; i++) {
+      const dist = Math.abs(this.notefield.getColumnX(i) - xp)
+      if (lastDist !== null && dist > lastDist) {
+        return i - 1
+      }
+      lastDist = dist
+    }
+    return gt.numCols - 1
+  }
+
   /**
    * Returns the y position of the receptors after zooming.
    *
@@ -581,7 +595,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
    * @memberof ChartRenderer
    */
   getUpperBound(): number {
-    return -this.y / Options.chart.zoom - 32
+    return -this.y / Options.chart.zoom - 64
   }
 
   /**
@@ -594,7 +608,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     return (
       (this.chartManager.app.renderer.screen.height - this.y) /
         Options.chart.zoom +
-      32
+      64
     )
   }
 
@@ -677,7 +691,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     return { beat: 0, value: 1, type: "SCROLLS" }
   }
 
-  getEarliestOnScreenBeat() {
+  getTopOnScreenBeat() {
     if (
       Options.chart.waveform.speedChanges &&
       !Options.chart.CMod &&
@@ -716,7 +730,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     return this.getBeatFromYPos(this.getUpperBound())
   }
 
-  getLastOnScreenBeat() {
+  getBottomOnScreenBeat() {
     if (
       Options.chart.waveform.speedChanges &&
       !Options.chart.CMod &&
@@ -1021,7 +1035,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
    * @return {*}  {boolean}
    * @memberof ChartRenderer
    */
-  selectionTest(object: Container): boolean {
+  selectionTest(object: DisplayObject): boolean {
     if (!this.selectionBounds) return false
     const ab = this.selectionBoundary.getBounds()
     const bb = object.getBounds()
@@ -1072,7 +1086,7 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
       if (Math.abs(snapBeat - newBeat) > Math.abs(newBeat - note.beat)) {
         snapBeat = note.beat
       }
-      const col = Math.round((position.x + 96) / 64)
+      const col = this.getColumnFromXPos(position.x)
       this.chartManager.selection.shift ||= {
         columnShift: 0,
         beatShift: 0,
@@ -1161,6 +1175,19 @@ export class ChartRenderer extends Container<ChartRendererComponent> {
     return this.notefield
   }
 
+  swapNoteskin(name: string) {
+    Options.chart.noteskin.name = name
+    Options.chart.lastNoteskins[this.chart.gameType.id] = name
+    this.reloadNotefield()
+  }
+
+  reloadNotefield() {
+    const newNotefield = new Notefield(this)
+    this.addChildAt(newNotefield, this.children.indexOf(this.notefield))
+    this.notefield.destroy()
+    this.notefield = newNotefield
+  }
+
   getSelectionBounds() {
     return this.selectionBounds
   }

app/src/chart/component/edit/ScrollDebug.ts

@@ -219,17 +219,17 @@ export class ScrollDebug extends Container implements ChartRendererComponent {
       this.renderer.getVisualBeat() + Options.chart.maxDrawBeats
     )
     this.topScreenBeat.y = this.renderer.getYPosFromBeat(
-      this.renderer.getEarliestOnScreenBeat()
+      this.renderer.getTopOnScreenBeat()
     )
     this.bottomScreenBeat.y = this.renderer.getYPosFromBeat(
-      this.renderer.getLastOnScreenBeat()
+      this.renderer.getBottomOnScreenBeat()
     )
     this.topScreenBeatText.y = this.topScreenBeat.y
     this.topScreenBeatText.text =
-      roundDigit(this.renderer.getEarliestOnScreenBeat(), 3) + ""
+      roundDigit(this.renderer.getTopOnScreenBeat(), 3) + ""
     this.bottomScreenBeatText.y = this.bottomScreenBeat.y
     this.bottomScreenBeatText.text =
-      roundDigit(this.renderer.getLastOnScreenBeat(), 3) + ""
+      roundDigit(this.renderer.getBottomOnScreenBeat(), 3) + ""
   }
 
   inBounds(y: number) {

app/src/chart/component/edit/SelectionSprite.ts

@@ -12,6 +12,7 @@ export class SelectionBoundary
     this.renderer = renderer
     this.visible = false
     this.alpha = 0.2
+    this.eventMode = "none"
   }
   update() {
     const bounds = this.renderer.getSelectionBounds()