Added game start for single player, 3 and 9 card game types and protected the pages for only logged in players
This commit is contained in:
@@ -1,107 +1,85 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center min-h-screen bg-green-900 text-white relative"
|
||||
>
|
||||
<h1 class="text-6xl font-bold mb-12 drop-shadow-lg">Bisca Game</h1>
|
||||
|
||||
<div v-if="!showModeSelection" class="flex flex-col gap-6 w-64">
|
||||
<button
|
||||
@click="showModeSelection = true"
|
||||
class="px-6 py-4 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-xl font-bold shadow-lg transition-transform hover:scale-105"
|
||||
>
|
||||
Single Player
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled
|
||||
class="px-6 py-4 bg-gray-600 rounded-lg text-xl font-bold opacity-50 cursor-not-allowed"
|
||||
>
|
||||
Multiplayer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="bg-gray-800/90 p-8 rounded-xl border border-gray-600 shadow-2xl w-80 text-center animate-fade-in"
|
||||
>
|
||||
<h2 class="text-2xl font-bold mb-6 text-emerald-400">Escolhe o Modo</h2>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<button
|
||||
@click="startGame(3)"
|
||||
class="px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold transition-colors flex justify-between items-center"
|
||||
>
|
||||
<span>Bisca de 3</span>
|
||||
<span class="text-xs bg-blue-800 px-2 py-1 rounded">Clássico</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="startGame(9)"
|
||||
class="px-6 py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold transition-colors flex justify-between items-center"
|
||||
>
|
||||
<span>Bisca de 9</span>
|
||||
<span class="text-xs bg-purple-800 px-2 py-1 rounded">Épico</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="showModeSelection = false"
|
||||
class="mt-6 text-gray-400 hover:text-white text-sm underline"
|
||||
>
|
||||
Voltar atrás
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from '@/components/ui/card'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
//import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const showModeSelection = ref(false)
|
||||
|
||||
//import { useGameStore } from '@/stores/game'
|
||||
import { useAPIStore } from '@/stores/api'
|
||||
|
||||
//const gameStore = useGameStore()
|
||||
const apiStore = useAPIStore()
|
||||
|
||||
const highScores = ref([])
|
||||
|
||||
/* const startGame = () => {
|
||||
gameStore.difficulty = selectedDifficulty.value
|
||||
router.push({ name: 'singleplayer' })
|
||||
} */
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await apiStore.getGames()
|
||||
|
||||
highScores.value = response.data.data
|
||||
.map(item => ({
|
||||
points: item.player1_points,
|
||||
time: item.total_time,
|
||||
username: item.player1?.name
|
||||
}))
|
||||
.sort((a, b) => a.time - b.time == 0 ? a.player1_points - b.player1_points : a.time - b.time)
|
||||
.slice(0, 3)
|
||||
})
|
||||
const startGame = (type) => {
|
||||
// Navega para a rota correta baseada no tipo (3 ou 9)
|
||||
const routeName = type === 9 ? 'bisca9' : 'bisca3'
|
||||
router.push({ name: routeName })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-row justify-center items-stretch gap-5 mt-10">
|
||||
<Card class="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-3xl font-bold text-center">
|
||||
Single Player
|
||||
</CardTitle>
|
||||
<CardDescription class="text-center">
|
||||
Test your memory by finding matching pairs!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">High Scores (local)</label>
|
||||
<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
|
||||
<div class="max-h-64 overflow-y-auto">
|
||||
<div v-if="highScores.length === 0" class="p-6 text-center text-sm text-muted-foreground">
|
||||
No high scores yet. Be the first!
|
||||
</div>
|
||||
<div v-else class="divide-y">
|
||||
<div v-for="(score, index) in highScores" :key="index"
|
||||
class="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300': index === 0,
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': index === 1,
|
||||
'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': index === 2,
|
||||
'bg-muted text-muted-foreground': index > 2
|
||||
}">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm">{{ score.player1_points }} Moves -- {{
|
||||
score.username }}</div>
|
||||
<div class="text-xs text-muted-foreground">{{ score.time }} /s</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<Button @click="startGame" size="lg" variant="secondary"
|
||||
class="hover:bg-purple-500 hover:text-slate-200">
|
||||
Start Game
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card class="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-3xl font-bold text-center">
|
||||
MultiPlayer
|
||||
</CardTitle>
|
||||
<CardDescription class="text-center">
|
||||
Comming Soon!!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user