Monogatari Documentation
HomepageGitHubDiscordTwitter
v2.1.0
v2.1.0
  • Welcome
  • Getting Started
    • Step 1: Setup Your Environment
    • Step 2: Download Monogatari
    • Step 3: Get Familiarized
    • Step 4: Make Your First Visual Novel
  • Upgrading from v1.4.1
  • F.A.Q.
  • Diagnosing Errors
  • Building Blocks
    • Script & Labels
    • Characters
    • Variables & Data Storage
    • Actions
      • Life Cycle
    • Components
      • Life Cycle
      • Built-in Properties
      • Built-in Functions
  • Script Actions
    • Choices
    • Clear
    • Conditionals
    • Dialogs
    • End
    • Gallery
    • Hide Canvas
    • Hide Character
    • Hide Character Layer
    • Hide Image
    • Hide Particles
    • Hide Video
    • Input
    • Functions
    • Jump
    • Next
    • Placeholder
    • Play Music
    • Play Sound
    • Play Voice
    • Show Canvas
    • Show Background
    • Show Character
    • Show Character Layer
    • Show Image
    • Show Message
    • Show Notification
    • Show Particles
    • Show Scene
    • Show Video
    • Stop Music
    • Stop Sound
    • Stop Voice
    • Vibrate
    • Wait
  • Components
    • Credits Screen
    • Quick Menu
    • Loading Screen
    • Main Screen
    • Choice Container
    • Save Slot
    • Text-Box
  • Configuration Options
    • Game Configuration
      • Asset Preloading
      • Internationalization
      • Saving
      • Skip Main Menu
      • Storage
    • Player Preferences
    • Split Files
  • Style & Design
    • Responsiveness
    • CSS Classes
    • HTML Data Attributes
    • Icons
    • Image Menus
  • Releasing Your Game
    • Chrome App
    • Desktop App
    • Mobile
    • Web
  • Advanced: Monogatari Development
    • Core Libraries
      • Artemis
      • Kayros
      • Pandora
    • Actions
    • Components
    • Translations
    • Events
  • Releases
    • v2.0.0.alpha.8
    • v2.0.0.alpha.7
    • v2.0.0.alpha.6
    • v2.0.0.alpha.5
    • v2.0.0.alpha.4
    • v2.0.0.alpha.3
Powered by GitBook
On this page

Was this helpful?

  1. Components

Save Slot

PreviousChoice ContainerNextText-Box

Last updated 5 years ago

Was this helpful?

Component Structure

The following code is this component's initial HTML structure. Remember you can change this structure any time by using the .

let background = '';

const hasImage = this.props.image && this.engine.asset ('scenes', this.props.image);

if (hasImage) {
	background = `url(${this.engine.setting ('AssetsPath').root}/${this.engine.setting ('AssetsPath').scenes}/${this.engine.asset ('scenes', this.props.image)})`;
} else if (this.data.game.state.scene) {
	background = this.data.game.state.scene;

	if (background.indexOf (' with ') > -1) {
		background = Text.prefix (' with ', background);
	}

	background = Text.suffix ('show scene', background);

} else if (this.data.game.state.background) {
	background = this.data.game.state.background;

	if (background.indexOf (' with ') > -1) {
		background = Text.prefix (' with ', background);
	}

	background = Text.suffix ('show background', background);
}
return `
	<button data-delete='${this.props.slot}'><span class='fas fa-times'></span></button>
	<small class='badge'>${this.props.name}</small>
	<div data-content="background" style="${hasImage ? 'background-image' : 'background'}: ${background}"></div>
	<figcaption>${moment (this.props.date).format ('MMMM Do YYYY, h:mm:ss a')}</figcaption>
`;

template() component built-in function