affichage des mains
This commit is contained in:
Didictateur
parent
75d8cba654
commit
d24eac42dd
2 changed files with 116 additions and 11 deletions
|
|
@ -97,8 +97,27 @@ class Game:
|
||||||
pass
|
pass
|
||||||
|
|
||||||
def get_hand(self, player_id):
|
def get_hand(self, player_id):
|
||||||
"""Retourne la main d'un joueur."""
|
"""Retourne la main d'un joueur (0 = joueur humain, 1-3 = bots)."""
|
||||||
pass
|
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):
|
def get_discards(self, player_id):
|
||||||
"""Retourne les tuiles défaussées d'un joueur."""
|
"""Retourne les tuiles défaussées d'un joueur."""
|
||||||
|
|
|
||||||
|
|
@ -40,14 +40,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
[id^="hand"] {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tiles-container {
|
#tiles-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -55,6 +47,69 @@
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 20px;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -65,7 +120,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="mascotte"></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 src="/frontend/js/fr/texts.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -95,6 +157,30 @@
|
||||||
console.log('Réponse API', data);
|
console.log('Réponse API', data);
|
||||||
if (data.state && data.state.hand_player) {
|
if (data.state && data.state.hand_player) {
|
||||||
displayHand(data.state.hand_player, 'hand-0');
|
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));
|
.catch(e => console.error('Erreur initialisation partie', e));
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue