@strixit/storyscript 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="game.state === GameState.Victory" id="victory" class="container-fluid">
+    <div class="col-12">
+      <div>
+        <h1>{{ texts.youWon }}</h1>
+        <div>
+          <p>{{ texts.congratulations }}</p>
+        </div>
+        <div v-if="game.party.score > 0">
+          <span>{{ texts.finalScore }}{{ game.party.score }}</span>
+        </div>
+        <button class="btn btn-primary" type="button" @click="gameService.restart()">
+          {{ texts.playAgain }}
+        </button>
+      </div>
+      <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/Navigation.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="container-fluid menu-bar">
+    <div class="row">
+      <div :class="{'col-md-7 col-lg-8': isDevelopment, 'col-9': !isDevelopment }">
+        <h1>{{ texts.gameName }}</h1>
+      </div>
+      <div :class="{'col-md-5 col-lg-4': isDevelopment, 'col-3': !isDevelopment }">
+        <div v-if="isDevelopment" id="location-selector">
+          <input v-if="availableLocations.length > 1"
+                 ref="locationSelector"
+                 aria-autocomplete="list"
+                 autocapitalize="off"
+                 autocomplete="off"
+                 class="form-control"
+                 name="location-selector"
+                 placeholder="Jump to location..."
+                 type="text"
+                 @focus="setShowSelection(true)"
+                 @focusout="setShowSelection(false)"
+                 @keyup="search"
+          />
+          <ul v-if="showSelection" id="location-selector-locations" :class="showSelection ? 'show' : ''"
+              class="dropdown-menu">
+            <li v-for="location of selectedLocations.slice(0, maxLocationsShown)"
+                class="dropdown-item"
+                @click="game.commands.go(location.id)"
+                @mouseenter="setActive">{{ location.name }}
+            </li>
+            <li v-if="selectedLocations.length > maxLocationsShown" class="dropdown-item refine-search">
+              <pre>{{ `More than ${maxLocationsShown} locations found.\r\nSearch to reduce the list.` }}</pre>
+            </li>
+          </ul>
+        </div>
+        <div :class="{ 'float-none': isDevelopment}" class="menu-buttons">
+          <button class="btn btn-dark btn-sm" type="button" @click="game.playState = PlayState.Menu">
+            {{ texts.mainMenuShort }}
+          </button>
+          <button v-if="isDevelopment" id="resetbutton" class="btn btn-danger btn-sm" type="button"
+                  @click="gameService.reset()">
+            {{ texts.resetWorld }}
+          </button>
+        </div>
+        <div class="float-none"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {isDevelopment, PlayState, useStateStore} from 'storyScript';
+import {ref, useTemplateRef} from "vue";
+
+const maxLocationsShown = 20;
+const store = useStateStore();
+const {game, availableLocations} = storeToRefs(store);
+const {texts, gameService} = store.services;
+
+const locationSelector = useTemplateRef('locationSelector');
+const selectedLocations = ref(availableLocations.value);
+const showSelection = ref(false);
+
+const setActive = (event: MouseEvent) => {
+  const element = event.currentTarget as HTMLElement;
+  const allElements = element.parentElement.children;
+
+  for (const el of allElements) {
+    el.classList.remove("active");
+  }
+
+  if (element.classList.contains('active')) {
+    element.classList.remove('active');
+  } else {
+    element.classList.add('active');
+  }
+}
+
+const setShowSelection = (value: boolean) => {
+  if (value === false) {
+    // When losing focus, set a timeout to allow the click handler to fire!
+    setTimeout(() => {
+      showSelection.value = value;
+    }, 200)
+  } else {
+    showSelection.value = value;
+  }
+}
+
+const search = () => {
+  const searchString = locationSelector.value.value.toLowerCase();
+  selectedLocations.value = availableLocations.value.filter(l => l.name.toLocaleLowerCase().includes(searchString));
+}
+
+</script>

package/src/UI/Components/Party/Backpack.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="character-backpack" class="box-container">
+    <collapsible :headerClass="'box-title'" :text="texts.backpack">
+      <ul id="backpack-panel" class="list-unstyled">
+        <li v-for="item of character.items">
+          <div :class="game.combinations.getCombineClass(item)" class="feature-cursor"
+               @click="game.combinations.tryCombine(item)">
+            <span>{{ itemService.getItemName(item) }}</span>
+            <div id="backpack-button-row" class="inline">
+              <button v-if="itemService.isEquippable(item, character) && store.showEquipment(character)"
+                      class="btn btn-info btn-sm" type="button"
+                      @click="itemService.equipItem(character, item)">{{ texts.equip }}
+              </button>
+              <button v-if="hasDescription(item)" class="btn btn-info btn-sm" type="button"
+                      @click="store.showDescription('item', item, itemService.getItemName(item))">{{ texts.view }}
+              </button>
+              <button v-if="canUseItem(character, item)" class="btn btn-info btn-sm" type="button"
+                      @click="itemService.useItem(character, item)">{{ texts.use }}
+              </button>
+              <button v-if="itemService.canGroupItem(character, joinItem, item as IGroupableItem<IItem>)"
+                      :class="{ 'btn-primary': item === joinItem, 'btn-outline-secondary': joinItem && item !== joinItem, 'btn-info': !joinItem  }"
+                      class="btn btn-sm"
+                      type="button"
+                      @click="groupItem(item as IGroupableItem<IItem>)">{{ texts.groupItem }}
+              </button>
+              <button v-if="(item as IGroupableItem<IItem>).members?.length > 0" class="btn btn-info btn-sm"
+                      type="button" @click="itemService.splitItemGroup(character, item as IGroupableItem<IItem>)">
+                {{ texts.splitItemGroup }}
+              </button>
+              <button v-if="useGround && itemService.canDrop(item)" class="btn btn-info btn-sm" type="button"
+                      @click="itemService.dropItem(character, item)">{{ texts.drop }}
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </collapsible>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {hasDescription, ICharacter, IGroupableItem, IItem, useStateStore} from 'storyScript';
+import {ref} from "vue";
+
+const store = useStateStore();
+const {game, useGround, useBackpack} = storeToRefs(store);
+const {texts, itemService} = store.services;
+
+const {character} = defineProps<{
+  character?: ICharacter
+}>();
+
+const joinItem = ref<IGroupableItem<IItem>>(null);
+
+useBackpack.value = true;
+
+const canUseItem = (character: ICharacter, item: IItem): boolean =>
+    item.use && (!item.canUse || item.canUse(game.value, character, item));
+
+const groupItem = (item: IGroupableItem<IItem>): void => {
+  if (joinItem.value && itemService.groupItem(character, joinItem.value, item)) {
+    joinItem.value = null;
+  } else {
+    joinItem.value = item;
+  }
+}
+
+</script>

package/src/UI/Components/Party/BuildCharacter.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="create-character" class="container-fluid">
+    <div v-for="(step, stepIndex) of sheet.steps" :hidden="sheet.currentStep !== stepIndex">
+      <div v-if="step.description" class="step-description" v-html="step.description"></div>
+      <div v-for="(question, questionIndex) of step.questions" class="input-group mb-3">
+        <div class="input-group-prepend">
+          <label :for="getElementId(stepIndex, questionIndex)" class="input-group-text">{{ question.question }}</label>
+        </div>
+        <select :id="getElementId(stepIndex, questionIndex)" v-model="question.selectedEntry" class="custom-select"
+                @change="sheet.nextStep(sheet, false)">
+          <option v-for="entry of question.entries" :value="entry">{{ entry.text }}</option>
+        </select>
+      </div>
+
+      <div v-for="attribute of step.attributes">
+        <div v-if="attribute.entries.length > 1">
+          <span class="attribute-header">{{ attribute.question }}</span>
+        </div>
+        <div v-for="(entry, attributeIndex) of attribute.entries" class="input-group mb-3">
+          <div class="input-group-prepend">
+            <label v-if="attribute.entries.length !== 1" :for="getElementId(stepIndex, attributeIndex)"
+                   class="input-group-text">{{
+                texts.titleCase(entry.attribute)
+              }}</label>
+            <label v-if="attribute.entries.length === 1" :for="getElementId(stepIndex, attributeIndex)"
+                   class="input-group-text">{{ attribute.question }}</label>
+          </div>
+          <input v-if="!entry.min && !entry.max" :id="getElementId(stepIndex, attributeIndex)" v-model="entry.value"
+                 class="form-control" type="text"/>
+          <input v-if="entry.min || entry.max"
+                 :id="getElementId(stepIndex, attributeIndex)"
+                 v-model="entry.value"
+                 class="form-control"
+                 max="{{ entry.max }}"
+                 min="{{ entry.min }}"
+                 type="number"
+                 @blur="characterService.limitSheetInput(parseInt(($event.target as any).value), attribute, entry)"/>
+        </div>
+      </div>
+
+      <button v-if="sheet.currentStep < sheet.steps.length - 1 && !sheet.steps[sheet.currentStep].finish"
+              :disabled="!characterService.distributionDone(sheet, step)"
+              class="btn btn-primary" type="button"
+              @click="sheet.nextStep(sheet)">{{ texts.nextQuestion }}
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import {ICreateCharacter, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts, characterService} = store.services;
+
+const {sheet} = defineProps<{
+  sheet?: ICreateCharacter
+}>();
+
+const getElementId = (stepIndex: number, elementIndex: number) => {
+  return `question-${stepIndex}-${elementIndex}`;
+}
+
+</script>

package/src/UI/Components/Party/CharacterSheet.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="character-attributes" class="box-container">
+    <collapsible :headerClass="'box-title'" :text="character.name || texts.characterSheet">
+      <div class="character-info">
+        <div v-if="character.portraitFileName" class="portraitFrame">
+          <img :alt="character.name" :src="character.portraitFileName" class="portrait"/>
+        </div>
+        <ul id="attributes-panel" class="list-unstyled">
+          <li v-for="attribute of characterService.getSheetAttributes()">
+            {{ texts.titleCase(attribute) }} {{ character[attribute] }}
+          </li>
+          <li>{{ texts.hitpoints }}
+            <div class="hitpoint-editor">
+              <span v-if="!isDevelopment">{{ character.currentHitpoints }}</span>
+              <input v-else
+                     v-model="character.currentHitpoints"
+                     :max="character.hitpoints"
+                     :min="1"
+                     name="hitpoint-editor"
+                     type="number"
+                     @blur="limitInput($event, character)">
+            </div>
+            &nbsp;/ {{ character.hitpoints }}
+          </li>
+          <li v-if="party.characters.length === 1 && party.currency !== undefined">{{ texts.currency }}
+            {{ party.currency }}
+          </li>
+        </ul>
+        <div class="clearfix"></div>
+      </div>
+    </collapsible>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {ICharacter, IParty, isDevelopment, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {useCharacterSheet} = storeToRefs(store);
+const {texts, characterService} = store.services;
+
+const {character} = defineProps<{
+  party: IParty,
+  character?: ICharacter
+}>();
+
+useCharacterSheet.value = true;
+
+const limitInput = (_: Event, character: ICharacter): void => {
+  if (character.currentHitpoints > character.hitpoints) {
+    character.currentHitpoints = character.hitpoints;
+  } else if (character.currentHitpoints <= 0) {
+    character.currentHitpoints = 1;
+  }
+}
+
+</script>

package/src/UI/Components/Party/CreateCharacter.vue

@@ -0,0 +1,46 @@
+<template>
+  <div v-if="game.state === 'CreateCharacter'" id="create-character" class="box-container">
+    <div class="box-title">{{ titleText() }}</div>
+    <build-character :sheet="game.createCharacterSheet"></build-character>
+    <button
+        v-if="game.createCharacterSheet.currentStep >= game.createCharacterSheet.steps.length - 1 || game.createCharacterSheet.steps[game.createCharacterSheet.currentStep].finish"
+        id="start-adventure" :disabled="!characterService.distributionDone(game.createCharacterSheet, null)"
+        class="btn btn-primary" type="button"
+        @click="gameService.startNewGame(game.createCharacterSheet)">{{ startText() }}
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts, rules, characterService, gameService} = store.services;
+
+const titleText = (): string => {
+  if (rules.setup.numberOfCharacters > 1) {
+    switch (game.value.party.characters.length || 0) {
+      case 0:
+        return texts.firstCharacter;
+      case 1:
+        return texts.secondCharacter;
+      case 2:
+        return texts.thirdCharacter;
+      default:
+        return texts.format(texts.nthCharacter, [(game.value.party.characters.length + 1).toString()])
+    }
+  }
+
+  return texts.newGame;
+};
+
+const startText = (): string => {
+  if (rules.setup.numberOfCharacters > 1 && (game.value.party.characters.length < rules.setup.numberOfCharacters - 1)) {
+    return texts.nextCharacter;
+  }
+
+  return texts.startAdventure;
+};
+
+</script>

package/src/UI/Components/Party/Equipment.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="store.showEquipment(character)" class="character-equipment box-container">
+    <collapsible :headerClass="'box-title'" :text="texts.equipmentHeader">
+      <div class="equipment-panel">
+        <equipment-slot slot="head" :character="character"></equipment-slot>
+        <equipment-slot slot="amulet" :character="character"></equipment-slot>
+        <div class="row">
+          <div class="col-sm-12 col-md-4">
+            <equipment-slot slot="hands" :character="character"></equipment-slot>
+            <equipment-slot slot="rightHand" :character="character"></equipment-slot>
+            <equipment-slot slot="rightRing" :character="character"></equipment-slot>
+          </div>
+          <div class="col-sm-12 col-md-4 body-slot">
+            <equipment-slot slot="body" :character="character"></equipment-slot>
+          </div>
+          <div class="col-sm-12 col-md-4">
+            <equipment-slot slot="hands" :character="character"></equipment-slot>
+            <equipment-slot slot="leftHand" :character="character"></equipment-slot>
+            <equipment-slot slot="leftRing" :character="character"></equipment-slot>
+          </div>
+        </div>
+        <equipment-slot slot="legs" :character="character"></equipment-slot>
+        <equipment-slot slot="feet" :character="character"></equipment-slot>
+        <equipment-slot v-for="slot of customSlots()" :slot="slot" :character="character"></equipment-slot>
+      </div>
+    </collapsible>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {DefaultEquipment, ICharacter, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {useEquipment} = storeToRefs(store);
+const {texts} = store.services;
+
+const {character} = defineProps<{
+  character?: ICharacter
+}>();
+
+useEquipment.value = true;
+
+const customSlots = (): string[] => {
+  const defaultSlots = Object.keys(new DefaultEquipment());
+  return Object.keys(character.equipment).filter(e => defaultSlots.indexOf(e) === -1)
+};
+
+</script>

package/src/UI/Components/Party/EquipmentSlot.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="isSlotUsed(slot)" class="row">
+    <div class="col-12">
+      <div v-if="!inline">
+        {{ texts[slot] }}
+      </div>
+      <div :class="!inline || character.equipment[slot] ? '' : 'empty-slot'" class="item-box"
+           @click="itemService.unequipItem(character, character.equipment[slot])">
+        {{ itemService.getItemName(character.equipment[slot]) ?? (inline ? texts[slot] : null) }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ICharacter, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts, itemService, characterService} = store.services;
+
+const {character, slot} = defineProps<{
+  character: ICharacter;
+  slot: string;
+  inline?: boolean;
+}>();
+
+const isSlotUsed = (slot: string | string[]): boolean => {
+  const slots = Array.isArray(slot) ? slot : [slot];
+  return slots.find(s => characterService.isSlotUsed(character, s)) !== undefined;
+}
+
+</script>

package/src/UI/Components/Party/LevelUp.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="game.state === GameState.LevelUp" id="level-up" class="container-fluid">
+    <!-- TODO: how to make this work? -->
+    <div v-for="character of game.party.characters">
+      <div class="col-12">
+        <h2>{{ texts.levelUp }}</h2>
+        <p>{{ texts.format(texts.levelUpDescription, [character.level.toString()]) }}</p>
+        <build-character :sheet="game.createCharacterSheet"></build-character>
+        <button v-if="game.createCharacterSheet.currentStep >= game.createCharacterSheet.steps.length - 1"
+                :disabled="!characterService.distributionDone(game.createCharacterSheet, null)"
+                class="btn btn-primary"
+                type="button"
+                @click="characterService.levelUp(character)">{{ texts.completeLevelUp }}
+        </button>
+      </div>
+    </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, characterService} = store.services;
+
+</script>

package/src/UI/Components/Party/Party.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="game.party.characters.length > 1" class="box-container">
+    <div class="box-title">{{ game.party.name }}</div>
+    <ul class="list-unstyled">
+      <li>{{ texts.partyCurrency }} {{ game.party.currency }}</li>
+    </ul>
+  </div>
+  <div v-for="character of game.party.characters"
+       :class="{ 'is-active': character === activeCharacter, 'unavailable': character.currentHitpoints <= 0 }"
+       class="character-container"
+       @click="store.setActiveCharacter(character)">
+    <character-sheet :character="character" :party="game.party"></character-sheet>
+    <equipment :character="character"></equipment>
+    <backpack :character="character"></backpack>
+  </div>
+  <quests :quests="game.party.quests"></quests>
+</template>
+<script lang="ts" setup>
+import {useStateStore} from 'storyScript';
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+
+const store = useStateStore();
+const {game} = storeToRefs(store);
+const {texts} = store.services;
+
+const activeCharacter = computed(() => game.value.activeCharacter);
+
+</script>

package/src/UI/Components/Party/Quests.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="!isEmpty(quests)" id="character-quests" class="box-container">
+    <collapsible :headerClass="'box-title'" :text="texts.quests">
+      <div id="quest-panel">
+        <div v-if="showActiveQuests()">
+          <h4>{{ texts.currentQuests }}</h4>
+          <ul>
+            <li v-for="quest of currentQuests()">
+              <span>{{ quest.name }}</span>
+              <div v-html="characterService.questStatus(quest)"></div>
+            </li>
+          </ul>
+        </div>
+        <div v-if="showCompletedQuests()">
+          <h4>{{ texts.completedQuests }}</h4>
+          <ul>
+            <li v-for="quest of completedQuests()">
+              <div v-html="characterService.questStatus(quest)"></div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </collapsible>
+  </div>
+</template>
+<script lang="ts" setup>
+import {storeToRefs} from "pinia";
+import {IQuest, isEmpty, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {useQuests} = storeToRefs(store);
+const {texts, characterService} = store.services;
+
+const {quests} = defineProps<{
+  quests?: IQuest[]
+}>();
+
+useQuests.value = true;
+
+const showActiveQuests = (): boolean => currentQuests().length > 0;
+
+const showCompletedQuests = (): boolean => completedQuests().length > 0;
+
+const currentQuests = (): IQuest[] => quests.filter(q => q.completed === false);
+
+const completedQuests = (): IQuest[] => quests.filter(q => q.completed === true);
+
+</script>

package/src/UI/Components/Sound.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="canPlay !== null && !canPlay" class="no-play-container alert alert-warning">
+    <p>
+      {{ texts.noPlayWarning }}
+    </p>
+  </div>
+  <audio v-if="getCurrentMusic()"
+         ref="music-player"
+         :src="`resources/${getCurrentMusic()}`"
+         autoplay
+         class="storyscript-player"
+         loop
+         muted>
+  </audio>
+  <audio v-for="sound of getSoundQueue()" v-if="canPlay" :src="`resources/${sound[1]}`"
+         autoplay
+         class="storyscript-player"
+         @ended="soundCompleted(sound[0])">
+  </audio>
+</template>
+<script lang="ts" setup>
+import {useTemplateRef, watch} from "vue";
+import {useSound, useStateStore} from 'storyScript';
+
+const store = useStateStore();
+const {texts} = store.services;
+const musicPlayer = useTemplateRef('music-player');
+
+const {
+  canPlay,
+  getSoundQueue,
+  getCurrentMusic,
+  soundCompleted
+} = useSound(musicPlayer);
+
+watch(canPlay, (newValue) => {
+  if (musicPlayer.value) {
+    musicPlayer.value.muted = !newValue;
+  }
+});
+
+</script>

package/src/UI/Composables/CustomCursor.ts

@@ -0,0 +1,60 @@
+import {onMounted, Ref, watch} from "vue";
+import {useStateStore} from "ui/StateStore";
+import {storeToRefs} from "pinia";
+import {isTouchDevice} from 'src/constants';
+import {IActiveCombination, ICustomCursor} from 'storyScript';
+
+export function useCustomCursor(uiRoot: Ref<HTMLElement>) {
+    const cursorRegex = /resources\/[\w-]*\.[a-zA-Z]{3,4}/;
+    const rootElement = uiRoot;
+
+    const store = useStateStore();
+    const {game, customCursor, combinationCursor} = storeToRefs(store);
+
+    watch(() => customCursor.value, (newVal?: ICustomCursor) => {
+        if (newVal?.style) {
+            game.value.UIRootElement.style.cursor = customCursor.value.style;
+        }
+    });
+
+    watch(() => game.value.combinations.activeCombination, (newVal?: IActiveCombination) => {
+        if (!newVal) {
+            Array.from<HTMLElement>(game.value.UIRootElement.querySelectorAll('.feature-cursor')).forEach(e => {
+                e.style.cursor = customCursor.value?.style || null;
+            });
+        }
+    });
+
+    onMounted(() => {
+        game.value.UIRootElement = rootElement.value.closest('body');
+
+        game.value.UIRootElement.addEventListener('mouseover', e => {
+            setCursorStyle(e.target as HTMLElement);
+        });
+    });
+
+    const setCursorStyle = (element: HTMLElement) => {
+        if (isTouchDevice) {
+            return;
+        }
+
+        let isDefaultPointer = getComputedStyle(element)?.cursor === 'pointer';
+        let cursorStyle = null;
+
+        if (element.classList.contains('feature-cursor')) {
+            const combinationPicture = game.value.combinations.activeCombination?.selectedCombinationAction?.picture;
+
+            if (combinationPicture) {
+                cursorStyle = combinationCursor.value.style.replace(cursorRegex, `resources/${combinationPicture}`);
+            } else {
+                cursorStyle = customCursor.value?.style || null;
+            }
+        } else if (isDefaultPointer && customCursor.value) {
+            cursorStyle = customCursor.value.style;
+        }
+
+        if (cursorStyle) {
+            element.style.cursor = cursorStyle;
+        }
+    }
+}