@strixit/storyscript 0.0.0-stage → 1.0.0

package/src/UI/Composables/VisualFeatures.ts

@@ -0,0 +1,220 @@
+import {computed, onUpdated, Ref, ref, watch} from "vue";
+import {useStateStore} from "ui/StateStore";
+import {storeToRefs} from "pinia";
+import {isTouchDevice} from 'src/constants';
+
+const prepareLoadedImages = (locationImagesRef: HTMLImageElement[]) => {
+    const loadedImages: { element: HTMLImageElement, loadPromise: Promise<void> }[] = [];
+
+    locationImagesRef.forEach(l => {
+        let promiseResolve: () => {};
+
+        const loadPromise = new Promise<void>((r: any): void => {
+            promiseResolve = r;
+        });
+
+        l.onload = promiseResolve;
+
+        if (l.naturalWidth > 0) {
+            promiseResolve();
+        }
+
+        loadedImages.push({
+            element: l,
+            loadPromise: loadPromise
+        });
+    });
+
+    return loadedImages;
+}
+
+export function useVisualFeatures(imageRef: Ref<HTMLDivElement>) {
+    const store = useStateStore();
+    const {
+        game,
+        defaultCombination,
+        combinationCursor
+    } = storeToRefs(store);
+
+    const locationFeatures = imageRef;
+    const locationImageOriginalWidth = new Map<string, number>();
+    const featureImageOriginalDimensions = new Map<string, [number, number]>();
+    const areaOriginalCoordinates = new Map<string, string>();
+    const factor = ref(1);
+    const locationId = computed(() => game.value.currentLocation.id);
+    const combinationPicture = computed(() => game.value.combinations.activeCombination?.selectedCombinationAction?.picture ?? defaultCombination.value?.picture);
+
+    const calculateFactor = () => {
+        if (!locationFeatures.value) {
+            return;
+        }
+
+        const mainImage = locationFeatures.value.querySelector('img');
+        factor.value = mainImage.width / locationImageOriginalWidth.get(game.value.currentLocation.id);
+    }
+
+    window.onresize = () => {
+        const oldFactor = factor.value;
+        calculateFactor();
+        
+        if (factor.value !== oldFactor) {
+            prepareFeatures();
+        }
+    };
+
+    onUpdated(() => {
+        prepareFeatures();
+    });
+
+    watch(() => game.value.combinations.activeCombination, () => setCombinationSymbols());
+
+    const initFeatures = () => {
+        const mainImage = locationFeatures.value?.querySelector('img');
+
+        if (!locationImageOriginalWidth.has(locationId.value)) {
+            locationImageOriginalWidth.set(locationId.value, mainImage.naturalWidth);
+        }
+
+        calculateFactor();
+        prepareFeatures();
+    }
+
+    const prepareFeatures = () => {
+        if (!locationFeatures.value) {
+            return;
+        }
+
+        const locationImages = Array.from(locationFeatures.value.querySelectorAll('img.feature-picture') ?? []) as HTMLImageElement[];
+        const loadedImages = prepareLoadedImages(locationImages);
+        const allPromises = loadedImages.map(i => i.loadPromise);
+
+        Promise.all(allPromises).then(() => {
+            // Resize item images
+            loadedImages.map(l => l.element).forEach(i => {
+                const featureId = i.id.split('-')[1];
+                const imageKey = `${locationId.value}-${featureId}`;
+
+                if (!featureImageOriginalDimensions.has(imageKey)) {
+                    featureImageOriginalDimensions.set(imageKey, [i.naturalWidth, i.naturalHeight]);
+                }
+
+                const originalDimensions = featureImageOriginalDimensions.get(imageKey);
+                i.width = i.dataset.spriteWidth ? Number.parseInt(i.dataset.spriteWidth) * factor.value : Math.round(originalDimensions[0] * factor.value);
+                i.height = i.dataset.spriteHeight ? Number.parseInt(i.dataset.spriteHeight) * factor.value : Math.round(originalDimensions[1] * factor.value);
+            });
+
+            // Reposition areas and images for features and add symbols for active combination.
+            const areas = Array.from(locationFeatures.value.querySelectorAll('area'));
+
+            areas.forEach(a => {
+                const featureId = a.id.split('-')[2];
+                const areaKey = `${locationId.value}-${featureId}`;
+
+                if (!areaOriginalCoordinates.has(areaKey)) {
+                    areaOriginalCoordinates.set(areaKey, a.coords);
+                }
+
+                const originalCoords = areaOriginalCoordinates.get(areaKey);
+                const calculatedCoords = originalCoords.split(',').map(c => Math.round(parseInt(c.trim()) * factor.value));
+                a.coords = calculatedCoords.join(',');
+
+                // Calculate the center of the area to place a symbol later on.
+                let totalX = 0, totalY = 0;
+
+                calculatedCoords.forEach((c, i) => {
+                    (i + 1) % 2 !== 0 ? totalX += c : totalY += c;
+                })
+
+                const avgX = Math.round(totalX / (calculatedCoords.length / 2));
+                const avgY = Math.round(totalY / (calculatedCoords.length / 2));
+                a.dataset.imageCoords = `${avgX},${avgY}`;
+                positionFeatureImage(featureId, avgX, avgY);
+            });
+
+            // We need a timeout here to allow the DOM to update so we can get the updated coordinates for
+            // the symbols from the area data attributes.
+            setTimeout(() => {
+                setCombinationSymbols();
+            });
+        });
+    }
+
+    const positionFeatureImage = (featureId: string, x: number, y: number) => {
+        const feature = game.value.currentLocation.features.get(featureId);
+        
+        if (!feature?.picture && !feature?.animation) {
+            return;
+        }
+
+        const featureImage = Array.from(locationFeatures.value.querySelectorAll('img.feature-picture'))
+            .find(a => a.id.split('-')[1] === featureId) as HTMLImageElement;
+
+        if (!featureImage) {
+            return;
+        }
+
+        const featureHeight = feature.animation ? feature.animation.height * factor.value : featureImage.height;
+        const featureWidth = feature.animation ? feature.animation.width * factor.value : featureImage.width;
+        const top = Math.round(y - featureHeight / 2);
+        const left = Math.round(x - featureWidth / 2);
+        featureImage.style.top = top + 'px';
+        featureImage.style.left = left + 'px';
+    }
+
+    const setCombinationSymbols = () => {
+        if (!isTouchDevice) {
+            return;
+        }
+
+        const areas = Array.from(locationFeatures.value?.querySelectorAll('area'));
+        const existingSymbols = Array.from(imageRef.value?.querySelectorAll('.combination-symbol'));
+
+        existingSymbols?.forEach(s => {
+            const symbolImage = s as HTMLImageElement;
+            symbolImage.onclick = null;
+            imageRef.value.removeChild(symbolImage);
+        });
+
+        if (!combinationPicture.value) {
+            return;
+        }
+
+        areas?.forEach(a => {
+            const coords = a.dataset.imageCoords?.split(',').map(c => parseInt(c));
+
+            if (!coords || !coords.length) {
+                return;
+            }
+
+            const featureId = a.id.split('-')[2];
+            const feature = game.value.currentLocation.features.get(featureId);
+
+            if (!feature || feature.interactive === false) {
+                return;
+            }
+
+            const image = document.createElement('img');
+            image.src = `resources/${combinationPicture.value}`;
+            const imageWidth = Math.round(combinationCursor.value.dimensions.width * factor.value);
+            const imageHeight = Math.round(combinationCursor.value.dimensions.height * factor.value);
+            const imagePosX = Math.round(coords[0] - imageWidth / 2);
+            const imagePosY = Math.round(coords[1] - imageHeight / 2);
+
+            image.style.position = 'absolute';
+            image.style.width = imageWidth + 'px';
+            image.style.height = imageHeight + 'px';
+            image.style.top = `${imagePosY}px`;
+            image.style.left = `${imagePosX}px`;
+            image.classList.add('combination-symbol');
+            image.onclick = () => game.value.combinations.tryCombine(feature);
+            imageRef.value.appendChild(image);
+        });
+    }
+
+    return {
+        locationFeatures,
+        factor,
+        initFeatures,
+        prepareFeatures
+    }
+}

package/src/UI/Composables/index.ts

@@ -0,0 +1,15 @@
+import { useCustomCursor } from './CustomCursor';
+import { useLocationMap } from './LocationMap';
+import { usePlayStateWatch } from './playStateWatch';
+import { useSound } from './Sound';
+import { useTextFeatures } from './TextFeatures';
+import { useVisualFeatures } from './VisualFeatures';
+
+export {
+    useCustomCursor,
+    useLocationMap,
+    usePlayStateWatch,
+    useSound,
+    useTextFeatures,
+    useVisualFeatures
+}

package/src/UI/Composables/playStateWatch.ts

@@ -0,0 +1,31 @@
+import {Ref} from "vue";
+import {useStateStore} from "ui/StateStore";
+import {storeToRefs} from "pinia";
+import {PlayState} from 'storyScript';
+
+const saveStates = [PlayState.Combat, PlayState.Conversation, PlayState.Trade];
+
+export function usePlayStateWatch(uiRoot: Ref<HTMLElement>) {
+    const rootElement = uiRoot;
+    const store = useStateStore();
+    const {game} = storeToRefs(store);
+    const {gameService, dataService} = store.services;
+
+    gameService.watchPlayState((_, newState, oldState) => {
+        stopAutoplay();
+
+        if (newState === null && saveStates.includes(oldState)) {
+            // Save the game after finishing conversations, trade and combat.
+            dataService.saveGame(game.value);
+        }
+    });
+
+    const stopAutoplay = () => {
+        if (!rootElement.value) {
+            return;
+        }
+        
+        const mediaElements = rootElement.value.querySelectorAll('audio:not(.storyscript-player), video:not(.storyscript-player)');
+        mediaElements.forEach((m: Element) => (m as HTMLMediaElement).pause());
+    }
+}

package/src/UI/StateStore.ts

@@ -0,0 +1,237 @@
+import {defineStore} from "pinia";
+import {App, computed, Ref, ref} from 'vue';
+
+import {ServiceFactory} from "src/Engine/ServiceFactory";
+import {Error} from "ui/error";
+import {isDevelopment} from 'src/constants';
+import {
+    ActionType,
+    IAction,
+    ICharacter,
+    ICombinationAction,
+    ICompiledLocation,
+    ICustomCursor,
+    IGame,
+    IInterfaceTexts,
+    IPerson,
+    IRules,
+    ITrade
+} from "src/Engine";
+import {
+    IAutoplayService,
+    ICharacterService,
+    ICombatService,
+    ICombinationService,
+    ICommandService,
+    IConversationService,
+    IDataService,
+    IGameService,
+    IItemService,
+    ISoundService,
+    ITradeService
+} from "src/Engine/Interfaces/services";
+
+export const useStateStore = defineStore('appState', () => {
+    let serviceFactory: ServiceFactory;
+
+    const error = ref<Error>(null);
+    const availableLocations = ref<{ id: string, name: string }[]>();
+
+    const game = ref<IGame>(<IGame>{});
+
+    const useBackpack = ref(false);
+    const useGround = ref(false);
+    const useEquipment = ref(false);
+    const useCharacterSheet = ref(false);
+    const useQuests = ref(false);
+
+    const enemiesPresent = computed(() => game.value.currentLocation?.enemies.filter(e => !e.inactive).length > 0);
+    const activePersons = computed(() => game.value.currentLocation?.persons.filter(e => !e.inactive) || []);
+    const activeEnemies = computed(() => game.value.currentLocation?.enemies.filter(e => !e.inactive) || []);
+    const activeItems = computed(() => game.value.currentLocation?.items.filter(e => !e.inactive) || []);
+    const activeActions = computed(() => game.value.currentLocation?.actions.filter(i => !i[1].inactive) || []);
+    const activeDestinations = computed(() => game.value.currentLocation?.destinations.filter(e => !e.inactive) || []);
+
+    const defaultCombination = ref<ICombinationAction>(null);
+    const customCursor = ref<ICustomCursor>(null);
+    const combinationCursor = ref<ICustomCursor>(null);
+
+    const services = {
+        soundService: <ISoundService>null,
+        itemService: <IItemService>null,
+        combatService: <ICombatService>null,
+        characterService: <ICharacterService>null,
+        combinationService: <ICombinationService>null,
+        gameService: <IGameService>null,
+        conversationService: <IConversationService>null,
+        tradeService: <ITradeService>null,
+        dataService: <IDataService>null,
+        autoplayService: <IAutoplayService>null,
+        commandService: <ICommandService>null,
+        texts: <IInterfaceTexts>null,
+        rules: <IRules>null
+    };
+
+    const initErrorHandling = (app: App<Element>) => {
+        addEventListener("error", event => {
+            error.value = {message: event.message, stackTrace: event.error.stack};
+            event.stopPropagation();
+        });
+        addEventListener("unhandledrejection", event => {
+            error.value = {message: event.reason.message, stackTrace: event.reason.stack};
+            event.stopPropagation();
+        });
+
+        if (!isDevelopment) {
+            app.config.errorHandler = (e: any, vm, info) => error.value = {
+                message: e.message,
+                info: info,
+                stackTrace: e.stack
+            };
+        }
+    }
+
+    const setStoreData = (factory: ServiceFactory) => {
+        serviceFactory = factory;
+
+        // THIS LINE IS CRUCIAL! It ensures the proxy object created by Vue is used throughout the application.
+        // Without this, reactivity doesn't work!
+        serviceFactory.init(game.value);
+
+        services.texts = serviceFactory.GetTexts();
+        services.rules = serviceFactory.GetRules();
+        services.soundService = serviceFactory.GetSoundService();
+        services.itemService = serviceFactory.GetItemService();
+        services.combatService = serviceFactory.GetCombatService();
+        services.characterService = serviceFactory.GetCharacterService();
+        services.combinationService = serviceFactory.GetCombinationService();
+        services.gameService = serviceFactory.GetGameService();
+        services.conversationService = serviceFactory.GetConversationService();
+        services.tradeService = serviceFactory.GetTradeService();
+        services.dataService = serviceFactory.GetDataService();
+        services.autoplayService = serviceFactory.GetAutoplayService();
+        services.commandService = serviceFactory.GetCommandService();
+        availableLocations.value = serviceFactory.AvailableLocations.sort((a, b) => a.name.localeCompare(b.name));
+
+        initCombinations();
+
+        if (services.rules.setup?.customCursorImage) {
+            initCustomCursor(services.rules.setup.customCursorImage, customCursor)
+        }
+    }
+
+    const setActiveCharacter = (character: ICharacter) => {
+        game.value.activeCharacter = character;
+    }
+
+    const trade = (location: ICompiledLocation, trade: IPerson | ITrade): boolean => {
+        const locationTrade = <ITrade>trade;
+
+        if (locationTrade && !(<any>locationTrade).type && Array.isArray(locationTrade)) {
+            trade = location.trade.find(t => t.id === locationTrade[0]);
+        }
+
+        services.tradeService.trade(trade);
+
+        // Return true to keep the action button for trade locations.
+        return true;
+    };
+
+    const showEquipment = (character: ICharacter): boolean =>
+        useEquipment
+        && character?.equipment
+        && Object.keys(character.equipment)
+            .some(k => (<any>character.equipment)[k] !== undefined);
+
+    const showDescription = (type: string, item: any, title: string): void => {
+        game.value.currentDescription = {title: title, type: type, item: item};
+    }
+
+    const startCombat = (location: ICompiledLocation, person?: IPerson): void => {
+        if (person) {
+            // The person becomes an enemy when attacked!
+            location.persons.delete(person);
+            location.enemies.add(person);
+        }
+
+        services.combatService.initCombat();
+    }
+
+    const getButtonClass = (action: [string, IAction]): string => {
+        const type = action[1].actionType || ActionType.Regular;
+        let buttonClass = 'btn-';
+
+        switch (type) {
+            case ActionType.Regular:
+                buttonClass += 'info'
+                break;
+            case ActionType.Check:
+                buttonClass += 'warning';
+                break;
+            case ActionType.Combat:
+                buttonClass += 'danger';
+                break;
+            case ActionType.Trade:
+                buttonClass += 'secondary';
+                break;
+        }
+
+        return buttonClass;
+    }
+
+    const initCombinations = () => {
+        const combinations = services.rules.combinations;
+
+        if (!combinations) {
+            return;
+        }
+
+        defaultCombination.value = combinations.combinationActions.find(c => c.isDefault);
+        const defaultCombinationSymbol = combinations.combinationActions.find(c => c.picture)?.picture?.toLowerCase();
+
+        if (defaultCombinationSymbol) {
+            initCustomCursor(defaultCombinationSymbol, combinationCursor, 'default.png');
+        }
+    };
+
+    const initCustomCursor = (cursorImage: string, cursorRef: Ref<ICustomCursor>, placeholder?: string): void => {
+        const image = document.createElement('img');
+        image.src = `resources/${cursorImage}`;
+        image.onload = () => {
+            cursorRef.value = {
+                image: cursorImage,
+                dimensions: {width: image.naturalWidth, height: image.naturalHeight},
+                style: `url(resources/${placeholder ?? cursorImage}) ${image.naturalWidth / 2} ${image.naturalHeight / 2}, auto`
+            }
+        }
+    }
+
+    return {
+        error,
+        game,
+        useGround,
+        useBackpack,
+        useEquipment,
+        useCharacterSheet,
+        useQuests,
+        services,
+        availableLocations,
+        enemiesPresent,
+        activePersons,
+        activeEnemies,
+        activeItems,
+        activeActions,
+        activeDestinations,
+        defaultCombination,
+        combinationCursor,
+        customCursor,
+        initErrorHandling,
+        setStoreData,
+        setActiveCharacter,
+        showEquipment,
+        showDescription,
+        getButtonClass,
+        trade,
+        startCombat
+    }
+});

package/src/UI/error.ts

@@ -0,0 +1,6 @@
+export interface Error {
+    message: string;
+    stackTrace: string;
+    component?: string;
+    info?: string;
+}

package/src/UI/helpers.ts

@@ -0,0 +1,62 @@
+import {entityTypeRegex, IDefinitions, IGame} from 'storyScript';
+import {parseHtmlDocumentFromString} from "src/Engine/utilityFunctions";
+
+export function getDefinitions(assets: Record<string, unknown>){
+    const definitions = <IDefinitions>{};
+    
+    // Loop over all found files to register the assets with the proper type.
+    for (const path in assets) {
+        const asset = assets[path];
+        const entityType = entityTypeRegex.exec(path)?.[0];
+
+        if (!entityType) {
+            throw new Error(`'${path}' is not a valid entity type path!`);
+        }
+
+        const property = Object.getOwnPropertyNames(asset)[0];
+        const entityFunc = asset[property];
+
+        // Add the entity function to the definitions object for creating entities at run-time.
+        definitions[entityType] = definitions[entityType] || [];
+
+        if (definitions[entityType].indexOf(entityFunc) === -1) {
+            definitions[entityType].push(entityFunc);
+        }
+    }
+
+    return definitions;
+}
+
+export function checkAutoplay(game: IGame, value: string) {
+    if (!value) {
+        return;
+    }
+
+    const htmlDocumentFromString = parseHtmlDocumentFromString(value).body;
+    value = htmlDocumentFromString.innerHTML;
+    value = checkAutoplayProperties(value, htmlDocumentFromString.getElementsByTagName('audio'), game.sounds.playedAudio);
+    value = checkAutoplayProperties(value, htmlDocumentFromString.getElementsByTagName('video'), game.sounds.playedAudio);
+    return value;
+}
+
+const autoplayAttribute = 'autoplay';
+const sourceAttribute = 'src';
+
+function checkAutoplayProperties(value: string, elements: HTMLCollectionOf<HTMLElement>, playedAudio: string[]) {
+    Array.from(elements).forEach(e => {
+        const originalText = e.outerHTML;
+        const source = e.getElementsByTagName('source')[0]?.getAttribute(sourceAttribute)?.toLowerCase()
+            ?? e.getAttribute(sourceAttribute)?.toLowerCase();
+
+        if (originalText && source && e.hasAttribute(autoplayAttribute)) {
+            if (playedAudio.indexOf(source) < 0) {
+                playedAudio.push(source);
+            } else {
+                e.removeAttribute(autoplayAttribute);
+                value = value.replace(originalText, e.outerHTML);
+            }
+        }
+    });
+
+    return value;
+}

package/src/UI/index.ts

@@ -0,0 +1,13 @@
+import {useStateStore} from "./StateStore";
+import {startup} from "./startup";
+import { default as ModalDialog } from "./Components/Common/ModalDialog.vue";
+import {checkAutoplay} from "ui/helpers";
+
+export * from './Composables'
+
+export {
+    useStateStore,
+    ModalDialog,
+    startup,
+    checkAutoplay
+}

package/src/UI/main.ts

@@ -0,0 +1,62 @@
+import {
+    addArrayExtensions,
+    addFunctionExtensions,
+    startup
+} from "storyScript";
+import 'game/ui/styles/game.css'
+// @ts-ignore
+import('storyscript/styles');
+// @ts-ignore
+import {Rules} from 'game/rules';
+// @ts-ignore
+import {CustomTexts} from 'game/customTexts';
+import {currentGameName} from "../../currentGameName";
+
+addFunctionExtensions();
+addArrayExtensions();
+const assets = importAssets();
+const components = getComponents();
+
+startup(components, assets, currentGameName, Rules(), CustomTexts());
+
+export function importAssets(): Record<string, unknown> {
+    return import.meta.glob([
+        'game/actions/**/*.ts',
+        'game/features/**/*.ts',
+        'game/items/**/*.ts',
+        'game/enemies/**/*.ts',
+        'game/persons/**/*.ts',
+        'game/quests/**/*.ts',
+        'game/locations/**/*.ts',
+        'game/maps/**/*.ts'
+    ], {eager: true, caseSensitive: false});
+}
+
+function getComponents(): Map<string, any> {
+    const combinedTemplates = new Map<string, any>();
+    const defaultTemplates = import.meta.glob('./Components/**/*.vue', {eager: true, caseSensitive: false});
+    const customTemplates = import.meta.glob('game/ui/**/*.vue', {eager: true, caseSensitive: false});
+
+    Object.keys(customTemplates).forEach(t => {
+        const key = getKey(t);
+
+        if (key) {
+            combinedTemplates.set(getKey(t), customTemplates[t]);
+        }
+    });
+
+    Object.keys(defaultTemplates).forEach(t => {
+        const key = getKey(t);
+
+        if (key && !combinedTemplates.has(key)) {
+            combinedTemplates.set(key, defaultTemplates[t]);
+        }
+    });
+
+    return combinedTemplates;
+}
+
+function getKey(path: string) {
+    const capture = path.match(/([a-zA-Z]{1,}).vue$/);
+    return capture ? capture[1] : null;
+}