From 7034be1557a66422b7631f65c8b9ed7df1676aa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ezequiel=20Leonardo=20Casta=C3=B1o?= Date: Tue, 18 Aug 2020 12:07:42 +0200 Subject: [PATCH 01/24] Introduce default values to make the game always ready --- src/components/Menu/MenuButtons/MenuButtons.vue | 8 +------- src/components/Menu/PlayerForm/PlayerForm.vue | 4 ++-- src/components/Store.js | 16 ++-------------- 3 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/components/Menu/MenuButtons/MenuButtons.vue b/src/components/Menu/MenuButtons/MenuButtons.vue index af2865a..f45aad7 100644 --- a/src/components/Menu/MenuButtons/MenuButtons.vue +++ b/src/components/Menu/MenuButtons/MenuButtons.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Game/GameContent/GameContent.vue b/src/components/Game/GameContent/GameContent.vue index 8c4f934..907543e 100644 --- a/src/components/Game/GameContent/GameContent.vue +++ b/src/components/Game/GameContent/GameContent.vue @@ -4,14 +4,14 @@
- {{ $t('game.over')}} + {{ $t('game.over') }}

@@ -21,40 +21,40 @@
-
{{ buzzword }}
+
{{ buzzword }}
diff --git a/src/components/Game/GameHeader/GameHeader.vue b/src/components/Game/GameHeader/GameHeader.vue index 5dd789b..b64a732 100644 --- a/src/components/Game/GameHeader/GameHeader.vue +++ b/src/components/Game/GameHeader/GameHeader.vue @@ -3,7 +3,9 @@
- {{ $t('game.time')}}: {{ computedGameTimer }} + {{ $t('game.time') }}: {{ + computedGameTimer + }}
@@ -15,7 +17,7 @@
@@ -27,77 +29,77 @@ diff --git a/src/components/Highscores/Highscore/Highscore.vue b/src/components/Highscores/Highscore/Highscore.vue index f759765..b5f0737 100644 --- a/src/components/Highscores/Highscore/Highscore.vue +++ b/src/components/Highscores/Highscore/Highscore.vue @@ -10,22 +10,22 @@ diff --git a/src/components/Highscores/Highscores.vue b/src/components/Highscores/Highscores.vue index 0602fb0..87ae0ec 100644 --- a/src/components/Highscores/Highscores.vue +++ b/src/components/Highscores/Highscores.vue @@ -1,54 +1,54 @@ diff --git a/src/components/Highscores/HighscoresButtons/HighscoresButtons.vue b/src/components/Highscores/HighscoresButtons/HighscoresButtons.vue index affc28a..8fc3edc 100644 --- a/src/components/Highscores/HighscoresButtons/HighscoresButtons.vue +++ b/src/components/Highscores/HighscoresButtons/HighscoresButtons.vue @@ -14,16 +14,16 @@ diff --git a/src/components/Menu/CategorySelect/Category.vue b/src/components/Menu/CategorySelect/Category.vue index 55cbde0..0b2deff 100644 --- a/src/components/Menu/CategorySelect/Category.vue +++ b/src/components/Menu/CategorySelect/Category.vue @@ -9,18 +9,18 @@ diff --git a/src/components/Menu/CategorySelect/CategorySelect.vue b/src/components/Menu/CategorySelect/CategorySelect.vue index 3f12896..a817b07 100644 --- a/src/components/Menu/CategorySelect/CategorySelect.vue +++ b/src/components/Menu/CategorySelect/CategorySelect.vue @@ -6,22 +6,22 @@ diff --git a/src/components/Menu/HowTo/HowTo.vue b/src/components/Menu/HowTo/HowTo.vue index 01a40e1..9d3ed48 100644 --- a/src/components/Menu/HowTo/HowTo.vue +++ b/src/components/Menu/HowTo/HowTo.vue @@ -4,7 +4,7 @@
  1. {{ $t('howto.instruction[0]') }}
  2. {{ $t('howto.instruction[1]') }}
    3. -
  3. {{ $t('howto.instruction[2]', {roundLength : roundLength}) }}
    4. +
  4. {{ $t('howto.instruction[2]', {roundLength: roundLength}) }}
  5. {{ $t('howto.instruction[3]') }}
  6. {{ $t('howto.instruction[4]') }}
@@ -12,12 +12,12 @@ diff --git a/src/components/Menu/LangSwitch/LangSwitch.vue b/src/components/Menu/LangSwitch/LangSwitch.vue index 889ccd7..0fbc790 100644 --- a/src/components/Menu/LangSwitch/LangSwitch.vue +++ b/src/components/Menu/LangSwitch/LangSwitch.vue @@ -7,15 +7,15 @@ diff --git a/src/components/Menu/Logo/Logo.vue b/src/components/Menu/Logo/Logo.vue index 312fe4f..02a3d81 100644 --- a/src/components/Menu/Logo/Logo.vue +++ b/src/components/Menu/Logo/Logo.vue @@ -6,7 +6,7 @@ diff --git a/src/components/Menu/Menu.vue b/src/components/Menu/Menu.vue index 4c6dac9..21105a2 100644 --- a/src/components/Menu/Menu.vue +++ b/src/components/Menu/Menu.vue @@ -1,40 +1,40 @@ diff --git a/src/components/Menu/MenuButtons/MenuButtons.vue b/src/components/Menu/MenuButtons/MenuButtons.vue index 2afd88a..d20f4d0 100644 --- a/src/components/Menu/MenuButtons/MenuButtons.vue +++ b/src/components/Menu/MenuButtons/MenuButtons.vue @@ -10,15 +10,15 @@ diff --git a/src/components/Menu/MenuFooter/MenuFooter.vue b/src/components/Menu/MenuFooter/MenuFooter.vue index c377bae..e502fa5 100644 --- a/src/components/Menu/MenuFooter/MenuFooter.vue +++ b/src/components/Menu/MenuFooter/MenuFooter.vue @@ -5,7 +5,7 @@ diff --git a/src/components/Menu/PlayerForm/PlayerForm.vue b/src/components/Menu/PlayerForm/PlayerForm.vue index 3bfa6de..1a3a052 100644 --- a/src/components/Menu/PlayerForm/PlayerForm.vue +++ b/src/components/Menu/PlayerForm/PlayerForm.vue @@ -14,26 +14,26 @@ diff --git a/src/components/Store.js b/src/components/Store.js index f5b4fe1..c9c1be5 100644 --- a/src/components/Store.js +++ b/src/components/Store.js @@ -46,7 +46,7 @@ const store = createStore({ console.log('Category changed to ' + newCategory); }, - switchLocale(state, payload) { + switchLocale (state, payload) { payload.vm.$i18n.locale = payload.locale; state.locale = payload.locale; }, @@ -127,7 +127,7 @@ const store = createStore({ }, // Highscore actions - initHighscores(state) { + initHighscores (state) { if (state.highscores.length === 0) { // Try to get the highscores from local storage let localScores = JSON.parse(localStorage.getItem('highscores')); @@ -139,7 +139,7 @@ const store = createStore({ this.commit('sortHighscores'); }, - sortHighscores(state) { + sortHighscores (state) { // Sort the highscores by total score descending state.highscores = state.highscores.sort((a, b) => { // Calculate a total score by substrating the fail from the success cards @@ -163,7 +163,7 @@ const store = createStore({ state.highscores.push(highscore); - if (typeof(Storage) !== 'undefined') { + if (typeof (Storage) !== 'undefined') { // Save the highscore to the local storage is available localStorage.setItem('highscores', JSON.stringify(state.highscores)); } @@ -178,7 +178,7 @@ const store = createStore({ if (afterGamePanel) { // Delay the animation of the highscores panel if coming from the game panel - window.setTimeout(()=>{ + window.setTimeout(() => { state.showHighscorePanel = true; }, 300); } else { @@ -194,7 +194,7 @@ const store = createStore({ state.highscores = []; - if (typeof(Storage) !== 'undefined') { + if (typeof (Storage) !== 'undefined') { localStorage.removeItem('highscores'); } } From 29c5d0869518f16d17bbffbcd4bf41e3c42bc946 Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 23 Jul 2021 11:50:46 +0200 Subject: [PATCH 17/24] Change some meta data, set locale dynamically --- public/index.html | 10 +++++----- src/components/Menu/MenuFooter/MenuFooter.vue | 2 +- src/components/Store.js | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/public/index.html b/public/index.html index a7b1014..0858c70 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + @@ -14,19 +14,19 @@ KVH Taboo - + - + - - + + diff --git a/src/components/Menu/MenuFooter/MenuFooter.vue b/src/components/Menu/MenuFooter/MenuFooter.vue index e502fa5..068a676 100644 --- a/src/components/Menu/MenuFooter/MenuFooter.vue +++ b/src/components/Menu/MenuFooter/MenuFooter.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Store.js b/src/components/Store.js index c9c1be5..281b9d0 100644 --- a/src/components/Store.js +++ b/src/components/Store.js @@ -49,6 +49,7 @@ const store = createStore({ switchLocale (state, payload) { payload.vm.$i18n.locale = payload.locale; state.locale = payload.locale; + document.documentElement.setAttribute('lang', payload.locale); }, // Start the game countdown From e9f8a20bd406bf5cccfc0c8894911eb7ed390b22 Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 23 Jul 2021 12:55:19 +0200 Subject: [PATCH 18/24] Various design and animation improvements --- src/App.vue | 49 ++++----- src/components/Game/Game.vue | 12 +-- .../Game/GameContent/GameContent.vue | 9 +- .../Game/GameContent/_gameContent.scss | 26 ++--- src/components/Highscores/Highscores.vue | 48 ++++----- src/components/Menu/Menu.vue | 16 ++- src/components/Store.js | 16 +-- src/styles/base/_layout.scss | 101 +++++------------- 8 files changed, 103 insertions(+), 174 deletions(-) diff --git a/src/App.vue b/src/App.vue index e24ac10..eba0fac 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,36 +1,37 @@ diff --git a/src/components/Game/Game.vue b/src/components/Game/Game.vue index 93019d3..c603568 100644 --- a/src/components/Game/Game.vue +++ b/src/components/Game/Game.vue @@ -1,15 +1,13 @@ diff --git a/src/components/Game/GameContent/GameContent.vue b/src/components/Game/GameContent/GameContent.vue index 907543e..bc2fd4f 100644 --- a/src/components/Game/GameContent/GameContent.vue +++ b/src/components/Game/GameContent/GameContent.vue @@ -32,8 +32,10 @@ export default { name: 'GameContent', computed: { getKeyword () { - this.theKeyword = this.$store.state.keyword; - return this.theKeyword; + return this.$store.state.keyword; + }, + getBuzzwords () { + return this.$store.state.buzzwords; }, gameStarted () { return this.$store.state.gameStarted; @@ -46,9 +48,6 @@ export default { } }, methods: { - getBuzzwords () { - return this.$store.state.buzzwords; - }, showHighscores () { this.$store.commit('showHighscores', true); }, diff --git a/src/components/Game/GameContent/_gameContent.scss b/src/components/Game/GameContent/_gameContent.scss index 873bd93..315c3b4 100644 --- a/src/components/Game/GameContent/_gameContent.scss +++ b/src/components/Game/GameContent/_gameContent.scss @@ -50,16 +50,17 @@ &__buzzwords { position: relative; - display: flex; text-align: center; - flex-wrap: wrap; - justify-content: left; - align-items: center; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: $spacer; padding: $spacer-2; background-color: $gray-100; border-radius: $border-radius; @media screen and (min-width: $screen-sm) { + grid-template-columns: 1fr 1fr; padding: $spacer; } @@ -69,25 +70,16 @@ } &__buzzword { - flex: 1 1 100%; - padding: $spacer-1 $spacer; + display: flex; + justify-content: center; + align-items: center; color: darken($red, 20%); font-family: $font-family-condensed; - font-size: $font-size-xl; + font-size: $font-size-lg; font-weight: bold; - max-width: 50%; @media screen and (min-width: $screen-lg) { - flex: 0 1 50%; font-size: $font-size-xl; } - - &:first-child { - padding-top: 0; - } - - &:last-child { - padding-bottom: 0; - } } } diff --git a/src/components/Highscores/Highscores.vue b/src/components/Highscores/Highscores.vue index 87ae0ec..2af5e29 100644 --- a/src/components/Highscores/Highscores.vue +++ b/src/components/Highscores/Highscores.vue @@ -1,33 +1,31 @@ diff --git a/src/components/Menu/Menu.vue b/src/components/Menu/Menu.vue index 21105a2..6c93ce6 100644 --- a/src/components/Menu/Menu.vue +++ b/src/components/Menu/Menu.vue @@ -1,17 +1,15 @@ diff --git a/src/components/Store.js b/src/components/Store.js index 281b9d0..dea095a 100644 --- a/src/components/Store.js +++ b/src/components/Store.js @@ -15,9 +15,7 @@ const store = createStore({ availableCards: {}, // App states - showMenuPanel: true, - showGamePanel: false, - showHighscorePanel: false, + activePanel: 'menu', gameCountdown: false, gameStarted: false, @@ -54,8 +52,7 @@ const store = createStore({ // Start the game countdown async startCountdown (state, i18n) { - state.showMenuPanel = false; - state.showGamePanel = true; + state.activePanel = 'game'; state.gameCountdown = true; state.keyword = i18n.t('game.init'); state.availableCards = await GameData.getCardsForCategory(state.selectedCategory, i18n.locale); @@ -119,10 +116,7 @@ const store = createStore({ // Global actions showMenu (state) { state.gameStarted = false; - - state.showMenuPanel = true; - state.showGamePanel = false; - state.showHighscorePanel = false; + state.activePanel = 'menu'; this.commit('resetGameState'); }, @@ -173,9 +167,7 @@ const store = createStore({ }, showHighscores (state, afterGamePanel) { state.gameStarted = false; - - state.showMenuPanel = false; - state.showGamePanel = false; + state.activePanel = 'highscores'; if (afterGamePanel) { // Delay the animation of the highscores panel if coming from the game panel diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss index 8259444..83ae6a0 100644 --- a/src/styles/base/_layout.scss +++ b/src/styles/base/_layout.scss @@ -6,75 +6,52 @@ body { } body { - overflow: hidden; - //background: linear-gradient(-60deg, #013cc5, #8e58fe, #14e1da, #0b62f5); + display: flex; + flex-direction: column; + overflow-y: scroll; background: linear-gradient(-60deg, $blue, lighten($indigo, 10%), lighten($teal, 10%), $cyan); background-size: 300% 300%; animation: gradientBG 30s ease infinite; + padding: $panel-margin-mobile $spacer 0; + + @media screen and (min-width: $screen-md) { + padding: $panel-margin $spacer-4 0; + } +} + +#app { + flex-grow: 1; } .panel { - position: absolute; - top: $panel-margin-mobile + $panel-top-size; - bottom: 0; - width: calc(100% - #{$panel-margin-mobile * 2}); - margin: 0 $panel-margin-mobile; + width: 100%; + height: 100%; + max-width: $screen-lg; + margin: 0 auto; + padding: $spacer; background: $white; + border-top-left-radius: 2rem; + border-top-right-radius: 2rem; box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.07), 0 -4px 4px rgba(0, 0, 0, 0.07), 0 -8px 8px rgba(0, 0, 0, 0.07), 0 -16px 16px rgba(0, 0, 0, 0.07), 0 -32px 32px rgba(0, 0, 0, 0.07), 0 -64px 64px rgba(0, 0, 0, 0.07); - - @media screen and (min-width: $screen-md) { - top: $panel-margin + $panel-top-size; - width: calc(100% - #{$panel-margin * 2}); - margin: 0 $panel-margin; - } - - @media screen and (min-width: $screen-lg) { - max-width: $screen-lg; - margin: 0 auto; - left: 0; - right: 0; - } - - &:before { - content: ''; - position: absolute; - top: -#{$panel-top-size}; - left: 0; - right: 0; - height: $panel-top-size; - background: $white; - border-top-left-radius: 2rem; - border-top-right-radius: 2rem; - } -} - -.panel-content { - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - padding: 0 $spacer $spacer; } .panel-enter-active { - animation: panelAnimMobile $panel-anim-speed forwards; - - @media screen and (min-width: $screen-md) { - animation: panelAnim $panel-anim-speed forwards; - } + transition: all 400ms ease-out; } .panel-leave-active { - animation: panelAnimMobile $panel-anim-speed forwards reverse; + transition: all 400ms cubic-bezier(1, 0.5, 0.8, 1); +} - @media screen and (min-width: $screen-md) { - animation: panelAnim $panel-anim-speed forwards reverse; - } +.panel-enter-from, +.panel-leave-to { + transform: translateY(40px); + opacity: 0; } @keyframes gradientBG { @@ -88,29 +65,3 @@ body { background-position: 0 50%; } } - -@keyframes panelAnimMobile { - 0% { - top: 10rem; - opacity: 0; - transform: scale(1.05); - } - 100% { - top: $panel-margin-mobile + $panel-top-size; - opacity: 1; - transform: scale(1); - } -} - -@keyframes panelAnim { - 0% { - top: 10rem; - opacity: 0; - transform: scale(1.05); - } - 100% { - top: $panel-margin + $panel-top-size; - opacity: 1; - transform: scale(1); - } -} From 4fb2ce4d3266d975d895f9397940bd4280f7d88b Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 23 Jul 2021 13:44:05 +0200 Subject: [PATCH 19/24] Optimize player name handling --- src/components/Menu/MenuButtons/MenuButtons.vue | 7 ++++++- src/components/Menu/PlayerForm/PlayerForm.vue | 14 ++++++-------- src/components/Store.js | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/Menu/MenuButtons/MenuButtons.vue b/src/components/Menu/MenuButtons/MenuButtons.vue index d20f4d0..c0b70d3 100644 --- a/src/components/Menu/MenuButtons/MenuButtons.vue +++ b/src/components/Menu/MenuButtons/MenuButtons.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Highscores/Highscores.vue b/src/components/Highscores/Highscores.vue index 2af5e29..9763036 100644 --- a/src/components/Highscores/Highscores.vue +++ b/src/components/Highscores/Highscores.vue @@ -12,8 +12,13 @@ {{ $t('highscores.rank') }} {{ $t('game.player') }} {{ $t('game.category') }} - ✓ - ✗ + + + + + + + {{ $t('highscores.roundLength') }} {{ $t('highscores.date') }} diff --git a/src/components/Menu/HowTo/HowTo.vue b/src/components/Menu/HowTo/HowTo.vue index 9d3ed48..38d5595 100644 --- a/src/components/Menu/HowTo/HowTo.vue +++ b/src/components/Menu/HowTo/HowTo.vue @@ -16,7 +16,7 @@ export default { name: 'HowTo', computed: { roundLength () { - return this.$store.state.timerDefault; + return this.$store.state.roundLength; } } }; diff --git a/src/components/Menu/PlayerForm/PlayerForm.vue b/src/components/Menu/PlayerForm/PlayerForm.vue index ee24ab0..d9ececf 100644 --- a/src/components/Menu/PlayerForm/PlayerForm.vue +++ b/src/components/Menu/PlayerForm/PlayerForm.vue @@ -8,7 +8,7 @@
+ min="10" max="600" v-bind:value="this.$store.state.roundLength" @keyup="processTurnDuration">
diff --git a/src/components/Store.js b/src/components/Store.js index a90f0b5..7c77722 100644 --- a/src/components/Store.js +++ b/src/components/Store.js @@ -7,7 +7,7 @@ const store = createStore({ plugins: [createPersistedState()], state: { // Defaults - timerDefault: 60, + roundLength: 60, countdownDefault: 4, locale: 'en', @@ -36,10 +36,10 @@ const store = createStore({ state.playerName = playername; }, turnDuration (state, turnDuration) { - state.timerDefault = turnDuration; + state.roundLength = turnDuration; }, turnNotSet (state) { - state.timerDefault = 60; + state.roundLength = 60; }, selectCategory (state, newCategory) { state.selectedCategory = newCategory; @@ -143,7 +143,8 @@ const store = createStore({ name: state.playerName, score: state.score, category: state.selectedCategory, - date: Date.now() + date: Date.now(), + roundLength: state.roundLength }; state.highscores.push(highscore); diff --git a/src/lang/de.json b/src/lang/de.json index 1c54dac..1ec759a 100644 --- a/src/lang/de.json +++ b/src/lang/de.json @@ -33,6 +33,7 @@ "empty": "Keine Highscores vorhanden.", "delete": "Alle Highscores löschen", "rank": "Rang", - "date": "Datum" + "date": "Datum", + "roundLength": "Rundenlänge" } } diff --git a/src/lang/en.json b/src/lang/en.json index 9fbd699..72cb258 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -33,6 +33,7 @@ "empty": "No highscores available", "delete": "Delete all highscores", "rank": "Rank", - "date": "Date" + "date": "Date", + "roundLength": "Round Length" } } diff --git a/src/styles/base/_btn.scss b/src/styles/base/_btn.scss index fdade53..a3673ae 100644 --- a/src/styles/base/_btn.scss +++ b/src/styles/base/_btn.scss @@ -29,13 +29,13 @@ } // States - &:hover, - &:focus { + &:hover:not(:disabled), + &:focus:not(:disabled) { background-position: 50% 0; } - &:active, - &.active { + &:active:not(:disabled), + &.active:not(:disabled) { background-position: 100% 0; transform: scale(.985); }