@strixit/storyscript 0.0.0-stage → 1.0.0

package/src/UI/Composables/LocationMap.ts

@@ -0,0 +1,315 @@
+import {useStateStore} from "ui/StateStore";
+import {storeToRefs} from "pinia";
+import {computed, onMounted, onUpdated, Ref, ref, watch} from "vue";
+import {IMap} from 'storyScript';
+import {isTouchDevice} from 'src/constants';
+
+export function useLocationMap(mapImageRef: Ref<HTMLImageElement>, mapDialogRef: Ref<HTMLDialogElement>) {
+    const visible: string = 'visible';
+    const hidden: string = 'hidden';
+    const reachable: string = 'reachable';
+    const visited: string = 'visited';
+    const labelClass: string = 'map-location-label';
+    const imageClass: string = 'map-location-image';
+
+    const store = useStateStore();
+    const {game} = storeToRefs(store);
+    const {texts} = store.services;
+
+    const map = computed(() => game.value.currentMap);
+    const location = computed(() => game.value.currentLocation);
+
+    const fullScreen = ref(false);
+    const firstShowFullScreen = ref(true);
+    const touchMarkersVisible = ref(false);
+    const mapDialog = mapDialogRef;
+    const currentMap = mapImageRef;
+    const currentFullScreenMap = ref<HTMLImageElement>(null);
+
+    watch(() => location.value, () => {
+        navigateMap(map.value, currentMap.value, false);
+
+        if (fullScreen.value) {
+            navigateMap(map.value, currentFullScreenMap.value, false);
+        }
+    });
+
+    onMounted(() => {
+        prepareMap(map.value, false);
+    });
+
+    onUpdated(() => {
+        prepareMap(map.value, true);
+    });
+
+    const toggleTouchMarkersVisible = () => {
+        if (!isTouchDevice) {
+            return;
+        }
+        
+        touchMarkersVisible.value = !touchMarkersVisible.value;
+
+        if (map.value.showMarkersOnKeyPress) {
+            const mapContainer = (fullScreen.value ? currentFullScreenMap.value : currentMap.value).parentElement;
+            const labelElements = mapContainer.getElementsByClassName(labelClass);
+            const markerElements = mapContainer.getElementsByClassName(imageClass);
+            setMarkerVisibility(labelElements, markerElements, touchMarkersVisible.value ? visible : hidden);
+        }
+    }
+
+    function toggleFullScreen() {
+        fullScreen.value = !fullScreen.value;
+
+        if (fullScreen.value) {
+            mapDialog.value.showModal();
+            navigateMap(map.value, currentFullScreenMap.value, firstShowFullScreen.value);
+            firstShowFullScreen.value = false;
+            currentFullScreenMap.value.focus();
+        } else {
+            mapDialog.value.close();
+        }
+    }
+
+    function prepareMap(newMap: IMap, cleanup: boolean) {
+        if (!newMap) {
+            return;
+        }
+
+        const mapContainer = currentMap.value.parentElement;
+
+        if (cleanup) {
+            firstShowFullScreen.value = true;
+            currentMap.value.onload = null;
+            mapContainer.onkeydown = null;
+            mapContainer.onkeyup = null;
+            const labelElements = Array.prototype.slice.call(mapContainer.getElementsByClassName(labelClass));
+            labelElements.forEach(l => l.remove());
+            const markerElements = Array.prototype.slice.call(mapContainer.getElementsByClassName(imageClass));
+            markerElements.forEach(l => l.remove());
+            mapDialog.value.onkeydown = null;
+            mapDialog.value.onkeyup = null;
+            mapDialog.value.replaceChildren();
+        }
+
+        if (newMap.toggleFullScreen === true) {
+            let fullScreenMap = getMapElement(mapDialog.value);
+
+            if (!fullScreenMap) {
+                for (const n in Object.keys(mapContainer.children)) {
+                    const child = mapContainer.children[n];
+                    mapDialog.value.appendChild(child.cloneNode(true));
+                }
+
+                const closeToggle = mapDialog.value.getElementsByClassName('map-full-screen-toggle')[0] as HTMLSpanElement;
+                closeToggle.innerText = texts.closeFullScreenMap;
+                closeToggle.onclick = () => toggleFullScreen();
+                
+                const showMarkersToggle = (mapDialog.value.querySelector('.show-marker-instructions') as HTMLElement);
+                showMarkersToggle.onclick = () => toggleTouchMarkersVisible();
+            }
+
+            currentFullScreenMap.value = getMapElement(mapDialog.value);
+            initMap(currentFullScreenMap.value);
+        }
+
+        initMap(currentMap.value);
+    }
+
+    function initMap(mapElement: HTMLElement) {
+        if (!map) {
+            return;
+        }
+
+        mapElement.onkeydown = null;
+        mapElement.onkeyup = null;
+
+        map.value.locations.forEach(l => {
+            const textLabel = l.markerImage ? null : l.textLabel ?? (map.value.locationNamesAsTextMarkers ? game.value.locations[l.location as string].name : null);
+            const id = l.location as string;
+
+            if (textLabel) {
+                l.markerElement = addElement(mapElement, l.coords, id, labelClass, 'span', textLabel);
+            }
+
+            const markerImage = l.markerImage ?? map.value.locationMarkerImage;
+
+            if (markerImage) {
+                l.markerElement = addElement(mapElement, l.coords, id, imageClass, 'img', markerImage);
+            }
+        });
+
+        if (map.value.showMarkersOnKeyPress) {
+            const mapContainer = mapElement.parentElement;
+            const labelElements = mapElement.parentElement.getElementsByClassName(labelClass);
+            const markerElements = mapElement.parentElement.getElementsByClassName(imageClass);
+
+            mapContainer.onkeydown = e => {
+                if (e.key === map.value.showMarkersOnKeyPress) {
+                    setMarkerVisibility(labelElements, markerElements, visible);
+                }
+            };
+
+            mapContainer.onkeyup = e => {
+                if (e.key === map.value.showMarkersOnKeyPress) {
+                    setMarkerVisibility(labelElements, markerElements, hidden);
+                }
+            }
+        }
+    }
+
+    function showMap() {
+        navigateMap(map.value, currentMap.value, true);
+    }
+
+    function navigateMap(map: IMap, mapElement: HTMLElement, show: boolean) {
+        const parentElement = mapElement.parentElement;
+        const coordString = map.locations.find(l => l.location === location.value.id)?.coords;
+        const avatar = parentElement.getElementsByClassName('avatar-image')[0] as HTMLImageElement;
+        let mapMargins: { x: number, y: number };
+
+        if (coordString) {
+            const coords = getCoords(coordString);
+            mapMargins = {
+                x: getMapMargin(mapElement, coords.x, 'width'),
+                y: getMapMargin(mapElement, coords.y, 'height')
+            };
+            mapElement.style.marginLeft = `-${mapMargins.x}px`;
+            mapElement.style.marginTop = `-${mapMargins.y}px`;
+
+            if (avatar) {
+                const avatarLeft = coords.x - mapMargins.x - avatar.width / 2;
+                const avatarTop = coords.y - mapMargins.y - avatar.height / 2;
+                setCoordinates(avatar, avatarLeft, avatarTop);
+            }
+        }
+
+        const labelElements = parentElement.getElementsByClassName(labelClass);
+        const markerElements = parentElement.getElementsByClassName(imageClass);
+        moveMarker(labelElements, mapMargins);
+        moveMarker(markerElements, mapMargins);
+
+        if (show) {
+            showElements(avatar, labelElements, markerElements);
+        }
+
+        parentElement.focus();
+    }
+
+    function setCoordinates(element: HTMLElement, left: number, top: number) {
+        element.style.top = `${top}px`;
+        element.style.left = `${left}px`;
+    }
+
+    function addElement(mapElement: HTMLElement, coordsString: string, location: string, className: string, elementType: string, elementValue: string): HTMLElement {
+        const coords = getCoords(coordsString);
+        const labelElement = document.createElement("div");
+        labelElement.setAttribute("class", className);
+        labelElement.style.visibility = hidden;
+        labelElement.setAttribute("data-top", coords.x.toString());
+        labelElement.setAttribute("data-left", coords.y.toString());
+        labelElement.setAttribute("data-locationid", location);
+        const valueElement = document.createElement(elementType);
+
+        if (elementType === 'span') {
+            (<HTMLSpanElement>valueElement).innerText = elementValue;
+        } else if (elementType === 'img') {
+            (<HTMLImageElement>valueElement).src = `resources/${elementValue}`;
+        }
+
+        labelElement.appendChild(valueElement);
+        mapElement.parentElement.appendChild(labelElement);
+        return labelElement;
+    }
+
+    function moveMarker(markerElements: HTMLCollection, mapMargins: { x: number, y: number }) {
+        if (!mapMargins) {
+            return;
+        }
+
+        for (const n in Object.keys(markerElements)) {
+            const markerElement = markerElements[n] as HTMLElement;
+            const currentLeft = parseInt(markerElement.dataset.top) - markerElement.clientWidth / 2 - mapMargins.x;
+            const currentTop = parseInt(markerElement.dataset.left) - markerElement.clientHeight / 2 - mapMargins.y;
+            const locationId = markerElement.dataset.locationid;
+            setCoordinates(markerElement, currentLeft, currentTop);
+
+            const isVisited = game.value.locations.get(locationId)?.hasVisited;
+            markerElement.classList.remove(visited);
+
+            if (isVisited) {
+                markerElement.classList.add(visited);
+            }
+
+            if (map.value.clickable === true) {
+                const isReachable = location.value.destinations.find(d => d.target === locationId);
+
+                markerElement.onclick = null;
+                markerElement.classList.remove(reachable);
+
+                if (isReachable) {
+                    markerElement.classList.add(reachable);
+                    markerElement.onclick = () => {
+                        game.value.commands.go(locationId);
+                    }
+                } else if (location.value.id === locationId) {
+                    markerElement.classList.add(reachable);
+                }
+            }
+        }
+    }
+
+    function showElements(avatar: HTMLElement, labelElements: HTMLCollection, markerElements: HTMLCollection) {
+        setTimeout(() => {
+            if (avatar) {
+                avatar.style.visibility = visible;
+            }
+
+            if (!map.value.showMarkersOnKeyPress) {
+                setMarkerVisibility(labelElements, markerElements, visible);
+            }
+
+        }, map.value.transitionTime ?? 1000);
+    }
+
+    function setMarkerVisibility(labelElements: HTMLCollection, markerElements: HTMLCollection, visibility: string) {
+        for (const n in Object.keys(labelElements)) {
+            const labelElement = labelElements[n] as HTMLElement;
+            labelElement.style.visibility = visibility;
+        }
+
+        for (const n in Object.keys(markerElements)) {
+            const markerElement = markerElements[n] as HTMLElement;
+            markerElement.style.visibility = visibility;
+        }
+    }
+
+    function getCoords(coordString: string) {
+        const coords = coordString.split(',');
+        const coordLeft = parseInt(coords[0]);
+        const coordTop = parseInt(coords[1]);
+        return {x: coordLeft, y: coordTop};
+    }
+
+    function getMapMargin(mapImage: any, coord: number, dimension: string): number {
+        const mapContainer = mapImage.parentElement;
+        const clientDimension = 'client' + dimension.substring(0, 1).toUpperCase() + dimension.substring(1)
+        const mapDimension = mapContainer[clientDimension];
+        const viewPortCenter = mapDimension / 2;
+        const maxMargin = mapImage[dimension] - mapDimension;
+        let mapMargin = coord > viewPortCenter ? coord - viewPortCenter : 0;
+        mapMargin = mapMargin > maxMargin ? maxMargin : mapMargin;
+        return mapMargin;
+    }
+
+    function getMapElement(parentElement: HTMLElement): HTMLImageElement {
+        return parentElement.getElementsByClassName('map-image')[0] as HTMLImageElement;
+    }
+
+    return {
+        map,
+        prepareMap,
+        showMap,
+        toggleFullScreen,
+        toggleTouchMarkersVisible
+    }
+}

package/src/UI/Composables/Sound.ts

@@ -0,0 +1,111 @@
+import {useStateStore} from "ui/StateStore";
+import {Ref, ref, watch} from "vue";
+import {storeToRefs} from "pinia";
+
+export function useSound(musicPlayerRef: Ref<HTMLAudioElement>) {
+    const store = useStateStore();
+    const {game} = storeToRefs(store);
+    const {rules, soundService} = store.services;
+
+    const musicPlayer = musicPlayerRef;
+
+    const canPlay = ref<boolean>(null);
+    const fadeInterval = ref<NodeJS.Timeout>(null);
+    const fadingMusic = ref(false);
+    const currentMusic = ref<string>(null);
+    const currentVolume = ref(1);
+
+    let audioContext: AudioContext;
+    const soundQueue: [number, string][] = [];
+
+    document.addEventListener('click', async () => {
+        if (!audioContext) {
+            audioContext = new window.AudioContext();
+            canPlay.value = true;
+            
+            if (musicPlayer.value) {
+                await musicPlayer.value.play();
+            }
+        }
+    }, { once: true });
+    
+    watch(musicPlayerRef, (newValue) => {
+        if (newValue && canPlay.value === null) {
+            canPlay.value = Boolean(audioContext);
+        }
+    }, { immediate: true });
+
+    const getSoundQueue = (): [number, string][] => {
+        Array.from(game.value.sounds.soundQueue).forEach(e => {
+            if (!e[1].playing) {
+                soundQueue.push([e[0], e[1].value]);
+                e[1].playing = true;
+            }
+        });
+
+        return soundQueue;
+    }
+
+    const getCurrentMusic = (): string => {
+        const music = soundService.getCurrentMusic();
+
+        if (rules.setup.fadeMusicInterval) {
+
+            if (!currentMusic.value) {
+                currentMusic.value = music;
+            }
+
+            if (!fadingMusic.value && music != currentMusic.value) {
+                fadingMusic.value = true;
+                fadeInterval.value = setInterval(() => fade(music), rules.setup.fadeMusicInterval);
+            }
+
+            return currentMusic.value;
+        }
+
+        return music;
+    }
+
+    const soundCompleted = (soundKey: number) => {
+        const sound = game.value.sounds.soundQueue.get(soundKey);
+
+        if (sound) {
+            sound.completeCallBack?.();
+            game.value.sounds.soundQueue.delete(soundKey);
+        }
+
+        const queueEntry = soundQueue.find(([k, _]) => soundKey === k);
+
+        if (!queueEntry) {
+            return;
+        }
+
+        const index = soundQueue.indexOf(queueEntry);
+
+        if (index > -1) {
+            soundQueue.splice(index, 1);
+        }
+    }
+
+    const fade = (newMusic: string) => {
+        const newVolume = currentVolume.value - 0.1;
+
+        if (newVolume >= 0) {
+            currentVolume.value = newVolume;
+        } else {
+            clearInterval(fadeInterval.value);
+            currentVolume.value = 1;
+            currentMusic.value = newMusic;
+            fadingMusic.value = false;
+        }
+
+        musicPlayer.value.volume = currentVolume.value;
+    }
+
+    return {
+        canPlay,
+        getSoundQueue,
+        getCurrentMusic,
+        soundCompleted
+    }
+}

package/src/UI/Composables/TextFeatures.ts

@@ -0,0 +1,148 @@
+import {addHtmlSpaces} from "src/Engine/utilityFunctions";
+import {IFeature} from 'storyScript';
+import {useStateStore} from "ui/StateStore";
+import {Ref, watch} from "vue";
+import {storeToRefs} from "pinia";
+import {isTouchDevice} from 'src/constants';
+
+export function useTextFeatures(descriptionRef: Ref<HTMLDivElement>) {
+    const activeTriggerClass = 'trigger-active';
+
+    const store = useStateStore();
+    const {game} = storeToRefs(store);
+    const {combinationService} = store.services;
+
+    const description = descriptionRef;
+
+    watch(() => game.value.combinations.activeCombination?.selectedTool, () => {
+        refreshFeatures();
+    });
+
+    const refreshFeatures = () => {
+        // Show the text of added features.
+        const featureArray = Array.from(description.value?.getElementsByTagName('feature'));
+
+        if (featureArray.length === 0) {
+            return;
+        }
+
+        featureArray.filter(e => e.innerHTML.trim() === '')
+            .forEach((e) => {
+                const feature = game.value.currentLocation.features.get(e.getAttribute('name'));
+
+                if (feature) {
+                    game.value.currentLocation.description = game.value.currentLocation.description.replace(new RegExp('<feature name="' + feature.id + '">\s*<\/feature>', 'i'), '<feature name="' + feature.id + '">' + addHtmlSpaces(feature.description) + '<\/feature>');
+                }
+            });
+
+        // Remove the text of deleted features.
+        featureArray.filter(e => e.innerHTML.trim() !== '')
+            .forEach((e) => {
+                const featureName = e.getAttribute('name')?.toLowerCase();
+
+                if (featureName && game.value.combinations.combinationResult.featuresToRemove.find(f => f === featureName)) {
+                    e.innerHTML = '';
+                }
+            });
+
+        featureArray.forEach((e) => {
+            const feature = game.value.currentLocation.features.get(e.getAttribute('name'));
+
+            if (feature && game.value.combinations.activeCombination?.selectedTool?.id === feature.id) {
+                return;
+            }
+
+            e.classList.remove('combine-active-selected', 'combine-selectable', 'feature-cursor');
+            e.classList.add('feature-cursor');
+
+            if (game.value.combinations.activeCombination) {
+                e.classList.add('combine-selectable');
+            }
+        });
+    };
+
+    const click = (ev: PointerEvent) => {
+        const triggerElement = getTriggerElement(ev.target as HTMLElement);
+
+        if (triggerElement && isTouchDevice) {
+            const activate = !triggerElement.classList.contains(activeTriggerClass);
+
+            Array.from(description.value.querySelectorAll('[data-trigger]')).forEach((el) => {
+                toggleTrigger(el as any, false);
+            });
+
+            toggleTrigger(triggerElement, activate);
+        }
+
+        const feature = getFeature(ev);
+
+        if (feature) {
+            const result = game.value.combinations.tryCombine(feature);
+            const className = combinationService.getCombineClass(feature);
+
+            if (className) {
+                const featureElement = getFeatureElement(ev);
+                featureElement.classList.add(className);
+            }
+
+            if (result.success) {
+                refreshFeatures();
+            }
+        }
+    }
+
+    const mouseOver = (ev: MouseEvent) => {
+        if (isTouchDevice) {
+            return;
+        }
+
+        toggleTrigger(getTriggerElement(ev?.target as HTMLElement), true);
+    };
+
+    const mouseOut = (ev: MouseEvent) => {
+        if (isTouchDevice) {
+            return;
+        }
+
+        toggleTrigger(getTriggerElement(ev?.target as HTMLElement), false);
+    };
+
+    const toggleTrigger = (element: HTMLElement, active: boolean) => {
+        if (!element) {
+            return;
+        }
+
+        const data = element.dataset
+        const event = game.value.currentLocation.triggeredActions?.find(([k, _]) => k === data.trigger)?.[1];
+
+        if (active) {
+            element.classList.add(activeTriggerClass);
+            event?.(game.value, active, data);
+        } else {
+            element.classList.remove(activeTriggerClass);
+            event?.(game.value, active, data);
+        }
+    }
+
+    const getTriggerElement = (element: HTMLElement): HTMLElement => {
+        return element?.closest('[data-trigger]') as HTMLElement;
+    }
+
+    const getFeatureElement = (ev: MouseEvent) => {
+        return (ev.target as HTMLElement).closest('feature');
+    }
+
+    const getFeature = (ev: MouseEvent): IFeature => {
+        const featureElement = getFeatureElement(ev);
+        const featureName = featureElement?.getAttribute('name');
+        return featureName ? game.value.currentLocation.features.get(featureName) : null;
+    }
+
+    return {
+        description,
+        refreshFeatures,
+        click,
+        mouseOver,
+        mouseOut
+    }
+}