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

Ajout des boutons

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-02-25 13:22:18 +01:00
parent 9f81c7c8c0
commit d57b2c39ee
3 changed files with 822 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

894
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -15,6 +15,7 @@
"mqtt": "^5.3.5",
"roboto-fontface": "^0.10.0",
"vue": "^3.4.19",
"vue-loader": "^17.4.2",
"vue-router": "^4.2.5"
},
"devDependencies": {

118
src/views/GameControl.vue
View File

@ -0,0 +1,118 @@
<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 color="primary" dark width="240" height="130" class="v-btn 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 color="primary" dark width="240" height="130" class="v-btn 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 color="primary" dark width="240" height="130" class="v-btn 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 color="primary" dark width="240" height="130" class="v-btn 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">
<v-card-title class="card__title">
<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" color="primary">
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark 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 color="primary" dark 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 color="primary" dark 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 color="primary" dark 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 color="primary" dark 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) {
.v-btn{
border-radius:50px!important;
}
.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>