{"version":3,"file":"full.c24dfa83.js","sources":["../../../../layouts/full.vue"],"sourcesContent":["<!--\n    here we have the full layout of the game\n    There 3 rows:\n    - the first row is the navigation bar\n    - the second row is the main content\n    - the third row is the footer\n\n    start script with setup attribute\n -->\n<script setup>\n// import RoboNationCore from composables\nimport RoboNationCore from '~/composables/RoboNationCore';\n// import {useModalStore} from store\nimport { useModalStore } from '~/store/modal';\nimport useGameStore from '~/store/game';\n\n// use const t for i18n\nconst { t } = useI18n();\n\n// get router\nconst router = useRouter();\n// add a const for useRoute\nconst route = useRoute();\n\n// add a ref for isGamePaused\nconst isGamePaused = ref(false);\n\nconst isNewPage = ref(false);\n\n// add a const for locale from i18n\nconst locale = useI18n().locale;\n\n/*\n    add a ref for a submenu items. It is an array of object.\n    this submenu will allow to manage the game.\n    Each object has :\n        - a name (use i18n key, with prefix global.)\n        - a path\n        - a boolean to know if the link is active\n        - a theme\n        - a icon\n    For now it will be 'Settings', 'Save game', 'Quit game'\n        [\n            {\n                name: 'global.settings',\n                path: '/settings/',\n                active: false,\n                theme: 'primary',\n                icon: 'assembly',\n            },\n            {\n                name: 'global.saveGame',\n                path: '/save-game/',\n                active: false,\n                theme: 'sales',\n                icon: 'protected',\n            },\n            {\n                name: 'global.quitGame',\n                path: '/quit-game/',\n                active: false,\n                theme: 'secondary',\n                icon: 'stop',\n            },\n        ]\n*/\nconst adminItems = ref([\n    {\n        name: 'global.settings',\n        btnCallback: () => enterSettings(),\n        active: false,\n        theme: 'assembly',\n        icon: 'small-gear',\n    },\n    {\n        name: 'global.continue',\n        btnCallback: () => continueGame(),\n        active: false,\n        theme: 'primary',\n        icon: 'small-disk',\n    },\n    {\n        name: 'global.saveGame',\n        btnCallback: () => saveGame(),\n        active: false,\n        theme: 'sales',\n        icon: 'small-protected',\n    },\n    {\n        name: 'global.quitGame',\n        btnCallback: () => quitGame(),\n        active: false,\n        theme: 'secondary',\n        icon: 'small-stop',\n    },\n]);\n\n// add a ref for showPanel, set it to false\nconst showPanel = ref(false);\nconst showEventNotification = ref(false);\n// add ref for leave transition duration. Set it to 2000\nconst leaveTransitionDuration = ref(300);\n// add a computed to add 'ms' to leaveTransitionDuration\nconst cssLeaveTransitionDuration = computed(() => {\n    return leaveTransitionDuration.value + 'ms';\n});\n\n// add a method for each submenu item\n// - enterSettings\n// - saveGame\n// - quitGame\n// each method will open a modal\n// for now, just add a console.log with the name of the method\nconst enterSettings = () => {\n    // open modal with useModalStore with Title Settings and content 'Settings'\n    useModalStore().openModal({\n        title: 'global.settings',\n        button1: {\n            open: true,\n            text: 'global.close',\n            callback: null,\n            theme: 'secondary',\n            extClass: '',\n        },\n        slider: {\n            open: true,\n        },\n    });\n};\n\n/*\n    saveGame:\n    different cases can happen:\n    - we save the game for the first time\n    - the game is already saved, we overwrite the save\n*/\n\nconst saveGame = () => {\n    // redirect to save game page\n    router.push('/' + locale.value + '/save-game/');\n};\n\nconst isSales = ref(false);\n\n/*\n    quitGame:\n    open a modal with a confirmation message (use useModalStore).\n    title is 'Quit game'.\n    message is 'Are you sure you want to quit the game?'\n    Every text is in the language of the game (use i18n, with prefix global.)\n    use a second button of the modal to redirect to the home page\n*/\n\nconst quitGame = () => {\n    // open modal with useModalStore with Title Quit game and message 'Are you sure you want to quit the game?'\n    // use i18n for every text and  label (use prefix global.)\n    // you don't need to define button 1, it will be the default button (cancel button)\n    useModalStore().openModal({\n        title: t('global.quitGame'),\n        message: t('global.modal.quitGameMessage'),\n        button2: {\n            open: true,\n            text: t('global.quit'),\n        },\n    });\n    // susbcribe to button2 click event\n    // if button2 is clicked, redirect to home page\n    // use the same susbcribe method as in save-game.vue\n    useModalStore().$subscribe((mutation, state) => {\n        if (state.button2.isClicked) {\n            useModalStore().closeModal();\n            router.push('/' + locale.value);\n        }\n    });\n};\n\n// add a method for continueGame, it redirect to load-game page\nconst continueGame = () => {\n    router.push('/' + locale.value + '/load-game/');\n};\n\nconst handleEmitIsSales = (isSalesArg = false) => {\n    isSales.value = isSalesArg;\n};\n\n// watch route, if route include 'game-pause', set isGamePaused to true, else set it to false\nconst watchRoutePath = watch(\n    () => route.path,\n    () => {\n        if (route.path.includes('game-pause')) {\n            isGamePaused.value = true;\n            // pause game with robonation core instance pause() function\n            RoboNationCore.instance.pause();\n        } else {\n            isGamePaused.value = false;\n            // resume game with robonation core instance resume() function\n            RoboNationCore.instance.resume();\n        }\n    },\n    { immediate: true }\n);\n\nonBeforeRouteLeave((to, from, next) => {\n    isNewPage.value = false;\n    // wait for leave transition to finish\n    setTimeout(() => {\n        next();\n    }, leaveTransitionDuration.value);\n});\n\n// on mounted set isNewPage to true\nonMounted(() => {\n    isNewPage.value = true;\n});\n\n// on before unmount, remove watchRoutePath\nonBeforeUnmount(() => {\n    watchRoutePath();\n});\n</script>\n\n<!--\n    template:\n    add a div with class c-layout. Use tailwind class to set the dimension to full screen width and Height.\n\n    add a div with class c-layout__wrapper. it will contain the 3 rows.\n    add a div with class c-layout__navigation. it will contain the navigation bar.\n    add a div with class c-layout__content. it will contain the main content.\n    add a div with class c-layout__footer. it will contain the footer.\n\n\n    more style will be added later in the style tag\n    -->\n<template>\n    <div class=\"c-layout__wrapper\">\n        <div class=\"c-layout__navigation\">\n            <div class=\"relative\">\n                <template v-if=\"useGameStore().isEvent.inProgress\">\n                    <Button\n                        :icon=\"'horn'\"\n                        :variant=\"'c-btn--square c-btn--ghost'\"\n                        :theme=\"'primary'\"\n                        @click=\"showEventNotification = !showEventNotification\"\n                    >\n                    </Button>\n                    <Transition name=\"fade\">\n                        <div v-show=\"showEventNotification\" class=\"absolute left-0 top-20 z-50\">\n                            <Notification\n                                :event=\"{\n                                    content: RoboNationCore.instance.currentEvent,\n                                    isUpdate: useGameStore().isEvent.isUpdate,\n                                }\"\n                                :status=\"true\"\n                                :theme=\"'primary'\"\n                                style=\"--notification-width: 458px\"\n                                @click=\"showEventNotification = false\"\n                            />\n                        </div>\n                    </Transition>\n                </template>\n            </div>\n            <Navigation />\n        </div>\n        <div class=\"c-layout__content\">\n            <Transition name=\"page-frame\">\n                <div v-if=\"isNewPage\">\n                    <div class=\"c-page-frame relative max-h-[600px]\">\n                        <div class=\"c-page-frame__background h-full w-full\"></div>\n                        <Transition name=\"fade\">\n                            <div v-if=\"isNewPage\">\n                                <div\n                                    class=\"c-page-frame__layout u-gradient-border theme-primary flex flex-col gap-y-4 p-8\"\n                                >\n                                    <div v-if=\"!isGamePaused\" class=\"c-page-frame__header flex w-full justify-between\">\n                                        <!-- in next div, content is in one column with a vertical gap of 8px (reminder , index for tailwind is multiple of 4), justify is start -->\n                                        <div class=\"flex max-w-[676px] flex-col justify-start gap-2\">\n                                            <slot name=\"header\" />\n                                        </div>\n                                        <GameProgression />\n                                    </div>\n                                    <slot v-if=\"!isGamePaused\" name=\"subnav\" />\n                                    <!-- set variable --page-frame-content-height to 22rem -->\n                                    <div\n                                        class=\"c-page-frame__content w-full\"\n                                        :style=\"{ '--page-frame-content-height': '22rem' }\"\n                                    >\n                                        <!--\n                                                    add a separation line with\n                                                    - 2px height\n                                                    - full width\n                                                    - color is primary gradient (use tailwing class bg-primary-500)\n                                                    - add a vertical spacing about 16px above and behind the line (use a tailwind class my-4)\n                                                -->\n\n                                        <div v-if=\"!isGamePaused\" class=\"mb-4 mt-2 h-[1px] w-full bg-primary-500\"></div>\n\n                                        <NuxtPage @emit-is-sales=\"(value) => handleEmitIsSales(value)\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </Transition>\n                    </div>\n                </div>\n            </Transition>\n        </div>\n        <div class=\"c-layout__footer relative z-50\">\n            <!--\n                add a button. The style of the button is the same as Navigation button.\n                it keep the same color as the next button on this footer.\n                use icon is 'assembly'.\n                On click, a submenu will be displayed. Just add a empty div for the moment for now.\n                add status active if showPanel is true\n            -->\n            <Button\n                :icon=\"'assembly'\"\n                :variant=\"'c-btn--square c-btn--ghost'\"\n                :theme=\"'primary'\"\n                :status=\"showPanel ? 'active' : ''\"\n                @click=\"showPanel = !showPanel\"\n            />\n            <div class=\"c-btn-subpanel\">\n                <TransitionGroup tag=\"div\" name=\"fade\" class=\"c-btn-subpanel__content\">\n                    <template v-if=\"showPanel\">\n                        <Button\n                            v-for=\"(item, index) in adminItems\"\n                            :key=\"index\"\n                            :label=\"$t(item.name)\"\n                            :theme=\"item.theme\"\n                            :icon=\"item.icon\"\n                            :style=\"{ '--fade-delay': index }\"\n                            @click=\"item.btnCallback\"\n                        />\n                    </template>\n                </TransitionGroup>\n            </div>\n            <!--\n                add a link if isSales is true, it will redirect to sales/map page\n                - theme is 'sales'\n                - label is i18n key 'sales.nationsMap'\n                - icon is 'smallPlanet'\n             -->\n            <Transition name=\"fade\">\n                <NuxtLink v-if=\"isSales\" :to=\"'/' + $i18n.locale + '/sales/map'\">\n                    <Button :label=\"$t('sales.nationsMap')\" theme=\"sales\" icon=\"smallPlanet\" />\n                </NuxtLink>\n            </Transition>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.c-layout__wrapper {\n    // assign --page-frame-transition-duration to leaveTransitionDuration with v-bind\n    --page-frame-transition-duration: v-bind(cssLeaveTransitionDuration);\n}\n\n.c-layout__navigation {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n}\n// add page-frame transition\n// the transition will transform the shape of a div. The div display the main content.\n// on enter and on leave end the shape a square about 100px x 100px !\n// on enter, the square will grow horizontally to the reach 100% of its width\n// when the width is full it will grow vertically to reach 100% of its height!\n// on leave, the square will shrink vertically to reach 100px\n// when the height is 100px, it will shrink horizontally to reach 100px\n// duration is 0.3s\n// timing function is linear\n// for performance reason, use transform instead of width and height\n// because of the different step (keyframe) during the transition, you should use animation instead of transition for this effect\n\n.page-frame-enter-active {\n    animation: page-frame-in var(--page-frame-transition-duration) linear;\n}\n\n.page-frame-leave-active {\n    animation: page-frame-in var(--page-frame-transition-duration) linear reverse;\n}\n\n// during page frame animation, the opacity of c-page-frame__layout must be go from 0 to 1\n// duration is 0.3s\n// timing function is linear\n// use transition\n.c-page-frame__layout {\n    transition: opacity calc(var(--page-frame-transition-duration) / 2) linear;\n}\n\n.page-frame-enter-from,\n.page-frame-leave-to {\n    .c-page-frame__layout > div {\n        opacity: 0;\n    }\n}\n\n@keyframes page-frame-in {\n    0% {\n        transform: scaleX(0.1) scaleY(0.2);\n    }\n    50% {\n        transform: scaleX(1) scaleY(0.2);\n    }\n    100% {\n        transform: scaleX(1) scaleY(1);\n    }\n}\n\n.c-btn-subpanel {\n    @apply absolute left-0;\n    bottom: calc(var(--btn-square-height) + 10px);\n}\n\n.c-btn-subpanel__content {\n    @apply flex flex-col gap-2.5;\n}\n</style>\n"],"names":["t","useI18n","router","useRouter","route","useRoute","isGamePaused","ref","isNewPage","locale","adminItems","enterSettings","continueGame","saveGame","quitGame","showPanel","showEventNotification","leaveTransitionDuration","cssLeaveTransitionDuration","computed","useModalStore","isSales","mutation","state","handleEmitIsSales","isSalesArg","watchRoutePath","watch","RoboNationCore","onBeforeRouteLeave","to","from","next","onMounted","onBeforeUnmount"],"mappings":"2xCAiBA,KAAM,CAAE,EAAAA,CAAC,EAAKC,IAGRC,EAASC,EAAS,EAElBC,EAAQC,EAAQ,EAGhBC,EAAeC,EAAI,EAAK,EAExBC,EAAYD,EAAI,EAAK,EAGrBE,EAASR,EAAS,EAAC,OAoCnBS,EAAaH,EAAI,CACnB,CACI,KAAM,kBACN,YAAa,IAAMI,EAAe,EAClC,OAAQ,GACR,MAAO,WACP,KAAM,YACT,EACD,CACI,KAAM,kBACN,YAAa,IAAMC,EAAc,EACjC,OAAQ,GACR,MAAO,UACP,KAAM,YACT,EACD,CACI,KAAM,kBACN,YAAa,IAAMC,EAAU,EAC7B,OAAQ,GACR,MAAO,QACP,KAAM,iBACT,EACD,CACI,KAAM,kBACN,YAAa,IAAMC,EAAU,EAC7B,OAAQ,GACR,MAAO,YACP,KAAM,YACT,CACL,CAAC,EAGKC,EAAYR,EAAI,EAAK,EACrBS,EAAwBT,EAAI,EAAK,EAEjCU,EAA0BV,EAAI,GAAG,EAEjCW,EAA6BC,EAAS,IACjCF,EAAwB,MAAQ,IAC1C,EAQKN,EAAgB,IAAM,CAExBS,EAAa,EAAG,UAAU,CACtB,MAAO,kBACP,QAAS,CACL,KAAM,GACN,KAAM,eACN,SAAU,KACV,MAAO,YACP,SAAU,EACb,EACD,OAAQ,CACJ,KAAM,EACT,CACT,CAAK,CACL,EASMP,EAAW,IAAM,CAEnBX,EAAO,KAAK,IAAMO,EAAO,MAAQ,aAAa,CAClD,EAEMY,EAAUd,EAAI,EAAK,EAWnBO,EAAW,IAAM,CAInBM,EAAa,EAAG,UAAU,CACtB,MAAOpB,EAAE,iBAAiB,EAC1B,QAASA,EAAE,8BAA8B,EACzC,QAAS,CACL,KAAM,GACN,KAAMA,EAAE,aAAa,CACxB,CACT,CAAK,EAIDoB,IAAgB,WAAW,CAACE,EAAUC,IAAU,CACxCA,EAAM,QAAQ,YACdH,EAAa,EAAG,aAChBlB,EAAO,KAAK,IAAMO,EAAO,KAAK,EAE1C,CAAK,CACL,EAGMG,EAAe,IAAM,CACvBV,EAAO,KAAK,IAAMO,EAAO,MAAQ,aAAa,CAClD,EAEMe,EAAoB,CAACC,EAAa,KAAU,CAC9CJ,EAAQ,MAAQI,CACpB,EAGMC,EAAiBC,EACnB,IAAMvB,EAAM,KACZ,IAAM,CACEA,EAAM,KAAK,SAAS,YAAY,GAChCE,EAAa,MAAQ,GAErBsB,EAAe,SAAS,UAExBtB,EAAa,MAAQ,GAErBsB,EAAe,SAAS,SAE/B,EACD,CAAE,UAAW,EAAM,CACvB,EAEA,OAAAC,EAAmB,CAACC,EAAIC,EAAMC,IAAS,CACnCxB,EAAU,MAAQ,GAElB,WAAW,IAAM,CACbwB,GACR,EAAOf,EAAwB,KAAK,CACpC,CAAC,EAGDgB,EAAU,IAAM,CACZzB,EAAU,MAAQ,EACtB,CAAC,EAGD0B,EAAgB,IAAM,CAClBR,GACJ,CAAC"}