Skip to content

Commit

Permalink
* Migrate the last few components
Browse files Browse the repository at this point in the history
  • Loading branch information
@ConorMurphy21
ConorMurphy21 committed Feb 4, 2024
1 parent 80c7833 commit 7dc00b5
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 205 deletions.
101 changes: 45 additions & 56 deletions client/src/components/responseMatching/ActiveMatching.vue
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,73 @@
<script setup lang="ts">
import Prompt from '@/components/gameShared/Prompt.vue';
import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
import ResponseList from '@/components/gameShared/ResponseList.vue';
import { AudioWrap } from '@/mixins/audiowrap.js';
import ClickMp3 from '@/assets/audio/click2.mp3';
import AlertMp3 from '@/assets/audio/alert.mp3';
import { onMounted, ref, watch } from 'vue';
import socket from '@/socket/socket.js';
import { useGameStore } from '@/stores/game.js';
import { useI18n } from 'vue-i18n';
const click = new AudioWrap(ClickMp3);
const alert = new AudioWrap(AlertMp3);
const matchedResponse = ref('');
const gameStore = useGameStore();
onMounted(() => {
if (!gameStore.unmatched) {
alert.play();
}
});
watch(matchedResponse, (val: string): void => {
socket.emit('selectMatch', val);
});
function noMatch() {
click.play();
socket.emit('selectMatch', '');
}
const { t } = useI18n();
</script>

<template>
<div class="w-100 d-flex flex-column justify-content-start align-items-center py-3 px-4">
<prompt :prompt="prompt" />
<prompt :prompt="gameStore.prompt" />
<i18n-t keypath="activeMatchingMessage" tag="p">
<template #player>
<span class="player">{{ selector?.name }}</span>
<span class="player">{{ gameStore.selector?.name }}</span>
</template>
<template #response>
<span class="responseMessage fs-4">{{ selectedResponse }}</span>
<span class="responseMessage fs-4">{{ gameStore.selectedResponse }}</span>
<dispute-icon
v-if="sikeDispute && selectionType === 'sike'"
v-if="gameStore.sikeDispute && gameStore.selectionType === 'sike'"
class="ms-2 me-1"
:response="selectedResponse"
:response="gameStore.selectedResponse"
:placement="'top'" />
</template>
<template #type>
<span v-t="selectionType" :class="selectionType" />
<span v-t="gameStore.selectionType" :class="gameStore.selectionType" />
</template>
</i18n-t>

<button
v-tooltip.left.ds900="$t('tooltip.noMatch', { response: selectedResponse })"
v-tooltip.left.ds900="$t('tooltip.noMatch', { response: gameStore.selectedResponse })"
class="btn btn-primary w-50 fs-4 d-flex justify-content-center align-items-center"
@click="noMatch">
<div class="d-flex justify-content-center align-items-center w-75">
<img class="my-auto w-75 w-sm-50 w-lg-25" src="@/assets/images/sike.png" :alt="$t('sike')" />
<img class="my-auto w-75 w-sm-50 w-lg-25" src="@/assets/images/sike.png" :alt="t('sike')" />
</div>
</button>
or
<response-list v-model="matchedResponse" :selectable="true" :height="40" />
</div>
</template>

<script lang="ts">
import ResponseList from '@/components/gameShared/ResponseList.vue';
import Prompt from '@/components/gameShared/Prompt.vue';
import ClickMp3 from '@/assets/audio/click2.mp3';
import AlertMp3 from '@/assets/audio/alert.mp3';
import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
import { AudioWrap } from '@/mixins/audiowrap.js';
import socket from '@/socket/socket';
import { useGameStore } from '@/stores/game.js';
import { mapState } from 'pinia';
import { defineComponent } from 'vue';

const click = new AudioWrap(ClickMp3);
const alert = new AudioWrap(AlertMp3);

export default defineComponent({
components: {
DisputeIcon,
ResponseList,
Prompt
},
data() {
return {
matchedResponse: ''
};
},
computed: {
...mapState(useGameStore, ['prompt', 'selectionType', 'selectedResponse', 'selector', 'unmatched', 'sikeDispute'])
},
watch: {
matchedResponse: function (val: string) {
socket.emit('selectMatch', val);
}
},
mounted() {
if (!this.unmatched) {
alert.play();
}
},
methods: {
noMatch() {
click.play();
socket.emit('selectMatch', '');
}
}
});
</script>

<style lang="scss" scoped>
p {
text-align: center;
Expand Down
105 changes: 44 additions & 61 deletions client/src/components/responseMatching/MatchingSummary.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,54 @@
<script setup lang="ts">
import Prompt from '@/components/gameShared/Prompt.vue';
import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
import SelectionType from '@/components/gameShared/SelectionType.vue';
import MatchCard from '@/components/responseMatching/MatchCard.vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import type { Player } from ':common/stateTypes.js';
import socket from '@/socket/socket.js';
import { type Match, useGameStore } from '@/stores/game.js';
import { AudioWrap } from '@/mixins/audiowrap.js';
import ClickMp3 from '@/assets/audio/click2.mp3';
import { useRoomStore } from '@/stores/room.js';
const click = new AudioWrap(ClickMp3);
const gameStore = useGameStore();
const roomStore = useRoomStore();
const matchers = computed((): Player[] => {
return roomStore.players.filter((player: Player) => player.active && player.id !== gameStore.selector!.id);
});
function endRound(): void {
click.play();
socket.emit('selectionComplete');
}
function match(player: Player): Match {
return gameStore.matches.find((match: { player: Player }) => player.id === match.player.id)!;
}
const { t, n } = useI18n();
</script>

<template>
<div class="w-100 d-flex flex-column align-items-center justify-content-between gap-2 py-3 px-4">
<div class="w-100 d-flex flex-column align-items-center justify-content-start">
<prompt :prompt="prompt" />
<h3 v-if="isSelector" class="fs-3">
{{ $t('selfScoreMessage', { score: $n(roundPoints) }) }}
<prompt :prompt="gameStore.prompt" />
<h3 v-if="gameStore.isSelector" class="fs-3">
{{ t('selfScoreMessage', { score: n(gameStore.roundPoints) }) }}
</h3>
<h3 v-else class="fs-3">
{{ $t('scoreMessage', { player: selector!.name, score: $n(roundPoints) }) }}
{{ t('scoreMessage', { player: gameStore.selector!.name, score: n(gameStore.roundPoints) }) }}
</h3>
<span class="d-flex flex-row align-items-center justify-content-center gap-2">
<span class="fs-2 fw-bolder text-red my-auto">{{ selectedResponse }}</span>
<span class="fs-2 fw-bolder text-red my-auto">{{ gameStore.selectedResponse }}</span>
<dispute-icon
v-if="sikeDisputeCount"
:disabled="isSelector"
:response="selectedResponse"
v-if="gameStore.sikeDisputeCount"
:disabled="gameStore.isSelector"
:response="gameStore.selectedResponse"
:placement="'right'" />
</span>
<div class="w-75 d-flex justify-content-center align-items-center">
Expand All @@ -28,63 +63,11 @@
<button
v-t="'cont'"
class="btn btn-blue w-50 fs-4 mb-3"
:class="{ invisible: !canEndRound }"
:class="{ invisible: !gameStore.canEndRound }"
@click="endRound"></button>
</div>
</template>

<script lang="ts">
import Prompt from '@/components/gameShared/Prompt.vue';
import SelectionType from '@/components/gameShared/SelectionType.vue';
import MatchCard from '@/components/responseMatching/MatchCard.vue';
import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
import ClickMp3 from '@/assets/audio/click2.mp3';
import { AudioWrap } from '@/mixins/audiowrap.js';
import socket from '@/socket/socket';
import { useRoomStore } from '@/stores/room.js';
import { useGameStore } from '@/stores/game.js';
import { mapState } from 'pinia';
import { defineComponent } from 'vue';
import type { Player } from ':common/stateTypes';
const click = new AudioWrap(ClickMp3);
export default defineComponent({
components: { MatchCard, Prompt, SelectionType, DisputeIcon },
data() {
return {
matchedResponse: ''
};
},
computed: {
...mapState(useRoomStore, ['players']),
...mapState(useGameStore, [
'prompt',
'matches',
'selectionType',
'selectedResponse',
'selector',
'roundPoints',
'canEndRound',
'isSelector',
'sikeDisputeCount'
]),
matchers: function () {
return this.players.filter((player: Player) => player.active && player.id !== this.selector!.id);
}
},
methods: {
endRound: function () {
click.play();
socket.emit('selectionComplete');
},
match(player: Player) {
return this.matches.find((match: { player: Player }) => player.id === match.player.id)!;
}
}
});
</script>

<style lang="scss" scoped>
.matches {
overflow-x: auto;
Expand Down
78 changes: 34 additions & 44 deletions client/src/components/responseSelection/Selection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,50 @@
<script setup lang="ts">
import Prompt from '@/components/gameShared/Prompt.vue';
import SelectionPicker from '@/components/responseSelection/SelectionPicker.vue';
import ResponseList from '@/components/gameShared/ResponseList.vue';
import { AudioWrap } from '@/mixins/audiowrap.js';
import AlertMp3 from '@/assets/audio/alert.mp3';
import { onMounted, ref, watch } from 'vue';
import socket from '@/socket/socket.js';
import { useGameStore } from '@/stores/game.js';
const alert = new AudioWrap(AlertMp3);
const response = ref('');
const gameStore = useGameStore();
onMounted(() => {
if (gameStore.isSelector && !gameStore.firstSelection) {
alert.play();
}
});
watch(response, (val: string) => {
socket.emit('selectResponse', val);
});
</script>

<template>
<div class="w-100 d-flex flex-column justify-content-start align-items-center py-3 px-4">
<prompt :prompt="prompt" />
<prompt :prompt="gameStore.prompt" />
<p
v-if="!isSelector"
v-t="{ path: 'selection.message', args: { player: selector?.name } }"
v-if="!gameStore.isSelector"
v-t="{ path: 'selection.message', args: { player: gameStore.selector?.name } }"
class="display-6 passiveMessage mb-0" />
<i18n-t v-else keypath="selection.selfMessage" tag="p" class="display-6 activeMessage mb-0">
<template #self>
<span v-t="'selection.self'" class="activeSelector display-6" />
</template>
</i18n-t>
<selection-picker />
<response-list v-model="response" :selectable="isSelector && selectionType !== 'choice'" :height="40" />
<response-list
v-model="response"
:selectable="gameStore.isSelector && gameStore.selectionType !== 'choice'"
:height="40" />
</div>
</template>
<script lang="ts">
import ResponseList from '@/components/gameShared/ResponseList.vue';
import SelectionPicker from '@/components/responseSelection/SelectionPicker.vue';
import Prompt from '@/components/gameShared/Prompt.vue';
import AlertMp3 from '@/assets/audio/alert.mp3';
import { AudioWrap } from '@/mixins/audiowrap.js';
import socket from '@/socket/socket';
import { useGameStore } from '@/stores/game.js';
import { mapState } from 'pinia';
import { defineComponent } from 'vue';
const alert = new AudioWrap(AlertMp3);
export default defineComponent({
components: {
ResponseList,
SelectionPicker,
Prompt
},
data() {
return {
response: ''
};
},
computed: {
...mapState(useGameStore, ['prompt', 'selectionType', 'selector', 'firstSelection', 'isSelector'])
},
watch: {
response: function (val: string) {
socket.emit('selectResponse', val);
}
},
mounted() {
if (this.isSelector && !this.firstSelection) {
alert.play();
}
}
});
</script>
<style lang="scss" scoped>
.activeMessage {
font-weight: 500;
Expand Down
Loading

0 comments on commit 7dc00b5

Please sign in to comment.