forge-joniko/ldc-babyweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: forge-joniko:master
Branches Tags
forge-joniko:master
forge-joniko:trunk
..
compare: forge-joniko:trunk
Branches Tags
forge-joniko:master
forge-joniko:trunk

No commits in common. "master" and "trunk" have entirely different histories.
master ... trunk

12 changed files with 98 additions and 496 deletions
Show stats Expand all files Collapse all files

50
add_score.php
View file

@ -7,8 +7,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST'){
$_POST = json_decode(file_get_contents('php://input'), true);
$is1v1 = true;
$red_score = $_POST['red_score'];
$blue_score = $_POST['blue_score'];
@ -27,44 +25,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST'){
'blue_p2' => $blue_p2,
]);
if ($red_p2 !== NULL && $blue_p2 !== NULL)
$is1v1 = false;
if ($is1v1 === true){
$redPScore = $db->request("SELECT score FROM players WHERE id = :id", ['id' => $red_p1])['score'];
$bluePScore = $db->request("SELECT score FROM players WHERE id = :id", ['id' => $blue_p1])['score'];
$diff = $red_score > $blue_score ? (($bluePScore - $redPScore) / 100) : (($redPScore - $bluePScore) / 100);
$diff = $diff >= -10 ? $diff + 10 : 0;
if ($red_score > $blue_score){
$db->requestPush("UPDATE players SET score = score + :score WHERE id = :id", ['id' => $red_p1, 'score' => $diff]);
$db->requestPush("UPDATE players SET score = score - :score WHERE id = :id", ['id' => $blue_p1, 'score' => $diff]);
}else{
$db->requestPush("UPDATE players SET score = score - :score WHERE id = :id", ['id' => $red_p1, 'score' => $diff]);
$db->requestPush("UPDATE players SET score = score + :score WHERE id = :id", ['id' => $blue_p1, 'score' => $diff]);
}
if ($red_score > $blue_score){
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $red_p1]);
if ($red_p2 != NULL)
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $red_p2]);
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $blue_p1]);
if ($blue_p2 != NULL)
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $blue_p2]);
}else{
if ($red_score > $blue_score){
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $red_p1]);
if ($red_p2 != NULL)
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $red_p2]);
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $blue_p1]);
if ($blue_p2 != NULL)
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $blue_p2]);
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $blue_p1]);
if ($blue_p2 != NULL)
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $blue_p2]);
}else{
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $blue_p1]);
if ($blue_p2 != NULL)
$db->requestPush("UPDATE players SET score = score + 10 WHERE id = :id", ['id' => $blue_p2]);
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $red_p1]);
if ($red_p2 != NULL)
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $red_p2]);
}
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $red_p1]);
if ($red_p2 != NULL)
$db->requestPush("UPDATE players SET score = score - 10 WHERE id = :id", ['id' => $red_p2]);
}
$players = $db->requestAll("SELECT * FROM players ORDER BY score DESC");
$players = $db->requestAll("SELECT * FROM players ORDER BY score");
echo json_encode($players);
}

544
index.php
View file

@ -11,8 +11,6 @@ $players = $db->requestAll("SELECT * FROM players ORDER BY name");
<html>
<head>
<title>BabyWeb</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
@ -22,101 +20,24 @@ $players = $db->requestAll("SELECT * FROM players ORDER BY name");
body {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.ranking table {
table {
font-size: 40px;
text-align: center;
}
.ranking th, .ranking td {
padding: 10px;
}
.ranking tr:nth-child(2) {
color: gold;
}
.ranking tr:nth-child(3) {
color: silver;
}
.ranking tr:nth-child(4) {
color: saddlebrown;
}
.main {
height: 100vh;
display: flex;
justify-content: center;
}
.ranking, .add-match {
padding-top: 5vh;
padding-top: 150px;
display: flex;
justify-content: center;
flex: 1;
}
.add-match {
flex-direction: column;
align-items: center;
justify-content: flex-start;
.double {
display: inline-block;
}
.match_type {
margin-bottom: 25px;
font-size: 2.5vw;
font-weight: bold;
}
.add-btn {
height: 50px;
width: 100px;
font-size: 15px;
border: 2px solid;
border-radius: 5px;
font-weight: bold;
}
.score-input {
height: 40px;
width: 80px;
font-size: 1.5vw;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
.blue {
color: blue;
font-weight: bold;
}
.red {
color: red;
font-weight: bold;
}
.add-match table td {
font-size: 2.3vw;
padding: 0 20px;
text-align: center;
}
.add-match table th {
font-size: 2.5vw;
padding: 0 20px;
}
.player-select {
height: 40px;
width: 20vw;
font-size: 1.5vw;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
</style>
</head>
<body>
@ -137,70 +58,43 @@ $players = $db->requestAll("SELECT * FROM players ORDER BY name");
</table>
</div>
<div class="add-match" style="background-color: lightblue">
<div v-if="error.length">
<b>{{ error }}</b>
</div>
<div class="match_type">
<label for="1v1" style="margin-right: 30px;">
<input id="1v1" type="radio" v-model="match_type" value="1v1">
1 vs 1
</label>
<label for="2v2">
<input id="2v2" type="radio" v-model="match_type" value="2v2">
2 vs 2
</label>
</div>
<table>
<tr>
<th class="red">Joueur 1</th>
<th class="blue">Joueur 1</th>
</tr>
<tr>
<td>
<select class="player-select" v-model="red_p1">
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
</td>
<td>
<select class="player-select" v-model="blue_p1">
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
</td>
</tr>
</table>
<table v-show="match_type === '2v2'" style="margin-top: 20px;">
<tr>
<th class="red">Joueur 2</th>
<th class="blue">Joueur 2</th>
</tr>
<tr>
<td>
<select class="player-select" v-model="red_p2">
<option value="NULL">Vide.</option>
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
</td>
<td>
<select class="player-select" v-model="blue_p2">
<option value="NULL">Vide.</option>
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
</td>
</tr>
</table>
<br><br>
<div>
<label style="margin-right: 20px;font-size: 2.3vw;">
<span class="red">Score</span>
<input class="score-input" type="number" v-model="red_score" min="-11" max="15">
</label>
<label style="font-size: 2.3vw">
<input class="score-input" type="number" v-model="blue_score" min="-11" max="15">
<span class="blue">Score</span>
</label>
</div>
<br>
<input class="add-btn" type="submit" value="AJOUTER" @click="addMatch">
<div>
<label for="1v1">1 vs 1</label>
<input id="1v1" type="radio" v-model="match_type" value="1v1">
<label for="2v2">2 vs 2</label>
<input id="2v2" type="radio" v-model="match_type" value="2v2">
<br><br>
<label>Joueur Rouge 1</label>
<select v-model="red_p1">
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
<div v-show="match_type === '2v2'" class="double">
<label>Joueur Rouge 2</label>
<select v-model="red_p2">
<option value="NULL">Vide</option>
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
</div>
<br><br>
<label>Joueur Bleu 1</label>
<select v-model="blue_p1">
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
<div v-show="match_type === '2v2'" class="double">
<label>Joueur Bleu 2</label>
<select v-model="blue_p2">
<option value="NULL">Vide</option>
<option v-for="player in players" :value="player.id">{{ player.name }}</option>
</select>
</div>
<br><br>
<label>Score Bleu</label>
<input type="number" v-model="blue_score" min="1" max="15">
<label>Score Rouge</label>
<input type="number" v-model="red_score" min="1" max="15">
<br><br>
<input type="submit" value="Ajouter" @click="addMatch">
</div>
</div>
</section>
</div>
@ -217,329 +111,59 @@ $players = $db->requestAll("SELECT * FROM players ORDER BY name");
blue_p2: 'NULL',
red_score: 0,
blue_score: 0,
error: '',
utterance: null,
messages: {
'missing.red_p2': {
error: 'Selectionnez joueur rouge 2',
speech: 'Aqueu coucou bob !'
},
'missing.blue_p2': {
error: 'Selectionnez joueur bleu 2',
speech: 'Il manque la bleusaille !'
},
'missing.red_p1': {
error: 'Selectionnez joueur rouge 1',
speech: 'Rejoins le coté obscure de la force !'
},
'missing.blue_p1': {
error: 'Selectionnez joueur bleu 1',
speech: 'Aller les bleu !'
},
'need2differentplayers': {
error: 'Selectionnez des joueurs différents !',
speech: 'Un traitre se cache parmi vous !'
},
'needdifferentplayers': {
error: 'Selectionnez deux joueurs différents !',
speech: 'Même Chuck Norris ne sais pas jouer contre lui même !'
},
'noequals': {
error: 'Les égalités ne sont pas tolérés !',
speech: 'Il n\'en restera qu\'un ! Voici une balle, battez vous !'
},
'1v1': {
'forthewinner': [
'Le gagnant est :winner.',
':winner paye sa tournée !',
':winner peut gagner sans toucher les manettes !',
':winner as battu :looser !',
'Le baby aime :winner, ça cache quelque chose.',
'Avec les :winnercolor :winner est imbattable !',
(new Audio('sounds/champions.mp3')),
(new Audio('sounds/dading.mp3')),
(new Audio('sounds/dundunduuun.mp3')),
(new Audio('sounds/money.mp3')),
(new Audio('sounds/rasputin.mp3')),
(new Audio('sounds/sanandreas.mp3'))
],
'forthelooser': [
'Tu as perdu :looser !',
'Dommage :looser, essaye encore !',
':looser n\'est pas dans son assiette on dirais, réconforte le :winner',
'Laisse tomber les :loosercolor :looser, ça te porte pas chance !',
(new Audio('sounds/denied.mp3')),
(new Audio('sounds/punch.mp3')),
(new Audio('sounds/stillstanding.mp3')),
(new Audio('sounds/windauberror.mp3'))
],
},
'2v2': {
'forthewinner': [
'C\'est gagné pour :winners !',
'Les :winnercolor ont gagné !',
'Monster kill !',
'La prochaine partie :redP1 est avec :blueP2, :blueP1 avec :redP2, alea jacta este !',
':winnerP1 ne prends pas la grosse tête, c\'est :winnerp2 qui ai fait tout le travail !',
':winnerp2 ne prends pas la grosse tête, c\'est :winnerP1 qui ai fait tout le travail !',
':winnerP1 ta couleur fétiche est le :winnercolor, c\'est certain',
'C\est l\'histoire de :winners qui sont sur un bateau, :loosers tombent à l\'eau...',
':winners devraient surement signer au Paris Saint Germain',
(new Audio('sounds/denied.mp3')),
(new Audio('sounds/punch.mp3')),
(new Audio('sounds/stillstanding.mp3')),
(new Audio('sounds/windauberror.mp3'))
],
'forthelooser': [
'La team :loosers a perdu !',
'Les :loosercolor ont perdu !',
'La team :loosercolor craint !',
'La prochaine partie, :redP1 et avec :blueP2, :blueP1 avec :redP2, alea jacta este !',
':looserP1, devrais motiver :looserP2 !',
':looserP2, devrais motiver :looserP1 !',
':looserP1, les :loosercolor ne sont pas fait pour toi !',
'Activation du programme reconforter les loosers, :loosers à deux on est plus fort l\'important c\'est de jouer, ..., Fin du programme',
(new Audio('sounds/champions.mp3')),
(new Audio('sounds/dading.mp3')),
(new Audio('sounds/dundunduuun.mp3')),
(new Audio('sounds/money.mp3')),
(new Audio('sounds/rasputin.mp3')),
(new Audio('sounds/sanandreas.mp3'))
]
}
}
},
mounted() {
this.utterance = new SpeechSynthesisUtterance();
this.setBestVoice();
},
watch: {
match_type() {
if (this.match_type === '1v1') {
match_type(){
if (this.match_type === '1v1'){
this.red_p2 = 'NULL';
this.blue_p2 = 'NULL';
}
}
},
computed: {
redP1: function() {
let player = this.getPlayer(this.red_p1);
if(player) {
return player.name.slice(0, -3);
}
return '';
},
redP2: function() {
let player = this.getPlayer(this.red_p2);
if(player) {
return player.name.slice(0, -3);
}
return '';
},
blueP1: function() {
let player = this.getPlayer(this.blue_p1);
if(player) {
return player.name.slice(0, -3);
}
return '';
},
blueP2: function() {
let player = this.getPlayer(this.blue_p2);
if(player) {
return player.name.slice(0, -3);
}
return '';
},
winner: function() {
return this.red_score > this.blue_score ?
this.redP1 : this.blueP1;
},
looser: function() {
return this.red_score < this.blue_score ?
this.redP1 : this.blueP1;
},
winners: function() {
return this.red_score > this.blue_score ?
this.redP1 + (this.redP2.length && this.redP1 !== this.redP2 ? ' et ' + this.redP2 : ''):
this.blueP1 + (this.blueP2.length && this.blueP1 !== this.blueP2 ? ' et ' + this.blueP2 : '');
},
loosers: function() {
return this.red_score < this.blue_score ?
this.redP1 + (this.redP2.length && this.redP1 !== this.redP2 ? ' et ' + this.redP2 : ''):
this.blueP1 + (this.blueP2.length && this.blueP1 !== this.blueP2 ? ' et ' + this.blueP2 : '');
},
looserP1: function() {
return this.red_score < this.blue_score ? this.redP1 : this.blueP1 ;
},
looserP2: function() {
return this.red_score < this.blue_score ? this.redP2 : this.blueP2;
},
winnerP1: function() {
return this.red_score > this.blue_score ? this.redP1 : this.blueP1 ;
},
winnerP2: function() {
return this.red_score > this.blue_score ? this.redP2 : this.blueP2;
},
winnercolor: function() {
return this.red_score > this.blue_score ? 'rouge' : 'bleu';
},
loosercolor: function() {
return this.red_score < this.blue_score ? 'rouge' : 'bleu';
},
},
methods: {
checkSubmission() {
this.error = '';
switch(this.match_type) {
case '2v2':
if(!this.red_p2 || this.red_p2 === '') {
this.sendMessage('missing.red_p2');
return false;
}
if(!this.blue_p2 || this.blue_p2 === '') {
this.sendMessage('missing.blue_p2');
return false;
}
if(!this.red_p1 || this.red_p1 === '') {
this.sendMessage('missing.red_p1');
return false;
}
if(!this.blue_p1 || this.blue_p1 === '') {
this.sendMessage('missing.blue_p1');
return false;
}
if(
(this.red_p1 === this.blue_p1 || this.red_p1 === this.blue_p2 ||
this.red_p2 === this.blue_p1 || this.red_p2 === this.blue_p2) &&
this.blue_p2 !== 'NULL' && this.red_p2 !== 'NULL'
) {
this.sendMessage('need2differentplayers');
return false;
}
default:
if(!this.red_p1 || this.red_p1 === '') {
this.sendMessage('missing.red_p1');
return false;
}
if(!this.blue_p1 || this.blue_p1 === '') {
this.sendMessage('missing.blue_p1');
return false;
}
if(this.red_p1 === this.blue_p1) {
this.sendMessage('needdifferentplayers');
return false;
}
if(this.red_score === this.blue_score) {
this.sendMessage('noequals');
return false;
}
break;
}
return true;
},
addMatch() {
if (this.checkSubmission()) {
let self = this;
axios.post('/add_score.php', {
red_score: self.red_score,
blue_score: self.blue_score,
red_p1: self.red_p1,
red_p2: self.red_p2,
blue_p1: self.blue_p1,
blue_p2: self.blue_p2,
}).then(function (response) {
console.log(response);
self.ranking = response.data;
self.commentMatch.call(self);
self.red_p1 = 0;
self.red_p2 = 'NULL';
self.blue_p1 = 0;
self.blue_p2 = 'NULL';
self.red_score = 0;
self.blue_score = 0;
}).catch(function (error) {
console.error(error);
this.say('Une erreur est survenue.');
alert('Une erreur est survenue.');
});
}
},
commentMatch() {
let self = this,
vars,
message,
messages = this.messages[this.match_type][Math.floor(Math.random()*2) ?
'forthewinner' : 'forthelooser'];
if(messages.length) {
message = messages[Math.floor(Math.random() * messages.length)];
console.log(message);
if( message.constructor.name === 'HTMLAudioElement') {
this.play(message);
} else {
vars = message.match(/:[0-9A-Za-z_]*/g);
if(vars) {
for(let match of vars) {
try {
message = message.replace(new RegExp(match, 'g'), self[match.substr(1)]);
} catch(e) {
console.error('String replace failed ', e);
}
}
}
this.say(message);
addMatch(){
if (this.match_type === '1v1'){
if (this.red_p1 !== '' && this.blue_p1 !== '' && this.red_score !== 0 && this.blue_score !== 0 && this.red_p1 !== this.blue_p1){
let _this2 = this;
axios.post('/add_score.php', {
red_score: this.red_score,
blue_score: this.blue_score,
red_p1: this.red_p1,
red_p2: this.red_p2,
blue_p1: this.blue_p1,
blue_p2: this.blue_p2,
}).then(function (response) {
console.log(response)
_this2.ranking = response.data;
}).catch(function (error) {
console.log(error);
alert('Une erreur est survenue.');
});
}else{
alert("Veuillez remplir tous les champs.");
}
}else{
if (this.red_p1 !== '' && this.blue_p1 !== '' && this.red_p2 !== '' && this.blue_p2 !== '' && this.red_score !== 0 && this.blue_score !== 0 && this.red_p1 !== this.blue_p1 && this.red_p2 !== this.blue_p2){
let _this2 = this;
axios.post('/add_score.php', {
red_score: this.red_score,
blue_score: this.blue_score,
red_p1: this.red_p1,
red_p2: this.red_p2,
blue_p1: this.blue_p1,
blue_p2: this.blue_p2,
}).then(function (response) {
console.log(response)
_this2.ranking = response.data;
}).catch(function (error) {
console.log(error);
alert('Une erreur est survenue.');
});
}else{
alert("Veuillez remplir tous les champs.");
}
}
},
sendMessage(messageKey) {
this.error = this.messages[messageKey].error;
this.say(this.messages[messageKey].speech);
},
setBestVoice() {
(new Promise(
function (resolve, reject) {
let synth = window.speechSynthesis;
let id;
id = setInterval(() => {
if (synth.getVoices().length !== 0) {
resolve(synth.getVoices());
clearInterval(id);
}
}, 10);
}
)).then((function(voices) {
let frVoices = {};
for(let voice of window.speechSynthesis.getVoices()) {
if(voice.lang.indexOf('fr') !== -1) {
if(voice.name === 'Google français') {
frVoices.google = voice;
}
if(voice.name.indexOf('Microsoft') !== -1) {
frVoices.microsoft = voice;
}
frVoices.unknown = voice;
}
}
this.utterance.voice = frVoices.google ? frVoices.google : (frVoices.microsoft ? frVoices.microsoft : frVoices.unknown)
}).bind(this));
},
say(text) {
console.info('Saying : ' + text);
this.utterance.text = text;
window.speechSynthesis.speak(this.utterance);
},
play(audio) {
console.info('Playing : ' + audio.src);
audio.play();
},
getPlayer(id) {
for(let player of this.players) {
if(player.id === id) {
return player;
}
}
return null;
},
}
}
})
</script>

BIN
sounds/champions.mp3
View file

Binary file not shown.

BIN
sounds/dading.mp3
View file

Binary file not shown.

BIN
sounds/denied.mp3
View file

Binary file not shown.

BIN
sounds/dundunduuun.mp3
View file

Binary file not shown.

BIN
sounds/money.mp3
View file

Binary file not shown.

BIN
sounds/punch.mp3
View file

Binary file not shown.

BIN
sounds/rasputin.mp3
View file

Binary file not shown.

BIN
sounds/sanandreas.mp3
View file

Binary file not shown.

BIN
sounds/stillstanding.mp3
View file

Binary file not shown.

BIN
sounds/windauberror.mp3
View file

Binary file not shown.