forked from jchomaz/Vulture
Modification du controle manuel des score et suppression des 16 bouttons
This commit is contained in:
@@ -4,87 +4,54 @@
|
|||||||
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
|
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
|
||||||
Gestion des scores
|
Gestion des scores
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-container class="text-center">
|
<v-container class="text-center pt-8">
|
||||||
<v-row justify="center">
|
<!-- Team Lines -->
|
||||||
<v-col cols="4" sm="6" md="3">
|
<v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
|
||||||
<mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
|
<!-- Icon/Label -->
|
||||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
<v-col cols="2" class="d-flex justify-center">
|
||||||
</mqtt-button>
|
<v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
|
<!-- Total Score Input -->
|
||||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
<v-col cols="5">
|
||||||
</mqtt-button>
|
<v-text-field
|
||||||
|
v-model.number="team.Total"
|
||||||
|
label="Total"
|
||||||
|
type="number"
|
||||||
|
variant="outlined"
|
||||||
|
density="compact"
|
||||||
|
hide-details
|
||||||
|
prepend-inner-icon="mdi-minus"
|
||||||
|
append-inner-icon="mdi-plus"
|
||||||
|
:color="getTeamColor(color)"
|
||||||
|
:base-color="getTeamColor(color)"
|
||||||
|
@click:prepend-inner="changeScore(color, 'Total', -1)"
|
||||||
|
@click:append-inner="changeScore(color, 'Total', 1)"
|
||||||
|
@update:model-value="updateScore(color)"
|
||||||
|
class="centered-input"
|
||||||
|
readonly
|
||||||
|
></v-text-field>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
|
<!-- Round Score Input -->
|
||||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
<v-col cols="5">
|
||||||
</mqtt-button>
|
<v-text-field
|
||||||
</v-col>
|
v-model.number="team.Round"
|
||||||
<v-col cols="4" sm="6" md="3">
|
label="Manche"
|
||||||
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
|
type="number"
|
||||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
variant="outlined"
|
||||||
</mqtt-button>
|
density="compact"
|
||||||
</v-col>
|
hide-details
|
||||||
<v-col cols="4" sm="6" md="3">
|
prepend-inner-icon="mdi-minus"
|
||||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
|
append-inner-icon="mdi-plus"
|
||||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
:color="getTeamColor(color)"
|
||||||
</mqtt-button>
|
:base-color="getTeamColor(color)"
|
||||||
</v-col>
|
@click:prepend-inner="changeScore(color, 'Round', -1)"
|
||||||
<v-col cols="12" sm="6" md="3">
|
@click:append-inner="changeScore(color, 'Round', 1)"
|
||||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'>
|
@update:model-value="updateScore(color)"
|
||||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
class="centered-input"
|
||||||
</mqtt-button>
|
readonly
|
||||||
</v-col>
|
></v-text-field>
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+1"}'>
|
|
||||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+2"}'>
|
|
||||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-2"}'>
|
|
||||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-1"}'>
|
|
||||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+1"}'>
|
|
||||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+2"}'>
|
|
||||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-2"}'>
|
|
||||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-1"}'>
|
|
||||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="4" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "+1"}'>
|
|
||||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="6" md="3">
|
|
||||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "2"}'>
|
|
||||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
|
||||||
</mqtt-button>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
@@ -92,23 +59,97 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import MqttButton from './MqttButton.vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { ref } from 'vue';
|
import mqtt from 'mqtt';
|
||||||
|
import config from '@/config.js'; // Ensure correct path
|
||||||
|
|
||||||
// Variable pour contrôler l'état de la carte
|
|
||||||
const isCardReduced = ref(false);
|
const isCardReduced = ref(false);
|
||||||
|
|
||||||
// Méthode pour basculer l'état de la carte
|
const scores = reactive({
|
||||||
|
Red: { Total: 0, Round: 0 },
|
||||||
|
Blue: { Total: 0, Round: 0 },
|
||||||
|
Yellow: { Total: 0, Round: 0 },
|
||||||
|
Green: { Total: 0, Round: 0 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const client = mqtt.connect(config.mqttBrokerUrl);
|
||||||
|
|
||||||
|
client.on('connect', () => {
|
||||||
|
console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
|
||||||
|
client.subscribe('game/score');
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('error', (err) => {
|
||||||
|
console.error('CardButtonScore: MQTT Error:', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('message', (topic, message) => {
|
||||||
|
if (topic === 'game/score') {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(message.toString());
|
||||||
|
console.log('CardButtonScore: Received score update:', data);
|
||||||
|
if (data && data.TEAM) {
|
||||||
|
Object.keys(scores).forEach(color => {
|
||||||
|
if (data.TEAM[color]) {
|
||||||
|
scores[color].Total = data.TEAM[color].TotalScore;
|
||||||
|
scores[color].Round = data.TEAM[color].RoundScore;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error parsing score update:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function toggleCardSize() {
|
function toggleCardSize() {
|
||||||
isCardReduced.value = !isCardReduced.value;
|
isCardReduced.value = !isCardReduced.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTeamColor(color) {
|
||||||
|
if (color === 'Yellow') return '#D4D100'; // Custom yellow
|
||||||
|
if (color === 'Red') return '#d42828';
|
||||||
|
if (color === 'Blue') return '#2867d4';
|
||||||
|
if (color === 'Green') return '#28d42e';
|
||||||
|
return color.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeScore(teamColor, field, delta) {
|
||||||
|
scores[teamColor][field] += delta;
|
||||||
|
updateScore(teamColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateScore(teamColor) {
|
||||||
|
const payload = {
|
||||||
|
[teamColor]: {
|
||||||
|
Total: scores[teamColor].Total,
|
||||||
|
Round: scores[teamColor].Round
|
||||||
|
}
|
||||||
|
};
|
||||||
|
console.log('CardButtonScore: Publishing update:', payload);
|
||||||
|
client.publish('game/score/update', JSON.stringify(payload));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card--reduced {
|
.card--reduced {
|
||||||
height: 56px; /* Réglez la hauteur réduite selon vos besoins */
|
height: 56px;
|
||||||
width: 170px;
|
width: 60%; /* Adjusted width for layout */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: height 0.3s ease-in-out;
|
transition: height 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.centered-input input {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.centered-input .v-field__label {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove number spin buttons */
|
||||||
|
.centered-input input[type=number]::-webkit-inner-spin-button,
|
||||||
|
.centered-input input[type=number]::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user