@strixit/storyscript 0.0.0-stage → 1.0.0

package/src/UI/Components/AppShell.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="ui-root">
+    <sound></sound>
+    <autoplay></autoplay>
+    <title-screen></title-screen>
+    <div>
+      <game-menu v-if="game.playState === PlayState.Menu"></game-menu>
+      <conversation v-if="game.playState === PlayState.Conversation"></conversation>
+      <trade v-if="game.playState === PlayState.Trade"></trade>
+      <combat v-if="game.playState === PlayState.Combat"></combat>
+      <description v-if="game.playState === PlayState.Description"></description>
+      <div v-if="error" id="error-alert">
+        <div class="error-alert-body alert alert-danger">
+          <h2 class="danger">{{ `An unhandled error occurred: ${error.message}!` }}</h2>
+          <p>{{ error.stackTrace }}</p>
+          <button class="btn btn-primary" @click="reload">Reload</button>
+        </div>
+      </div>
+      <div>
+        <navigation></navigation>
+        <game-container></game-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {useTemplateRef} from "vue";
+import {PlayState, useCustomCursor, usePlayStateWatch, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {game, error} = storeToRefs(store);
+const uiRoot = useTemplateRef('ui-root');
+
+useCustomCursor(uiRoot);
+usePlayStateWatch(uiRoot);
+
+const reload = () => {
+  window.location.reload();
+}
+
+</script>

package/src/UI/Components/Autoplay.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="game.autoplaying" id="autoplay-overlay">
+    <p id="autoplay-text" ref="autoplay-text"><span>{{ texts.autoplayText }}</span></p>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+import {useTemplateRef, watch} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+
+const autoPlayText = useTemplateRef('autoplay-text');
+let demoTextTimer: NodeJS.Timeout;
+
+watch(() => game.value.autoplaying, (newVal) => {
+  clearInterval(demoTextTimer);
+
+  if (newVal) {
+    let autoTextVisible = true;
+
+    demoTextTimer = setInterval(() => {
+      autoPlayText.value.style = autoTextVisible ? 'visibility: visible;' : 'visibility: hidden;';
+      autoTextVisible = !autoTextVisible;
+    }, 1000);
+  }
+});
+
+</script>

package/src/UI/Components/Combinations.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="combineActions.length" id="combinations" class="box-container">
+    <div class="box-title">{{ texts.combinations }}</div>
+    <div class="row">
+      <ul class="list-unstyled col-lg-12 col-xl-5 col-xxl-4 combination-actions">
+        <li>
+          <button v-for="c of combineActions"
+                  :class="getCombineClass(c)"
+                  class="btn combination-button"
+                  type="button"
+                  @click="combinationService.setActiveCombination(c)">
+            <img v-if="c.picture" :alt="c.text" :src="`resources/${c.picture}`"/>
+            {{ c.text }}
+          </button>
+        </li>
+      </ul>
+      <div class="col-lg-12 col-xl-7 col-xxl-8">
+        <p v-if="game.combinations.combinationResult.text" class="combination-result-text"
+           v-html="game.combinations.combinationResult.text"></p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ICombinationAction, useStateStore} from 'storyScript';
+import {ref} from "vue";
+import {storeToRefs} from "pinia";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, combinationService} = store.services;
+
+const combineActions = ref(combinationService.combinationActions);
+
+const getCombineClass = (action: ICombinationAction): string => game.value.combinations.activeCombination?.selectedCombinationAction.text === action.text ? 'btn-outline-dark' : 'btn-dark';
+
+</script>

package/src/UI/Components/Common/Collapsible.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="collapsible-header" :class="headerClass" @click="toggleCollapsible" ref="collapsible-header">
+    <slot name="header">
+      {{ text }}
+    </slot>
+  </div>
+  <div class="collapsible-body">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import {computed, onMounted, ref, useTemplateRef} from "vue";
+
+const { preventCollapse, headerClass } = defineProps<{
+  text?: string;
+  headerClass?: string;
+  preventCollapse?: (isCollapsed: boolean) => boolean;
+}>();
+
+const isCollapsed = ref(false);
+const collapsibleHeader = useTemplateRef('collapsible-header');
+const collapsibleContent = computed(() => collapsibleHeader.value?.nextElementSibling as HTMLElement);
+
+const setHeight = () => {
+  collapsibleContent.value.style.maxHeight = isCollapsed.value ? '0px' : null;
+}
+
+onMounted(() => {
+  collapsibleContent.value.classList.add('collapsible');
+  setHeight();
+});
+
+const toggleCollapsible = () => {
+  if (preventCollapse?.(isCollapsed.value)) {
+    return;
+  }
+
+  isCollapsed.value = !isCollapsed.value;
+
+  if (isCollapsed.value) {
+    collapsibleHeader.value.classList.add('collapsed');
+  } else {
+    collapsibleHeader.value.classList.remove('collapsed');
+  }
+
+  setHeight();
+}
+
+</script>

package/src/UI/Components/Common/ModalDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <dialog :open="game.playState === openState">
+    <div aria-hidden="true" class="modal-backdrop show"></div>
+    <div class="d-block modal" @click="e => closeModal(e)">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h4 class="model-title">
+              {{ title }}
+            </h4>
+            <button v-if="canClose" aria-label="Close" class="close" type="button" @click="closeModal()">
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+          <div class="modal-footer">
+            <button v-if="closeButton && canClose" class="btn btn-primary" type="button" @click="closeModal()">
+              {{ closeText ?? texts.closeModal }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {PlayState, useStateStore}from 'storyScript';
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+
+const {openState, canClose} = defineProps<{
+  openState: PlayState,
+  canClose: boolean,
+  title: string,
+  closeButton: boolean,
+  closeText?: string,
+}>();
+
+const closeModal = (event?: PointerEvent) => {
+  if (event) {
+    if (canClose === false || !(<HTMLElement>event.target).classList.contains("modal")) {
+      return;
+    }
+  }
+
+  game.value.playState = null;
+}
+
+</script>

package/src/UI/Components/Common/Sprite.vue

@@ -0,0 +1,53 @@
+<template>
+  <img ref="sprite" :src="`resources/${spriteSettings.sheet}`" @load="initSprite"
+       :data-sprite-width="spriteSettings.width" :data-sprite-height="spriteSettings.height"/>
+</template>
+<script lang="ts" setup>
+import {Sprite}from 'storyScript';
+import {useTemplateRef, watch} from "vue";
+
+const props = defineProps<{
+  factor: number;
+  spriteSettings: Sprite;
+}>();
+
+const sprite = useTemplateRef('sprite');
+
+let animation: Animation;
+const animationFrames: Keyframe[] = [];
+const animationSettings: KeyframeAnimationOptions = {};
+
+watch(() => props.factor, () => {
+  updateSprite();
+});
+
+const initSprite = () => {
+  animationFrames.push({objectPosition: '0 0'});
+  // Todo: add additional steps here to support sprite sheets with multiple rows(?)
+  animationFrames.push({objectPosition: '100% 0'});
+
+  animationSettings.duration = (props.spriteSettings.speed ??= 1) * 1000;
+  animationSettings.iterations = Infinity;
+  animationSettings.easing = `steps(${props.spriteSettings.steps}, jump-none)`;
+  updateSprite();
+}
+
+const updateSprite = () => {
+  animation?.cancel();
+  animation = null;
+
+  // We need a timeout to make setting up a new animation work in all cases. Without the timeout, the whole 
+  // sprite sheet will be displayed without any animation on updates and hot reloads.
+  setTimeout(() => {
+    updateSpriteAnimation();
+  });
+}
+
+const updateSpriteAnimation = () => {
+  sprite.value.width = Math.round(props.spriteSettings.width * props.factor);
+  sprite.value.height = Math.round(props.spriteSettings.height * props.factor);
+  sprite.value.style.objectFit = 'cover';
+  animation = sprite.value.animate(animationFrames, animationSettings);
+}
+
+</script>

package/src/UI/Components/Description.vue

@@ -0,0 +1,23 @@
+<template>
+  <modal-dialog :canClose="true"
+                :closeButton="true"
+                :openState="PlayState.Description"
+                :title="game.currentDescription.title">
+    <div class="description" v-html="descriptionToShow"></div>
+  </modal-dialog>
+</template>
+<script lang="ts" setup>
+import {checkAutoplay, PlayState, useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+import {ref, watch} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+
+const descriptionToShow = ref<string>(null);
+
+watch(() => game.value.currentDescription, async (newValue) => {
+  descriptionToShow.value = checkAutoplay(game.value, newValue.item.description);
+}, {immediate: true});
+
+</script>

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

@@ -0,0 +1,89 @@
+<template>
+  <modal-dialog :canClose="!enemiesPresent"
+                :closeButton="true"
+                :openState="PlayState.Combat"
+                :title="texts.combatTitle">
+    <div v-if="enemiesPresent" id="combat" class="row">
+      <div class="col-12">
+        <h3 class="combat-header">{{ game.combat.roundHeader }}</h3>
+
+        <div v-for="enemyRow of enemyRows" class="row enemy-row">
+          <div v-for="enemy of enemyRow" :class="rowClass(enemyRow, enemy)">
+            <combat-participant :participant="enemy"></combat-participant>
+          </div>
+        </div>
+
+        <div v-for="characterRow of characterRows" class="row character-row">
+          <div v-for="turn of characterRow" :class="rowClass(characterRow, turn.character)">
+            <combat-participant :participant="turn.character"></combat-participant>
+            <combat-target-select :setup="game.combat" :turn="turn"></combat-target-select>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-12 fight-row">
+            <button
+                :disabled="!actionsEnabled"
+                class="btn btn-danger"
+                type="button"
+                @click="fight()">
+              {{ texts.fight }}
+            </button>
+          </div>
+        </div>
+        <combat-actions :actions="game.currentLocation.combatActions" :enabled="actionsEnabled"></combat-actions>
+      </div>
+    </div>
+
+    <combat-win v-else :winnings="game.combat.winnings"></combat-win>
+
+    <fieldset class="combatlog">
+      <legend>{{ texts.messages }}</legend>
+      <ul class="list-unstyled action-log">
+        <li v-for="message of game.combatLog">{{ message }}</li>
+      </ul>
+    </fieldset>
+  </modal-dialog>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {ICharacter, ICombatTurn, IEnemy, ModalDialog, PlayState, useStateStore} from 'storyScript';
+import {ref} from "vue";
+
+const store = useStateStore();
+const {game, enemiesPresent} = storeToRefs(store);
+const {texts, combatService} = store.services;
+
+const actionsEnabled = ref(true);
+const enemyRows = ref<Array<Array<IEnemy>>>(split(game.value.combat.enemies, 3));
+const characterRows = ref<Array<Array<ICombatTurn>>>(split(game.value.combat, 3));
+
+const rowClass = (row: (IEnemy | ICombatTurn)[], participant: IEnemy | ICharacter) =>
+    `col-${(12 / row.length)}` + (participant.currentHitpoints <= 0 ? ' unavailable' : '');
+
+const fight = (): void => {
+  actionsEnabled.value = false;
+
+  Promise.resolve(combatService.fight(game.value.combat)).then(() => {
+    // Refresh the character rows to show the new combat targets. We don't need to do this for enemies.
+    characterRows.value = split(game.value.combat, 3);
+    actionsEnabled.value = true;
+  });
+}
+
+function split(array: any[], size: number): any[] {
+  const result = [];
+
+  if (!array) {
+    return result;
+  }
+
+  for (let i = 0; i < array.length; i += size) {
+    let chunk = array.slice(i, i + size);
+    result.push(chunk);
+  }
+
+  return result;
+}
+
+</script>

package/src/UI/Components/Encounter/Combat/CombatActions.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="row">
+    <ul class="list-unstyled combat-actions">
+      <li v-for="action of actions">
+        <button :class="store.getButtonClass(action)"
+                :disabled="!enabled"
+                class="btn"
+                type="button"
+                @click="commandService.useAction(action)">{{ action[1].text }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {IAction, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {commandService} = store.services;
+
+const {actions} = defineProps<{
+  actions: [string, IAction][],
+  enabled: boolean,
+}>();
+
+</script>

package/src/UI/Components/Encounter/Combat/CombatParticipant.vue

@@ -0,0 +1,22 @@
+<template>
+  <h4>{{ participant.name }}</h4>
+  <p :class="healthClass">
+    {{ texts.format(hitPointText, [participant.currentHitpoints, participant.hitpoints]) }}
+  </p>
+  <img v-if="participant.picture" :alt="participant.name" :src="participant.picture" class="combat-participant">
+</template>
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+import {computed} from "vue";
+
+const store = useStateStore();
+const {texts} = store.services;
+
+const healthClass = computed(() => participant.type ? 'enemy-health' : 'character-health');
+const hitPointText = computed(() => participant.type ? texts.enemyHitpoints : texts.characterHitpoints);
+
+const {participant} = defineProps<{
+  participant: any
+}>();
+
+</script>

package/src/UI/Components/Encounter/Combat/CombatTargetSelect.vue

@@ -0,0 +1,55 @@
+<template>
+  <div v-if="turn.item && turn.character.currentHitpoints > 0">
+    <div :class="{ 'not-applicable': !turn.item.targetType }">
+      <span>{{ turn.item.targetType === 'Enemy' ? texts.attack : texts.aid }}</span>
+      <select v-if="filteredTargets(turn).length > 1" v-model="turn.target" class="custom-select">
+        <option v-for="target of filteredTargets(turn)" :value="target">{{ (target as any).name }}</option>
+      </select>
+      <input v-if="filteredTargets(turn).length === 1"
+             :disabled="true" :value="turn.target?.name"
+             class="single-item"
+             type="text"/>
+    </div>
+    <div v-if="turn.itemsAvailable.length">
+                <span>{{
+                    turn.item.targetType === 'Enemy' ? texts.attackWith : turn.item.targetType ? texts.aidWith : texts.useCombatItem
+                  }}</span>
+      <select v-if="turn.itemsAvailable.length > 1" v-model="turn.item" class="custom-select"
+              @change="itemChange(turn.item, turn)">
+        <option v-for="item of turn.itemsAvailable"
+                :class="{'unselectable': !combatService.isSelectable(item)}"
+                :disabled="!combatService.isSelectable(item)"
+                :value="item">{{ itemService.getItemName(item) }}
+        </option>
+      </select>
+      <input v-if="turn.itemsAvailable.length === 1" :disabled="true"
+             :value="itemService.getItemName(turn.item)"
+             class="single-item"
+             type="text"/>
+    </div>
+  </div>
+  <div v-if="!turn.item && turn.character.currentHitpoints > 0">
+    <span>{{ setup.noActionText }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ICharacter, ICombatSetup, ICombatTurn, IEnemy, IItem, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts, combatService, itemService} = store.services;
+
+const {setup, turn} = defineProps<{
+  setup: ICombatSetup<ICombatTurn>,
+  turn: ICombatTurn
+}>();
+
+const itemChange = (item: IItem, turn: ICombatTurn) => {
+  const currentTarget = turn.target;
+  const targets = filteredTargets(turn, item);
+  turn.target = targets.filter(t => t === currentTarget)[0] ?? targets[0];
+}
+
+const filteredTargets = (turn: ICombatTurn, item?: IItem): (IEnemy | ICharacter)[] =>
+    turn.targetsAvailable.concat([turn.character]).filter(t => combatService.canTarget(item ?? turn.item, t, turn.character));
+
+</script>

package/src/UI/Components/Encounter/Combat/CombatWin.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="combat-win">
+    <h2 class="combat-win-header">{{ texts.combatWin }}</h2>
+    <ul class="combat-winnings">
+      <li>
+        <span class="enemies-defeated-header">{{ texts.enemiesDefeated }}</span>
+        <ul>
+          <li v-for="enemy of winnings.enemiesDefeated">{{ enemy.name }}</li>
+        </ul>
+      </li>
+      <li v-if="winnings.currency" class="currency-won">
+        {{ texts.format(texts.currencyWon, [winnings.currency.toString()]) }}
+      </li>
+      <li v-if="winnings.itemsWon.length">
+        <span class="items-taken-header">{{ texts.itemsTaken }}</span>
+        <ul>
+          <li v-for="item of winnings.itemsWon">{{ item.name }}</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ICombatWinnings, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts} = store.services;
+
+const {winnings} = defineProps<{
+  winnings: ICombatWinnings
+}>();
+
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <modal-dialog :canClose="true"
+                :closeButton="true"
+                :openState="PlayState.Conversation"
+                :title="game.person.conversation.title || texts.format(texts.talk, [game.person.name])">
+    <div id="conversation">
+      <img v-if="game.person.picture" :alt="game.person.name" :src="game.person.picture"/>
+      <div v-if="game.person.conversation.activeNode" id="conversation-options">
+        <div v-html="textToShow"></div>
+        <ul>
+          <li v-for="reply of repliesToShow">
+            <div :class="{ 'unavailable': !reply.available }" @click="answer(reply)">
+              <span v-html="reply.lines"></span>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <div v-if="!game.person.conversation.activeNode?.replies?.length">
+        {{ texts.conversationEnded }}
+      </div>
+
+      <div v-if="game.person.conversation.conversationLog?.length" id="conversation-history">
+        <p id="conversation-history-title">Conversation history</p>
+        <ul class="list-unstyled">
+          <li v-for="entry of game.person.conversation.conversationLog">
+            <div class="conversation-lines" v-html="stripAutoplay(entry.lines)"></div>
+            <div class="conversation-option" v-html="stripAutoplay(entry.reply)"></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </modal-dialog>
+</template>
+<script lang="ts" setup>
+import {checkAutoplay, IConversationReply, PlayState, useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+import {ref, watch} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, conversationService} = store.services;
+
+const textToShow = ref<string>(null);
+const repliesToShow = ref<IConversationReply[]>(null);
+
+watch(() => game.value.person.conversation.activeNode, async (newValue) => {
+  textToShow.value = checkAutoplay(game.value, newValue?.lines);
+  repliesToShow.value = newValue?.replies.filter(r => r.available || r.showWhenUnavailable).map(r => {
+    if (r.lines) {
+      r.lines = checkAutoplay(game.value, r.lines);
+    }
+
+    return r;
+  });
+}, {immediate: true});
+
+const answer = (reply: IConversationReply) => {
+  if (reply.available) {
+    conversationService.answer(game.value.person.conversation.activeNode, reply)
+  }
+}
+
+const stripAutoplay = (value: string) => value.replace('autoplay="autoplay"', '');
+
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="activePersons.length > 0 && !enemiesPresent" id="encounters" class="box-container">
+    <div class="box-title">{{ texts.encounters }}</div>
+    <ul class="list-unstyled">
+      <li v-for="person of activePersons" :class="game.combinations.getCombineClass(person)"
+          @click="game.combinations.tryCombine(person)">
+        <span class="person-name">{{ person.name }}</span>
+        <div class="inline">
+          <button v-if="person.conversation" class="btn btn-info talk" type="button"
+                  @click="conversationService.talk(person)">
+            {{ texts.format(texts.talk, [person.name]) }}
+          </button>
+          <button v-if="person.trade" class="btn btn-info trade" type="button"
+                  @click="store.trade(game.currentLocation, person)">
+            {{ texts.format(texts.trade, [person.name]) }}
+          </button>
+          <button v-if="hasDescription(person)" class="btn btn-info examine" type="button"
+                  @click="store.showDescription('person', person, person.name)">
+            {{ texts.format(texts.examine, [person.name]) }}
+          </button>
+          <button v-if="person.canAttack === undefined || person.canAttack === true" class="btn btn-danger"
+                  type="button" @click="store.startCombat(game.currentLocation, person)">
+            {{ texts.format(texts.attack, [person.name]) }}
+          </button>
+        </div>
+        <img v-if="person.picture" :alt="person.name" :src="person.picture" class="person-picture"/>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {hasDescription, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {game, enemiesPresent, activePersons} = storeToRefs(store);
+const {texts, conversationService} = store.services;
+
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <div v-if="enemiesPresent" class="box-container">
+    <div class="box-title">{{ texts.encounters }}</div>
+    <p>{{ texts.enemiesToFight }}</p>
+    <ul class="list-unstyled enemy-list">
+      <li v-for="enemy of activeEnemies" :class="game.combinations.getCombineClass(enemy)"
+          @click="game.combinations.tryCombine(enemy)">
+        <span class="enemy-name">{{ enemy.name }}</span>
+        <div :class="game.combinations.getCombineClass(enemy)" class="inline">
+          <button v-if="hasDescription(enemy)" class="btn btn-info btn-sm" type="button"
+                  @click="store.showDescription('enemy', enemy, enemy.name)">{{ texts.view }}
+          </button>
+        </div>
+        <img v-if="enemy.picture" :alt="enemy.name" :src="enemy.picture" class="enemy-picture"/>
+      </li>
+    </ul>
+    <button id="start-combat" class="btn btn-danger" type="button" @click="store.startCombat(game.currentLocation)">
+      {{ texts.startCombat }}
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {hasDescription, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {game, enemiesPresent, activeEnemies} = storeToRefs(store);
+const {texts} = store.services;
+
+</script>