Signaler

Comment programmer un tournoi aléatoire ?

Posez votre question LeCitysens 2Messages postés mercredi 12 avril 2017Date d'inscription 12 avril 2017 Dernière intervention - Dernière réponse le 21 avril 2017 à 21:48 par Help-Jason
Bonjour,
Je cherche à programmer un tournoi sportif, dans le cadre de mon projet d'ISN pour le BAC. Mes talents de programmeur ne me permettent pas de répondre à cette question et c'est pour cela que je m'adresse à vous, en espérant que vous puissiez m'aider. Cette année j'ai étudier le language HTML, CSS, Python et Javascript et j'aimerai donc savoir comment faire pour 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.
Mais je ne veux pas utiliser excel ou ce genre de logiciel, il faut que cela s'intègre dans un site web.
Merci d’avance pour votre aide, bonne journée
Utile
+1
plus moins
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é.
Cette réponse vous a-t-elle aidé ?  
LeCitysens 2Messages postés mercredi 12 avril 2017Date d'inscription 12 avril 2017 Dernière intervention - 12 avril 2017 à 17:37
Merci beaucoup, ça va beaucoup m'aider pour la mise en forme de mon projet car il est vrai que je me partais dans l'inconnu.
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 :)
Répondre
Help-Jason 1572Messages postés mardi 28 juin 2011Date d'inscription 25 septembre 2017 Dernière intervention - 14 avril 2017 à 19:49
Les fonctions à définir, c'est à toi de construire ton programme pour qu'il réponde à tes attentes. La première "fonction" de ton programme sera de récupérer les informations de l'utilisateur lorsqu'il les valide et de les traiter pour lui afficher un résultat. Disons que c'est un gros bloc et qu'il faut que tu le divises en bloc plus petits. Renseigne-toi sur les manières de gérer un tournoi, je ne peux pas vraiment t'aider plus (sauf si je me renseigne mais c'est pas mon devoir).
Répondre
LeCitysens- 17 avril 2017 à 17:15
D'accord, je vais me débrouiller pour la suite, merci beaucoup pour ton aide :)
Répondre
[Dal] 4383Messages postés mercredi 15 septembre 2004Date d'inscription ContributeurStatut 25 septembre 2017 Dernière intervention - 21 avril 2017 à 16:25
@Help-Jason : 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.

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
Répondre
Donnez votre avis
Utile
+0
plus moins
J'ai essayé. Voici le code (pas finit) :
<!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. :/
Help-Jason 1572Messages postés mardi 28 juin 2011Date d'inscription 25 septembre 2017 Dernière intervention - 20 avril 2017 à 16:53
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)

<!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>
Répondre
iamtheone 39Messages postés lundi 10 avril 2017Date d'inscription 8 mai 2017 Dernière intervention - 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.
Répondre
Help-Jason 1572Messages postés mardi 28 juin 2011Date d'inscription 25 septembre 2017 Dernière intervention - 21 avril 2017 à 15:43
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.
Répondre
iamtheone 39Messages postés lundi 10 avril 2017Date d'inscription 8 mai 2017 Dernière intervention - 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.
<!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>
Répondre
Help-Jason 1572Messages postés mardi 28 juin 2011Date d'inscription 25 septembre 2017 Dernière intervention - 21 avril 2017 à 21:48
La condition d'une boucle permet d'exécuter son contenu tant que la condition est vraie. Pour le for : tant que i est inférieur à tplayers, incrémenter de 1 et faire le traitement.
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !