Skip to content

Commit

Permalink
refactor(Player): Change player.role.group to player.side. Closes #…
Browse files Browse the repository at this point in the history 
…82
  • Loading branch information
@antoinezanardi
antoinezanardi committed Dec 3, 2020
1 parent b5111d5 commit dd1fb0a
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 63 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@

### ♻️ Refactoring

* [#82](https://github.com/antoinezanardi/werewolves-assistant-web/issues/82) - Change `player.role.group` to `player.side`.

### 📦 Packages

* `@sentry/browser` updated to version `5.28.0`.
* `@sentry/integrations` updated to version `5.28.0`.
* `sweetalert2` updated to version `10.11.0`.
* `sweetalert2` updated to version `10.11.1`.
* `vuex` updated to version `3.6.0`.

---
Expand Down
4 changes: 4 additions & 0 deletions src/classes/Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,10 @@ class Game {
get hasWitchUsedDeathPotion() {
return !!this.history.find(({ play }) => play.action === "use-potion" && !!play.targets.find(({ potion }) => potion.death));
}

isRoleInGame(roleName) {
return !!this.players.find(({ role }) => role.current === roleName);
}
}

export default Game;
2 changes: 1 addition & 1 deletion src/components/GameLobby/GameLobby.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ import WhatToDoButton from "@/components/shared/Game/WhatToDoButton/WhatToDoButt
import GameLobbyTutorial from "@/components/GameLobby/GameLobbyTutorial";
import PlayerCard from "@/components/shared/Game/PlayerCard";
import { filterOutHTMLTags } from "@/helpers/functions/String";
import GameLobbyRolePickerModal from "@/components/GameLobby/GameLobbyRolePickerModal";
import GameLobbyRolePickerModal from "@/components/GameLobby/GameLobbyRolePickerModal/GameLobbyRolePickerModal";
import GameLobbyStartConditions from "@/components/GameLobby/GameLobbyStartConditions";
export default {
Expand Down
89 changes: 31 additions & 58 deletions ...ts/GameLobby/GameLobbyRolePickerModal.vue → ...ePickerModal/GameLobbyRolePickerModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,19 @@
</div>
</div>
<div class="row mt-2">
<div class="col-12 text-center">
<div>
<div class="col-12">
<div class="mt-2">
<i class="fa fa-chess-pawn text-info mr-2"/>
<span v-html="selectedRoleAlreadyTakenText"/>
</div>
<div v-if="selected.role.maxInGame === game.getPlayersWithRole(selected.role.name).length">
<div v-if="isRoleCountAlertDisplayed" class="mt-2">
<i class="fa fa-exclamation-circle animate__animated animate__heartBeat
animate__infinite mr-2"/>
<span v-html="$t('GameLobbyRolePickerModal.maxInGameReached')"/>
animate__infinite text-danger mr-2"/>
<span v-html="roleCountAlertText"/>
</div>
<div v-if="selected.role.recommendedMinPlayers" class="mt-2">
<i class="fa fa-chess text-info mr-2"/>
<span v-html="recommendedMinPlayersText"/>
</div>
</div>
</div>
Expand All @@ -93,28 +97,11 @@
</div>
<div id="roles-panel" class="col-md-8 col-12 visible-scrollbar">
<div class="row justify-content-center">
<div class="col-md-2 col-3 text-center p-2" @click="selectRandomRole">
<div class="role-image-container">
<RoleImage role="back"/>
</div>
<div class="cursor-pointer">
<i class="fa fa-random mr-1"/>
<span class="font-italic" v-html="$t('GameLobbyRolePickerModal.random')"/>
</div>
</div>
<div v-for="role in roles" :key="role.name" class="col-md-2 col-3 text-center p-2"
@click="changeSelectedRole(role)">
<div class="role-image-container" :class="{ selected: role === selected.role }">
<div v-if="game.getPlayersWithRole(role.name).length"
v-tooltip="$t('GameLobbyRolePickerModal.totalInGameInThisRole')"
class="role-count-in-game badge badge-light">
<i class="fa fa-chess-pawn mr-2"/>
<span v-html="game.getPlayersWithRole(role.name).length"/>
</div>
<RoleImage :role="role.name"/>
</div>
<RoleText :role="role.name"/>
</div>
<RolePickerRole :game="game" role-name="back" class="col-md-2 col-3 text-center p-2"
@click.native="selectRandomRole"/>
<RolePickerRole v-for="role in roles" :key="role.name" :game="game" :role-name="role.name"
:selected="selected.role.name === role.name"
class="col-md-2 col-3 text-center p-2" @click.native="changeSelectedRole(role)"/>
</div>
</div>
</div>
Expand Down Expand Up @@ -153,10 +140,11 @@ import Player from "@/classes/Player";
import Role from "@/classes/Role";
import RoleImage from "@/components/shared/Game/Role/RoleImage";
import RoleText from "@/components/shared/Game/Role/RoleText";
import RolePickerRole from "@/components/GameLobby/GameLobbyRolePickerModal/RolePickerRole";
export default {
name: "GameLobbyRolePickerModal",
components: { RoleText, RoleImage },
components: { RolePickerRole, RoleText, RoleImage },
props: {
game: {
type: Game,
Expand Down Expand Up @@ -196,6 +184,20 @@ export default {
}
return "";
},
recommendedMinPlayersText() {
return this.$t("GameLobbyRolePickerModal.recommendedMinPlayers", { count: this.selected.role.recommendedMinPlayers });
},
isRoleCountAlertDisplayed() {
const roleCount = this.game.getPlayersWithRole(this.selected.role.name).length;
return !!roleCount && (this.selected.role.maxInGame === roleCount || this.selected.role.minInGame > roleCount);
},
roleCountAlertText() {
const roleCount = this.game.getPlayersWithRole(this.selected.role.name).length;
if (this.selected.role.maxInGame === roleCount) {
return this.$t("GameLobbyRolePickerModal.maxInGameReached");
}
return this.$t("GameLobbyRolePickerModal.leftToStartGame", { count: this.selected.role.minInGame - roleCount });
},
},
methods: {
show(selectedPlayer) {
Expand Down Expand Up @@ -265,7 +267,7 @@ export default {
</script>

<style lang="scss" scoped>
@import "../../../node_modules/bootstrap/scss/bootstrap-grid";
@import "../../../../node_modules/bootstrap/scss/bootstrap-grid";
#game-lobby-role-picker-modal {
overflow-y: hidden;
Expand Down Expand Up @@ -317,33 +319,4 @@ export default {
height: 100%;
}
}
.role-image-container {
border: 3px solid grey;
border-radius: 8px;
margin: 3px;
transition: all 0.25s ease;
cursor: pointer;
.role-count-in-game {
position: absolute;
right: 2px;
top: 2px;
opacity: 0.8;
transition: all 0.25s ease;
z-index: 1;
&:hover {
opacity: 1;
}
}
&:hover {
border-color: #CACACA;
}
&.selected {
border-color: #eeeeee;
}
}
</style>
79 changes: 79 additions & 0 deletions src/components/GameLobby/GameLobbyRolePickerModal/RolePickerRole.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<template>
<div class="role-picker-role">
<div class="role-image-container" :class="{ selected }">
<div v-if="game.isRoleInGame(roleName)"
v-tooltip="$t('RolePickerRole.totalInGameInThisRole')"
class="role-count-in-game badge badge-light">
<i class="fa fa-chess-pawn mr-2"/>
<span v-html="roleCountInGame"/>
</div>
<RoleImage :role="roleName"/>
</div>
<div v-if="roleName === 'back'" class="cursor-pointer">
<i class="fa fa-random mr-1"/>
<span class="font-italic" v-html="$t('RolePickerRole.random')"/>
</div>
<RoleText v-else :role="roleName"/>
</div>
</template>

<script>
import RoleText from "@/components/shared/Game/Role/RoleText";
import RoleImage from "@/components/shared/Game/Role/RoleImage";
import Game from "@/classes/Game";
export default {
name: "RolePickerRole",
components: { RoleImage, RoleText },
props: {
game: {
type: Game,
required: true,
},
roleName: {
type: String,
required: true,
},
selected: {
type: Boolean,
default: false,
},
},
computed: {
roleCountInGame() {
return this.game.getPlayersWithRole(this.roleName).length;
},
},
};
</script>

<style lang="scss" scoped>
.role-image-container {
border: 3px solid grey;
border-radius: 8px;
margin: 3px;
transition: all 0.25s ease;
cursor: pointer;
.role-count-in-game {
position: absolute;
right: 2px;
top: 2px;
opacity: 0.8;
transition: all 0.25s ease;
z-index: 1;
&:hover {
opacity: 1;
}
}
&:hover {
border-color: #CACACA;
}
&.selected {
border-color: #eeeeee;
}
}
</style>
10 changes: 7 additions & 3 deletions src/plugins/vue-i18n/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,16 +128,20 @@
"searchRole": "Rechercher un rôle",
"chooseRole": "Veuillez choisir un rôle",
"side": "Camp",
"random": "Aléatoire",
"totalInGame": "0 dans la partie | 1 dans la partie | {total} dans la partie",
"maxInGameReached": "Maximum atteint pour ce rôle",
"totalInGameInThisRole": "Total dans la partie avec ce rôle",
"selectedPlayerAlreadyHasSelectedRole": "Le joueur sélectionné possède déjà ce rôle",
"doYouWantToSetItAnyway": "Voulez-vous quand même lui attribuer ce rôle ?",
"confirm": "Confirmer",
"cancel": "Annuler",
"roleWillBeSwitchedWithOtherPlayer": "Les rôles seront échangés avec le joueur possédant actuellement ce rôle.",
"actualRole": "Rôle actuel"
"actualRole": "Rôle actuel",
"recommendedMinPlayers": "Recommandé pour les parties de {count} joueurs et plus",
"leftToStartGame": "Ce rôle doit encore être distribué {count} fois pour commencer la partie"
},
"RolePickerRole": {
"totalInGameInThisRole": "Total dans la partie avec ce rôle",
"random": "Aléatoire"
},
"GameLobbyTutorial": {
"howToUseGameLobby": "Comment composer une équipe ?",
Expand Down

0 comments on commit dd1fb0a

Please sign in to comment.