diff --git a/client/src/assets/icons/edit-white.svg b/client/src/assets/icons/edit-white.svg new file mode 100644 index 0000000..2e6543d --- /dev/null +++ b/client/src/assets/icons/edit-white.svg @@ -0,0 +1,200 @@ + + + + Pencil Pictogram + + + + + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + Pencil Pictogram + 2013-11-16T20:22:22 + black pencil pictogram. + https://openclipart.org/detail/188837/pencil-pictogram-by-libberry-188837 + + + libberry + + + + + learning + pencil + stationery + study + writing + + + + + + + + + + + diff --git a/client/src/assets/icons/edit.svg b/client/src/assets/icons/edit.svg index dc089b5..b4c78e2 100644 --- a/client/src/assets/icons/edit.svg +++ b/client/src/assets/icons/edit.svg @@ -62,7 +62,7 @@ /> - + - + - - + + - + - + - + - + - +
{{ $t('name') }}: {{ gameinfo.name }} -
+
+ +
{{ $t('language') }}:{{ gameinfo.lang }} -
+ 		{{ gameinfo.lang }} +
+ +
+ 		+
{{ $t('created') }}: {{ date(gameinfo.created) }}
{{ $t('num-players') }}: {{ gameinfo.players.length }}
{{ $t('num-quotes-played') }}: {{ gameinfo.numQuotesLeft - gameinfo.numQuotesLeft }} / {{ gameinfo.numQuotesTotal }}
 
{{ gameinfo.id }}
@@ -41,13 +51,15 @@ import { ref } from 'vue' import useI18n from '@/composables/useI18n' import useDateFormatter from '@/composables/useDateFormatter'; +import useEngine from '@/composables/useEngine' import type { GameInfo } from '@/composables/engine.d' const { date } = useDateFormatter() -defineProps<{ +const props = defineProps<{ gameinfo: GameInfo }>() +const emit = defineEmits(['update']) const { $t } = useI18n({ id: { en: 'Id', de: 'Id' }, @@ -55,13 +67,28 @@ const { $t } = useI18n({ language: { en: 'Language', de: 'Sprache' }, created: { en: 'Created', de: 'Erstellt' }, 'num-players': { en: '# Players', de: '# Spieler' }, - 'num-quotes-played': { en: '# Quotes played', de: '# Aussagen gespielt'} + 'num-quotes-played': { en: '# Quotes played', de: '# Aussagen gespielt' }, + 'new-game-name': { en: 'New game name', de: 'Neuer Spielname' }, }) -const editName = () => { alert('not yet implemented') } -const editLang = () => { alert('not yet implemented') } - const showId = ref(false) + +const editName = async (): Promise => { + const name = window.prompt(`${$t('new-game-name')}: `) + if (name) { + await useEngine().setGameName(name) + emit('update') + } +} + +const lang = ref(props.gameinfo.lang) +const editLangShowDropdown = ref(false) +const editLang = () => { editLangShowDropdown.value = true } +const editLangChange = async (): Promise => { + editLangShowDropdown.value = false + await useEngine().setGameLang(lang.value) + emit('update') +} diff --git a/client/src/composables/engine/gamemaster.ts b/client/src/composables/engine/gamemaster.ts index 6cd8579..09faa53 100644 --- a/client/src/composables/engine/gamemaster.ts +++ b/client/src/composables/engine/gamemaster.ts @@ -42,4 +42,20 @@ export async function fetchGameInfo(this: EngineContext): Promise { return await this.callApi('/api/gameinfo', { g: userInfoStore.gameId, }) as GameInfo -} \ No newline at end of file +} + +export async function setGameLang(this: EngineContext, lang: string): Promise { + const userInfoStore = useUserinfoStore() + await this.callApi('/api/setGameLang', { + g: userInfoStore.gameId, + lang, + }) +} + +export async function setGameName(this: EngineContext, name: string): Promise { + const userInfoStore = useUserinfoStore() + await this.callApi('/api/setGameName', { + g: userInfoStore.gameId, + name, + }) +} diff --git a/client/src/composables/useEngine.ts b/client/src/composables/useEngine.ts index aa45ca2..e30aa15 100644 --- a/client/src/composables/useEngine.ts +++ b/client/src/composables/useEngine.ts @@ -3,7 +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, fetchGameInfo } from '@/composables/engine/gamemaster' +import { collectQuotes, startGame, continueGame, resetGame, finishGame, fetchGameInfo, setGameLang, setGameName } from '@/composables/engine/gamemaster' import { saveSelection } from '@/composables/engine/play' import type { Quotes, GameInfo } from '@/composables/engine.d' @@ -37,6 +37,8 @@ export interface useEngine { finishGame: () => Promise saveSelection: (selection: string) => Promise fetchGameInfo: () => Promise + setGameLang: (lang: string) => Promise + setGameName: (name: string) => Promise } export default (): useEngine => { @@ -71,5 +73,7 @@ export default (): useEngine => { finishGame: () => finishGame.apply(context), saveSelection: (selection: string) => saveSelection.apply(context, [selection]), fetchGameInfo: () => fetchGameInfo.apply(context), + setGameLang: (lang: string) => setGameLang.apply(context, [lang]), + setGameName: (name: string) => setGameName.apply(context, [name]), } } \ No newline at end of file diff --git a/client/src/pages/gamemaster.vue b/client/src/pages/gamemaster.vue index 6c0246c..2b7adba 100644 --- a/client/src/pages/gamemaster.vue +++ b/client/src/pages/gamemaster.vue @@ -2,7 +2,7 @@
- +
@@ -10,7 +10,7 @@