diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 0ae1283..f40a5c2 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -31,7 +31,8 @@ $button-hover-border: 4px solid #00a0c0;
$button-disabled-background-color: #006080;
$button-disabled-text-color: #102028;
-$button-disabled-border: 4px solid #004060;
+$button-disabled-border: 4px solid transparent;
+$button-disabled-border-border: 4px solid #004060;
// Topbar
$topbar-background-color: #006898;
diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
index 699b0fc..ff7bc63 100644
--- a/client/src/components/Button.vue
+++ b/client/src/components/Button.vue
@@ -1,5 +1,6 @@
-
@@ -35,13 +36,14 @@ defineProps({
font-weight: bold;
font-size: 24px;
border: none;
+ border-radius: 8px;
cursor: pointer;
&:hover {
color: $text-secondary-hover-color;
}
- &.border {
+ &__border {
background-color: $button-background-color;
color: $button-text-color;
border: $button-border;
@@ -54,13 +56,20 @@ defineProps({
}
}
- &.disabled,
- &:hover.disabled {
+ &__disabled,
+ &__disabled:hover {
cursor: default;
background-color: $button-disabled-background-color;
- border: $button-disabled-border;
+ // border: $button-disabled-border;
+ margin: 4px;
color: $button-disabled-text-color;
+
+ &.button__button__border {
+ margin: 0;
+ border: $button-disabled-border-border;
+ }
}
+
}
}
diff --git a/client/src/components/GameControls.vue b/client/src/components/GameControls.vue
new file mode 100644
index 0000000..4f6f1b5
--- /dev/null
+++ b/client/src/components/GameControls.vue
@@ -0,0 +1,46 @@
+
+
+ Collect Quotes
+ Start
+ Continue
+ Idle
+ Finish
+
+
+
+
+
+
diff --git a/client/src/components/TopBar.vue b/client/src/components/TopBar.vue
index fb531e7..43f9d5f 100644
--- a/client/src/components/TopBar.vue
+++ b/client/src/components/TopBar.vue
@@ -9,7 +9,7 @@
Admin
- Collect Quotes | Start | Continue | Idle | Finish
+
{{ game.name }}
diff --git a/client/src/composables/engine/game.ts b/client/src/composables/engine/game.ts
new file mode 100644
index 0000000..cec9fb9
--- /dev/null
+++ b/client/src/composables/engine/game.ts
@@ -0,0 +1,36 @@
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+
+export async function collectQuotes(): Promise {
+ const userInfoStore = useUserinfoStore()
+ await this.callApi('/api/collectQuotes', {
+ g: userInfoStore.gameId,
+ })
+}
+
+export async function startGame(): Promise {
+ const userInfoStore = useUserinfoStore()
+ await this.callApi('/api/startGame', {
+ g: userInfoStore.gameId,
+ })
+}
+
+export async function continueGame(): Promise {
+ const userInfoStore = useUserinfoStore()
+ await this.callApi('/api/continueGame', {
+ g: userInfoStore.gameId,
+ })
+}
+
+export async function resetGame(): Promise {
+ const userInfoStore = useUserinfoStore()
+ await this.callApi('/api/resetGame', {
+ g: userInfoStore.gameId,
+ })
+}
+
+export async function finishGame(): Promise {
+ const userInfoStore = useUserinfoStore()
+ await this.callApi('/api/finishGame', {
+ g: userInfoStore.gameId,
+ })
+}
diff --git a/client/src/composables/useEngine.ts b/client/src/composables/useEngine.ts
index 47cfe1c..20cd3e9 100644
--- a/client/src/composables/useEngine.ts
+++ b/client/src/composables/useEngine.ts
@@ -3,6 +3,7 @@ import { callApi, QueryParams } from '@/composables/engine/callApi'
import { start, stop } from '@/composables/engine/startStop'
import { fetchUpdate } from '@/composables/engine/fetchUpdate'
import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
+import { collectQuotes, startGame, continueGame, resetGame, finishGame } from '@/composables/engine/game'
import type { Quotes } from '@/composables/engine.d'
interface EngineContext {
@@ -28,6 +29,11 @@ export interface useEngine {
createQuote(quote: string): Promise
saveQuote(id: string, quote: string): Promise
deleteQuote(id: string): Promise
+ collectQuotes: () => Promise
+ startGame: () => Promise
+ continueGame: () => Promise
+ resetGame: () => Promise
+ finishGame: () => Promise
}
export default (): useEngine => {
@@ -55,5 +61,10 @@ export default (): useEngine => {
createQuote: (quote: string) => saveQuote.apply(context, [':new:', quote]),
saveQuote: (id: string, quote: string) => saveQuote.apply(context, [id, quote]),
deleteQuote: (id) => deleteQuote.apply(context, [id]),
+ collectQuotes: () => collectQuotes.apply(context),
+ startGame: () => startGame.apply(context),
+ continueGame: () => continueGame.apply(context),
+ resetGame: () => resetGame.apply(context),
+ finishGame: () => finishGame.apply(context),
}
}
\ No newline at end of file