Skip to content

M
Menteur
Unverified Commit fc0da124 by PLN (Algolia)
Options

Feat(UI): Container, online vs ingame

parent f84ea193
Showing with 96 additions and 62 deletions
client/src/App.vue
<template>
<div id="app">
<h2 id="header">Salut {{ name }} !</h2>
<Sockets v-on:message="newMessage($event)" />
<div id="players">
<p>{{ players.length }} en ligne :</p>
<div
v-for="player in players" v-bind:key="player + ''">
<Player :name="player.name" :nb-cards="player.nbCards"/>
</div>
</div>
<b-container id="app">
<b-row id="header">
<b-col><h2>Salut {{ name }} !</h2>
</b-col>
</b-row>
<b-row id="sockets">
<b-col>
<Sockets v-on:message="newMessage($event)" />
</b-col>
</b-row>
<b-row id="players">
<b-col id="players-ingame">
<p>{{ gamers.length }} en jeu</p>
<Player
v-for="player in gamers" v-bind:key="player.name"
:name="player.name" :nb-cards="player.nbCards" :is-playing="player.isPlaying"
:is-ready="player.isReady" />
</b-col>
<b-col id="players-online">
<p>{{ players.length }} en ligne</p>
<div class="player-container"
v-for="player in players" v-bind:key="player.name">
<Player :name="player.name" :nb-cards="0" :is-playing="false"
:is-ready="player.isReady" />
</div>
</b-col>
</b-row>
<div id="game">
<label for="messages"> Choose a message:</label>
<select v-model="message" name="message" id="messages">
......@@ -20,7 +37,7 @@
<button v-on:click="sendMessage(message)">Envoyer</button>
<Hand :cards="currentCards()" />
</div>
</div>
</b-container>
</template>
<script>
......@@ -68,7 +85,7 @@ export default {
},
computed: {
...mapGetters(["isConnected", "name", "text",
"cards", "players", "socketMessage"])
"cards", "players", "gamers", "socketMessage"])
},
methods: {
sendMessage: function(message) {
......@@ -87,10 +104,10 @@ export default {
},
currentCards() {
let currentState = this.socketMessage;
console.log("curCards! Last message:", JSON.stringify(currentState));
// console.log("curCards! Last message:", JSON.stringify(currentState));
if (currentState["data"]) {
if (currentState["data"]["cards"]) {
console.log("Setting cards...");
console.log("Refreshing cards UI:", this.cards);
return this.cards;
} else return this.mockCards();
......
client/src/Sockets.vue
......@@ -8,17 +8,26 @@
<p v-if="isConnected">We're connected to the server!</p>
<p v-if="!isConnected">We're not connected yet...</p>
<div v-if="socketMessages.length >= 1">
<p>Messages from server:</p>
<b-list-group horizontal="">
<b-list-group-item v-for="m in socketMessages.slice(-8)" :key="m + ''">
{{ m.data.state }}
<div v-if="m.data.extras">Extras: {{ m.data.extras }}</div>
</b-list-group-item>
</b-list-group>
<ul id="messages">
</ul>
</div>
<p>
<b-icon-inbox-fill />
Messages from server: <b v-if="socketMessages.length == 0">None :'(</b>
</p>
<b-row>
<b-card-group deck>
<b-col
v-for="m in socketMessages.slice(-8)" :key="m + ''"
>
<b-card class="text-center"
header-tag="header"
v-bind:header="m.data.state"
v-bind:sub-title="m.data != null ? m.data.extras != null ? JSON.stringify(m.data.extras) : '' : ''"
>
</b-card>
</b-col>
</b-card-group>
</b-row>
<ul id="messages">
</ul>
</div>
</template>
......
client/src/components/Hand.vue
<template>
<div id="hand" class="mr-5 ml-5">
<h3>Tu as <b>{{ count() }}</b> cartes en main.</h3>
<b-card-group deck>
<b-card-group deck v-if="cards.length > 0">
<Card
v-for="card in cards"
v-bind:key="card.value + ' ' + card.color"
......
client/src/components/Player.vue
<template>
<div id="player" class="mr-5 ml-5">
<b-badge :variant="Math.random() >= 0.5? 'dark' : 'danger'">
<b-badge :variant="variant()">
<b-icon-person-square />
{{ name }}
</b-badge>
......@@ -12,9 +12,16 @@ export default {
name: "Player",
props: {
name: String,
nbCards: Number
nbCards: Number,
isReady: Boolean,
isPlaying: Boolean
},
methods: {}
methods: {
variant: function() {
if (!this.isPlaying) return "light";
else return Math.random() >= 0.5 ? "dark" : "danger";
}
}
};
</script>
<style>
......
client/src/vuex-store.js
......@@ -19,7 +19,8 @@ export const store = new Vuex.Store({
socketMessage: state => state.socketMessage,
gameState: state => state.gameState,
cards: state => state.cards,
players: state => state.players
players: state => state.players,
gamers: state => state.players.filter(p => p.isPlaying)
},
mutations: {
SOCKET_CONNECT(state) {
......@@ -53,31 +54,30 @@ export const store = new Vuex.Store({
let players = message.data.players;
let cards = message.data.cards;
let gameState = message.data.state;
let text = message.data.text;
let extras = message.data.extras;
if (players) {
console.log("Setting players:", players);
// console.log("Setting players:", players);
state.players = players;
}
if (gameState) {
console.log("Setting state:", gameState);
// console.log("Setting state:", gameState);
state.state = gameState;
}
if (cards) {
console.log("Setting cards:", cards);
// console.log("Setting cards:", cards);
state.cards = cards;
}
if (text) {
console.log("Setting text:", text);
state.text = text;
}
if (extras) {
console.log("Extras: ", extras);
console.log("Extras: ", JSON.stringify(extras));
let name = extras.name;
let text = extras.text;
if (name) {
console.log("Setting name:", name);
state.name = name;
}
if (text) {
state.text = text;
}
}
}
......
server/game/lobby.py
......@@ -115,21 +115,30 @@ class LobbyManager(ClientManager):
async def send(self, to: Player, message: MessageToPlayer, extras=None):
sid = self.metadata[to.name].sid
game = self.game_with(to)
data = to.hand.json() # Start with "cards": []
data = json.loads(data) # JSONEncode and decode, starting with dict would miss `json()` encoders
data = json.loads(data) # JSONEncode and decode, starting with dict would miss `json()` encoders
data["state"] = str(message.name)
data["players"] = [{"name": p.name, "nbCards": len(p.hand)} for p in self.players]
data["players"] = [
{
"name": p.name,
"nbCards": len(p.hand),
"isReady": self.metadata[p.name].ready,
"isPlaying": bool(game and p.name in [p.name for p in game.players]),
}
for p in self.players]
if extras:
data["extras"] = extras
print(f"MSGOUT|{sid} ({to.name}), {data}")
print(f"MSGOUT|{sid} ({to.name}), {data}...", end='')
await self.sio.emit('messageChannel', json.dumps(data), room=sid)
print(f"sent!")
async def handle_message(self, sid, data):
message = None
extras = {"players": [p.name for p in self.players]}
extras = {}
sender = self.which_player(sid)
if not sender:
print(f"ERROR: Unrecognized sender {sid}")
......@@ -152,15 +161,14 @@ class LobbyManager(ClientManager):
print(f"Lobby|Player {sender.name} ready")
gamers = self.wants_to_play(player=sender)
if gamers:
if len(gamers) > 1:
print(f"Game ready! gamers={gamers}")
message = MessageToPlayer.NewGame
extras["playersPlaying"] = [p.name for p in gamers]
else:
print(f"Still alone ready!")
message = MessageToPlayer.ReadyToStart
extras["playersReady"] = [p.name for p in self.players_ready]
extras["text"] = "You're alone, but hold on"
elif option == MessageFromPlayer.Bet:
# FIXME vraie annonce, pas juste carre d'as lol
......@@ -197,24 +205,17 @@ class LobbyManager(ClientManager):
sender = self.lobby[name]
return sender
def game_with(self, player: Player) -> Game:
return [g for g in self.games if player in g.players][0]
def game_with(self, player: Player) -> Optional[Game]:
matching = [g for g in self.games if player in g.players]
return matching[0] if matching else None
async def send_waiting_for(self, player: Player):
game = self.game_with(player)
# FIXME: Seems to block here, game doesn't move past Asking for...
# BET
# MSGIN| c38442e3785f4c2eb13e95368bfaa151 (Sumatran Elephant): BET.
# Lobby| Player Sumatran Elephant just announced bet=Ace of ♥|Ace of ♣|Ace of ♦|Ace of ♠.
# LOBBY: Message handled.
# received event "message" from c38442e3785f4c2eb13e95368bfaa151 [/]
# INFO: received event "message" from c38442e3785f4c2eb13e95368bfaa151 [/]
# INFO: 127.0.0.1:51452 - "POST /socket.io/?EIO=3&transport=polling&t=N6J1ZS7&sid=3c5e8962c4db465aaf2fd916bea2acc9 HTTP/1.1" 200 OK
# [WS] Message MENTEUR
# MSGIN| 3c5e8962c4db465aaf2fd916bea2acc9 (Chihuahua): MENTEUR.
# LOBBY: Message handled.
# received
extras = {"bet": game.current_bet.json()}
bet = game.current_bet
extras = {"bet": bet.json() if bet else None}
print(f"Announcing player {player.name} that we await their reply to {bet}...")
await self.send(player, MessageToPlayer.YourTurn, extras)
extras["waitingFor"] = player.name
......
server/ws.py
......@@ -29,7 +29,7 @@ class ClientPlayer(Player):
print("While, send_waiting_for")
await lobby.send_waiting_for(self)
print(f"Still waiting for {self.name}'s announce...")
sleep(2)
sleep(5)
print(f"Client announced: {metadata.last_announce.bet}!")
return metadata.last_announce
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment