Skip to content

M
Menteur
Unverified Commit 4463aee3 by PLN (Algolia)
Options

style: Solve warnings

parent 610dac15
Showing with 172 additions and 152 deletions
client/src/App.vue
<template> <template>
<div id="app"> <div id="app">
<h2 id="header">Salut {{name}} !</h2> <h2 id="header">Salut {{ name }} !</h2>
<Sockets/> <Sockets />
<div id="game"> <div id="game">
<Hand :cards="mockCards()"/> <Hand :cards="mockCards()" />
<label for="messages"> Choose a message:</label> <label for="messages"> Choose a message:</label>
<select v-model="message" name="message" id="messages"> <select v-model="message" name="message" id="messages">
<option value="WAITING">J'attends</option> <option value="WAITING">J'attends</option>
<option value="READY">Prêt à jouer !</option> <option value="READY">Prêt à jouer !</option>
<option value="BET">Pari plus haut</option> <option value="BET">Pari plus haut</option>
<option value="MENTEUR">Menteur !</option> <option value="MENTEUR">Menteur !</option>
</select> </select>
<button v-on:click="sendMessage(message)">Envoyer</button> <button v-on:click="sendMessage(message)">Envoyer</button>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Vue from "vue";
import "es6-promise/auto"; // Needed for Promise polyfill
import VueSocketIO from "vue-socket.io";
import Vuex, { mapGetters, mapMutations } from "vuex";
import Hand from "./components/Hand";
import Sockets from "./Sockets";
import { store } from "./vuex-store";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import Vue from 'vue' Vue.use(Vuex);
import 'es6-promise/auto' // Needed for Promise polyfill Vue.use(BootstrapVue);
import VueSocketIO from 'vue-socket.io' Vue.use(IconsPlugin);
import Vuex, {mapGetters, mapMutations} from 'vuex';
import Hand from "./components/Hand";
import Sockets from "./Sockets";
import {store} from './vuex-store'
Vue.use(Vuex); Vue.use(
new VueSocketIO({
debug: true,
connection: "http://localhost:9042",
vuex: {
store,
actionPrefix: "SOCKET_",
mutationPrefix: "SOCKET_"
},
options: { path: "/socket.io/" } //Optional options
})
);
Vue.use(new VueSocketIO({ export default {
debug: true, name: "App",
connection: 'http://localhost:9042', store: store,
vuex: { components: {
store, Sockets,
actionPrefix: 'SOCKET_', Hand
mutationPrefix: 'SOCKET_' },
}, data: function() {
options: {path: "/socket.io/"} //Optional options return {
})); message: "WAITING"
export default {
name: "App",
store: store,
components: {
Sockets,
Hand
},
data: function () {
return {
message: "WAITING"
}
},
computed: {
...mapGetters(['isConnected', 'name', 'socketMessage'])
},
methods: {
sendMessage: function (message) {
console.log("User wants to send", message);
this.$socket.emit("message", message);
},
mockCards() {
return [
{"value": "ace", "color": "hearts"},
{"value": "ace", "color": "clubs"},
{"value": "ace", "color": "diamonds"},
{"value": "ace", "color": "spades"}
];
},
...mapMutations(['setName']),
// ...mapActions(['setNumberToRemoteValue']),
}
}; };
},
computed: {
...mapGetters(["isConnected", "name", "socketMessage"])
},
methods: {
sendMessage: function(message) {
console.log("User wants to send", message);
this.$socket.emit("message", message);
},
mockCards() {
return [
{ value: "ace", color: "hearts" },
{ value: "ace", color: "clubs" },
{ value: "ace", color: "diamonds" },
{ value: "ace", color: "spades" }
];
},
...mapMutations(["setName"])
// ...mapActions(['setNumberToRemoteValue']),
}
};
</script> </script>
<style> <style>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin-top: 60px; margin-top: 60px;
} }
#game { #game {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
client/src/components/Card.vue
<template> <template>
<div class="card"> <div class="card">
<img class="card-pic" v-bind:src="imageSrc()"> <div>
<p>{{ text() }}</p> <b-card
title="Card Title"
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div> </div>
<img class="card-pic" v-bind:src="imageSrc()" />
<p>{{ text() }}</p>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "Card", name: "Card",
props: { props: {
value: String, value: String,
color: String, color: String
}, },
methods: { methods: {
imageSrc() { imageSrc() {
return `/img/${this.value}_of_${this.color}.png` return `/img/${this.value}_of_${this.color}.png`;
}, },
text: function () { text: function() {
console.log("Generating text for", this); // Translate
// Translate let valueText = {
let valueText = { "2": "Deux",
"2": "Deux", "3": "Trois",
"3": "Trois", "4": "Quatre",
"4": "Quatre", "5": "Cinq",
"5": "Cinq", "6": "Six",
"6": "Six", "7": "Sept",
"7": "Sept", "8": "Huit",
"8": "Huit", "9": "Neuf",
"9": "Neuf", "10": "Dix",
"10": "Dix", jack: "Valet",
"jack": "Valet", queen: "Dame",
"queen": "Dame", king: "Roi",
"king": "Roi", ace: "As"
"ace": "As" }[this.value];
}[this.value]; let colorText = {
let colorText = { hearts: "Coeur",
"hearts": "Coeur", spades: "Pique",
"spades": "Pique", clubs: "Trèfle",
"clubs": "Trèfle", diamonds: "Carreau"
"diamonds": "Carreau" }[this.color];
}[this.color];
// Capitalize // Capitalize
valueText = valueText.charAt(0).toUpperCase() + valueText.slice(1); valueText = valueText.charAt(0).toUpperCase() + valueText.slice(1);
colorText = colorText.charAt(0).toUpperCase() + colorText.slice(1); colorText = colorText.charAt(0).toUpperCase() + colorText.slice(1);
return `${valueText} de ${colorText}` return `${valueText} de ${colorText}`;
}
}
} }
}
};
</script> </script>
<style scoped> <style scoped>
.card-pic { .card-pic {
max-width: 150px; max-width: 150px;
} }
</style> </style>
\ No newline at end of file
client/src/components/Hand.vue
<template> <template>
<div id="hand"> <div id="hand">
<p>{{count()}} cartes. </p> <p>{{ count() }} cartes.</p>
<Card v-for="card in cards" <Card
v-bind:key="card.value + ' ' + card.color" v-for="card in cards"
v-bind:value="card.value" v-bind:key="card.value + ' ' + card.color"
v-bind:color="card.color" v-bind:value="card.value"
/> v-bind:color="card.color"
</div> />
</div>
</template> </template>
<script> <script>
import Card from "./Card"; import Card from "./Card";
export default { export default {
name: "Hand", name: "Hand",
components: { components: {
Card Card
}, },
props: { props: {
cards: Array, cards: Array
}, },
methods: { methods: {
count() { count() {
return this.cards.length; return this.cards.length;
}
}
} }
}
};
</script> </script>
<style scoped> <style scoped>
.card-pic { .card-pic {
max-width: 100px; max-width: 100px;
} }
</style> </style>
\ No newline at end of file
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