started implementing ModeSelectPage

added AudioSample class
put mode select screen header into components
fix typo in animation.lua

scripts/api/animation.lua

@@ -151,7 +151,7 @@ function AnimationState:stop()
     self.running = false;
 end
 
----Updates this AnimationState and then rendersit, passing on the given ImageParams to each frame.
+---Updates this AnimationState and then renders it, passing on the given ImageParams to each frame.
 ---@param deltaTime number
 ---@param params? ImageParams
 function AnimationState:render(deltaTime, params)

scripts/api/audiosample.lua

@@ -0,0 +1,49 @@
+require "common.class"
+
+---@type AudioSample
+local exclusiveAudioSample = nil
+
+---@class AudioSample
+---@field path string
+---@field exclusive boolean
+---@field loop boolean
+---@field playing boolean
+local AudioSample = {}
+
+---Create new AudioSample instance
+---@param o AudioSample
+---@return AudioSample
+function AudioSample.new(o)
+    assert(o.path, "AudioSample.new() did not receive path to audio sample")
+    o.exclusive = o.exclusive or false
+    o.loop = o.loop or false
+
+    game.LoadSkinSample(o.path)
+
+    return CreateInstance(AudioSample, o)
+end
+
+function AudioSample:play()
+    if not self.playing then
+        if self.exclusive then
+            if exclusiveAudioSample and self ~= exclusiveAudioSample then
+                exclusiveAudioSample:stop()
+            end
+            exclusiveAudioSample = self
+        end
+        self.playing = true
+        game.PlaySample(self.path)
+    end
+end
+
+function AudioSample:stop()
+    if self.playing then
+        if self.exclusive and self == exclusiveAudioSample then
+            exclusiveAudioSample = nil
+        end
+        self.playing = false
+        game.StopSample(self.path)
+    end
+end
+
+return AudioSample

scripts/components/headers/modeSelectHeader.lua

@@ -0,0 +1,33 @@
+require "common.globals"
+local Dim = require "common.dimensions"
+local Image = require "api.image"
+
+local BAR_ALPHA = 191
+local HEADER_HEIGHT = 100
+
+local titleImage = Image.new("titlescreen/title.png")
+titleImage.centered = true
+titleImage:setPosition(Dim.design.width / 2, HEADER_HEIGHT / 2)
+
+local function drawHeader()
+    gfx.BeginPath()
+    gfx.FillColor(0, 0, 0, BAR_ALPHA)
+    gfx.Rect(0, 0, Dim.design.width, HEADER_HEIGHT)
+    gfx.Fill()
+
+    titleImage:render()
+end
+
+local function draw()
+    gfx.Save()
+
+    gfx.ResetTransform()
+
+    Dim.transformToScreenSpace()
+
+    drawHeader()
+
+    gfx.Restore()
+end
+
+return {draw = draw}

scripts/titlescreen/pages/modeselect/modeselectpage.lua

@@ -0,0 +1,60 @@
+require "common.class"
+local Dim = require "common.dimensions"
+local Lang = require "language.call"
+local AudioSample = require "api.audiosample"
+local Animation = require "api.animation"
+local Page = require "api.page.page"
+
+local Footer = require "components.footer"
+local Header = require "components.headers.modeSelectHeader"
+
+local crew = game.GetSkinSetting("single_idol")
+
+---@class ModeSelectPage: Page
+---@field _idolAnimationState AnimationState
+local ModeSelectPage = {
+    images = {
+        selectorBgImage = gfx.CreateSkinImage("titlescreen/selector_bg.png", 0),
+        selectorArrowsImage = gfx.CreateSkinImage("titlescreen/selector_arrows.png", 0),
+        unselectedButtonImage = gfx.CreateSkinImage("titlescreen/unselected_button.png", 0),
+        selectedButtonBgImage = gfx.CreateSkinImage("titlescreen/selected_button_bg.png", 0),
+        selectedButtonOverImage = gfx.CreateSkinImage("titlescreen/selected_button_over.png", 0)
+    },
+    anims = {
+        idolAnimation = Animation.new("crew/anim/" .. crew, {
+            fps = 30, loop = true,
+            centered = true, x = Dim.design.width / 2, y = Dim.design.height / 2,
+            width = Dim.design.width, height = Dim.design.height,
+        })
+    },
+    audiosamples = {
+        bgm = AudioSample.new{path = "titlescreen/bgm.wav", exclusive = true, loop = true},
+        cursorChange = AudioSample.new{path = "titlescreen/cursor_change.wav"},
+        cursorSelect = AudioSample.new{path = "titlescreen/cursor_select.wav"}
+    },
+    labels = {
+        selectorDescriptionLabel = gfx.CreateLabel(Lang.Start.desc, 22, 0),
+        selectorLegendScrollLabel = gfx.CreateLabel(Lang.Start.sc, 20, 0),
+        selectorLegendSelectLabel = gfx.CreateLabel(Lang.Start.st3, 20, 0)
+    }
+}
+
+function ModeSelectPage.new(o)
+    local this = CreateInstance(ModeSelectPage, o, Page)
+
+    this._idolAnimationState = this.anims.idolAnimation:start()
+    this.audiosamples.bgm:play()
+
+    return this
+end
+
+function ModeSelectPage:drawBackground(deltaTime)
+    self._idolAnimationState:render(deltaTime)
+end
+
+function ModeSelectPage:drawForeground(deltaTime)
+    Header.draw()
+    Footer.draw(deltaTime)
+end
+
+return ModeSelectPage