affichage des mains
This commit is contained in:
parent
75d8cba654
commit
d24eac42dd
2 changed files with 116 additions and 11 deletions
|
|
@ -97,8 +97,27 @@ class Game:
|
|||
pass
|
||||
|
||||
def get_hand(self, player_id):
|
||||
"""Retourne la main d'un joueur."""
|
||||
pass
|
||||
"""Retourne la main d'un joueur (0 = joueur humain, 1-3 = bots)."""
|
||||
if player_id == 0:
|
||||
hand = list(getattr(self.hand_player, 'tiles', []))
|
||||
if getattr(self.hand_player, 'draw', None) is not None:
|
||||
hand = hand + [self.hand_player.draw]
|
||||
elif 1 <= player_id <= 3:
|
||||
hand_obj = self.hands_bots[player_id - 1]
|
||||
hand = list(getattr(hand_obj, 'tiles', []))
|
||||
if getattr(hand_obj, 'draw', None) is not None:
|
||||
hand = hand + [hand_obj.draw]
|
||||
else:
|
||||
return []
|
||||
return [
|
||||
{
|
||||
'id': tile.id,
|
||||
'family': str(tile.family),
|
||||
'value': str(tile.value),
|
||||
'svg': tile.get_img()
|
||||
}
|
||||
for tile in hand
|
||||
]
|
||||
|
||||
def get_discards(self, player_id):
|
||||
"""Retourne les tuiles défaussées d'un joueur."""
|
||||
|
|
|
|||
|
|
@ -40,14 +40,6 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
[id^="hand"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#tiles-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -55,6 +47,69 @@
|
|||
gap: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--game_radius: 1100px;
|
||||
}
|
||||
#game-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#game {
|
||||
position: relatives;
|
||||
width: var(--game_radius);
|
||||
height: var(--game_radius);
|
||||
}
|
||||
|
||||
#hand-0 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, 50%);
|
||||
bottom: -10%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
padding: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#hand-1 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -400%) rotate(-90deg) translate(0%, 450%);
|
||||
bottom: -10%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
padding: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#hand-2 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -400%) rotate(180deg) translate(0%, 450%);
|
||||
bottom: -10%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
padding: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#hand-3 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -400%) rotate(90deg) translate(0%, 450%);
|
||||
bottom: -10%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
padding: 20px 0 0 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -65,7 +120,14 @@
|
|||
</div>
|
||||
<div id="mascotte"></div>
|
||||
|
||||
<div id="hand-0"></div>
|
||||
<div id="game-center">
|
||||
<div id="game">
|
||||
<div id="hand-0"></div>
|
||||
<div id="hand-1"></div>
|
||||
<div id="hand-2"></div>
|
||||
<div id="hand-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/frontend/js/fr/texts.js"></script>
|
||||
<script>
|
||||
|
|
@ -95,6 +157,30 @@
|
|||
console.log('Réponse API', data);
|
||||
if (data.state && data.state.hand_player) {
|
||||
displayHand(data.state.hand_player, 'hand-0');
|
||||
// joueur 1
|
||||
fetch('/api/game/hand/1')
|
||||
.then(r => r.json())
|
||||
.then(botData => {
|
||||
if (botData.hand) {
|
||||
displayHand(botData.hand, 'hand-1');
|
||||
}
|
||||
});
|
||||
// joueur 2
|
||||
fetch('/api/game/hand/2')
|
||||
.then(r => r.json())
|
||||
.then(botData => {
|
||||
if (botData.hand) {
|
||||
displayHand(botData.hand, 'hand-2');
|
||||
}
|
||||
});
|
||||
// joueur 3
|
||||
fetch('/api/game/hand/3')
|
||||
.then(r => r.json())
|
||||
.then(botData => {
|
||||
if (botData.hand) {
|
||||
displayHand(botData.hand, 'hand-3');
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(e => console.error('Erreur initialisation partie', e));
|
||||
|
|
|
|||
Loading…
Reference in a new issue