Comment programmer un tournoi aléatoire ?
Fermé
LeCitysens
Messages postés
2
Date d'inscription
mercredi 12 avril 2017
Statut
Membre
Dernière intervention
12 avril 2017
-
12 avril 2017 à 15:52
Utilisateur anonyme - 21 avril 2017 à 21:48
Utilisateur anonyme - 21 avril 2017 à 21:48
2 réponses
Utilisateur anonyme
12 avril 2017 à 17:29
12 avril 2017 à 17:29
OK première étape du cahier des charges : analyse du problème et choix de la solution.
La solution doit être développée dans un site web donc on peut supprimer l'option Python. Tu auras donc besoin de HTML, JS et CSS.
Ensuite, je te conseille de commencer par travailler en HTML sur l'interface graphique de ton site (comment l'utilisateur pourra intéragir avec la page web pour gérer son tournoi).
Après, il te faudra animer tout cela avec du JavaScript : après qu'un utilisateur est entré les noms de tous les joueurs participant (et après avoir réglé certains paramètres facultatifs de tournoi), quel est l'organisation du tournoi ? Qui commence ? Qui joue contre qui ? Le JavaScript fera ce traitement en allant chercher les infos de l'utilisateur, les traiter et afficher un résultat.
Enfin, il pourrait être intéressant, après son rendu fonctionnel, de factoriser tes styles graphiques. Existe-t-il dans ta page des styles redondants ? Si oui, les définir en CSS et associer une classe à chaque élément HTML concerné.
La solution doit être développée dans un site web donc on peut supprimer l'option Python. Tu auras donc besoin de HTML, JS et CSS.
Ensuite, je te conseille de commencer par travailler en HTML sur l'interface graphique de ton site (comment l'utilisateur pourra intéragir avec la page web pour gérer son tournoi).
Après, il te faudra animer tout cela avec du JavaScript : après qu'un utilisateur est entré les noms de tous les joueurs participant (et après avoir réglé certains paramètres facultatifs de tournoi), quel est l'organisation du tournoi ? Qui commence ? Qui joue contre qui ? Le JavaScript fera ce traitement en allant chercher les infos de l'utilisateur, les traiter et afficher un résultat.
Enfin, il pourrait être intéressant, après son rendu fonctionnel, de factoriser tes styles graphiques. Existe-t-il dans ta page des styles redondants ? Si oui, les définir en CSS et associer une classe à chaque élément HTML concerné.
iamtheone
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017
19 avril 2017 à 19:25
19 avril 2017 à 19:25
J'ai essayé. Voici le code (pas finit) :
Je veux pour le moment que l'utilisateur dispose de x input type text où x vaut la valeur de l'input number. Mais je ne suis pas allé plus loin (mettre les noms dans une variable array, ...) car le programme actuel ne fonctionne pas, et je ne sais pas pourquoi. :/
<!DOCTYPE html>
<html>
<head>
<title>Tournament</title>
<script>
tplayers = eval(document.tform.tplayers.value);
tboxes = document.getElementById("tboxes");
function tnext(tplayers) {
tboxes.innerHTML = "<form name='tboxes'>";
for (i=0; i>tplayers; i++) {
tboxes.innerHTML ÷= "'+i+' <input type="text" name='+i+'></input><br />";
}
tboxes.innerHTML += "<input type="button" name="tcreate" value="tCreate" onClick="tcreate(tplayers)"></input></form>";
}
</script>
</head>
<body>
<h2>Tournament Generator</h2>
<p>This this the explication.</p>
<br /><hr /><br />
<form name="tform">
Tournament name <input type="text" name="tname" placeholder="max 21 caracters"></input><br />
How many players/teams <input type="number" name="tplayers" value="0"></input><br />
<input type="button" name="tnext" value="Next" onClick="tnext(tplayers)"></input>
</form>
<br /><hr><br />
<div id="tboxes"></div>
</body>
</html>
Je veux pour le moment que l'utilisateur dispose de x input type text où x vaut la valeur de l'input number. Mais je ne suis pas allé plus loin (mettre les noms dans une variable array, ...) car le programme actuel ne fonctionne pas, et je ne sais pas pourquoi. :/
Quelques erreurs effectivement au lancement. Je te conseille de beaucoup utiliser la console du navigateur (appuyer sur F12 et chercher l'onglet console pour plus de détail).
Tu trouveras en commentaire des informations sur tes erreurs (FIXED)
Tu trouveras en commentaire des informations sur tes erreurs (FIXED)
<!DOCTYPE html>
<html>
<head>
<title>Tournament</title>
<script>
// FIXED : For some reason, these elements are null ...
// tplayers = eval(document.tform.tplayers.value);
// tboxes = document.getElementById("tboxes");
// FIXED : For some reason, a function cannot have the same name as a DOM element (previously tnext and was the same as the input value)
function tnext2() {
tboxes = document.getElementById("tboxes");
// TIP : with this line you can get the value of your input
var tplayers = document.tform.tplayers.value;
tboxes.innerHTML = "<form name='tboxes'>";
// FIXED : Some issues with ' and "
for (i=0; i>tplayers; i++) {
tboxes.innerHTML += "<input type='text' name="+i+"></input><br />";
}
tboxes.innerHTML += "<input type='button' name='tcreate' value='tCreate' onClick='tcreate(tplayers)'></input></form>";
}
</script>
</head>
<body>
<h2>Tournament Generator</h2>
<p>This this the explication.</p>
<br /><hr /><br />
<form name="tform">
Tournament name <input type="text" name="tname" placeholder="max 21 caracters"></input><br />
How many players/teams <input type="number" name="tplayers" value="0"></input><br />
<!-- FIXED : tnext to tnext2 and no function parameter because tplayers undefined -->
<input type="button" name="tnext" value="Next" onClick="tnext2()"></input>
</form>
<br /><hr><br />
<div id="tboxes"></div>
</body>
</html>
iamtheone
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017
>
Utilisateur anonyme
20 avril 2017 à 18:52
20 avril 2017 à 18:52
Merci du conseil mais je code avec sololearn sur téléphone donc je ne peux pas afficher ça :/ Sinon, j'ai modifié mais au clic sur le button Next seul le bouton tCreate s'affiche. La fonction ne lit pas le for... À part ça j'ai compris pourquoi les deux variables que j'ai ecrit au début rendent une valeur null : head charge avant body.
C'est sans doute à cause du fait que head charge avant body que ces éléments sont null. En effet :
1. head charge
2. Recherche de deux éléments DOM (impossible, aucun body de chargé)
3. body charge
Alors que dans mon cas, lorsque l'utilisateur clique sur le bouton (sous-entendu la page a chargé), les éléments sont recherchés.
Une erreur bête pour le for non lu : tu as mis > à la place de <. La condition i>tplayers n'est jamais vérifiée.
1. head charge
2. Recherche de deux éléments DOM (impossible, aucun body de chargé)
3. body charge
Alors que dans mon cas, lorsque l'utilisateur clique sur le bouton (sous-entendu la page a chargé), les éléments sont recherchés.
Une erreur bête pour le for non lu : tu as mis > à la place de <. La condition i>tplayers n'est jamais vérifiée.
iamtheone
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017
>
Utilisateur anonyme
21 avril 2017 à 16:54
21 avril 2017 à 16:54
Oui et je comprend toujours pas. Ça m'a l'air illogique... car avec i<tplayers c'est comme dire : jusqu'à ce que i soit inférieure à tplayers... Ce qui est déjà le cas...
Sinon, j'ai un peu continué le programme, j'en suis à la deuxième étape du tournoi.
Sinon, j'ai un peu continué le programme, j'en suis à la deuxième étape du tournoi.
<!DOCTYPE html>
<html>
<head>
<title>Tournament</title>
</head>
<body>
<h2>Tournament Generator</h2>
<p>This this the explication.</p>
<br /><hr /><br />
<form name="tform" onsubmit="return valid1()">
Tournament name <input type="text" name="tname" placeholder="max 21 caracters"></input><br />
How many players/teams <input type="number" name="tplayer" value="1"></input><br />
<input type="submit" name="tnext" value="Next" onClick="tnext2()"></input>
</form>
<br /><hr><br /><br />
<div id="tboxes"></div><div id="tboxes0"></div>
<br /><br /><br /><br />
<script>
var tplayers; var tboxes;
function valid1() {
tnames = document.tform.tname.value;
tplayers = eval(document.tform.tplayer.value);
if (tnames.length<=21) {
if (tplayers<=100 && tplayers%2 == 0) {
return true;
}
}
alert("Les valeurs ne sont pas valides, il risque d'y avoir des erreurs.")
return false;
}
function tnext2() {
tplayers = eval(document.tform.tplayer.value);
tboxes = "<form name='tboxes'>";
for (i=0; i<tplayers; i++) {
tboxes += i + 1 + " <input type='text' id=" + i + "></input><br />";
}
tboxes += "<input type='button' name='tcreate' value='Create' onClick='tcreate2(tplayers)'></input></form>";
document.getElementById("tboxes").innerHTML = tboxes;
}
function tcreate2(tplayers) {
rdm = new Array(tplayers);
for (o=0; o<tplayers; o++) {
rdm[o] = document.getElementById(o).value;
}
content = "";
var q = 0;
for (p=0; p<tplayers; p+=2) {
var choice = rdm[Math.floor(Math.random() * rdm.length)];
content += "<input type='radio' name='" + p + "' id='input" + q + "' value='" + choice + "'></input>" + choice + "<br />";
rdm.splice(rdm.indexOf(choice), 1);
q++;
var choice1 = rdm[Math.floor(Math.random() * rdm.length)];
content += "<input type='radio' name='" + p + "' id='input" + q + "' value='" + choice1 + "'></input>" + choice1 + "<br /><br />";
rdm.splice(rdm.indexOf(choice1), 1);
q++;
}
content += "<input type='button' name='tcreate2submit' value='Next' onClick='tcreate3(tplayers)'></input>";
document.getElementById("tboxes").innerHTML = content;
}
function tcreate3(tplayers) {
content0 = "";
for (NAME=0; NAME<tplayers; NAME+=4) {
if (document.getElementsByName(NAME)[0].checked) {
content0 += "<input type='radio' name='i" + NAME + "'></input> " + document.getElementsByName(NAME)[0].value + "<br /><br /><br />";
if (document.getElementsByName(NAME+2)[0].checked) {
content0 += "<input type='radio' name='i" + NAME + "'></input> " + document.getElementsByName(NAME+2)[0].value + "<br /><br /><br />";
}
if (document.getElementsByName(NAME+2)[1].checked) {
content0 += "<input type='radio' name='i" + NAME + "'></input> " + document.getElementsByName(NAME+2)[1].value + "<br /><br /><br />";
}
}
if (document.getElementsByName(NAME)[1].checked) {
content0 += "<input type='radio' name='i" + NAME + "'></input> " + document.getElementsByName(NAME)[1].value + "<br /><br /><br />";
if (document.getElementsByName(NAME+2)[0].checked) {
content0 += "<input type='radio' name='i" + NAME + "'></input> " + document.getElementsByName(NAME+2)[0].value + "<br /><br /><br />";
}
if (document.getElementsByName(NAME+2)[1].checked) {
content0 += "<input type='radio' name='i" + NAME + "'></input> " + document.getElementsByName(NAME+2)[1].value + "<br /><br /><br />";
}
}
} document.getElementById("tboxes0").innerHTML = content0;
}
</script>
</body>
</html>
12 avril 2017 à 17:37
Mais as-tu une idée des "fonctions à définir" pour le language Javascript car il est vrai que ce que j'ai vu en cours n'aide pas trop pour ce genre de projet et même après quelque recherches sur internet je n'ai pas trouvé grand chose. Sans trop t'en demander non plus :)
14 avril 2017 à 19:49
Modifié le 17 avril 2017 à 17:16
Modifié le 21 avril 2017 à 16:40
Je ne suis pas sûr qu'on puisse se contenter de HTML, JS et CSS. Bien sûr tout dépend de son cahier des charges...
LeCitysens dit : programmer une sorte de tournoi avec des équipes qui en fonction des résultats inscrits passeraient des tours (demi-finales, finale, etc..) et peut-être mettre des poules sous formes de classement si possible.
Si l'application Web doit gérer la persistance des données, qui doivent pouvoir être accédées et utilisées par plusieurs utilisateurs, selon l'évolution d'un tournoi, qui peut se disputer sur plusieurs jours, etc. Il faudra stocker les données et les servir dynamiquement.
On peut faire cela en Python https://wiki.python.org/moin/WebProgramming si le serveur le permet.
Bien sûr, on peut aussi créer un site dynamique avec Php, Node.js (si on veut rester sur du Javascript, mais côté serveur), Perl, Ruby, etc.
Dans ces différents cas, il faudra aussi des bases de programmation de bases de données, et un serveur disposant d'un SGBD.
Si tout est géré dans une session individuelle de navigateur, alors oui, on peut tout faire en HTML, JS et CSS (éventuellement avec le stockage local persistant HTML5 : https://www.w3schools.com/html/html5_webstorage.asp permettant à l'utilisateur de retrouver ses données individuelles en rouvrant son navigateur, tout en ne gérant les données qu'en local), mais alors, pas d'accès centralisé possible par plusieurs utilisateurs à l'état du tournoi en cours.
Dal