@strixit/storyscript 0.0.0-stage → 1.0.0

package/src/UI/Components/Encounter/Trade/Stock.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="stock">{{ stock.text }}</div>
+  <p v-if="stock.items?.length === 0" class="trade-empty">{{ stock.emptyText }}</p>
+  <ul v-if="stock.items?.length > 0 && !confirm" class="list-unstyled">
+    <li v-for="item of stock.items" class="inline">
+      <button :disabled="!tradeService.canPay(item, buyer, seller)"
+              class="btn btn-success"
+              type="button"
+              @click="buyOrSell(item)">
+        {{ tradeService.displayPrice(item, tradeService.actualPrice(item, buyer, seller)) }}
+      </button>
+    </li>
+  </ul>
+
+  <div v-if="confirm">
+    <p v-html="texts.format(stock.confirmationText, [confirm.name, tradeService.actualPrice(confirm, buyer, seller).toString(), texts.currency])"></p>
+    <ul class="list-unstyled">
+      <li class="inline">
+        <button class="btn btn-primary" type="button" @click="cancel()">{{ texts.cancelBuy }}</button>
+        <button class="btn btn-warning" type="button" @click="buyOrSell(confirm)">
+          {{ texts.confirmBuy }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {ICharacter, IItem, IStock, ITrade, useStateStore} from 'storyScript';
+import {ref} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, tradeService} = store.services;
+
+const {stock, buyer, seller} = defineProps<{
+  buyer: ITrade | ICharacter,
+  seller: ITrade | ICharacter,
+  stock: IStock
+}>();
+
+const confirm = ref<IItem>(null);
+
+const cancel = (): void => confirm.value = null;
+
+const buyOrSell = (item: IItem): boolean => {
+  const actualPrice = tradeService.actualPrice(item, buyer, seller);
+
+  if (actualPrice > 0 && !confirm.value) {
+    confirm.value = item;
+    return true;
+  }
+
+  confirm.value = null;
+  return buyer === game.value.activeCharacter ? tradeService.buy(item, seller) : tradeService.sell(item, buyer);
+}
+
+</script>

package/src/UI/Components/Encounter/Trade/Trade.vue

@@ -0,0 +1,24 @@
+<template>
+  <modal-dialog :canClose="true"
+                :closeButton="true"
+                :openState="PlayState.Trade"
+                :title="game.trade.name">
+    <div id="trade">
+      <p class="trade-description">{{ game.trade.text }}</p>
+      <stock :buyer="game.activeCharacter" :seller="game.trade" :stock="game.trade.buy"></stock>
+      <stock :buyer="game.trade" :seller="game.activeCharacter" :stock="game.trade.sell"></stock>
+      <p v-if="game.trade.currency !== undefined">
+        {{ texts.format(texts.traderCurrency, [game.trade.currency.toString(), texts.currency]) }}
+      </p>
+    </div>
+  </modal-dialog>
+</template>
+<script lang="ts" setup>
+import {PlayState, useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+
+</script>

package/src/UI/Components/Exploration/ActionLog.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="action-log" class="box-container">
+    <div class="box-title">{{ texts.messages }}</div>
+    <ul class="action-log list-unstyled">
+      <li v-for="message of game.actionLog" v-html="message"></li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+
+</script>

package/src/UI/Components/Exploration/Destination.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-for="barrier of destination.barriers" class="barrier">
+    <button v-if="!barrier[1].actions?.length" class="btn btn-outline-primary">{{ barrier[1].name }}</button>
+    <div v-else class="dropdown">
+      <button :aria-expanded="dropDownExpanded"
+              class="btn btn-outline-primary dropdown-toggle"
+              type="button" @click="dropDownExpanded = !dropDownExpanded"
+              @focusout="dropDownLoseFocus">
+        {{ barrier[1].name }}
+      </button>
+      <ul
+          v-if="dropDownExpanded"
+          :class="dropDownMenuActive"
+          class="dropdown-menu action-select"
+          @mouseleave="mouseOverDropDown = false"
+          @mouseover="mouseOverDropDown = true">
+        <li v-for="action of barrier[1].actions">
+          <a class="dropdown-item" href="#" @click="executeBarrierAction(barrier, action, destination)">
+            {{ action[1].text }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <button :class="destination.style"
+          :disabled="!destination.target || destination.barriers?.length > 0"
+          class="btn btn-info"
+          type="button"
+          @click="game.commands.go(destination.target)">
+    <span v-if="(<any>destination).isPreviousLocation" class="back-label">{{ texts.back }}</span>
+    {{ destination.name }}
+  </button>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {computed, ref} from "vue";
+import {IBarrier, IBarrierAction, IDestination, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, commandService} = store.services;
+
+const {destination} = defineProps<{
+  destination: IDestination
+}>();
+
+const dropDownExpanded = ref(false);
+const mouseOverDropDown = ref(false);
+const dropDownMenuActive = computed(() => dropDownExpanded.value ? 'dropdown-menu-active' : '');
+
+const dropDownLoseFocus = () => {
+  if (!mouseOverDropDown.value) {
+    dropDownExpanded.value = false;
+  }
+}
+
+const executeBarrierAction = (barrier: [string, IBarrier], action: [string, IBarrierAction], destination: IDestination): void => {
+  if (game.value.combinations.tryCombine(barrier[1]).success || game.value.combinations.activeCombination) {
+    return;
+  }
+
+  commandService.useBarrierAction(destination, barrier, action);
+  dropDownExpanded.value = false;
+}
+
+</script>

package/src/UI/Components/Exploration/Exploration.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="!enemiesPresent" id="exploration">
+    <div v-if="activeActions.length > 0" id="exploration-actions" class="box-container">
+      <div class="box-title">{{ texts.actions }}</div>
+      <ul v-if="!confirmAction" class="list-unstyled">
+        <li v-for="action of activeActions.filter(a => !checkStatus(a, Status.Unavailable))" class="inline">
+          <button :class="store.getButtonClass(action)"
+                  :disabled="checkStatus(action, Status.Disabled)"
+                  class="btn"
+                  type="button"
+                  @click="execute(action)">
+            {{ action[1].text }}
+          </button>
+        </li>
+      </ul>
+      <div v-else>
+        <p v-html="confirmAction[1].confirmationText"></p>
+        <ul class="list-unstyled">
+          <li class="inline">
+            <button class="btn btn-primary" type="button" @click="confirmAction = null">
+              {{ texts.cancelAction }}
+            </button>
+            <button class="btn btn-warning" type="button" @click="execute(confirmAction)">
+              {{ texts.confirmAction }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div id="exploration-destinations" class="box-container">
+      <div class="box-title">{{ texts.destinations }}</div>
+      <ul class="list-unstyled">
+        <li v-for="destination of activeDestinations" :class="`inline ${destination.visited ? '' : 'not-'}visited`">
+          <destination :destination="destination"></destination>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {ActionStatus, IAction, useStateStore} from 'storyScript';
+import {ref} from "vue";
+
+const Status = ActionStatus;
+const store = useStateStore();
+const {game, enemiesPresent, activeActions, activeDestinations} = storeToRefs(store);
+const {commandService, texts} = store.services;
+
+const confirmAction = ref<[string, IAction]>(null);
+
+const checkStatus = (action: [string, IAction], status: ActionStatus) =>
+    typeof action[1].status === 'function'
+        ? action[1].status(game.value) == status
+        : action[1].status === undefined ? false : action[1].status == status;
+
+const execute = (action: [string, IAction]): void => {
+  if (action[1].confirmationText && !confirmAction.value) {
+    confirmAction.value = action;
+    return;
+  }
+
+  confirmAction.value = undefined;
+  commandService.useAction(action);
+}
+
+</script>

package/src/UI/Components/Exploration/Ground.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-if="!enemiesPresent && activeItems.length > 0" id="exploration-onground" class="box-container">
+    <div class="box-title">{{ texts.onTheGround }}</div>
+    <ul class="list-unstyled">
+      <li v-for="item of activeItems"
+          :class="game.combinations.getCombineClass(item)"
+          @click="itemService.pickupItem(game.activeCharacter, item)">
+        {{ itemService.getItemName(item) }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+
+const store = useStateStore();
+const {game, useGround, enemiesPresent, activeItems} = storeToRefs(store);
+const {texts, itemService} = store.services;
+useGround.value = true;
+
+</script>

package/src/UI/Components/Exploration/LocationMap.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="map" class="box-container map-container" tabindex="0">
+    <div class="map-name">
+      <div class="float-left">
+        {{ map.name }}
+        <span v-if="markerKey" class="show-marker-instructions" @click="toggleTouchMarkersVisible()">
+        {{ isTouchDevice ? texts.touchToShowMarkers : texts.format(texts.pressToShowMarkers, [markerKey]) }}
+      </span>
+      </div>
+      <div v-if="map.toggleFullScreen"
+           class="map-full-screen-toggle"
+           @click="toggleFullScreen()">
+        {{ texts.openFullScreenMap }}
+      </div>
+    </div>
+    <img ref="map-element" :alt="map.name" :src="`resources/${map.mapImage}`" class="map-image" @load="showMap()">
+    <img v-if="map.avatarImage" :alt="map.name" :src="`resources/${map.avatarImage}`" class="avatar-image"
+         style="visibility: hidden;">
+  </div>
+  <dialog ref="map-dialog" class="map-dialog">
+  </dialog>
+</template>
+<script lang="ts" setup>
+import {useTemplateRef} from "vue";
+import {isTouchDevice, useLocationMap, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts} = store.services;
+const {
+  map,
+  showMap,
+  toggleFullScreen,
+  toggleTouchMarkersVisible
+} = useLocationMap(useTemplateRef('map-element'), useTemplateRef('map-dialog'));
+
+const markerKey = map.value.showMarkersOnKeyPress ?
+    // When an empty value is specified use the space key. Use the key specified otherwise.
+    map.value.showMarkersOnKeyPress.trim()
+        ? map.value.showMarkersOnKeyPress : 'space'
+    : null;
+
+</script>

package/src/UI/Components/Exploration/LocationText.vue

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="show" id="location" class="box-container">
+    <div class="box-title" v-html="texts.format(texts.youAreHere, [game.currentLocation.name])"></div>
+    <img v-if="game.currentLocation.picture"
+         :alt="game.currentLocation.name"
+         :src="game.currentLocation.picture"
+         class="location-picture"/>
+    <div ref="description"
+         @click="event => click(event)"
+         @mouseout="event => mouseOut(event)"
+         @mouseover="event => mouseOver(event)"
+         v-html="descriptionToShow"></div>
+    <ul id="location-log" class="list-unstyled">
+      <li v-for="message in game.currentLocation.log" v-html="message"></li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {computed, onMounted, ref, useTemplateRef, watch} from "vue";
+import {checkAutoplay, useStateStore, useTextFeatures} from 'storyScript';
+import {storeToRefs} from "pinia";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+const {click, mouseOver, mouseOut, refreshFeatures} = useTextFeatures(useTemplateRef('description'));
+
+const show = computed(() => game.value.currentLocation.description || !game.value.currentLocation.features?.collectionPicture);
+const descriptionToShow = ref<string>(null);
+
+watch(() => game.value.currentLocation.description, async (newValue) => {
+  descriptionToShow.value = checkAutoplay(game.value, newValue);
+}, {immediate: true});
+
+onMounted(() => {
+  refreshFeatures();
+});
+
+</script>

package/src/UI/Components/Exploration/LocationVisual.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="location?.features?.collectionPicture" id="location-visual" class="box-container">
+    <div class="box-title" v-html="texts.format(texts.youAreHere, [location.name])"></div>
+    <div id="visual-features" ref="location-features">
+      <img :alt="location.name" :src="`resources/${location.features.collectionPicture}`" :usemap="'#' + location.id"
+           @load="initFeatures()">
+      <map :name="location.id">
+        <area v-for="feature of location.features" :id="`feature-area-${feature.id}`" :alt="feature.name"
+              :class="getFeatureClass(feature)" :coords="feature.coords"
+              :shape="feature.shape" href="#" @click="game.combinations.tryCombine(feature)"/>
+      </map>
+      <div v-for="feature of location.features">
+        <img v-if="feature.picture" :id="`feature-${feature.id}`" :alt="feature.name"
+             :src="`resources/${feature.picture}`" class="feature-picture feature-cursor"
+             @click="game.combinations.tryCombine(feature)"/>
+        <sprite v-if="feature.animation" :id="`feature-${feature.id}`" :alt="feature.name"
+                :class="getFeatureClass(feature)" :factor="factor" :spriteSettings="feature.animation"
+                class="feature-picture"
+                @click="game.combinations.tryCombine(feature)"></sprite>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {computed, useTemplateRef} from "vue";
+import {storeToRefs} from "pinia";
+import {IFeature, useStateStore, useVisualFeatures} from 'storyScript';
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+const location = computed(() => game.value.currentLocation);
+
+const {initFeatures, factor} = useVisualFeatures(useTemplateRef('location-features'));
+
+const getFeatureClass = (feature: IFeature) => feature.interactive === false ? '' : 'feature-cursor';
+
+</script>

package/src/UI/Components/GameContainer.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="container-fluid body-content">
+    <div class="row">
+      <div v-if="game.state === 'Play'" id="party-container" :class="{ 'col-4': showCharacterPane }">
+        <party></party>
+      </div>
+      <div id="location-container"
+           :class="{ 'col-8': game.state === 'Play' && showCharacterPane, 'col-12': game.state !== 'Play' || !showCharacterPane }">
+        <div v-if="!game.state">
+          {{ texts.loading }}
+        </div>
+
+        <div v-if="game.state === 'Play'">
+          <encounter></encounter>
+          <location-text></location-text>
+          <location-visual></location-visual>
+          <action-log></action-log>
+          <ground></ground>
+          <exploration></exploration>
+          <enemy></enemy>
+        </div>
+
+        <intro></intro>
+        <create-character></create-character>
+        <level-up></level-up>
+        <game-over></game-over>
+        <victory></victory>
+      </div>
+    </div>
+    <div v-if="game.state === 'Play'" class="row">
+      <div class="col-12">
+        <combinations></combinations>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+
+const store = useStateStore();
+const {game, useEquipment, useBackpack, useQuests, useCharacterSheet} = storeToRefs(store);
+const {texts} = store.services;
+
+const showCharacterPane = computed(() => useCharacterSheet.value || useEquipment.value || useBackpack.value || useQuests.value);
+
+</script>

package/src/UI/Components/GameMenu.vue

@@ -0,0 +1,111 @@
+<template>
+  <modal-dialog :canClose="true"
+                :closeButton="false"
+                :openState="PlayState.Menu"
+                :title="texts.mainMenu">
+    <div id="mainmenu">
+      <button v-if="game.state !== GameState.CreateCharacter" class="btn btn-outline-dark btn-lg" type="button"
+              @click="save()">{{ texts.saveGame }}
+      </button>
+      <button class="btn btn-outline-dark btn-lg" type="button" @click="load()">{{ texts.loadGame }}</button>
+      <button class="btn btn-outline-danger btn-lg" type="button" @click="restart()">{{ texts.startOver }}</button>
+    </div>
+
+    <div v-if="menuState === 'ConfirmRestart'" id="confirmrestart">
+      <h4>
+        {{ texts.confirmRestart }}
+      </h4>
+      <button class="btn btn-outline-dark btn-lg" type="button" @click="cancel()">{{ texts.restartCancelled }}</button>
+      <button class="btn btn-outline-danger btn-lg" type="button" @click="restartConfirmed()">{{
+          texts.restartConfirmed
+        }}
+      </button>
+    </div>
+
+    <div v-if="menuState === 'Save' || menuState === 'Load'">
+      <div class="row">
+        <div id="save-game" class="col-12">
+          <p>{{ texts.existingSaveGames }}</p>
+          <ul class="list-unstyled">
+            <li v-for="key of saveKeys">
+              <span @click="setSelected(key)">{{ key }}</span>
+            </li>
+          </ul>
+          <div v-if="menuState === 'Save'">
+            <p>{{ texts.newSaveGame }}</p>
+            <input v-model="selectedGame" class="col-md-8 question-input" type="text"/>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <p v-if="menuState === 'Save' && overwriteSelected()" class="alert alert-danger">
+            {{ texts.format(texts.overwriteSaveGame, [selectedGame]) }}</p>
+          <p v-if="menuState === 'Load' && selectedGame" class="alert alert-success">
+            {{ texts.format(texts.loadSaveGame, [selectedGame]) }}</p>
+          <button v-if="menuState === 'Save'" :disabled="!selectedGame" class="btn btn-primary save-button"
+                  type="button"
+                  @click="saveGame()">{{ texts.save }}
+          </button>
+          <button v-if="menuState === 'Load'" :disabled="!selectedGame" class="btn btn-primary save-button"
+                  type="button"
+                  @click="loadGame()">{{ texts.load }}
+          </button>
+          <button class="btn btn-primary save-button" type="button" @click="cancel()">{{ texts.cancel }}</button>
+        </div>
+      </div>
+    </div>
+  </modal-dialog>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {GameState, PlayState, useStateStore} from 'storyScript';
+import {computed, ref} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, dataService, gameService} = store.services;
+
+const internalState = ref<string>(PlayState.Menu);
+const selectedGame = ref<string>(null);
+const saveKeys = ref<string[]>([]);
+const menuState = computed(() => game.value.playState === PlayState.Menu ? internalState.value ?? PlayState.Menu : null);
+
+const restart = (): string => internalState.value = 'ConfirmRestart';
+
+const setSelected = (name: string) => selectedGame.value = name;
+
+const overwriteSelected = (): boolean => dataService.getSaveKeys().indexOf(selectedGame.value) > -1;
+
+const cancel = (): void => {
+  setSelected(null);
+  internalState.value = null;
+  game.value.playState = null;
+}
+
+const restartConfirmed = (): void => {
+  gameService.restart();
+  cancel();
+}
+
+const save = (): void => {
+  saveKeys.value = dataService.getSaveKeys();
+  internalState.value = 'Save';
+}
+
+const load = (): void => {
+  saveKeys.value = dataService.getSaveKeys();
+  internalState.value = 'Load';
+}
+
+const saveGame = (): void => {
+  dataService.saveGame(game.value, selectedGame.value);
+  cancel();
+}
+
+const loadGame = (): void => {
+  gameService.loadGame(selectedGame.value);
+  cancel();
+}
+
+</script>

package/src/UI/Components/GameState/GameOver.vue

@@ -0,0 +1,20 @@
+<template>
+  <div v-if="game.state === GameState.GameOver" id="game-over" class="container-fluid">
+    <div class="col-12">
+      <h2>{{ texts.youLost }}</h2>
+      <p>{{ texts.questFailed }}</p>
+      <div>{{ texts.finalScore }}{{ game.party.score }}</div>
+      <button class="btn btn-primary restart" type="button" @click="gameService.restart()">{{ texts.tryAgain }}</button>
+      <high-scores v-if="game.party.score > 0" :scores="game.highScores"></high-scores>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {GameState, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, gameService} = store.services;
+
+</script>

package/src/UI/Components/GameState/HighScores.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="highscores">
+    <h3>{{ texts.highScores }}</h3>
+    <table>
+      <tr v-for="score of scores">
+        <td>{{ score.name }}</td>
+        <td>{{ score.score }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts} = store.services;
+
+const {scores} = defineProps<{
+  scores: { name: string, score: number }[];
+}>();
+
+</script>

package/src/UI/Components/GameState/Intro.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-if="game.state === GameState.Intro" id="intro" class="box-container">
+    <h2>Game introduction</h2>
+    <p>Please copy the IntroComponent.html file to your game and add your introduction here.</p>
+    <button class="btn btn-primary" type="button" @click="gameService.restart()">{{ texts.skipIntro }}</button>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import {storeToRefs} from "pinia";
+import {GameState, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, gameService} = store.services;
+
+</script>

package/src/UI/Components/GameState/TitleScreen.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showTitleScreen" id="title-screen" ref="title-screen">
+    <h1>{{ texts.gameName }}</h1>
+  </div>
+  <div v-if="showTitleScreen" id="title-screen-start">
+    <button id="start-game" class="btn btn-primary" type="button" @click="startGame()">{{ hasProgress ? texts.continueGame : texts.startGame }}</button>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+import {computed, onMounted, useTemplateRef, watch} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {rules, texts, gameService, dataService, autoplayService} = store.services;
+const hasProgress = dataService.hasGameState()
+
+const titleScreen = useTemplateRef('title-screen');
+const transitionDelay = rules.setup?.titleScreen?.transitionDelay ?? 1;
+const showTitleScreen = computed(() => rules.setup?.titleScreen?.showTitleScreen && !game.value.started);
+
+const startGame = () => {
+  autoplayService.stop();
+  game.value.playState = null;
+  gameService.init();
+}
+
+onMounted(() => { 
+  if (titleScreen.value) { 
+    titleScreen.value.style = `transition: opacity ${transitionDelay}s ease-out;`;
+  }
+});
+
+watch(() => game.value.autoplaying, (newVal) => { 
+  if (titleScreen.value) {
+    titleScreen.value.style.opacity = newVal ? '0' : '1';
+  }
+});
+
+</script>