asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'GameControlPage'

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-02-25 15:46:04 +01:00
commit b3c655df58
4 changed files with 149 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BrainBlastBar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-app-bar :elevation="12"> <v-app-bar :elevation="5">
<RouterMenu /> <RouterMenu />
<v-app-bar-title>Brain Blast</v-app-bar-title> <v-app-bar-title>Brain Blast</v-app-bar-title>

1
src/main.js
View File

@ -4,7 +4,6 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
const app = createApp(App) const app = createApp(App)
registerPlugins(app) registerPlugins(app)
app.mount('#app') app.mount('#app')

23
src/plugins/vuetify.js
View File

@ -14,6 +14,27 @@ import { createVuetify } from 'vuetify'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({ export default createVuetify({
theme: { theme: {
defaultTheme: 'dark' themes: {
light: {
background: '#212121',
primary: '#cc0000',
controls: '#cc0000',
soundboard: '#9A2779',
secondary: '#b0bec5',
feedback: '#2E7D32',
accent: '#8c9eff',
error: '#b71c1c',
},
dark: {
background: '#121212',
primary: '#2979FF',
controls: '#AB47B',
secondary: '#90a4ae',
feedback: '#2E7D32',
accent: '#8c9eff',
error: '#b71c1c',
},
},
defaultTheme: 'dark',
} }
}) })

126
src/views/GameControl.vue
View File

@ -0,0 +1,126 @@
<template>
<v-container>
<v-row no-gutters>
<v-col class="align-start">
<v-card tile outlined class="card">
<v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
Contrôles
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="5" class="mt-4">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-skip-previous</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mt-4">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-skip-next</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-pause</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-play</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
<v-col class="pl-3">
<v-card tile outlined class="card" color="">
<v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
Soundboard
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-check-circle-outline</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-close-circle-outline</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-timer-outline</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mb-4">
<v-btn class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-human-handsup</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="s" class="mb-4">
<v-btn class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-bell-outline</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row no-gutters>
<v-col>
<v-card tile outlined class="card">
<v-card-title class="card__title feedback">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
Solution
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-container class="text-center">
<!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
<v-img width="450" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
</v-container>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<style>
@media (min-width: 1024px) {
.card__title.primary {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
}
.card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
}
.btn{
border-radius:50px!important;
}
.card {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
}
.image-container {
width: 300px;
overflow: hidden; /* Pour masquer le dépassement de l'image */
border: 1px solid #ccc; /* Bordure de l'image */
}
.image-container img {
width: 100%; /* Pour remplir complètement le conteneur */
height: auto; /* Pour maintenir le ratio d'aspect de l'image */
display: block; /* Pour éviter l'espace réservé pour les images */
}
}
</style>