Minimal working multiplayer implementation

Caddyfile

@@ -2,6 +2,7 @@
   reverse_proxy /beatmaps/* https://assets.ppy.sh {
       header_up Host {upstream_hostport}
   }
+
   header           >Cache-Control "public, max-age=3600"
   reverse_proxy http://localhost:5173
 }

packages/core/package.json

@@ -18,12 +18,13 @@
     }
   },
   "dependencies": {
-    "audiobuffer-to-wav": "^1.0.0",
-    "bezier-easing": "^2.1.0",
-    "unzipit": "^1.4.3",
     "@osucad/framework": "workspace:*",
+    "@osucad/multiplayer": "workspace:*",
     "@osucad/resources": "workspace:*",
-    "@osucad/multiplayer": "workspace:*"
+    "audiobuffer-to-wav": "^1.0.0",
+    "bezier-easing": "^2.1.0",
+    "socket.io-client": "^4.8.1",
+    "unzipit": "^1.4.3"
   },
   "devDependencies": {
     "@types/audiobuffer-to-wav": "^1.0.4"

packages/core/src/beatmap/Beatmap.ts

@@ -57,6 +57,7 @@ export class Beatmap<T extends HitObject = HitObject> extends SharedStaticObject
 
   override get childObjects(): readonly SharedStructure<any>[] {
     return [
+      this.beatmapInfo,
       this.controlPoints,
       this.hitObjects,
     ];
@@ -116,7 +117,7 @@ export class Beatmap<T extends HitObject = HitObject> extends SharedStaticObject
 
   override initializeFromSummary(summary: any): void {
     this.beatmapInfo.initializeFromSummary(summary.beatmapInfo);
-    this.hitObjects.initializeFromSummary(summary.hitObjects);
     this.controlPoints.initializeFromSummary(summary.controlPoints);
+    this.hitObjects.initializeFromSummary(summary.hitObjects);
   }
 }

packages/core/src/beatmap/BeatmapInfo.ts

@@ -281,10 +281,24 @@ export class BeatmapInfo extends SharedObject {
 
   path?: string;
 
+  override createSummary() {
+    return {
+      ...super.createSummary(),
+      difficulty: this.difficulty.createSummary(),
+      metadata: this.metadata.createSummary(),
+    };
+  }
+
+  override initializeFromSummary(summary: any) {
+    super.initializeFromSummary(summary);
+    this.difficulty.initializeFromSummary(summary.difficulty);
+    this.metadata.initializeFromSummary(summary.metadata);
+  }
+
   override get childObjects(): readonly SharedStructure<any>[] {
     return [
-      // this.difficulty,
-      // this.metadata
+      this.difficulty,
+      this.metadata,
     ];
   }
 }

packages/core/src/controlPoints/ControlPoint.ts

@@ -1,4 +1,4 @@
-import type { SharedProperty } from '@osucad/multiplayer';
+import type { ObjectSummary, SharedProperty } from '@osucad/multiplayer';
 import type { IControlPoint } from './IControlPoint';
 import { Action, Comparer } from '@osucad/framework';
 import { SharedObject } from '@osucad/multiplayer';
@@ -20,7 +20,8 @@ export abstract class ControlPoint extends SharedObject implements IControlPoint
 
   protected constructor(time: number) {
     super();
-    this.#time = this.property('time', time);
+
+    this.time = time;
   }
 
   abstract get controlPointName(): string;
@@ -30,7 +31,7 @@ export abstract class ControlPoint extends SharedObject implements IControlPoint
   raiseChanged() {
   }
 
-  readonly #time: SharedProperty<number>;
+  readonly #time = this.property('time', 0);
 
   get timeBindable() {
     return this.#time.bindable;
@@ -60,4 +61,8 @@ export abstract class ControlPoint extends SharedObject implements IControlPoint
     super.onPropertyChanged(property, oldValue, submitEvents);
     this.changed.emit(this);
   }
+
+  override initializeFromSummary(summary: ObjectSummary) {
+    super.initializeFromSummary(summary);
+  }
 }

packages/core/src/controlPoints/ControlPointList.ts

@@ -22,6 +22,9 @@ export class ControlPointList<T extends ControlPoint> extends ObservableSortedLi
   }
 
   controlPointIndexAt(time: number): number {
+    if (this.length === 0)
+      return -1;
+
     let index = this.binarySearch({ time } as unknown as T);
 
     if (index >= 0)

packages/core/src/controlPoints/DifficultyPoint.ts

@@ -1,11 +1,10 @@
-import type { SharedProperty } from '@osucad/multiplayer';
 import { ControlPoint } from './ControlPoint';
 
 export class DifficultyPoint extends ControlPoint {
   constructor(time: number = 0, sliderVelocity: number = 1) {
     super(time);
 
-    this.#sliderVelocity = this.property('sliderVelocity', sliderVelocity);
+    this.sliderVelocity = sliderVelocity;
   }
 
   static default = new DifficultyPoint(1);
@@ -14,7 +13,7 @@ export class DifficultyPoint extends ControlPoint {
     return 'Difficulty Point';
   }
 
-  readonly #sliderVelocity: SharedProperty<number>;
+  readonly #sliderVelocity = this.property('sliderVelocity', 1);
 
   get sliderVelocityBindable() {
     return this.#sliderVelocity.bindable;

packages/core/src/controlPoints/EffectPoint.ts

@@ -1,4 +1,3 @@
-import type { SharedProperty } from '@osucad/multiplayer';
 import { ControlPoint } from './ControlPoint';
 
 export interface EffectPointPatch {
@@ -9,7 +8,7 @@ export class EffectPoint extends ControlPoint {
   constructor(time: number = 0, kiaiMode: boolean = false) {
     super(time);
 
-    this.#kiaiMode = this.property('kiaiMode', kiaiMode);
+    this.kiaiMode = kiaiMode;
   }
 
   static default = new EffectPoint(0);
@@ -18,7 +17,7 @@ export class EffectPoint extends ControlPoint {
     return 'Effect Point';
   }
 
-  readonly #kiaiMode: SharedProperty<boolean>;
+  readonly #kiaiMode = this.property('kiaiMode', false);
 
   get kiaiModeBindable() {
     return this.#kiaiMode.bindable;

packages/core/src/controlPoints/TimingPoint.ts

@@ -1,4 +1,3 @@
-import type { SharedProperty } from '@osucad/multiplayer';
 import { ControlPoint } from './ControlPoint';
 
 export class TimingPoint extends ControlPoint {
@@ -9,9 +8,8 @@ export class TimingPoint extends ControlPoint {
   ) {
     super(time);
 
-    this.#beatLength = this.property('beatLength', beatLength);
-    this.#meter = this.property('meter', meter);
-    this.#omitFirstBarLine = this.property('omitFirstBarLine', false);
+    this.beatLength = beatLength;
+    this.meter = meter;
   }
 
   static readonly DEFAULT_BEAT_LENGTH = 60_000 / 120;
@@ -22,7 +20,7 @@ export class TimingPoint extends ControlPoint {
     return 'Timing Point';
   }
 
-  readonly #beatLength: SharedProperty<number>;
+  readonly #beatLength = this.property('beatLength', TimingPoint.DEFAULT_BEAT_LENGTH);
 
   get beatLengthBindable() {
     return this.#beatLength.bindable;
@@ -48,7 +46,7 @@ export class TimingPoint extends ControlPoint {
     this.beatLength = 60_000 / value;
   }
 
-  readonly #meter: SharedProperty<number>;
+  readonly #meter = this.property('meter', 4);
 
   get meterBindable() {
     return this.#meter.bindable;
@@ -63,7 +61,7 @@ export class TimingPoint extends ControlPoint {
     this.raiseChanged();
   }
 
-  readonly #omitFirstBarLine: SharedProperty<boolean>;
+  readonly #omitFirstBarLine = this.property('omitFirstBarLine', false);
 
   get#omitFirstBarLineBindable() {
     return this.#omitFirstBarLine.bindable;

packages/core/src/editor/EditorBeatmap.ts

@@ -40,10 +40,14 @@ export class EditorBeatmap<T extends HitObject = HitObject> extends Component {
     return true;
   }
 
+  protected createUpdateHandler() {
+    return new UpdateHandler(this.beatmap);
+  }
+
   protected override async loadAsync(dependencies: ReadonlyDependencyContainer): Promise<void> {
     await super.loadAsync(dependencies);
 
-    this.addInternal(this.updateHandler = new UpdateHandler(this.beatmap));
+    this.addInternal(this.updateHandler = this.createUpdateHandler());
 
     await Promise.all([
       this.loadTrack(dependencies.resolve(IResourcesProvider)),

packages/core/src/editor/index.ts

@@ -7,5 +7,6 @@ export * from './EditorBeatmap';
 export * from './EditorClock';
 export * from './EditorNavigation';
 export * from './EditorSafeArea';
+export * from './multiplayer';
 export * from './screens';
 export * from './ui';

packages/core/src/editor/multiplayer/MultiplayerClient.ts

@@ -0,0 +1,102 @@
+import type { ClientMessages, IMutation, InitialStateServerMessage, MutationContext, MutationsSubmittedMessage, ServerMessages } from '@osucad/multiplayer';
+import type { Socket } from 'socket.io-client';
+import type { Beatmap } from '../../beatmap/Beatmap';
+import type { FileStore } from '../../beatmap/io/FileStore';
+import { Component } from '@osucad/framework';
+import { MutationSource, UpdateHandler } from '@osucad/multiplayer';
+import { io } from 'socket.io-client';
+import { SimpleFile } from '../../beatmap/io/SimpleFile';
+import { StaticFileStore } from '../../beatmap/io/StaticFileStore';
+import { RulesetStore } from '../../rulesets/RulesetStore';
+
+export class MultiplayerClient extends Component {
+  constructor(url: string) {
+    super();
+    this.ws = io(url, {
+      autoConnect: false,
+      transports: ['websocket'],
+    });
+
+    this.ws.on('mutationsSubmitted', msg => this.mutationSubmitted(msg));
+  }
+
+  updateHandler!: UpdateHandler;
+
+  readonly ws: Socket<ServerMessages, ClientMessages>;
+
+  clientId!: number;
+
+  beatmap!: Beatmap<any>;
+
+  fileStore!: FileStore;
+
+  protected override loadComplete() {
+    super.loadComplete();
+
+    this.scheduler.addDelayed(() => this.flush(), 25, true);
+  }
+
+  async connect() {
+    this.ws.connect();
+
+    const initialState = await new Promise<InitialStateServerMessage>((resolve, reject) => {
+      this.ws.once('connect_error', reject);
+      this.ws.once('initialData', resolve);
+    });
+
+    this.clientId = initialState.clientId;
+
+    const rulesetInfo = RulesetStore.getByShortName(initialState.beatmap.ruleset);
+    if (!rulesetInfo || !rulesetInfo.available)
+      throw new Error(`Ruleset "${initialState.beatmap.ruleset}" not available`);
+
+    const ruleset = rulesetInfo.createInstance();
+
+    this.beatmap = ruleset.createBeatmap();
+    this.beatmap.beatmapInfo.ruleset = rulesetInfo;
+    this.beatmap.initializeFromSummary(initialState.beatmap.data);
+
+    this.updateHandler = new UpdateHandler(this.beatmap);
+    this.updateHandler.attach(this.beatmap);
+
+    const assets = initialState.assets.map(it => new SimpleFile(
+      it.path,
+      () => fetch(`http://localhost:3000/assets/${it.id}`).then(it => it.arrayBuffer()),
+    ));
+
+    this.fileStore = new StaticFileStore(assets);
+
+    this.updateHandler.commandApplied.addListener(mutation => this.onLocalMutation(mutation));
+  }
+
+  private mutationSubmitted(msg: MutationsSubmittedMessage) {
+    const ctx: MutationContext = {
+      version: msg.version,
+      source: msg.clientId === this.clientId
+        ? MutationSource.Ack
+        : MutationSource.Remote,
+    };
+
+    console.log(msg.mutations);
+
+    for (const mutation of msg.mutations)
+      this.updateHandler.apply(mutation, ctx);
+  }
+
+  bufferedMutations: IMutation[] = [];
+
+  onLocalMutation(mutation: IMutation) {
+    this.bufferedMutations.push(mutation);
+  }
+
+  flush() {
+    if (this.bufferedMutations.length === 0)
+      return;
+
+    this.ws.emit('submitMutations', {
+      version: this.updateHandler.version++,
+      mutations: this.bufferedMutations,
+    });
+    this.bufferedMutations = [];
+  }
+}

packages/core/src/editor/multiplayer/MultiplayerEditor.ts

@@ -0,0 +1,15 @@
+import type { ReadonlyDependencyContainer } from '@osucad/framework';
+import type { MultiplayerEditorBeatmap } from './MultiplayerEditorBeatmap';
+import { Editor } from '../Editor';
+
+export class MultiplayerEditor extends Editor {
+  constructor(editorBeatmap: MultiplayerEditorBeatmap) {
+    super(editorBeatmap);
+  }
+
+  protected override async loadAsync(dependencies: ReadonlyDependencyContainer): Promise<void> {
+    this.addInternal((this.editorBeatmap as MultiplayerEditorBeatmap).client);
+
+    return await super.loadAsync(dependencies);
+  }
+}

packages/core/src/editor/multiplayer/MultiplayerEditorBeatmap.ts

@@ -0,0 +1,15 @@
+import type { UpdateHandler } from '@osucad/multiplayer';
+import type { MultiplayerClient } from './MultiplayerClient';
+import { EditorBeatmap } from '../EditorBeatmap';
+
+export class MultiplayerEditorBeatmap extends EditorBeatmap {
+  constructor(
+    readonly client: MultiplayerClient,
+  ) {
+    super(client.beatmap, client.fileStore);
+  }
+
+  protected override createUpdateHandler(): UpdateHandler {
+    return this.client.updateHandler;
+  }
+}

packages/core/src/editor/multiplayer/index.ts

@@ -0,0 +1,3 @@
+export * from './MultiplayerClient';
+export * from './MultiplayerEditor';
+export * from './MultiplayerEditorBeatmap';

packages/core/src/rulesets/Ruleset.ts

@@ -1,5 +1,4 @@
 import type { IKeyBinding, NoArgsConstructor } from '@osucad/framework';
-import type { Beatmap } from '../beatmap/Beatmap';
 import type { BeatmapConverter } from '../beatmap/BeatmapConverter';
 import type { IBeatmap } from '../beatmap/IBeatmap';
 import type { StableHitObjectParser } from '../beatmap/io/StableHitObjectParser';
@@ -12,6 +11,7 @@ import type { BeatmapVerifier } from '../verifier/BeatmapVerifier';
 import type { DifficultyCalculator } from './difficulty/DifficultyCalculator';
 import type { DrawableRuleset } from './DrawableRuleset';
 import type { EditorRuleset } from './EditorRuleset';
+import { Beatmap } from '../beatmap/Beatmap';
 import { RulesetInfo } from './RulesetInfo';
 
 export abstract class Ruleset {
@@ -23,6 +23,10 @@ export abstract class Ruleset {
     return null;
   }
 
+  createBeatmap(): Beatmap<any> {
+    return new Beatmap();
+  }
+
   abstract getHitObjectClasses(): Record<string, NoArgsConstructor<HitObject>>;
 
   abstract createDrawableRulesetWith(beatmap: IBeatmap): DrawableRuleset;

packages/core/src/rulesets/RulesetStore.ts

@@ -29,4 +29,8 @@ export class RulesetStore {
   static getByLegacyId(legacyId: number) {
     return this.#legacyRulesets.get(legacyId) ?? null;
   }
+
+  static getByShortName(shortName: string) {
+    return this.#rulesets.get(shortName);
+  }
 }