affichage des mains

This commit is contained in:
Didictateur 2026-02-25 16:59:57 +01:00
parent 75d8cba654
commit d24eac42dd
2 changed files with 116 additions and 11 deletions

View file

@ -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."""

View file

@ -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));