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

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

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