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

wire actions

This commit is contained in:
Branden J Brown 2024-01-31 07:05:33 -06:00
parent 7a612a6465
commit 09521cb5b0
3 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/src/App.vue
View File

@ -13,7 +13,7 @@
<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
</v-row>
</v-container>
<Game v-else :game="testGame" :dealer="true" />
<Game v-else :game="testGame" :dealer="true" @action="(evt: Action) => action(evt)" />
</v-main>
</v-app>
</template>
@ -21,7 +21,7 @@
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
import { computed, ref } from 'vue';
import type { Game } from '@/lib/game';
import type { Action, Game } from '@/lib/game';
const dark = useDark();
const toggleDark = useToggle(dark);
@ -50,4 +50,8 @@ const testGame = ref<Game>({
live: 3,
blank: 4,
});
function action(evt: Action) {
console.log(evt);
}
</script>

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

@ -10,21 +10,21 @@
<v-row>
<v-col cols="6">
<!-- dealer -->
<Player :stats="props.game.players[0]" :dealer="true" :disabled="!props.dealer || !myTurn" />
<Player :stats="props.game.players[0]" :dealer="true" :disabled="!props.dealer || !myTurn" @item="(evt: number) => useItem(evt)" />
</v-col>
<v-divider vertical />
<v-col cols="6">
<!-- challenger -->
<Player :stats="props.game.players[1]" :dealer="false" :disabled="props.dealer || !myTurn" />
<Player :stats="props.game.players[1]" :dealer="false" :disabled="props.dealer || !myTurn" @item="(evt: number) => useItem(evt)" />
</v-col>
</v-row>
<v-row v-if="myTurn" class="py-4">
<v-col cols="1"></v-col>
<v-col cols="5">
<v-btn block>SHOOT {{ dealerTarget }}</v-btn>
<v-btn block @click="attack(true)">SHOOT {{ dealerTarget }}</v-btn>
</v-col>
<v-col cols="5">
<v-btn block>SHOOT {{ challTarget }}</v-btn>
<v-btn block @click="attack(false)">SHOOT {{ challTarget }}</v-btn>
</v-col>
</v-row>
<v-row v-else class="py-4">
@ -39,7 +39,7 @@
</template>
<script setup lang="ts">
import type { Game } from '@/lib/game';
import type { Game, Action } from '@/lib/game';
import { computed } from 'vue';
export interface Props {
@ -53,11 +53,26 @@ export interface Props {
dealer: boolean;
}
export interface Emits {
(e: 'action', v: Action): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const myTurn = computed(() => props.dealer === props.game.dealer);
const currentTurn = computed(() => props.game.dealer ? 'DEALER' : 'CHALLENGER');
const dealerTarget = computed(() => props.dealer ? 'YOURSELF' : 'THE DEALER');
const challTarget = computed(() => props.dealer ? 'THE CHALLENGER' : 'YOURSELF');
function attack(left: boolean) {
const action = left === props.dealer ? 'self' : 'across';
emit('action', { action });
}
function useItem(evt: number) {
const action = evt.toString() as "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7";
emit('action', { action });
}
</script>

7
site/src/components/Player.vue
View File

@ -6,7 +6,7 @@
<v-row>
<v-col cols="4"></v-col>
<v-col cols="8">
<PlayerItems :items="props.stats.items" :disabled="props.disabled" />
<PlayerItems :items="props.stats.items" :disabled="props.disabled" @item="(evt: number) => emit('item', evt)" />
</v-col>
</v-row>
</v-container>
@ -31,7 +31,12 @@ export interface Props {
disabled: boolean;
}
export interface Emits {
(e: 'item', k: number): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const closeClass = computed(() => ({ 'd-flex': true, 'justify-end': props.dealer, 'justify-start': !props.dealer }));
const farClass = computed(() => ({ 'd-flex': true, 'justify-end': !props.dealer, 'justify-start': props.dealer }));