Progress Bar

A progress bar is essentially an event itself, sharing the same fundamental logic as an Event. However, because a progress bar requires user interaction, the following additional functions are included.

Click

The function executed when the progress bar is clicked.

The run function

Typically, clicking an event triggers the run function, leading to the target scene. Since a progress bar needs to handle click events, a separate click function is implemented.

The run function is triggered only if it is mounted and the progress bar's progress value is 1.

export default {
    ...otherParameters (ignore),
    /**
     * Click event
     *
     * @function click
     * @param {object} save  Save - The story save data
     * @param {object} story  Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
     * @param {object} loader Loader - The Vue node of the event loader
     * @return {Promise<void>}
     */
    async click(save, story, loader) {
        console.log('Save data:\n', save)
        console.log('Story object:\n', story)

        // Increase progress by 10% on click
        this.progress += 0.1
    }
}

Drain Speed leakSpeed

This represents the playback speed of the main video for the progress bar.

Behavior	Value
Normal Playback	1000
Paused	0
Reverse Playback (Normal Speed)	-1000

Note: When this value is negative, it simulates the effect of the progress bar automatically decreasing. Due to browser limitations in playing videos in reverse, the uploaded progress bar video must be a reversed version.

Press

The function triggered when a mouse, touch, or controller button is pressed. Due to browser limitations in handling high-frequency video repositioning, this functionality is simplified: it triggers repeatedly at a frequency of 100ms while the press is held.

export default {
    ...otherParameters (ignore),
    /**
     * Press event
     *
     * @function press
     * @param {object} save  Save - The story save data
     * @param {object} story  Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
     * @param {object} loader Loader - The Vue node of the event loader
     * @return {Promise<void>}
     */
    async press(save, story, loader) {
        console.log('Save data:\n', save)
        console.log('Story object:\n', story)

        // Increase progress by 10% on each press event
        this.progress += 0.1
    }
}

Press End

The function executed when the press ends.

export default {
    ...otherParameters (ignore),
    /**
     * Press end event
     *
     * @function pressend
     * @param {object} save  Save - The story save data
     * @param {object} story  Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
     * @param {object} loader Loader - The Vue node of the event loader
     * @return {Promise<void>}
     */
    async pressend(save, story, loader) {
        console.log('Save data:\n', save)
        console.log('Story object:\n', story)

        // Encourage the user if progress is less than 1
        if (this.progress < 1)
            story.message = `Keep it up~`

        // You can modify the save data or perform other operations here
    }
}