diff --git a/src/assets/main.css b/src/assets/main.css index e12dfa1..35854ed 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -28,6 +28,10 @@ opacity: 0.9; } +.button-custom:disabled { + opacity: 0.5; +} + .input-custom, .button-custom { padding: 12px 16px; border: 1px solid #ddd; diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue index 06f8a0b..4cb3a81 100644 --- a/src/components/GameWindow.vue +++ b/src/components/GameWindow.vue @@ -29,6 +29,8 @@ const team = ref({name: "", actions: []}) const actions = ref([]) const scrollContainer = ref(); + const gameState = ref("") + const gameStateText = ref("") function getTeam() { fetch( @@ -87,6 +89,28 @@ } }; + function getGame() { + fetch( + getApiUrl("/game") + ) + .then(response => response.json()) + .then(data => { + gameState.value = data.state + if (data.state === "NEW") { + gameStateText.value = "Игра ещё не началась" + } + if (data.state === "RUN") { + gameStateText.value = "" + } + if (data.state === "STOP") { + gameStateText.value = "Игра остановлена" + } + }) + .catch(error => { + console.error('Ошибка:', error) + }); + } + // Автоматическая прокрутка при изменении items watch(actions, () => { scrollToBottom(); @@ -105,7 +129,10 @@ getTeam() - intervalId = setInterval(() => {getTeam()}, 2000); + intervalId = setInterval(() => { + getTeam() + getGame() + }, 2000); router.beforeEach((to, from, next) => { clearInterval(intervalId); @@ -128,10 +155,19 @@
- +
- +
{{ gameStateText }}
+
@@ -187,6 +223,10 @@ body { margin: 10px; } +.second-color { + color: var(--second-color); +} + .form-custom { border: 1px solid #444444; background-color: var(--main-back-color);