@turnipxenon/pineapple 1.1.2

package/dist/components/PineappleBaseLayout.svelte

@@ -0,0 +1,186 @@
+<script>import "../theme.postcss";
+import "@skeletonlabs/skeleton/styles/all.css";
+import "../app.postcss";
+import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
+import RandomizedBackground from "./RandomizedBackground.svelte";
+import { page } from "$app/stores";
+import { enableBackground } from "../store";
+import DialogOverlay from "./DialogOverlay.svelte";
+import AresLogo from "../assets/characters/ares/ares_logo.webp";
+import { enableDialogueOverlay } from "./dialog_manager/DialogManagerStore";
+let pages = [];
+const updateBreadcrumb = (pathname) => {
+  pages = [];
+  let basePath = "";
+  pathname.split("/").forEach((value, index) => {
+    if (index === 0) {
+      basePath = "/";
+      pages.push({
+        path: "/",
+        name: "Home"
+      });
+      return;
+    }
+    if (value === "") {
+      return;
+    }
+    basePath += value + "/";
+    pages.push({
+      path: basePath,
+      name: value
+    });
+  });
+  pages = pages;
+};
+$:
+  updateBreadcrumb($page.url.pathname);
+let enableBackgroundValue = true;
+enableBackground.subscribe((value) => {
+  enableBackgroundValue = value;
+});
+let enableDialogueOverlayValue = true;
+enableDialogueOverlay.subscribe((value) => {
+  enableDialogueOverlayValue = value;
+});
+</script>
+
+<!-- App Shell -->
+<svelte:head>
+	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
+</svelte:head>
+
+<AppShell>
+	<svelte:fragment slot="header">
+		<!-- App Bar -->
+		<AppBar slotDefault="place-content-start" slotTrail="place-content-end">
+			<svelte:fragment slot="lead">
+				<!--TODO: add logo or something for the lead in layout-->
+				<img
+					alt="Ares's head titled towards the left with his tongue out and winking"
+					class="ares-logo"
+					src={AresLogo}
+				/>
+				<span class="mr-2" />
+				<ol class="breadcrumb">
+					{#each pages as crumb, i}
+						{#if i < pages.length - 1}
+							<li class="crumb">
+								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
+							</li>
+							<li class="crumb-separator" aria-hidden="true">&rsaquo;</li>
+						{:else}
+							<li class="crumb">{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
+						{/if}
+					{/each}
+				</ol>
+			</svelte:fragment>
+			<svelte:fragment slot="trail">
+				<LightSwitch bgLight="bg-surface-400" />
+			</svelte:fragment>
+		</AppBar>
+	</svelte:fragment>
+
+	<RandomizedBackground enable={enableBackgroundValue} />
+
+	{#if enableDialogueOverlayValue}
+		<!-- Page Route Content -->
+		<div class="default-page-container">
+			<slot />
+			<div class="footer-space" />
+		</div>
+		<DialogOverlay />
+	{:else}
+		<DialogOverlay />
+		<slot />
+	{/if}
+</AppShell>
+
+<style>
+    :root {
+        --dialog-left-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-left-pad) - var(--theme-border-base)));
+        --dialog-box-height: clamp(15em, 50vw, 18em);
+    }
+
+    .default-page-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 4em;
+        margin-left: clamp(1em, 15vw, 10em);
+        margin-right: 1em;
+        flex-direction: column;
+        z-index: 0;
+}
+
+    .ares-logo {
+        -o-object-fit: contain;
+           object-fit: contain;
+        height: 2em;
+        margin-inline-end: 0.5em;
+    }
+
+    /* breadcrumb does not work due to a lot of magic stuff i do
+       the code below is from skeleton's tailwind css:
+       https://github.com/skeletonlabs/skeleton/blob/54f4ecedabf2be6d94a670b56dc8821095ca3fc9/packages/plugin/src/styles/components/breadcrumbs.css
+
+       it likely disappeared due to code gen shenanigans and package magic */
+    .breadcrumb,
+    .breadcrumb-nonresponsive {
+        display: flex;
+        width: 100%;
+        align-items: center;
+}
+    .breadcrumb > :not([hidden]) ~ :not([hidden]),
+    .breadcrumb-nonresponsive > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(1rem * var(--tw-space-x-reverse));
+        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+    .breadcrumb,
+    .breadcrumb-nonresponsive {
+        overflow-x: auto;
+        /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
+}
+
+    .crumb {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+}
+
+    .crumb > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+    .dark .crumb-separator {
+        color: rgb(var(--color-surface-200));
+}
+    .crumb-separator {
+        display: flex;
+        opacity: 0.5;
+        color: rgb(var(--color-surface-700));
+}
+    .dark .crumb-separator {
+        color: rgb(var(--color-surface-200));
+}
+
+    /* === Auto-Responsive === */
+
+    .breadcrumb li {
+        display: none;
+}
+
+    @media (min-width: 768px) {
+
+        .breadcrumb li {
+                display: block;
+        }
+}
+    .breadcrumb li:nth-last-child(3),
+    .breadcrumb li:nth-last-child(2),
+    .breadcrumb li:nth-last-child(1) {
+        display: block;
+}
+</style>

package/dist/components/PineappleBaseLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import "../theme.postcss";
+import "@skeletonlabs/skeleton/styles/all.css";
+import "../app.postcss";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PineappleBaseLayoutProps = typeof __propDef.props;
+export type PineappleBaseLayoutEvents = typeof __propDef.events;
+export type PineappleBaseLayoutSlots = typeof __propDef.slots;
+export default class PineappleBaseLayout extends SvelteComponent<PineappleBaseLayoutProps, PineappleBaseLayoutEvents, PineappleBaseLayoutSlots> {
+}
+export {};

package/dist/components/RandomizedBackground.svelte

@@ -0,0 +1,62 @@
+<script>import { generatedDailySeed, mulberry32Generator } from "../util/stable_random";
+import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
+import BgTiledCorn from "../assets/bg_tiled/bg_tiled_corn.png";
+import BgTiledPineapple from "../assets/bg_tiled/bg_tiled_pineapple.png";
+import BgTiledReinhard from "../assets/bg_tiled/bg_tiled_reinhard.png";
+import BgTiledTomato from "../assets/bg_tiled/bg_tiled_tomato.png";
+import BgTiledTurnip from "../assets/bg_tiled/bg_tiled_turnip.png";
+import RandomizedImage from "./RandomizedImage.svelte";
+export let enable;
+const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
+const seed = generatedDailySeed();
+const rng = mulberry32Generator(seed);
+const shuffle = (array) => {
+  let currentIndex = array.length, randomIndex;
+  while (currentIndex != 0) {
+    randomIndex = Math.floor(rng() * currentIndex);
+    currentIndex--;
+    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+  }
+  return array;
+};
+let generatedImageList = [];
+let component;
+for (let i = 0; i < 20; i++) {
+  shuffle(imageList);
+  generatedImageList = generatedImageList.concat(imageList);
+}
+</script>
+
+<svelte:head>
+	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
+	{#each imageList as image}
+		<link rel="preload" as="image" href={image} />
+	{/each}
+	<link
+		as="video"
+		href="https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4"
+		rel="preload"
+	/>
+</svelte:head>
+
+{#if enable}
+	<div class="default-background" aria-hidden="true">
+		{#each generatedImageList as imageItem}
+			<svelte:component this={RandomizedImage} src={imageItem} {rng} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+    .default-background {
+        position: fixed;
+        display: flex;
+        margin-top: -8rem;
+        margin-left: -8rem;
+        width: calc(100vw + 16rem);
+        height: calc(100vh + 16rem);
+        flex-wrap: wrap;
+        overflow: hidden;
+        z-index: -10;
+    }
+</style>

package/dist/components/RandomizedBackground.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        enable: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RandomizedBackgroundProps = typeof __propDef.props;
+export type RandomizedBackgroundEvents = typeof __propDef.events;
+export type RandomizedBackgroundSlots = typeof __propDef.slots;
+export default class RandomizedBackground extends SvelteComponent<RandomizedBackgroundProps, RandomizedBackgroundEvents, RandomizedBackgroundSlots> {
+}
+export {};

package/dist/components/RandomizedImage.svelte

@@ -0,0 +1,29 @@
+<script>export let src;
+export let rng;
+let rotateRandom = rng() * 90 - 45;
+const paddingLeft = 1 + rng() * 5;
+const paddingRight = 1 + rng() * 5;
+const paddingTop = 1 + rng() * 7;
+</script>
+
+<div
+	style="--paddingTop: {paddingTop}rem;
+        --paddingLeft: {paddingLeft}rem;
+        --paddingRight: {paddingRight}rem;"
+>
+	<img {src} aria-hidden="true" style="--rotateRandom:{rotateRandom}deg;" alt="" />
+</div>
+
+<style>
+	div {
+		padding-top: var(--paddingTop);
+		padding-left: var(--paddingLeft);
+		padding-right: var(--paddingRight);
+	}
+
+	img {
+		width: 8rem;
+		height: 8rem;
+		transform: rotate(var(--rotateRandom));
+	}
+</style>

package/dist/components/RandomizedImage.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        src: URL;
+        rng: () => number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RandomizedImageProps = typeof __propDef.props;
+export type RandomizedImageEvents = typeof __propDef.events;
+export type RandomizedImageSlots = typeof __propDef.slots;
+export default class RandomizedImage extends SvelteComponent<RandomizedImageProps, RandomizedImageEvents, RandomizedImageSlots> {
+}
+export {};

package/dist/components/dialog_manager/DialogManager.d.ts

@@ -0,0 +1,77 @@
+/**
+ * DialogManager is the object we want to interact with in Svelte
+ */
+/// <reference types="svelte" />
+import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
+import { DialogState } from "../../types/pineapple_fiber/DialogState";
+import { DialogProcessor } from "./DialogProcessor";
+export type OnSetDialogChoiceCallback = (newMessage: DialogDetail) => void;
+export declare class DialogManager {
+    dialogMessageMap: Map<string, DialogDetail>;
+    dialogMessageList: DialogDetail[];
+    fullCurrentMessage: string;
+    currentMessageMeta: DialogDetail;
+    currentMessage: import("svelte/store").Writable<string>;
+    currentIndex: number;
+    previousTimestamp: number;
+    isDoneTransition: boolean;
+    currentPortrait: import("svelte/store").Writable<unknown>;
+    portraitMap: Map<string, any>;
+    currentState: DialogState;
+    hidePercent: import("svelte/motion").Tweened<number>;
+    skipNextActiveTime: number;
+    dialogProcessor: DialogProcessor;
+    _setDialogChoiceQueue: DialogDetail[];
+    _setDialogChoiceMutex: boolean;
+    onSetDialogListeners: OnSetDialogChoiceCallback[];
+    constructor();
+    /**
+     * when users interact with the dialog, they can skip the transition like in a game
+     * note that there is a cool down to this, check out skipNextActiveTime
+     */
+    skipAnimation: () => void;
+    /**
+     * hides or shows the dialog UI
+     * @param shouldEnable
+     */
+    enableDialog: (shouldEnable: boolean) => void;
+    /**
+     * sets the possible dialog that might appear on the Dialog UI
+     * note that it overwrites the previous tree and does not append on it due to the possibility
+     * of node name conflicts
+     * @param newMessageList
+     */
+    setDialogTree: (newMessageList: DialogDetail[]) => void;
+    /**
+     * Remember to call this before SetDialogTree
+     * and unsubscribe during onDestroy
+     * @param callback
+     */
+    subscribeToSetDialogChoice: (callback: OnSetDialogChoiceCallback) => void;
+    /**
+     * Remember to call this during onDestroy
+     * @param callback
+     * todo: double check if this works???
+     */
+    unsubscribeToSetDialogChoice: (callback: OnSetDialogChoiceCallback) => void;
+    /**
+     * Sets the next dialog to show depending on which special choice a href link the user
+     * has interacted with
+     * @param newMessage
+     *
+     * you can listen to this!
+     */
+    setDialogChoice: (newMessage: DialogDetail | undefined) => void;
+    _setDialogChoice: () => void;
+    setDialogToDefault: () => void;
+    /**
+     * updates the information and detail frame by frame
+     * you can think of this like the main game loop
+     *
+     * @param timestamp
+     *
+     * todo: this might be too big we might want to refactor this method for better readability
+     * ISSUE #81 https://github.com/TurnipXenon/pineapple/issues/81
+     */
+    update: (timestamp: number) => void;
+}

package/dist/components/dialog_manager/DialogManager.js

@@ -0,0 +1,239 @@
+/**
+ * DialogManager is the object we want to interact with in Svelte
+ */
+import { writable } from "svelte/store";
+import { DialogState } from "../../types/pineapple_fiber/DialogState";
+import { tweened } from "svelte/motion";
+import { cubicOut } from "svelte/easing";
+import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
+import AresHappy from "../../assets/characters/ares/ares_happy.webp";
+import AresBlushing from "../../assets/characters/ares/ares_blushing.webp";
+import AresDisappointed from "../../assets/characters/ares/ares_disappointed.webp";
+import AresLetsGo from "../../assets/characters/ares/ares_lets_go.webp";
+import AresMad from "../../assets/characters/ares/ares_mad.webp";
+import AresNeutral from "../../assets/characters/ares/ares_neutral.webp";
+import AresSlightlyMad from "../../assets/characters/ares/ares_slightly_mad.webp";
+import AresSurprised from "../../assets/characters/ares/ares_surprised.webp";
+import AresYay from "../../assets/characters/ares/ares_yay.webp";
+import { defaultDialogMessage, dialogVariableStore, enableDialogueOverlay, updateRate } from "./DialogManagerStore";
+import { DialogProcessor } from "./DialogProcessor";
+const shouldDebugYarn = false;
+export class DialogManager {
+    dialogMessageMap = new Map();
+    dialogMessageList = [];
+    fullCurrentMessage = defaultDialogMessage[0].textContent;
+    currentMessageMeta = defaultDialogMessage[0];
+    currentMessage = writable("");
+    currentIndex = 0;
+    previousTimestamp = 0;
+    isDoneTransition = false;
+    currentPortrait = writable();
+    portraitMap = new Map();
+    currentState = DialogState.Visible;
+    hidePercent = tweened(100, {
+        duration: 400,
+        easing: cubicOut
+    }); // 100 = 100%
+    skipNextActiveTime = 0;
+    dialogProcessor = new DialogProcessor();
+    // for queueing actions
+    _setDialogChoiceQueue = [];
+    _setDialogChoiceMutex = false;
+    onSetDialogListeners = [];
+    constructor() {
+        enableDialogueOverlay.subscribe((value) => {
+            // todo: investigate why we cant put setDialogDefault inside the then clause
+            // ISSUE #82 https://github.com/TurnipXenon/pineapple/issues/82
+            if (value) {
+                this.hidePercent.set(0);
+                this.setDialogToDefault();
+            }
+            else {
+                this.hidePercent.set(100);
+                this.setDialogTree([{ textContent: "" }]);
+            }
+        });
+    }
+    /**
+     * when users interact with the dialog, they can skip the transition like in a game
+     * note that there is a cool down to this, check out skipNextActiveTime
+     */
+    skipAnimation = () => {
+        if (this.previousTimestamp > this.skipNextActiveTime &&
+            this.currentState == DialogState.Visible &&
+            !this.isDoneTransition // crucial for dynamic links!
+        ) {
+            this.currentIndex = this.fullCurrentMessage.length - 1;
+            this.currentMessage.update(() => this.fullCurrentMessage.slice(0, this.currentIndex));
+        }
+    };
+    /**
+     * hides or shows the dialog UI
+     * @param shouldEnable
+     */
+    enableDialog = (shouldEnable) => {
+        enableDialogueOverlay.update(() => shouldEnable);
+    };
+    /**
+     * sets the possible dialog that might appear on the Dialog UI
+     * note that it overwrites the previous tree and does not append on it due to the possibility
+     * of node name conflicts
+     * @param newMessageList
+     */
+    setDialogTree = (newMessageList) => {
+        this.dialogMessageList = newMessageList;
+        this.dialogMessageMap.clear();
+        newMessageList.map((value) => {
+            if (value.dialogId) {
+                this.dialogMessageMap.set(value.dialogId, value);
+            }
+        });
+        // lazy load map
+        if (this.portraitMap.size == 0) {
+            this.portraitMap.set(PortraitType.AresHappy.toString(), AresHappy);
+            this.portraitMap.set(PortraitType.AresBlushing.toString(), AresBlushing);
+            this.portraitMap.set(PortraitType.AresDisappointed.toString(), AresDisappointed);
+            this.portraitMap.set(PortraitType.AresLetsGo.toString(), AresLetsGo);
+            this.portraitMap.set(PortraitType.AresMad.toString(), AresMad);
+            this.portraitMap.set(PortraitType.AresNeutral.toString(), AresNeutral);
+            this.portraitMap.set(PortraitType.AresSlightlyMad.toString(), AresSlightlyMad);
+            this.portraitMap.set(PortraitType.AresSurprised.toString(), AresSurprised);
+            this.portraitMap.set(PortraitType.AresYay.toString(), AresYay);
+        }
+        this.setDialogChoice(newMessageList[0]);
+    };
+    /**
+     * Remember to call this before SetDialogTree
+     * and unsubscribe during onDestroy
+     * @param callback
+     */
+    subscribeToSetDialogChoice = (callback) => {
+        this.onSetDialogListeners.push(callback);
+    };
+    /**
+     * Remember to call this during onDestroy
+     * @param callback
+     * todo: double check if this works???
+     */
+    unsubscribeToSetDialogChoice = (callback) => {
+        // from: https://stackoverflow.com/a/5767357/17836168
+        const index = this.onSetDialogListeners.indexOf(callback);
+        if (index > -1) {
+            // only splice array when item is found
+            this.onSetDialogListeners.splice(index, 1); // 2nd parameter means remove one item only
+        }
+    };
+    /**
+     * Sets the next dialog to show depending on which special choice a href link the user
+     * has interacted with
+     * @param newMessage
+     *
+     * you can listen to this!
+     */
+    setDialogChoice = (newMessage) => {
+        if (!newMessage || !newMessage.textContent) {
+            return;
+        }
+        this._setDialogChoiceQueue.push(newMessage);
+        if (!this._setDialogChoiceMutex) {
+            this._setDialogChoiceMutex = true; // not a true mutex but this will do
+            this._setDialogChoice();
+        }
+    };
+    _setDialogChoice = () => {
+        const newMessage = this._setDialogChoiceQueue.shift();
+        if (newMessage === undefined) {
+            this._setDialogChoiceMutex = false; // set it free!
+            this.onSetDialogListeners.forEach((listener) => {
+                listener(this.currentMessageMeta);
+            });
+            return;
+        }
+        this.currentMessageMeta = newMessage;
+        // set the portrait
+        let portraitValue = AresHappy;
+        if (this.currentMessageMeta.portraitType) {
+            portraitValue = this.portraitMap.get(this.currentMessageMeta.portraitType);
+        }
+        if (portraitValue) {
+            this.currentPortrait.update(() => portraitValue);
+        }
+        // process the dialogue here line-by-line
+        this.fullCurrentMessage = this.dialogProcessor.processDialog(this.currentMessageMeta);
+        this.currentMessage.update(() => "");
+        this.currentIndex = 0;
+        this.skipNextActiveTime = this.previousTimestamp + 1000; // guard
+        this.isDoneTransition = false; // must be after the guard
+        if (shouldDebugYarn) {
+            console.info(`Currently processing node: ${this.currentMessageMeta.dialogId}`);
+        }
+        // save that we visited AND processed the node
+        if (this.currentMessageMeta.dialogId) {
+            const key = `+${this.currentMessageMeta.dialogId}`;
+            const value = Number(dialogVariableStore.getItem(key));
+            if (isNaN(value)) {
+                dialogVariableStore.setItem(key, "1");
+            }
+            else {
+                dialogVariableStore.setItem(key, `${value + 1}`);
+            }
+        }
+        // reloop this to process all messages
+        this._setDialogChoice();
+    };
+    setDialogToDefault = () => {
+        this.setDialogTree(defaultDialogMessage);
+    };
+    /**
+     * updates the information and detail frame by frame
+     * you can think of this like the main game loop
+     *
+     * @param timestamp
+     *
+     * todo: this might be too big we might want to refactor this method for better readability
+     * ISSUE #81 https://github.com/TurnipXenon/pineapple/issues/81
+     */
+    update = (timestamp) => {
+        if (this.currentState == DialogState.Invisible || this.currentState == DialogState.Busy) {
+            window.requestAnimationFrame(this.update);
+            return;
+        }
+        // if visible
+        // text transition loop
+        if (!this.isDoneTransition && this.currentIndex > this.fullCurrentMessage.length) {
+            const elementList = document.getElementsByClassName("dialog-choice");
+            for (const el of elementList) {
+                el.addEventListener("click", (event) => {
+                    // todo: make more robust; for now we're assuming first class is our choice
+                    const choice = el.classList[0].split("-")[1];
+                    this.setDialogChoice(this.dialogMessageMap.get(choice));
+                });
+            }
+            this.isDoneTransition = true;
+        }
+        // guard: skip if done or if not yet time to update
+        if (this.currentIndex > this.fullCurrentMessage.length ||
+            this.previousTimestamp + updateRate > timestamp) {
+            window.requestAnimationFrame(this.update);
+            return;
+        }
+        this.previousTimestamp = timestamp;
+        // check if valid text
+        // there is an assumption that previous character is valid
+        // let validCharacterIndex = this.currentLength - 1;
+        // validCharacterIndex++;
+        // the code above is just to show you how it looks like but let's assume
+        // that currentLength = validCharacter + 1
+        while (this.fullCurrentMessage[this.currentIndex] == "<" &&
+            this.currentIndex + 1 < this.fullCurrentMessage.length) {
+            // find valid character, trap with closing
+            this.currentIndex = this.fullCurrentMessage.indexOf(">", this.currentIndex) + 1;
+            // normalize
+            this.currentIndex = Math.min(this.currentIndex, this.fullCurrentMessage.length - 1);
+        }
+        this.currentMessage.update(() => this.fullCurrentMessage.slice(0, this.currentIndex));
+        // increment
+        ++this.currentIndex;
+        window.requestAnimationFrame(this.update);
+    };
+}