studio
/
shotgun
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

define props on game component

This commit is contained in:
Branden J Brown 2024-01-30 21:14:11 -06:00
parent 3d9a0b9836
commit 53f18599a3
2 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
site/src/App.vue
View File

@ -8,17 +8,15 @@
</v-app-bar>
<v-main>
<TheLanding v-if="!playing" @play="playing = !playing" />
<Game v-else />
<Game v-else :game="testGame" :dealer="true" />
</v-main>
</v-app>
</template>
<script setup lang="ts">
import {
useDark,
useToggle,
} from '@vueuse/core';
import { useDark, useToggle } from '@vueuse/core';
import { computed, ref } from 'vue';
import type { Game } from '@/lib/game';
const dark = useDark();
const toggleDark = useToggle(dark);
@ -26,4 +24,15 @@ const theme = computed(() => dark.value ? 'dark' : 'light');
const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
const playing = ref(false);
const testGame: Game = {
players: [
{ hp: 4, items: ['🔍', '', '', '', '', '', '', ''] },
{ hp: 3, items: ['🔍', '🔍', '', '', '', '', '', ''] },
],
round: 1,
dealer: true,
damage: 1,
previous: true,
};
</script>

22
site/src/components/Game.vue
View File

@ -4,18 +4,18 @@
<v-sheet :elevation="2" width="800">
<v-row class="d-flex justify-center">
<v-col cols="auto">
<GameStatus :game="testGame" />
<GameStatus :game="props.game" />
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<!-- dealer -->
<Player :stats="testGame.players[0]" :dealer="true" />
<Player :stats="props.game.players[0]" :dealer="true" />
</v-col>
<v-divider vertical />
<v-col cols="6">
<!-- challenger -->
<Player :stats="testGame.players[1]" :dealer="false" />
<Player :stats="props.game.players[1]" :dealer="false" />
</v-col>
</v-row>
</v-sheet>
@ -26,14 +26,10 @@
<script setup lang="ts">
import type { Game } from '@/lib/game';
const testGame: Game = {
players: [
{ hp: 4, items: ['🔍', '', '', '', '', '', '', ''] },
{ hp: 3, items: ['🔍', '🔍', '', '', '', '', '', ''] },
],
round: 1,
dealer: true,
damage: 1,
previous: true,
};
export interface Props {
game: Game;
dealer: boolean;
}
const props = defineProps<Props>();
</script>