You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.2 KiB
94 lines
3.2 KiB
<template>
|
|
<div id="app">
|
|
<DefaultScreens :dev-preview="true" :preview-height-ratio="0.5">
|
|
<template #left>
|
|
<BootjeSideScreen v-if="isBootjeGame" />
|
|
<SideScreenMiniGame
|
|
v-else-if="isPuzzleGame"
|
|
player-id="player1"
|
|
screen-id="left"
|
|
:controller-number="1"
|
|
/>
|
|
<QuizSideScreen v-else-if="isQuizGame" />
|
|
<GlassGameSideScreen v-else-if="isGlassGame" />
|
|
<SideScoreScreen v-else />
|
|
</template>
|
|
|
|
<template #fullscreen></template>
|
|
|
|
<GameFlow ref="gameFlowRef" :games="games" @flow-changed="handleFlowChanged" />
|
|
|
|
<template #right>
|
|
<BootjeSideScreen v-if="isBootjeGame" />
|
|
<SideScreenMiniGame
|
|
v-else-if="isPuzzleGame"
|
|
player-id="player2"
|
|
screen-id="right"
|
|
:controller-number="2"
|
|
/>
|
|
<QuizSideScreen v-else-if="isQuizGame" />
|
|
<GlassGameSideScreen v-else-if="isGlassGame" />
|
|
<SideScoreScreen v-else />
|
|
</template>
|
|
</DefaultScreens>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, markRaw, ref } from "vue";
|
|
|
|
import DefaultScreens from "../i-love-x-engine/src/components/ScreenXCube.vue";
|
|
import GameFlow from "../i-love-x-engine/core/GameFlow.vue";
|
|
|
|
// Challenges
|
|
import ConnectQuest from "../i-love-x-engine/src/challenges/connect-quest/ConnectQuest.vue";
|
|
import CatchGame from "../i-love-x-engine/src/challenges/CatchGame/CatchGame.vue";
|
|
import Puzzle from "../i-love-x-engine/src/challenges/puzzle/puzzle.vue";
|
|
import TowerGame from "../i-love-x-engine/src/challenges/Tower/TowerGame.vue";
|
|
import GlassGame from "../i-love-x-engine/src/challenges/GlassGame/views/Intro.vue";
|
|
import Quiz from "../i-love-x-engine/src/challenges/Quiz/Quiz.vue";
|
|
import Bootje from "../i-love-x-engine/src/challenges/bootje/views/Race.vue";
|
|
|
|
// Side Screens
|
|
import SideScreenMiniGame from "../i-love-x-engine/src/challenges/puzzle-mini-game/SideScreenMiniGame.vue";
|
|
import SideScoreScreen from "../i-love-x-engine/src/challenges/scorescreen/SideScoreScreen.vue";
|
|
import BootjeSideScreen from "../i-love-x-engine/src/challenges/bootje/views/SideScreen.vue";
|
|
import QuizSideScreen from "../i-love-x-engine/src/challenges/Quiz/views/SideScreen.vue";
|
|
import GlassGameSideScreen from "../i-love-x-engine/src/challenges/GlassGame/views/GlassGameSideScreen.vue";
|
|
|
|
const games: Record<string, any> = {
|
|
"connect-quest": markRaw(ConnectQuest),
|
|
"catch-game": markRaw(CatchGame),
|
|
puzzle: markRaw(Puzzle),
|
|
"tower-game": markRaw(TowerGame),
|
|
"glass-game": markRaw(GlassGame),
|
|
quiz: markRaw(Quiz),
|
|
bootje: markRaw(Bootje),
|
|
};
|
|
|
|
const gameFlowRef = ref<any>(null);
|
|
const currentGameIndex = ref(0);
|
|
|
|
const isPuzzleGame = computed(
|
|
() => currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "puzzle",
|
|
);
|
|
|
|
const isBootjeGame = computed(
|
|
() => currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "bootje",
|
|
);
|
|
|
|
const isQuizGame = computed(
|
|
() =>
|
|
currentGameIndex.value === 4 ||
|
|
(currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "quiz"),
|
|
);
|
|
|
|
const isGlassGame = computed(
|
|
() => currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "glass-game",
|
|
);
|
|
|
|
const handleFlowChanged = (index: number) => {
|
|
currentGameIndex.value = index;
|
|
};
|
|
</script>
|