jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-07-16 07:22:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feature: added create,join,spectate buttons and create game dialog

Browse source
This commit is contained in:
Muhammad Sabeeh 2025-06-18 17:17:47 -04:00
parent 4b0dff4102
commit 91448e21b1
10 changed files with 265 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

129
webclientvue/src/pages/HomePage.vue
View file

@ -10,7 +10,101 @@
virtual-scroll
:pagination-label="(start, end, total) => `Total games: ${total}`"
style="height: 60%"
@row-click="
(evt, row, index) => {
console.log('Row clicked:', row);
selectedGame = row;
}
"
/>
<div class="flex justify-end q-mt-md">
<div class="row q-pa-sm q-gutter-sm">
<q-btn outline label="Create" color="primary" @click="createGameDialog = true" />
<!-- @click="redirectGame" -->
<q-btn outline label="Join" color="secondary" :disable="selectedGame ? false : true" />
<q-btn outline label="Join as Spectator" :disable="selectedGame ? false : true" />
</div>
</div>
<q-dialog v-model="createGameDialog" persistent>
<q-card style="min-width: 350px">
<q-card-section class="row items-center bg-primary">
<CockatriceAvatar square size="25px" />
<div class="flex justify-between text-h6" style="color: white; width: 100%">
<div>Create game</div>
<q-btn icon="close" flat round dense v-close-popup />
</div>
</q-card-section>
<q-card-section class="row justify-center q-pa-md q-gutter-md">
<!-- COLUMN 1 -->
<div class="col q-gutter-sm">
<q-input
filled
label="Description"
label-color="primary"
v-model="newGameDesc"
autofocus
/>
<q-input
filled
label="Players"
type="number"
label-color="primary"
v-model="newGamePlayers"
autofocus
/>
<q-select
filled
label="Game Type"
label-color="primary"
v-model="newGameType"
:options="gameTypes"
/>
<div>
<q-input
filled
label="Life Total"
type="number"
label-color="primary"
v-model="newGameLifeTotal"
/>
</div>
</div>
<!-- COLUMN 2 -->
<div class="col q-gutter-sm">
<q-input
filled
label="Password"
type="password"
label-color="primary"
v-model="newGamePassword"
autofocus
/>
<q-checkbox label="Only buddies can join" v-model="newGameOnlyBuddies" />
<q-checkbox label="Only registered users can join" v-model="newGameOnlyRegistered" />
<q-checkbox label="Spectators can watch" v-model="newGameSpectatorsCanWatch" />
<q-checkbox
label="Spectators need a password to watch"
v-model="newGameSpectatorsNeedPassword"
/>
<q-checkbox label="Spectators can chat" v-model="newGameSpectatorsCanChat" />
<q-checkbox label="Spectators can see hands" v-model="newGameSpectatorsCanSeeHands" />
<q-checkbox label="Create game as Spectator" v-model="newGameAsSpectator" />
</div>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="OK" @click="redirectGame" />
<q-btn flat label="Clear" />
<q-btn flat label="CANCEL" @click="createGameDialog = false" />
</q-card-actions>
</q-card>
<!-- END OF LOGIN -->
</q-dialog>
<q-card style="height: 30%" class="q-mt-md">
<q-list bordered separator>
@ -38,7 +132,42 @@
<script setup lang="ts">
import userBadge from 'assets/pawn_single.svg';
import { games, gameColumns } from 'src/fake-data/gameColumns';
import type { Games } from 'src/models/models';
import { chats } from 'src/fake-data/chats';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import gameTypes from 'src/constants/gametypes';
const selectedGame = ref<Games | null>(null);
const createGameDialog = ref(false);
const newGameDesc = ref(''); // Default description for new game
const newGamePlayers = ref(4); // Default to 4 players
//join restrictions
const newGamePassword = ref(''); // Default empty password
const newGameOnlyBuddies = ref(false); // Default to false
const newGameOnlyRegistered = ref(false); // Default to false
//game types
const newGameType = ref(gameTypes[7]); // Default empty game type
//spectators
const newGameSpectatorsCanWatch = ref(false); // Default to false
const newGameSpectatorsNeedPassword = ref(false); // Default to false
const newGameSpectatorsCanChat = ref(false); // Default empty password for spectators
const newGameSpectatorsCanSeeHands = ref(false); // Default to false
const newGameAsSpectator = ref(false); // Default to false
// // Game setup options
const newGameLifeTotal = ref(40); // Default life total
const router = useRouter();
async function redirectGame() {
console.log('Redirecting to game...');
await router.push({ name: 'game' });
}
</script>
<style scoped>