finish storyboard parsing, start rendering storyboard

src/Elements/RandomBackground/Background.ts

@@ -12,7 +12,6 @@ export class Background extends PIXI.Sprite {
         this.texture = texture;
         this.visible = false;
         this.anchor.set(0.5, 0.5);
-
     }
 
     public show() {
@@ -31,6 +30,8 @@ export class Background extends PIXI.Sprite {
 }
 
 export class BackgroundContainer extends PIXI.Container {
+    public destroying = false;
+
     public constructor() {
         super();
         this.visible = false;
@@ -40,26 +41,26 @@ export class BackgroundContainer extends PIXI.Container {
         this.visible = true;
         for (let i = 0; i < this.children?.length; i++) {
             let child = this.children[i];
-            if (child instanceof Background) {
+            if (child instanceof Background || child instanceof BackgroundContainer) {
                 child.show();
             }
         }
     }
 
     public destroy(options?: DestroyOptions) {
+        this.destroying = true;
         for (let i = 0; i < this.children?.length; i++) {
             let child = this.children[i];
-            if (child instanceof Background) {
+            if (child instanceof Background || child instanceof BackgroundContainer) {
                 if (!child.destroyed && !child.destroying) {
                     child.destroy(options);
                 }
             }
         }
         setTimeout(() => {
             super.destroy(options);
+            this.destroying = false;
         }, Background.fadeOutDuration);
         this.zIndex = 1;
     }
-
-
 }

src/Elements/RandomBackground/RandomBackground.ts

@@ -6,6 +6,7 @@ import {Background, BackgroundContainer} from "./Background";
 import {EventTypes} from "../../Util/Beatmap/Data/Sections/Events/EventTypes";
 import {EventVideo} from "../../Util/Beatmap/Data/Sections/Events/EventVideo";
 import {EventBackground} from "../../Util/Beatmap/Data/Sections/Events/EventBackground";
+import {StoryBoard} from "./StoryBoard";
 
 export class RandomBackground extends Screen {
 
@@ -61,6 +62,7 @@ export class RandomBackground extends Screen {
                     }
                 }
             }
+            bgContainer.addChild(new StoryBoard(audio.beatmap))
             if (background || backgroundVideo) {
                 this.setBGContainer(bgContainer);
             }

src/Elements/RandomBackground/StoryBoard.ts

@@ -0,0 +1,47 @@
+import * as PIXI from "pixi.js";
+import {BackgroundContainer} from "./Background";
+import {Main} from "../../main";
+import {BeatmapData} from "../../Util/Beatmap/Data/BeatmapData";
+import {DestroyOptions} from "pixi.js";
+import {EventSprite} from "../../Util/Beatmap/Data/Sections/Events/Storyboard/EventSprite";
+import {StoryboardCommand} from "../../Util/Beatmap/Data/Sections/Events/Storyboard/Commands/StoryboardCommand";
+
+export class StoryBoard extends BackgroundContainer {
+    private beatmap: BeatmapData;
+    private startTime = Date.now();
+
+    public constructor(beatmap: BeatmapData) {
+        super();
+        this.interactiveChildren = false;
+        this.interactive = false;
+        this.beatmap = beatmap;
+        Main.app.ticker.add(this.Update, this);
+        for (let i = 0; i < beatmap.Events.Events.length; i++) {
+            let event = beatmap.Events.Events[i];
+            if (event instanceof EventSprite && event.texture){
+                let sprite = PIXI.Sprite.from(event.texture);
+                sprite.visible = false;
+                event.sprite = sprite;
+                this.addChild(sprite);
+            }
+        }
+    }
+
+
+    public Update() {
+        let currentTime = Date.now() - this.startTime;
+        for (let i = 0; i < this.beatmap.Events.Events.length; i++) {
+            let event = this.beatmap.Events.Events[i];
+            if (event instanceof StoryboardCommand) {
+                if (currentTime > event.startTime) {
+
+                }
+            }
+        }
+    }
+
+    public destroy(options?: DestroyOptions) {
+        Main.app.ticker.remove(this.Update, this);
+        super.destroy(options);
+    }
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/StoryboardCommand.ts

@@ -1,5 +1,18 @@
 import {CommandType} from "./CommandType";
+import {EasingFunction} from "../../../../../../TweenWrapper/EasingFunction";
+import {EventStoryboard} from "../EventStoryboard";
+import {Event} from "../../Event";
 
-export abstract class StoryboardCommand {
+export abstract class StoryboardCommand extends Event{
     public abstract commandType: CommandType;
+
+    public parentStoryboardObject!: EventStoryboard;
+
+    /**
+     * indicates if the command should "accelerate". See <a href="http://easings.net/">Easing Functions Cheat Sheet</a>.
+     */
+    public easing: (amount: number) => number = EasingFunction.None;
+
+    public endTime: number = 0;
+
 }

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/ColorCommand.ts

@@ -0,0 +1,10 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+import * as PIXI from "pixi.js";
+
+export class ColorCommand extends StoryboardCommand {
+    public commandType = CommandType.Color;
+
+    public startColor: PIXI.Color = new PIXI.Color("white");
+    public endColor: PIXI.Color = new PIXI.Color("white");
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/FadeCommand.ts

@@ -3,6 +3,13 @@ import {CommandType} from "../CommandType";
 
 export class FadeCommand extends StoryboardCommand {
     public commandType = CommandType.Fade;
-
+    /**
+     * the value at starttime
+     */
+    public startOpacity = 1;
+    /**
+     * the value at endtime
+     */
+    public endOpacity = 1;
 
 }

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/LoopCommand.ts

@@ -0,0 +1,12 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+export class LoopCommand extends StoryboardCommand {
+    public commandType = CommandType.Loop;
+
+    public readonly endTime = -1;
+
+    public loopCount: number = 1;
+
+    public childCommands: StoryboardCommand[] = [];
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/MoveCommand.ts

@@ -0,0 +1,10 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+import * as PIXI from "pixi.js";
+
+export class MoveCommand extends StoryboardCommand {
+    public commandType = CommandType.Move;
+
+    public startPos: PIXI.PointData = new PIXI.Point(0, 0);
+    public endPos: PIXI.PointData = new PIXI.Point(0, 0);
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/MoveXCommand.ts

@@ -0,0 +1,9 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+export class MoveXCommand extends StoryboardCommand {
+    public commandType = CommandType.MoveX;
+
+    public startX: number = 0;
+    public endX: number = 0;
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/MoveYCommand.ts

@@ -0,0 +1,9 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+export class MoveYCommand extends StoryboardCommand {
+    public commandType = CommandType.MoveY;
+
+    public startY: number = 0;
+    public endY: number = 0;
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/ParameterCommand.ts

@@ -0,0 +1,13 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+export class ParameterCommand extends StoryboardCommand {
+    public commandType = CommandType.Parameter;
+    public parameter!: ParameterCommandType;
+}
+
+export enum ParameterCommandType{
+    HorizontalFlip = "H",
+    VerticalFlip = "F",
+    UseAdditiveBlending = "A"
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/RotateCommand.ts

@@ -0,0 +1,15 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+export class RotateCommand extends StoryboardCommand {
+    public commandType = CommandType.Rotate;
+
+    /**
+     * rotation in radians
+     */
+    public startRotation: number = 0;
+    /**
+     * rotation in radians
+     */
+    public endRotation: number = 0;
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/ScaleCommand.ts

@@ -0,0 +1,9 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+export class ScaleCommand extends StoryboardCommand {
+    public commandType = CommandType.Scale;
+
+    public startScale: number = 1;
+    public endScale: number = 1;
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/TriggerCommand.ts

@@ -0,0 +1,8 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+
+// will not be supported for now
+export class TriggerCommand extends StoryboardCommand {
+    public commandType = CommandType.Trigger;
+    public childCommands: StoryboardCommand[] = [];
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/Commands/impl/VectorScaleCommand.ts

@@ -0,0 +1,10 @@
+import {StoryboardCommand} from "../StoryboardCommand";
+import {CommandType} from "../CommandType";
+import * as PIXI from "pixi.js";
+
+export class VectorScaleCommand extends StoryboardCommand {
+    public commandType = CommandType.VectorScale;
+
+    public startScale: PIXI.PointData = new PIXI.Point(1, 1);
+    public endScale: PIXI.PointData = new PIXI.Point(1, 1);
+}

src/Util/Beatmap/Data/Sections/Events/Storyboard/EventSprite.ts

@@ -4,6 +4,6 @@ import * as PIXI from "pixi.js";
 
 export class EventSprite extends EventStoryboard {
     public eventType = EventTypes.SPRITE;
-
+    public sprite!: PIXI.Sprite;
     public texture?: PIXI.Texture;
 }