AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.



7 résultats trouvés pour système_de_jeu

Marbhadh | Historique - Fantastique - Horreur | Écosse - Lun 4 Sep 2017 - 16:33



#le_rp , #maîtrde_du_jeu , #pnj , #système_de_jeu , #avatar_realiste , #avatar_reel , #système_mixte , #survival , #surnaturel , #passé , #horreur , #promotion, #folklore , #marbhadh , #mort , #tueur , #Edimbourg , #Ecosse , #XVIII

Onyx

Système de Boutique avec triage automatique - Lun 4 Juil 2016 - 6:56




Système de Boutique avec triage automatique


Salut !

Alors, ce LS vous offrira un système de boutique. Il est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtent moins de 500$ par exemple).

La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier.

Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Le système de boutique, une fois le panier rempli, vous permet de cliquer sur "soumettre votre panier", ce qui va poster un message contenant votre commande directement dans le sujet concerné.

Pour voir la Boutique en direct : cliquez ici.
Pour voir l'aperçu de la Boutique en image : cliquez ici.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer la boutique dans une page HTML.
  • Ensuite, nous allons voir comment la personnaliser.
  • Puis, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Enfin, nous allons mettre la boutique dans un iframe pour la rendre accessible.


Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Créer la boutique (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre boutique.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    margin-right: 10px;
    padding-left: 5px;
    border-right: 1px solid #747474;
    }
    /*Les boutons de tri*/
    #trier, #trier2 {
    display: block;
    margin: auto;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    list-style-type:none;
    }
    /*Option des catégories*/
    #menu ul li {
    margin-left: -30px;
    }
    /*Partie de droite*/
    #middle {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Panier invisible*/
    #panier {
    display: none;
    border: none;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 2px;
    text-align: left;
    }
    a {
    text-decoration: none;
    color: #454545;
    }
    a:hover {
    color: #000000;
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
    <div id="boutique_top"><div id="badam"></div>
      La boutique de <span class="FORUMNAME"></span>
    </div>

    <!-- DÉBUT DU MENU POUR TRIER -->
    <div id="menu">
      <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
      <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

    </div>
    <!-- FIN DU MENU POUR TRIER -->

    <div id="middle">
      <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
      <textarea id="panier"></textarea>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button><input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="total" id="total" style="display:none"></textarea>
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  $('#total').val(totalbase);
  var totaltotal = [];
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var total = qt*prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = qt+" "+nomitem+" à "+prix+"$ pour un total de "+total+"$<br />";
    totaltotal.push(total);
    var nbtotal = totaltotal.length;
    var vraitotal = 0;
    for (i = 0; i < nbtotal; i++) {
      vraitotal = vraitotal+totaltotal[i];
    }
    $('#total').val(vraitotal);
    $('#total2').html(vraitotal);
    if ($('#panier').val().length < 1) {
      $('#panier').val(phrase);
    }
    else {
      var ajoutphrase = $('#panier').val();
      ajoutphrase = ajoutphrase+phrase;
      $('#panier').val(ajoutphrase);
    }
    var machinchose = $('#panier').val();
    $('#vuepanier').html(machinchose);
  });
  function effacer() {
    $('#vuepanier').html("Votre panier est vide.");
    $('#panier').val("");
    var nbtotal = totaltotal.length;
    for (i = 0; i < nbtotal; i++) {
    totaltotal[i] = 0;
    $('#total').val(totalbase);
    $('#total2').html(totalbase);
    }
  }
  function CompleteMessage() {
      document.getElementById('message').value = "Bonjour,<br /><br /> J'aimerais acheter les articles suivants s'il vous plaît :<br /><br />" +
      document.getElementById('panier').value +
      "<br />Le coût total de ma commande est de : " +
      document.getElementById('total').value +
      "$.";
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  function notriage(){
    $('#menu').find('input:checked').prop( "checked", false );
    $('#contenu_shoponglet_Tout').css("display", "block");
    $('#contenu_shoponglet_Autre').html("");
  }
  
  /*Nombre de catégories*/
  var nbtype = $("#menu").find("ul").length;
  
  /*Fonction triage*/
  function triage() {
  
    /*On trouve le nombre de cases cochées*/
    var totalcheck = $('#menu').find('input:checked').length;
    /*On se débarasse des items déjà triés*/
    $('#contenu_shoponglet_Autre').html("");
  
    /*Si aucune case est cochée*/
    if (totalcheck < 1) {
      /*On garde tous les items*/
      $('#contenu_shoponglet_Tout').css("display", "block");
    }
    /*Sinon*/
    else {
      /*On fait disparaître la liste complète*/
      $('#contenu_shoponglet_Tout').css("display", "none");
      /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
      var nomtypech = [];
      /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
      for (i = 0; i < nbtype; i++) {
        var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
        if (nbcatcheckcal > 0) {
          var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
          nomtypech.push(nomtype);
        }
      }
      /*Nombre de catégories qui ont une case cochée*/
      var qunomtypech = nomtypech.length;
      /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
      var nbnomcatch = [];
      /*Tableau qui contient le name de chaque case cochée*/
      var nomcatch = [];
      for (i = 0; i < qunomtypech; i++) {
        /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
        nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
        for (y = 0; y < nbnomcatch[i]; y++) {
          /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
          var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
          nomcatch.push(truc1);
        }
      }
      /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
      var banane = 0;
  
      /*Pour chaque catégorie où il y a une case cochée...*/
      for (i = 0; i < qunomtypech; i++) {
        /*Si on est à la 1ère catégorie*/
        if (i < 1) {
          /*Pour chaque case cochée de la 1ère catégorie...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Si on est la première case cochée de la 1ère catégorie*/
            if (banane < 1) {
              /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ses items on le met dans la partie de droite*/
              for (z = 0; z < machin; z++) {
                $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
            /*Si on est la xème case cochée de la 1ère catégorie*/
            else {
              /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ces items...*/
              for (z = 0; z < machin; z++) {
                /*Item que on est en train de regarder*/
                var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                var autretruc = 0;
                /*Pour chaque name qui est avant le name que on regarde présentement...*/
                for (w = 0; w < banane; w++) {
                  /*Name où on est rendu à vérifier*/
                  var pamplemousse = nomcatch[w];
                  /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                  if (bamibam.hasClass(pamplemousse)) {
                    /*on ajoute 1 à la variable autretruc*/
                    autretruc = autretruc + 1;
                  }
                }
                /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                if (autretruc < 1) {
                /*On ajoute le item à la zone de droite*/
                  bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                }
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
          }
        }
        /*Si on est pas la 1ère catégorie qui a une case cochée...*/
        else {
          /*On regarde le nombre de item dans la partie de droite*/
          var chose12 = $('#contenu_shoponglet_Autre').children().length;
          /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
          var calculenlever = [];
          /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
          for (z = 0; z < chose12; z++) {
            calculenlever[z] = 0;
          }
          /*Pour chaque case cochée de la catégorie où on est rendue...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Pour chaque item qui est dans la liste de droite...*/
            for (z = 0; z < chose12; z++) {
              /*On regarde le xème item de droite*/
              var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
              /*Name de la case où on est rendu*/
              var tomate = nomcatch[banane];
              /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
              if (fraise.hasClass(tomate)) {
                calculenlever[z] = calculenlever[z] + 1;
              }
            }
            /*On passe à la case suivante*/
            banane = banane + 1;
          }
          /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
          for (y = 0; y < chose12; y++) {
            if (calculenlever[y] < 1) {
              $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
            }
          }
          /*On détruit les items à droite qui ont la classe Detruire*/
          $('#contenu_shoponglet_Autre').children('.Detruire').remove();
        }
      }
      /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
      var kiwi = $('#contenu_shoponglet_Autre').children().length;
      if (kiwi < 1) {
        $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
      }
    }
  }
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devrez créer un sujet, sur votre forum, où les gens pourront passer leurs commandes. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/t" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce sujet.

Vous devez copier ce nombre et venir remplace le 70 à cet endroit :
Code:
   <input type="hidden" value="70" name="t" />


Cela va permettre que le message des utilisateurs de la boutique soit posté dans le bon sujet.




2e version de la Boutique:
Suite à un commentaire de Roz comme quoi ce serait bien de pouvoir modifier un peu plus les objets une fois qu'ils sont dans le panier, j'ai fait une nouvelle version qui donne cet aperçu juste ici.

Le code reste très semblable à l’exception du javascript alors la personnalisation sera la même avec les deux versions.

Voilà le code à mettre de la même façon que celui de la première version :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    margin-right: 10px;
    padding-left: 5px;
    border-right: 1px solid #747474;
    }
    /*Les boutons de tri*/
    #trier, #trier2 {
    display: block;
    margin: auto;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    list-style-type:none;
    }
    /*Option des catégories*/
    #menu ul li {
    margin-left: -30px;
    }
    /*Partie de droite*/
    #middle {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 2px;
    text-align: left;
    }
   
    /*Liens*/
    a {
    text-decoration: none;
    color: #454545;
    }
    a:hover {
    color: #000000;
    }
   
    /*Bloc objet dans le panier*/
    .item_input {
    display: inline-block;
    margin-bottom: 5px;
    background-color: #cfcfcf;
    padding: 2px;
    width: 475px;
    text-align: left;
    }
    /*Le bloc du nom et prix de l'objet dans le panier*/
    .iteminsidepanier {
    margin-left: 5px;
    display: inline-block;
    text-align: left;
    }
    /*Les boutons dans le panier*/
    .item_input button {
    }
    /*Le bouton supprimer de l'objet dans le panier*/
    .button_delete {
    margin-right: 2px;
    display: inline-block;
    }
    /*La quantité de l'objet dans le panier*/
    .input_nb_object {
    margin: 0px 2px 0px 2px;
    display: inline-block;
    padding: 2px;
    border: 1px solid #a3a3a3;
    background: #efefef;
    width: 45px;
    text-align: center;
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
    <div id="boutique_top"><div id="badam"></div>
      La boutique de <span class="FORUMNAME"></span>
    </div>

    <!-- DÉBUT DU MENU POUR TRIER -->
    <div id="menu">
      <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
      <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

    </div>
    <!-- FIN DU MENU POUR TRIER -->

    <div id="middle">
      <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button>
    <input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  var totaltotal = 0;
 
  /*Quand on ajoute un item au panier*/
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var qtprixcalculation = qt * prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = "<span class='item_input'>" +
      "<button type='button' class='button_delete' onclick='deleteqtitem(this)'>x</button>" +
      "<button type='button' class='button_moins' onclick='removeqtitem(this)'>-</button>" +
      "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
      "<button type='button' class='button_plus' onclick='addqtitem(this)'>+</button>" +
      "<span class='iteminsidepanier'><span class='thename'>"+nomitem+"</span>" +
      " à <span class='thepriceinside'>"+prix+"</span>$ pour un total de" +
      " <span class='thetotalinside'>"+qtprixcalculation+"</span>$.</span>";
    if ($('#vuepanier').html() == "Mon panier est vide.") {
      $('#vuepanier').html(phrase);
    }
    else {
      var ajoutphrase = $('#vuepanier').html();
      ajoutphrase = ajoutphrase+phrase;
      $('#vuepanier').html(ajoutphrase);
    }
    calcultotal();
  });
 
  /*Ajouter un item déjà dans le panier*/
  function addqtitem(bihihi) {
    var curritem = parseInt($(bihihi).prev().val());
    var curritemafter = curritem + 1;
    $(bihihi).prev().val(curritemafter);
    calcultotal();
  }
 
  /*Enlever un item déjà dans le panier*/
  function removeqtitem(bohoho) {
    var curratem = parseInt($(bohoho).next().val());
    var curratemafter = curratem - 1;
    $(bohoho).next().val(curratemafter);
    calcultotal();
  }
 
  /*Supprimer un item déjà dans le panier*/
  function deleteqtitem(bahaha) {
    $(bahaha).parent().remove();
    calcultotal();
  }
 
  /*Fonction pour calculer*/
  function calcultotal() {
    totaltotal = 0;
    $('.item_input').each(function(){
      if (parseInt($(this).find('.input_nb_object:first').val()) < 1) {
        $(this).remove();
      }
      var otherprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var otherquant = parseInt($(this).find('.input_nb_object:first').val());
      $(this).find('.thetotalinside:first').html((otherprix*otherquant));
      totaltotal = totaltotal + (otherprix*otherquant);
    });
    if ($('#vuepanier').html().length < 1) {
      $('#vuepanier').html("Mon panier est vide.");
      $('#total2').html(totalbase);
    }
    else {
      $('#total2').html(totaltotal);
    }
  }
 
  /*Fonction pour effacer le panier*/
  function effacer() {
    $('#vuepanier').html("Mon panier est vide.");
    $('#total2').html(totalbase);
  }
 
  /*Fonction pour poster le message*/
  function CompleteMessage() {
    var thetotalprice = totaltotal;
    var lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
    $('.item_input').each(function(){
      var theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var thesupername = $(this).find('.thename:first').html();
      var thequant = parseInt($(this).find('.input_nb_object:first').val());
      var thequantpricetotal = thequant * theprice;
      lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$ pour un total de "+thequantpricetotal+"$";
    });
    lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
    $('#message').val(lemessage);
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  function notriage(){
    $('#menu').find('input:checked').prop( "checked", false );
    $('#contenu_shoponglet_Tout').css("display", "block");
    $('#contenu_shoponglet_Autre').html("");
  }
 
  /*Nombre de catégories*/
  var nbtype = $("#menu").find("ul").length;
 
  /*Fonction triage*/
  function triage() {
 
    /*On trouve le nombre de cases cochées*/
    var totalcheck = $('#menu').find('input:checked').length;
    /*On se débarasse des items déjà triés*/
    $('#contenu_shoponglet_Autre').html("");
 
    /*Si aucune case est cochée*/
    if (totalcheck < 1) {
      /*On garde tous les items*/
      $('#contenu_shoponglet_Tout').css("display", "block");
    }
    /*Sinon*/
    else {
      /*On fait disparaître la liste complète*/
      $('#contenu_shoponglet_Tout').css("display", "none");
      /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
      var nomtypech = [];
      /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
      for (i = 0; i < nbtype; i++) {
        var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
        if (nbcatcheckcal > 0) {
          var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
          nomtypech.push(nomtype);
        }
      }
      /*Nombre de catégories qui ont une case cochée*/
      var qunomtypech = nomtypech.length;
      /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
      var nbnomcatch = [];
      /*Tableau qui contient le name de chaque case cochée*/
      var nomcatch = [];
      for (i = 0; i < qunomtypech; i++) {
        /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
        nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
        for (y = 0; y < nbnomcatch[i]; y++) {
          /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
          var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
          nomcatch.push(truc1);
        }
      }
      /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
      var banane = 0;
 
      /*Pour chaque catégorie où il y a une case cochée...*/
      for (i = 0; i < qunomtypech; i++) {
        /*Si on est à la 1ère catégorie*/
        if (i < 1) {
          /*Pour chaque case cochée de la 1ère catégorie...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Si on est la première case cochée de la 1ère catégorie*/
            if (banane < 1) {
              /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ses items on le met dans la partie de droite*/
              for (z = 0; z < machin; z++) {
                $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
            /*Si on est la xème case cochée de la 1ère catégorie*/
            else {
              /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ces items...*/
              for (z = 0; z < machin; z++) {
                /*Item que on est en train de regarder*/
                var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                var autretruc = 0;
                /*Pour chaque name qui est avant le name que on regarde présentement...*/
                for (w = 0; w < banane; w++) {
                  /*Name où on est rendu à vérifier*/
                  var pamplemousse = nomcatch[w];
                  /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                  if (bamibam.hasClass(pamplemousse)) {
                    /*on ajoute 1 à la variable autretruc*/
                    autretruc = autretruc + 1;
                  }
                }
                /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                if (autretruc < 1) {
                /*On ajoute le item à la zone de droite*/
                  bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                }
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
          }
        }
        /*Si on est pas la 1ère catégorie qui a une case cochée...*/
        else {
          /*On regarde le nombre de item dans la partie de droite*/
          var chose12 = $('#contenu_shoponglet_Autre').children().length;
          /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
          var calculenlever = [];
          /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
          for (z = 0; z < chose12; z++) {
            calculenlever[z] = 0;
          }
          /*Pour chaque case cochée de la catégorie où on est rendue...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Pour chaque item qui est dans la liste de droite...*/
            for (z = 0; z < chose12; z++) {
              /*On regarde le xème item de droite*/
              var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
              /*Name de la case où on est rendu*/
              var tomate = nomcatch[banane];
              /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
              if (fraise.hasClass(tomate)) {
                calculenlever[z] = calculenlever[z] + 1;
              }
            }
            /*On passe à la case suivante*/
            banane = banane + 1;
          }
          /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
          for (y = 0; y < chose12; y++) {
            if (calculenlever[y] < 1) {
              $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
            }
          }
          /*On détruit les items à droite qui ont la classe Detruire*/
          $('#contenu_shoponglet_Autre').children('.Detruire').remove();
        }
      }
      /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
      var kiwi = $('#contenu_shoponglet_Autre').children().length;
      if (kiwi < 1) {
        $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
      }
    }
  }
  //-->
</script>
</body>
</html>




2. Personnaliser la boutique


Alors, si on résume, la boutique est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier. Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Dans le menu, il y a plusieurs catégories et chaque catégorie a un certain nombre d'options.


Voilà un exemple de 1 catégorie avec 4 options :
Code:
      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options. La liste (le ul) a un id qui sert à indiquer quel est la catégorie. Chaque catégorie doit avoir un id différent des autres catégories.

Ensuite, chaque option est sous cette forme :
Code:
        <!-- OPTION # -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>


Dans le "name" du champ à cocher (le "input"), vous avez le mot "Unique".

Ce mot, "Unique", permet d'identifier cette option et permettra aussi d'identifier l'item qui y appartiendra alors il est important de prendre en note comment c'est écrit et de s'assurer que c'est la seule option qui a ce nom.

Donc si je résume rapidement, chaque catégorie à son propre "id" qui est unique à cette catégorie et qui ne doit pas se répéter ailleurs.
Ensuite, chaque option à son propre "name" qui appartient uniquement à cette option et qui ne doit pas se répéter ailleurs.




Ensuie, on passe à la section où il y a tous les items (contenu d'onlglet "Tout"). Vous y trouverez des items sous cette forme :
Code:
        <!-- DÉBUT ITEM -->
       <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
<div class="Arme Max99 Commun Niv1">


Ces classes correspondent aux options auxquelles l'item appartient. Du coup, quand vous créez votre item, vous devez vous rendre dans les options et regarder quel "name" vous avez mis pour identifier les options auxquelles l'item appartient et vous le mettez dans la classe de l'item.

Un item peut appartenir à plusieurs options de catégories différentes et même d'une même catégorie.

Ici, j'ai 4 classes parce que l'item appartient à 4 options, soit Arme, Max99, Commun et Niv1. Cela fait que l'item appartient à ces options : Arme, Niveau 1, Moins de 100$ et Commun.

Vous pouvez changez l'image de l'item en mettant le lien de votre image dans "URL DE ITEM".
Vous pouvez également changer le nom de l'item et ses attibuts (Type, niveau, rareté).
Vous devez remplacer le XXX par le prix individuel (en chiffres, tous collés) de l'item.




Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même, soit optimiser le menu avec les catégories et options que vous voulez ainsi qu'ajouter les items Wink



3. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



4. Mettre la boutique dans un iframe


Maintenant que la page HTML est créée avec la boutique, il faut la mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que la boutique soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 1000px; width: 700px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre boutique), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Il se peut que vous ayez à modifier la largeur (width) ou la hauteur (height) pour éviter qu'il y ait des barres de défilement (scroll)





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Onyx

Bestiaire et Herbier avec triage - Lun 4 Juil 2016 - 6:55




Bestiaire et Herbier avec triage


Salut !

Suite à la demande de Myosotis (qui s'était inspiré de ce bestiaire et cet herbier faits par Kamuy Sinen), j'ai fait un bestiaire et un herbier. Pour ceux qui ne le savent pas, un herbier est un recueil des végétaux d'un certain territoire. Quant au bestiaire, il s'agit d'un recueil des animaux/créatures d'un territoire.

Pour voir l'aperçu du Bestiaire : cliquez ici.
Pour voir l'aperçu de l'Herbier : cliquez ici.

Effet spécial 1
Quand on clique sur une catégorie, les animaux/végétaux sont triés et seuls ceux de la catégorie que vous avez sélectionnée apparaîssent. Vous pouvez personnaliser le code pour mettre les catégories que vous souhaitez.

Effet spécial 2
Si vous avez trop d'options dans le menu, vous pouvez rajouter un petit script qui vous permettra de réduire les menus et de les ouvrir en cliquant dessus pour qu'ils prennent moins de place.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le bestiaire/herbier dans une page HTML.
  • Ensuite, nous allons voir comment le personnaliser.
  • Puis, nous allons voir comment ajouter l'option pour que les menus soient réduits.
  • Enfin, nous allons mettre le bestiaire/herbier dans un iframe pour le rendre accessible.


Laisser le crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Créer le bestiaire/herbier (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre bestiaire/herbier.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Pour le bestiaire, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Bestiaire</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://wallpaperlayer.com/img/2015/5/simple-brown-background-8083-8397-hd-wallpapers.jpg');
    background-size: cover;
    }
    /*Le bloc entier du bestiaire*/
    #bestiaire {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/405891bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #705733;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #705733;
    color: #705733;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .bestonglet {
    margin-left: -20px;
    color: #705733;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .bestonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .bestonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .bestonglet_1 {
    margin-left: -10px;
    color: #2b2010;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_bestonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #705733;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de créature*/
    .creature_name {
    margin: auto;
    color: #a68e68;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de créacture sous le nom*/
    .creature_bloc {
    margin: auto;
    }
    /*Image de créature*/
    .creature_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #705733;
    height: 150px;
    }
    /*Bloc de description de créature*/
    .creature_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la créature*/
    .creature_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de créature*/
    .creature_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #503713;
    }
    a {
    text-decoration: none;
    color: #503713;
    }
    a:hover {
    color: darkred;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_bestonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_bestonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_bestonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_bestonglet(name) {
        document.getElementById('bestonglet_'+anc_bestonglet).className = 'bestonglet_0 bestonglet';
        document.getElementById('bestonglet_'+name).className = 'bestonglet_1 bestonglet';
        document.getElementById('contenu_bestonglet_'+anc_bestonglet).style.display = 'none';
        document.getElementById('contenu_bestonglet_'+name).style.display = 'block';
        anc_bestonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="bestiaire">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Type<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_1 bestonglet" id="bestonglet_Tout" onclick="javascript:change_bestonglet('Tout');">
            <span class="Tout">Tous les types</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mammi" onclick="javascript:change_bestonglet('Mammi');">
            <span class="Mammi">Mammifères</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Oiseaux" onclick="javascript:change_bestonglet('Oiseaux');">
            <span class="Oiseaux">Oiseaux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Poissons" onclick="javascript:change_bestonglet('Poissons');">
            <span class="Poissons">Poissons</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Reptiles" onclick="javascript:change_bestonglet('Reptiles');">
            <span class="Reptiles">Reptiles</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Amphibiens" onclick="javascript:change_bestonglet('Amphibiens');">
            <span class="Amphibiens">Amphibiens</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Insectes" onclick="javascript:change_bestonglet('Insectes');">
            <span class="Insectes">Insectes et Arachnides</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Jungle" onclick="javascript:change_bestonglet('Jungle');">
            <span class="Jungle">Jungle</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Plaines" onclick="javascript:change_bestonglet('Plaines');">
            <span class="Plaines">Plaines</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Foret" onclick="javascript:change_bestonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Montagne" onclick="javascript:change_bestonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Glace" onclick="javascript:change_bestonglet('Glace');">
            <span class="Glace">Glaciers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Desert" onclick="javascript:change_bestonglet('Desert');">
            <span class="Desert">Désert</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Volcan" onclick="javascript:change_bestonglet('Volcan');">
            <span class="Volcan">Volcan</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ocean" onclick="javascript:change_bestonglet('Ocean');">
            <span class="Ocean">Océans et Mers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Lac" onclick="javascript:change_bestonglet('Lac');">
            <span class="Lac">Lacs et Rivières</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>

      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Dangerosité<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ino" onclick="javascript:change_bestonglet('Ino');">
            <span class="Ino">Inoffensif</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Faible" onclick="javascript:change_bestonglet('Faible');">
            <span class="Faible">Faible</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Danger" onclick="javascript:change_bestonglet('Danger');">
            <span class="Danger">Dangereux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mortel" onclick="javascript:change_bestonglet('Mortel');">
            <span class="Mortel">Mortel</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->

      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tout">
       
      <!-- DÉBUT 1ER ANIMAL -->
        <div class="Mammi Jungle Commun Ino">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/923631761.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Jungle - Commun - Inoffensif
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ER ANIMAL -->
       
        <!-- DÉBUT 2E ANIMAL -->
        <div class="Mammi Plaines Rare Faible">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/169146302.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Plaines - Rare - Faible
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E ANIMAL -->

        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->

      </div>

      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>

    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_bestonglet = 'Tout';
    change_bestonglet(anc_bestonglet);
  //-->
</script>
</body>
</html>


Pour l'herbier, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Herbier</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://img11.hostingpics.net/pics/782158bla.jpg');
    background-size: cover;
    }
    /*Le bloc entier du herbier*/
    #herbier {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/740116bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #0f5228;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #0f5228;
    color: #0f5228;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .herbonglet {
    margin-left: -20px;
    color: #0f5228;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .herbonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .herbonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .herbonglet_1 {
    margin-left: -10px;
    color: #093319;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_herbonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #0f5228;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de la plante*/
    .plante_name {
    margin: auto;
    color: #4e9f4c;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de la plante sous le nom*/
    .plante_bloc {
    margin: auto;
    }
    /*Image de plante*/
    .plante_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #0f5228;
    height: 150px;
    }
    /*Bloc de description de la plante*/
    .plante_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la plante*/
    .plante_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de la plante*/
    .plante_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #0f5228;
    }
    a {
    text-decoration: none;
    color: #0f5228;
    }
    a:hover {
    color: #198842;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_herbonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_herbonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_herbonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_herbonglet(name) {
        document.getElementById('herbonglet_'+anc_herbonglet).className = 'herbonglet_0 herbonglet';
        document.getElementById('herbonglet_'+name).className = 'herbonglet_1 herbonglet';
        document.getElementById('contenu_herbonglet_'+anc_herbonglet).style.display = 'none';
        document.getElementById('contenu_herbonglet_'+name).style.display = 'block';
        anc_herbonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="herbier">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Usage<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_1 herbonglet" id="herbonglet_Tout" onclick="javascript:change_herbonglet('Tout');">
            <span class="Tout">Tous</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Alimentaire" onclick="javascript:change_herbonglet('Alimentaire');">
            <span class="Alimentaire">Pour nourrir</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Medecine" onclick="javascript:change_herbonglet('Medecine');">
            <span class="Medecine">Pour soigner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Poison" onclick="javascript:change_herbonglet('Poison');">
            <span class="Poison">Pour empoisonner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Outil" onclick="javascript:change_herbonglet('Outil');">
            <span class="Outil">Pour fabriquer</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Joli" onclick="javascript:change_herbonglet('Joli');">
            <span class="Joli">Pour décorer</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Floraison<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Printemps" onclick="javascript:change_herbonglet('Printemps');">
            <span class="Printemps">Printemps</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Ete" onclick="javascript:change_herbonglet('Ete');">
            <span class="Ete">Été</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Automne" onclick="javascript:change_herbonglet('Automne');">
            <span class="Automne">Automne</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Hiver" onclick="javascript:change_herbonglet('Hiver');">
            <span class="Hiver">Hiver</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Annuel" onclick="javascript:change_herbonglet('Annuel');">
            <span class="Annuel">Toute l'année</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>
     
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Sub" onclick="javascript:change_herbonglet('Sub');">
            <span class="Sub">Sub-Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tropical" onclick="javascript:change_herbonglet('Tropical');">
            <span class="Tropical">Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Foret" onclick="javascript:change_herbonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Montagne" onclick="javascript:change_herbonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Commun" onclick="javascript:change_herbonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Rare" onclick="javascript:change_herbonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tresrare" onclick="javascript:change_herbonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->
      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tout">
       
      <!-- DÉBUT 1ERE PLANTE -->
        <div class="Alimentaire Ete Foret Commun">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.onlinetransilvania.ro/wp-content/uploads/2014/03/IMG_9857-1300x866-450x150-croped.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour nourrir - Éte - Forêt - Commun
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ERE PLANTE -->
       
        <!-- DÉBUT 2E PLANTE -->
        <div class="Poison Printemps Foret Tresrare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.sylvie-tribut-astrologue.com/wp-content/uploads/2015/09/12-LE-PISSENLIT.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour empoisonner - Printemps<br />Forêt - Très rare
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E PLANTE -->

        <!-- DÉBUT 3E PLANTE -->
        <div class="Medecine Hiver Montagne Rare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://victorianviolas.co.uk/wp-content/uploads/2015/10/parade-closeup-450x150.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour soigner - Hiver - Montagne - Rare
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E PLANTE -->

      </div>
     
      <div class="contenu_herbonglet" id="contenu_herbonglet_Alimentaire"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Medecine"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Poison"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Outil"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Joli"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Printemps"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Ete"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Automne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Hiver"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Annuel"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Sub"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tropical"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Foret"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Montagne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Commun"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Rare"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tresrare"></div>
     
    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_herbonglet = 'Tout';
    change_herbonglet(anc_herbonglet);
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



2. Personnaliser le bestiaire/herbier


Il y a plusieurs parties au code. Il y a la section "menu" avec des catégories et des onglets où il y a des sous-catégories. Puis, il y a la section "contenu d'onglet" de "Tout" où il y a tous les végétaux/animaux. Enfin, il y a la section "contenu d'onglets" des sous-catégories dans lesquels les végétaux/animaux sont triés.

Le menu et divisé en plusieurs carégories et sous-catégories.

Voici un exemple du bestiaire de 1 catégorie qui a 4 sous-catégories :
Code:
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les sous-catégories.

Chaque sous-catégorie est sous cette forme :
Code:
        <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
          <span class="Myth">Mythique</span>
        </li>


À noter qu'il y a 3 endroits dans cette sous-catégorie où vous trouvez le mot "Myth", soit dans le "id" du "li", dans les parenthèses du "onclick" du "li"dans dans la "class" du "span" qui entoure le nom de la catégorie.

Ce mot, "Myth", permet d'identifier cette sous-catégorie et permettra aussi d'identifier l'animal qui y appartiendra alors c'est important qu'il soit pareil aux 3 endroits.




Ensuie, on passe à la section où il y a tous les animaux (contenu d'onlglet "Tout"). Vous y trouverez des animaux sous cette forme :
Code:
        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
        <div class="Oiseaux Foret Tresrare Danger">


Ces classes correspondent aux sous-catégories auxquelles l'animal appartient. Du coup, quand vous créez votre animal, vous devez vous rendre dans les sous-catégories et regarder quel "mot" vous avez mis pour identifier les sous-catégories auxquelles l'animal contient et vous le mettez dans la classe de l'animal.

Ici, j'ai 4 classes parce que l'animal appartient à 4 sous-catégories, soit Oiseaux, Forêt, Très rare et Dangereux.




Enfin, vous avez les contenus d'onglets vides où les animaux seront distribués selon les sous-catégories auxquelles ils appartiennent :
Code:
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>


Encore une fois, à la fin du "id" de chaque contenu d'onglet, vous avez le "nom" propre à chaque sous-catégorie.

Donc si je résume, vous devez choisir un certain "nom" (qui ne doit pas avoir d'espaces ou d'accents idéalement) qui doit être à 3 fois dans l'onglet de la sous-catégorie, 1 fois dans la classe des animaux qui appartiennent à la sous-catégorie et 1 fois dans l'id dans un contenu d'onglet où seront triés les animaux.

Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même Wink

Note : J'ai pris des exemples avec le bestiaire, sauf que l'herbier est identique à l'exception du nom de certaines classes. Du coup, vous devriez être capable de vous débrouiller ^^



3. Option pour réduire les menus


Il suffit simplement d'aller juste avant la fermeture de la balise "body", soit juste avant cela :
Code:
</body>
</html>


Et d'y rajouter ce bout de code :
Code:
<script text="javascript">
  //<!--
    $('.menus').find('img').css("display", "inline-block");
    $('.menus').find('img').css("margin-left", "5px");
    $('.menus').css("cursor", "pointer");
    $('.menus').next().css("max-height", "0px");
    $('.menus').click(function(){
      $('.menus').css("cursor", "pointer");
      $('.menus').next().css("max-height", "0px");
      var bam = $(this).next().find('li').length;
      var boum = (bam * 28) * 45;
      $(this).next().css("max-height", boum+"px");
      $(this).css("cursor", "default");
     });
  //-->
</script>




4. Mettre le bestiaire/herbier dans un iframe


Maintenant que la page HTML est créée avec le bestiaire/herbier, il faut le mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que le bestiaire/herbier soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 600px; width: 885px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre bestiaire/herbier), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Vous aurez peut-être besoin de modifier le height (la hauteur) et le width (la largeur) pour qu'il n'y a pas de barre de défilement (scroll).





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Cruelly

La création d’un événement. - Ven 19 Fév 2016 - 16:49

La création d’un événement.


Sujet sur Never Utopia ou les évents sont mentionnés.

> Entretenir l'activité Par Jadelina
> En cas de baisse de régime Par Jadelina
> Créer et gérer un event/une intrigue Par El Tomate Enmascarado
> Les évènementiels : Membres ou Staff ? Par Chenou

Qu’est-ce que qu’un évent


L'événement sur un forum est une intrigue lancer par l'administration du forum. Il peut être jouer sur un seul Rp ouvert par le staff, une section du forum, par exemple une nouvelle catégorie inaugurer pour celui-ci ou encore sur toutes les zones Rp du forum.

Il est comme son nom l’indique un événement important mis en place par l’administration du forum. Les évents sont des moments importants d’un forum ou tous les joueurs sont invités à y participer. Notons ici que certains forums en fond également pour les groupes, mais nous y reviendrons plus tard.

Ils permettent de :

> faire avancer le forum
> créer des rebondissements
> ajouter un nouveau groupe
> entretenir ou relancer l’activité
> créer une communauté et intégrer des membres

Les différents évents


Voici un classement de type d'événement que vous pouvez retrouver sur les forums. Il est conçu pour vous montrez la diversité de ceux-ci et vous permettre d'identifier chacun d'eux. Il vous est également possible de mélanger les types d'évents pour en créer un bien à vous ^^.

Évent unique : Nommons ce type d'événement « Évent Unique ». Qu'est-ce que j'entends par là ? Ils sont simplement des gros événements lancer par le staff et qui, une fois terminée n'auront pas de suite. Ces évents sont très importants, car ils apportent un gros changement au forum et peuvent même changer la suite du contexte.
> L'assassina du roi. Dans cet exemple, c'est toute la dynamique du forum qui change. Une guerre peut-être créer, des têtes sont mises à prix, la politique du rp peu s’effondrer.

Évent festif : Ce sont les évents basés sur les fêtes connues, par exemple : Noël, halloween et j’en passe. Ils peuvent aussi servir à marquer le début des saisons comme le printemps. Ils n’ont pas de répercussion directe sur le concept. Ils sont simplement créés par le staff pour être en accord avec le temps réel et mettre un peu de vie sur le forum.
> Un bal d'hiver. Dans cet exemple, le rp se passe dans un sujet ou une catégorie ouvert par le staff ou tous les participant vont au bal. Tout le monde s'amuse et une fois terminer tout le monde rentre à la maison et la vie n'a pas changer.

Évent suivit : Les évents suivis sont des événements lancés comme des chapitres. L'administrateur lance le premier chapitre de l'évent les membres jouent se chapitre et celui-ci apportera de nouveaux éléments à la sortie d'un autre évent. Ils fonctionnent un peu comme des séries télévisées ou encore une suite de livres. Chaque nouvelle partie de chapitre apporte toujours des changements. Ces évents ont une répercussion sur le concept. Ils le font avancer petit à petit et peuvent même en modifier l'histoire au fur et à mesure des chapitres. Les administrateurs qui utilisent ce genre d'évent, vont ajouter un résumer de l'évent en question dans le concept à la suite de celui-ci.
> Par exemple sur un forum de Game Of thrones, tout le monde meurt se bat pour le trône. Chapitre un ce sont les Baratheon qui sont au pouvoir. Un événement perturbateur arrive et ils sont détrônés. Chapitre deux ce sont les Martell qui sont au pouvoir, événement perturbateur et ainsi de suite. Le forum suit une ligne chronologie avec les événements, tout comme une série télé le fait.

Intrigue/mini-évent : L'intrigue ou le mini-évent est une mise en scène lancée par le staff du forum qui concerne seulement les personnages. Ils n'ont pas d'impacts sur le concept du forum. Dans les mini-évents, nous pouvons retrouver les quêtes organisées par le staff (comme une chasse au trésor par exemple), des événements qui concernent seulement des groupes ou encore des évents à plus petite échelle qui peuvent concerner tous les membres (un bal par exemple). Attention, pour ce qui est de l’intrigue généralement elle se passe dans un sujet défini par le staff. Les membres peuvent y participer en s’inscrivant à une liste de participation.

Que trouve t-on dans le message d’introduction/ouverture d’un event ?


Voici une liste des éléments qui sont le plus souvent présents dans le message d’introduction d’un évent.

La date de début : Les évents ont une date de début. Elle aide les membres à savoir depuis combien de temps l’évent est en cours.

Le numéro de l'évent : Les administrateurs aiment classer le forum. On retrouve donc des numéros dans les titres des différends évents. Par exemple ; évent numéro un - Titre de l'évent.

L'introduction : Dans celle-ci nous trouvons des informations données par le staff sur l'évent. Le début de celui-ci, des remerciements, en soit c'est un mini présentation de l'événement.

La mise en contexte : Voici la partie qui intéresse vraiment les membres. Sur quoi porte l'évent. Cette partie a une fonction RPG. Elle vous met en contexte sur l'histoire et la conception de l'évent. C'est une partie descriptive. N'oubliez pas que dans cette partie, nous répondons aux questions : Quand ? Où ? Pourquoi ? Comment ? Qui ?

La marche à suivre : Vous allez trouver une description des étapes pour vous joindre à l'évent. Normalement, elles sont très simples, mais certains administrateurs aiment bien ajouter des formulaires et des instructions.

Écrire un bon évent


Pour tous ceux qui se demandent qu'est-ce que qui fait un bon évent, je vais vous donner quelques pistes pour vous aider.

Le lancement de l'évent : Lorsque vous lancer un évent, la préparation de celui-ci est très importante. Ne lancez pas un évent trop rapidement. Préparez le bien. Un évent est un peu comme un contexte, il doit être soigné et ne peut pas être fait à la va vite.

Lorsque vous lancer votre évent il est très important d'avoir des membres pour participer à celui-ci. Un forum avec trois membres à de faibles chances de voir celui-ci conclu par les trois membres. Certains forums qui ont plusieurs membres à leur lancement, lance un évent pour celui-ci. Pour les forums nouveaux n'ayant pas beaucoup de membres, je vous conseille d'attendre un peu plus de monde. Cependant, le lancement d'un évent peut aussi vous procurer des membres. Tout dépend de la nature de celui-ci et de sa présentation. Si vous n'avez pas beaucoup de membres, mais que vous souhaitez lancer un évent, je vous conseille de parler de celui-ci sur les forums de vos partenaires et sur vos publicités pour que l'évent ait le plus de visibilité possible.

Le bon moment : Quel est le bon moment pour lancer un évent ? Vous pouvez suivre les saisons et les fêtes en cours. Par exemple un évent pour l'été ou encore un pour fêter Noël. Si votre activité sur votre forum est en baisse, vous pouvez aussi lancer un évent pour relancer celle-ci. Il n'y a pas de moment parfait pour lancer un évent, tout dépend du forum en question. Vous pouvez aussi lancer vos évents lors des changements de design, si ceux-ci ne sont pas trop fréquents bien sûr.

L'écriture de celui-ci : Au moment où vous choisissez d'écrire un Évent vous devez vous souvenir que vos membres ne sont pas dans votre tête. Décrivez le bien. Répondez aux questions où, quand, quoi, pourquoi et comment. Sachez aussi qu'il vous faut avoir un fil continue avec le RP. Les membres écriront la suite de l'évent dans leur Rp, il est donc important pour l'administration de suivre les Rps des membres.

Geste à éviter : Attention aux administrateurs trop presser. Si vous lancez un événement trop rapidement et peut préparer, il ne suscitera pas autant d'intérêt que celui qui est bien préparé et lancer dans le bon temps.

Note : N'oubliez pas que vous avez Cette section qui peut vous aider à peaufiner votre évent. En le postant dans Évents & Dés, vous pourrez avoir des avis sur celui-ci de la part des membres de Never Utopia.

Voilà j'ai terminer mon blabla, en espérant que ceci vous aura aidez à développer vos évents :heart:

Lilith Aube

L'Aube des Mondes - Mer 22 Juil 2015 - 0:54

#système_de_jeu #avatar_manga #avatar_realiste #magies #combats #pirates

Salut à toi noble {USERNAME} !

Tu cherche un forum innovant ? Un forum mêlant magie et poudre à canon ? Hm, je vois, je t'invite donc à lire ce qui suit ^^

Okhmhaka

Partie 1 ▬ Etape 1 : Création du Jeu [5/6] - Mer 15 Jan 2014 - 8:54



Les Trois principaux systèmes de Jeu


Encore une fois, ils sont groupés en trois car c'est la façon de les aborder qui me parait la plus logique, mais il existe très certainement d'autres manières de faire pour dévier un peu de ces trois systèmes qui sont loin d'être figés. Je vais les aborder dans l'ordre, en partant du plus utilisé vers le moins répandu (et le plus complexe s'il est poussé à son maximum).


Système "libre"



La confiance : Même si ce n'est peut-être pas le bon terme, il représente bien l'idée de ce système de jeu qui laisse entière liberté au joueur dans le contrôle de son personnage. Cela ne signifie pas qu'il a le droit de faire n'importe quoi, cela signifie simplement que vous faite confiance à son bon sens. C'est finalement l'une des bases de cette manière de jouer : la confiance. Il ne faut pas en déduire hâtivement que les fondateurs de forum qui utilisent les autres systèmes de jeu n'ont pas confiance en leur joueurs, simplement ils privilégient autre chose.

Pas de calculs : La seconde caractéristique importante de ce type de jeu est l'absence de calculs ou de maintient à jour d'information qui, pour certains, cassent votre rythme de jeu. En effet, si vous êtes lancés dans l'aventure de votre personnage, vous l'incarnez donc vous êtes imprégné de lui, vous vous mettez en condition, etc... et si ensuite vous devez ressortir de cela pour aller compter les points de vie qu'il perd, l'argent qu'il dépense ou tenir compte de ses points de force, magie ou autre, cela crée une rupture qui vous force à prendre du recul vis à vis de l'action elle-même. L'absence de calcul ne signifie pas seulement qu'il n'y a pas de calcul concret, mais que dans l'absolut vous ne vous occupez pas de l'aspect ultra-réaliste de votre personnage pour jouer, vous le faites agir et c'est tout, peu importe qu'il ait mal dormi, qu'il ne soit pas très fort en magie, qu'il ait faim, envie d'aller aux toilettes... bref. A contrario, un joueur qui agit avec un personnage dans un univers contrôlé, avec des points, de stats, etc... va d'abord évaluer son personnage pour savoir s'il peut se lancer dans un combat, une quête, une aventure, au lieu d'y aller tête baissée avec 10 PV restant. Il n'y a pas de bonne ou de mauvaise méthode, ce sont deux manières de jouer différentes qui peuvent être poussées à l'extrême dans des directions totalement opposées.

Jeu plus développé : il s'agit d'une observation générale, il peut y avoir des exceptions partout, mais il est tout de même très fréquent de constater que les JdR libres ont en moyenne des RP plus longs que les JdR contrôlés. Peut-être que c'est une manière de compenser, ou de profiter de cette liberté pour décrire au maximum les éléments... Peut-être aussi que la tendance est simplement à écrire, et, pour les plus jeunes d'entre vous, ce n'est probablement pas vos professeurs de Français qui s'en plaindront ! Seulement il est certainement plus difficile d'écrire un roman lorsqu'il faut en plus calculer ses points que lorsque l'on n'a pas à s'en soucier.

RPG de socialisation ou "simulateur de vie" : là aussi de manière générale les RPG qui utilisent un style de jeu visant au social (= liens entre personnages, donc pas à but de combat ou de progression personnelle) ne peuvent pas utiliser autre chose qu'un système de jeu libre. J'imagine mal un lycéen ou un étudiant dans un RPG "city" posséder des points de vie, de charisme, d'intelligence ou d’habileté au lancé franc en Basket-ball pour épater les filles. Pourtant, concrètement, on pourrait ! Mais vous êtes comme moi et vous vous dites très certainement que vous bloquerez le jeu, et qu'alors les joueurs seraient obnubilés par ces points et voudraient les augmenter au lieu de tisser des liens avec les autres personnages... Or c'est tout de même votre objectif de base, et si vous changiez de système, vous nuanceriez par la même occasion votre objectif de jeu. Du coup, tout RPG qui souhaite avoir comme type de jeu et surtout comme objectif une sorte de simulateur de vie, qui met l'accent sur les rapports entre personnages (peu importe leur nature...) n'ont pas grand choix de système et optent pour un aspect "libre" du jeu.

Et là vous allez me dire :

"Mais...il existe vraiment d'autres systèmes ?"


Il est vrai que sur la toile, beaucoup de jeu de rôles sont à système "libre", et d'ailleurs même les contextes qui pourrait facilement avoir un système contrôlé finissent par basculer du côté "libre" car au final c'est un système de jeu qu'ils trouvent plus amusant qu'avec contrôle. Cependant, tout dépend de la définition de chacun du mot "amusement", et tout dépend aussi de la réalisation d'un jeu à système contrôlé, car bien réalisé, il permet aussi de s'amuser. Un exemple tout bête, les N-U Games présents en bas du forum de Never-Utopia sont des sortes de RPG à l'aspect très contrôlé... et pourtant on est souvent plusieurs à bien s'en amuser, alors même qu'il n'est pas toujours possible d'avoir des interactions avec d'autres joueurs !
Détaillons donc tranquillement ce qu'un système contrôlé pourrait donner...

Système "contrôlé"


C'est en décidant d'utiliser ce type de système de jeu que vous vous rapprochez alors du travail de "Game designer" qui a pour but de tout prévoir, calculer, estimer au sujet du personnage, de son évolution dans le jeu, la façon dont il peut progresser, etc...
Plus de réalisme, en un sens : fondamentalement, ce principe de jeu prend le parti inverse du jeu libre et impose de surveiller son personnage, pas seulement au niveau de ses fréquentations avec les autres joueurs, mais surtout sur ces propres capacités. Ainsi, avec un système contrôlé, la focalisation se porte davantage sur le personnage lui-même. Cela ne signifie pas qu'il ne sera pas tourné vers les autres... Le réalisme est présent et important surtout dans le cas de JdR comportant une omniprésence des combats.
Nous avons les exemples des forum Naruto, par exemple, où l'incarnation d'un ninja peut difficilement se faire sans jamais affronter personne. Cela étant, il n'est pas obligatoire de choisir un système contrôlé sous prétexte qu'il y a des combats à gérer.
De plus en plus de forum optent pour le système de jeu libre car préfèrent mettre l'accent sur les liens entre personnages. Il n'est cependant pas impossible de tenter les deux et de pousser les joueurs à partager des aventures et des relations même avec un système figé. Par ailleurs, on peut imaginer un système contrôlé même pour un JdR dont la principale activité n'est pas le combat.

Prenez l'univers d'Harry Potter : les personnages se trouvent dans une école de magie où ils sont censés apprendre à utiliser leur pouvoirs, c'est le but premier. Hors, dans d nombreux forum HP, pour ne pas dire tout les forum HP, les cours sont peu présents et le niveau des personnages très vague. Au final, on se retrouve avec une école où les élèves de 11 ans ne sont pas présents (pas intéressant à jouer car ne peuvent pas avoir de liens amoureux avec les autres, ils sont trop "enfantins"), où l'on a seulement des élèves de 15 à 18 ans, et où aucun ne sait vraiment quel est son niveau de magie... d'ailleurs, ce niveau est presque relégué au second plan car l'important c'est les amis, les flirts dans le parc et la rebellion contre ses professeurs. Là encore, je ne prétends pas que ce soit une mauvaise chose, c'est simplement mettre l'accent sur un aspect plutôt qu'un autre.
Imaginons un instant un forum HP avec un système contrôlé :
Nous aurions la gestion de nos gallions (or) pour acheter le matériel scolaire, avec, pourquoi pas, un système de bourse scolaire le permettant, ou permettant d'acheter quelques extra comme un balai performant. Il faudrait alors choisir avec soin sa baguette, ou mieux, l'obtenir aléatoirement avec un jet de dés, car pour être fidèle à l'univers d'Harry Potter je rappelle que c'est la baguette qui choisi son sorcier, et non l'inverse. Il sera alors un peu plus intéressant de commencer en première année. Les emplois du temps et les cours auraient davantage d'importance, chaque cours où les élèves postent leur permettrait d'avoir des points d'expérience, comme dans un jeu vidéo finalement, pour ensuite apprendre d'autres sortilèges ou des aptitudes. Analysez l'univers écrit par JKR et vous verrez que ce ne sont pas les possibilités qui manquent entre les sortilèges, la métamorphose ou les potions pour ce qui concerne la pratique de base, mais aussi plus tard la capacité à réaliser des sortilèges informulés (donc pas besoin de prononcer une formule magique) ou les domaines tels que l'occlumentie ou la légilimentie.


Techniquement, tout est disponible dans cet univers pour en faire un système de jeu contrôlé. Pourquoi les fondateurs ne le font-ils pas ? Et bien simplement car ils estiment que cela diminuerait l'important des liens forgés par les joueurs entre leur personnages. Il est vrai que le souci alors serait que chaque joueur tenterait de faire progresser son personnage au détriment des RP simples de liens amicaux. Il y aurait pourtant d'autres avantages, comme la tentation plus grande de défier les autres joueurs en duel (il y a une salle des duels dans Poudlard, autant l'utiliser...). Etrangement, on est toujours plus tenté de le faire lorsque les stats sont fixes, peut-être est-ce rassurant de se dire qu'il n'y aura pas de possibilité de triche, ou de contourner un peu les principes du jeu.
Là où le réalisme est donc meilleur, c'est parce qu'il permet de rééquilibrer les choses pour que les joueurs ne soient pas trop tournés vers une recherche de liens de la même façon qu'ils réalisent une course aux amis sur Facebook, et qu'ils pensent un peu à l'évolution de leur personnage et surtout de ses capacités. Il est possible de pousser loin ce réalisme et d'imaginer dans un jeu d'aventure à la Final Fantasy que votre personnage doit se restaurer, se reposer, etc... Cependant, plus le système est précis et strict, moins les joueurs seront aptes à se tourner vers les autres. Or le RP doit préserver l'interaction entre les joueurs.

Une tendance à diminuer l'importance des interactions : pour développer cette aspect-là, prenons l'exemple d'un jeu basé sur Final Fantasy, globalement, dans lequel vous possédez un personnage qui évolue dans un monde où il peut combattre contre des monstres qui lui rapportent des points d'expérience pour ensuite lui donner la possibilité d’acquérir d'autres techniques. Ce joueur aura comme objectif de devenir plus fort, et même sans être un Grosbill en puissance, c'est une envie normale. Il aura peut-être vu dans le répertoire de technique un sort qui lui plait, veut l'obtenir, donc combat pour l'avoir... mais alors où est l'importance des RP communs avec les autres personnages ? En effet, si papoter tranquillement avec le personnage d'un autre joueur ne lui rapporte rien, il risque fort d'éviter de faire ce type de jeu pour privilégier les combats qui lui rapportent. Il arrive même que sur certains forum les personnages aient le droit de poster seuls, dans leur topic, dans une sorte d'entrainement solo. Il s'agit d'une aberration à mon sens vis à vis du JdR qui s'effectue à plusieurs et dont on enlève tout l'intérêt en choisissant cette option.

   
On observe et l'on ressent donc qu'un système de jeu contrôlé à tendance à orienter le joueur vers le développement de son personnage plutôt que vers le jeu avec les autres.


Le joueur focalisé sur son personnage : plus la surveillance du personnage doit être importante, moins le joueur ira regarder les autres. C'est, là aussi, un comportement logique qu'il vous faut prévoir. S'il doit s'occuper des XP, PV, Magie, techniques et autres stats de son propre personnage, son attention reste focalisée sur lui-même. On distinguera donc le type libre où les joueurs chercheront les liens, et le type contrôlé où ils chercheront la progression de leur personnage. Dans le premier cas on est dans un simulateur de vie, dans le second on est dans un jeu video RPG. Aucun n'est meilleur que l'autre, il s'agit simplement de deux types de jeu différents, un peu comme si vous essayez de comparer "Les Sims" avec "Final Fantasy", pour ne parler que des plus connus dans leur genre. Cependant, si l'on observe ces deux jeux, il y a des ressemblances de l'un dans l'autre : il est important de développer son personnage dans "Les Sims" pour qu'il sache bricoler par exemple, afin d'avoir un meilleur emploi... Et d'un autre côté, dans Final Fantasy, votre personnage est rarement seul et dans les combats vous recevez l'aide précieuse de vos amis. Il y a par ailleurs toujours beaucoup de liens entre les personnages, ils ne se contentent pas de combattre côte à côte, une histoire d'amour est toujours présente.

   
Voyez alors comme il est possible de doser l'importance des interactions et de la progression personnelle ! C'est là qu'est peut-être la clef d'un RPG complet.


L'imprévu : La génialissime possibilité d'inclure un aspect oublié des RPG "libres" : l’imprévu, l'inattendu, et le stress positif que cela engendre. En effet, prenez les RPG "sociaux" actuels : ils comportent une zone "Relations de personnage", ou "Recherche de personnage", sans parler des "personnages prédéfinis" ou de divers "journaux intimes". Tout est fait non seulement pour centrer les choses sur les liens tissés, mais en plus pour prévoir ces liens à l'avance ! Un forum RPG devient alors un "Facebook alternatif" dans lequel on "demande des amis" avant de leur avoir parlé en tête à tête. Chaque nouvel arrivant sur ces forum n'a alors qu'une peur : "et si personne ne voulait de mon personnage ??". Alors il se jette sur les relations, demande des liens, les obtient, et tout cela sans démarrer le moindre RP...tout cela pour combler l'angoisse de se lancer dans l'aventure les yeux fermés. Mais... c'est peut-être cela, l'intérêt du RP : éviter de scénariser et attendre, impatient, la réaction de notre partenaire de jeu à nos paroles ou nos actions, sans savoir si cette réaction sera positive ou négative. Cet imprévu a tendance à disparaitre, et pourtant il pourrait être encore plus présent. En utilisant le lancer de dés, on donne un aspect aléatoire au jeu et l'on y introduit quelque chose qui décuple son intensité : le hasard.
Dans un RPG de type Final Fantasy, vous pouvez imaginer un dé aléatoire de monstres à combattre, mais vous pouvez aussi imaginer la découverte d'un coffre, une rencontre avec des soldats ou tout autre chose. Vous allez probablement me dire que cet aspect ne fait que renforcer la focalisation sur son propre personnage, mais ce n'est pas forcément le cas. En effet, si en temps que créateur du jeu vous estimez que l'ouverture vers les autres joueurs doit être préservée, libre à vous d'inclure des résultats de dés qui peuvent la renforcer... Imaginez alors la découverte d'un coffre piégé qui contient une malédiction pour celui qui l'ouvre, l'un des joueurs perd brutalement la mémoire ! Voilà qui met du piment dans votre lien avec l'autre personnage présent ! Bien entendu, ce type de handicap peut n'être que provisoire.

Au final, vous choisissez : là où les RPG libres agissent sur les joueurs par des événements, vous pouvez dans un jeu contrôlé tenter d'influencer le type de jeu des personnes qui viendront. Si vous craignez que les personnages ne soient intéressés que par leur propre progression, dans leur coin, alors valorisez les aventures à plusieurs, imposez de la coopération pour certaines quêtes, tout comme c'est le cas dans les MMORPG d'ailleurs, offrez aux joueurs des défis qu'ils ne pourront réaliser qu'avec les autres, etc...

   
Plus qu'aucun autre, ce système de jeu se rapproche des JdR sur table, et en temps que créateur du jeu, vous avez le pouvoir de pousser les joueurs sur telle ou telle voie, y compris en cours de jeu.


   
Attention, avant de vous lancer dans l'élaboration d'un système de jeu "contrôlé" il vous faut avant tout connaitre les outils dont vous disposez ! En effet, selon la plateforme choisie ces outils seront différents et nous vous permettront pas tous autant de diversité que vous le souhaiteriez. Puisque nous sommes spécialisés dans les forum ForumActif, c'est de cette plateforme dont nous parlerons ainsi que des outils qu'elle propose et qui sont, vous le verrez, nombreux et pas toujours bien exploités par les fondateurs de forum, hélas. Je vous renvoie pour mieux cerner ces outils aux dossiers concernant les lancers de dés, les points de réputation, les profils, et la feuille de personnage. Il est important de connaitre les possibilités mais aussi les limites des forum pour les JdR, car c'est ainsi que vous pourrez le mieux les utiliser pour créer votre système de jeu.



Système "semi-contrôlé"


Curieux de savoir ce dont il s'agit ? Et bien ce n'est ni plus ni moins qu'un système tentant d'être à mi-chemin entre les deux précédents. Vous allez me dire que c'est là une tâche bien compliquée...mais en réalité pas du tout. C'est simplement une sorte de formule approximative appliquée au système contrôlé. Et là, j'ai parlé chinois...

Explications : dans un système de jeu libre, pour un combat, chaque joueur décide lui-même des attaques, s'il est touché ou non, en fonction des capacités globales qu'il possède. Dans un système contrôlé, ce sont à 75% les stats de ce personnage qui vont décider de l'issue du combat (selon s'il a plus ou moins de point de force, de vitesse, de vie...que son adversaire). Et bien dans un intermédiaire possible, l'on pourrait imaginer que le personnage possède des stats, mais que ce n'est pas des calculs stricts qui les régissent mais le joueur lui-même ! On lui rend alors un peu de liberté.

Des stats possédant une utilité différente : dans un tel système de jeu, les statistiques seront plus ou moins présentes, mais auront une fonction un peu différente du jeu contrôlé où c'est elles qui décident de tout. Là, dans un système semi-contrôlé (ou semi-libre, tout dépend si vous voyez le verre à moitié plein ou à moitié vide...) les stats de votre personnage servent juste de repère pour le joueur. Il sait alors s'il est globalement plus ou moins fort que son adversaire, mais c'est lui qui décide ensuite des dégâts, des techniques et qui va rédiger ses actions. On laisse alors une part à l'imprévu, l'improvisation, ou même la chance tout simplement. En effet, il arrive que dans un combat ce ne soit pas forcément le plus puissant qui gagne. Ce système permet alors de nuancer les choses. Il est un intermédiaire entre aucune stats et des stats déterminantes. Le stats sont alors illustratrices du personnage, mais le joueur reprend de sa liberté d'action en ayant la possibilité d'agir dessus sans calcul.

On redonne notre confiance aux joueurs : Cet approximation montre aussi que vous lâchez la bride et que c'est aux joueurs de faire l'effort de ne pas s'enlever que 1PV après avoir pris en pleine tête une attaque puissante... Il s'agit là de leur faire confiance pour rester réalistes, malgré la présence de barre ou de chiffres. C'est alors une sorte d'intermédiaire là aussi : les joueurs se gèrent, mais les points ne mentent pas tout de même et si un trop gros écart est présent entre deux joueurs niveau force il n'y aura pas de gruge possible, pas de triche, pas de super-esquive-de-la-mort si votre personnage a 2 en vitesse alors que l'adversaire a 38... Les chiffres permettent d'avoir un contrôle, tout en laissant une marge de mouvement au joueur car c'est lui qui les contrôle.

On redonne de l'importance aux RP "communs" : L'autre avantage de ce système est qu'il est plus simple de redonner l'envie aux joueurs de partager des RP qui sont concrètement inutiles pour la progression de leur personnage niveau XP. En effet, s'ils peuvent eux-même agir sur leur points de stats, un RP amical peu augmenter la compassion, ou l'intelligence... selon les cas. Là aussi, à eux de ne pas abuser sur l'attribution de ces points. Une randonnée augmentera l'endurance, un défi amical à la course avec un joueur pourra faire augmenter la vitesse, et ainsi de suite. On se sert alors beaucoup plus facilement des actions banales du quotidien et de l'aspect socialisation, même pour notre propre personnage. Le système est plus équilibré que les deux précédents, justement car il permet d'obliger les joueurs à faire sans cesse le lien entre ce que fait le personnage et ce qu'il en tire, ou apprend.
C'est bien souvent un système oublié car l'on pense au simulateur de vie en mode "jeu libre", ou bien aux stats qui "comptent" réellement et déterminent le jeu, mais l'on met de côté cette possibilité d'avoir des statistiques dont le but est différent, servant simplement d'illustration, ou d'aide pour le joueur, lui permettant juste de visualiser sa force et se situer vis à vis des autres personnages, sans toutefois déterminer systématiquement tout ce qu'il entreprend.

Une utilisation très large : il est important de noter également qu'avec ce système l'on possède une très grande marge de manoeuvre. Il se situe en effet entre le "rien" du jeu libre et le "tout" du système contrôlé. L'on peut voir des JdR utilisant timidement ce système en attribuant par exemple un niveau au personnage, allant de 1 à 5, permettant juste au joueur de se situer. On peut aussi remarquer parfois certaines jauge de puissance magique, par exemple, là aussi servant d'illustration et d'aide pour le joueur, afin qu'il sache concrètement quelle est sa puissance magique comparée à celle de son adversaire. Cela étant, ce n'est pas parce qu'il est moins puissant qu'il perdra, s'il sait utiliser les bonnes techniques ou les bons sorts au bon moment. C'est là tout le principe du jeu semi-contrôlé qui peut aller de quelques indications légères à des stats normales et poussées, mais qui ne déterminent pas tout et sur lesquelles le joueur a le contrôle, permettant alors de lui laisser la place pour s'intéresser aux liens que son personnage a avec les autres.

   
Pour résumer, il n'existe pas de mauvais système, juste des systèmes mal appliqués. Selon votre type de jeu, votre contexte, et évidemment vos goûts, vous vous sentirez porté vers l'un ou l'autre de ces modes de jeu. L'idée est de choisir celui qui vous représente et s'intègre le mieux dans votre univers. Vous pourrez cependant être face à certains dilemmes si le contexte choisi permet facilement d'avoir des systèmes différents, comme c'est le cas pour des JdR sur Naruto, Bleach ou d'autres manga shônen. Il faudra alors vous projeter en temps que joueur dans votre contexte, imaginer votre personnage en combat, dans les lieux, avec les autres... et déterminer ce qui possède de l'importance pour vous. Au final, gardez à l'esprit qu'un système "semi-contrôlé" est peu utilisé et pourtant permet un bon équilibre entre le RP commun de socialisation et le RP de progression personnelle des personnages. Si vous optez pour un jeu semi-contrôlé ou contrôlé sachez cependant qu'il peut être plus ou moins complet mais qu'il sera important que vous ayez pensé à tout ! Je vous renvoie à la partie où j'abordais les questions qu'il faut se poser.


Page précédentePage suivante

Okhmhaka

Partie 1 ▬ Etape 1 : Création du Jeu [3/6] - Mer 15 Jan 2014 - 8:25



Se poser les bonnes questions


Tout comme lorsque vous ouvrez un nouveau jeu de société auquel vous n'avez jamais joué, ou bien lorsque vous débutez un nouveau jeu vidéo dont vous ne connaissez pas grand chose, il apparait que le point central est la question suivante : "quel est le but du jeu ?". C'est une question trop souvent oubliée lorsqu'on se lance dans l'aventure de la création d'un Jeu de Rôle, mais qu'il est importante de se poser, même si la réponse peut être assez vaste. D'ailleurs, dans le cas de Jeux de Rôles, les réponses sont souvent multiples et dépend du type de personnage réalisé (des groupes de couleur, essentiellement).

Dans un univers classique de One Piece (manga sur des pirates), l'objectif du groupe "pirate" sera de trouver le plus grand trésor possible, ou bien en variante d'atteindre la liberté absolue, alors que le groupe des "Marines" aura pour but logique de stopper la progression des pirates et de la combattre. Prenez l'univers de Pirates des Caraibes, et ce sera sensiblement la même chose.


En effet, contrairement à un jeu vidéo où tout est centré sur un personnage (le héros), dans un Jeu de Rôle chaque personnage a son important et peut avoir un alignement différent (alignement = comportement, en très résumé "bon", "méchant", "neutre", etc...). Le but sera donc différent voire opposé selon le type de personnage, et il faut en tenir compte dans votre création. Prévoir le but de chaque groupe de personnage aidera les joueurs à choisir leur point de départ et à évoluer, quitte bien évidemment à changer d'objectif. Il y a cependant une trame globale qui passe au delà des objectifs personnels de chacun. D'ailleurs il est important de se mettre dans la peau de chaque groupe, chaque "avis" et de défendre ses intérêts comme s'ils étaient parfaitement louables, et ceux même s'il s'agit des pires méchants de la planète.
Il vous appartiendra donc de constituer quels sont les différents types de personnages possibles et leur objectifs qui découleront de cela.

   
N'oubliez pas de noter chaque idée, chaque possibilité sur votre cahier ou feuille afin de pouvoir ensuite facilement vous retrouver dans vos théories, les assembler et en ressortir quelque chose de construit.


Buts et systèmes de jeu


Voici pour vous aider dans votre réflexion quelques buts de jeu que l'on peut trouver sur les forum RPG :
(la plupart du temps, il n'y en a pas qu'un, ils sont couplés dans le jeu, car on retrouve toujours le personnage + l'influence qu'il possède dans le monde)

Evolution personnelle avec expérience : il s'agit de partir d'un personnage plus ou moins fort pour le faire progresser dans une discipline précise (il peut s'agir du combat, mais pas seulement). Dans ces cas là on retrouve souvent la présence d'un système de points, barres de vie, liste de techniques etc... plus ou moins complexe afin que le joueur puisse s'y retrouver. C'est un objectif qui bien souvent favorise l'affrontement avec les autres personnages au détriment de l'aspect plus social

Socialisation : c'est le but de la plupart des RPG de type "city", modernes, prenant place dans notre monde, dans des campus universitaires ou des pensionnats. On peut également retrouver cet aspect dans beaucoup de forum Harry Potter, car malgré l'aspect "magie", c'est au final cet aspect relationnel qui prédomine. Généralement, ce système de jeu abouti à une feuille de personnage simple, sans calculs, sans barre, et il donne lieu à des jeux plus longs

Evolution personnelle sans XP : c'est la forme libre du premier style, il a l'avantage de permettre au joueur d'être plus imaginatif et de ne pas se cantonner aux chiffres, mais ouvre aussi le risque des abus faciles avec les gens tentés de faire évoluer leur personnage un peu trop vite. C'est aussi le type de système que l'on peut trouver dans un forum Harry Potter puisqu'il s'agit aux élèves d'apprendre la magie, même si dans la plupart des forum les flirts dans le parc prennent plus d'importance que le cours de potion...

Les bons et les méchants : sous ces mots simplistes on retrouve l'essence même de tout jeu, à savoir qu'il y a toujours plusieurs groupes avec des idées différentes, qui s'affrontent de différentes façons afin de prendre l'ascendant sur l'autre. C'est un aspect parfois absent des forums de "socialisation" mais qui en réalité est présent sous d'autres forum, puisque vous verrez bien souvent des groupes de couleur représentant les tendances, les goûts, les classes, les "clans" (sportifs, intello, geek, etc...). Donc même dans ce type de forum on peut identifier ces différentes idées qui s'affrontent avec plus ou moins d'animosité. Dans cette même idée de bon et de méchants, on peut démarrer le jeu dans un monde en paix menacé par une guerre, ou bien dans un monde en guerre dans lequel on essaie de ramener la paix. Finalement, cet objectif est présent partout puisqu'il s'agit pour votre personnage et/ou son clan d'EXISTER, en défendant ce pour quoi il vit, ses convictions, ses rêves, etc...

Il est donc important de vous situer dans ces types d'évolution, tout en sachant qu'ils doivent correspondre au type d'univers choisi.

Exemples : Il est possible dans l'univers d'Harry Potter de créer un système d'évolution avec expérience (statistiques, points de vie et de magie, etc...) mais il est aussi possible de rester dans un RPG de type "socialisation".
Si vous créez un RPG sur Pirates des Caraïbes, un système de stats et de calcul risquerait de casser votre rythme de jeu, et de centrer le joueur sur sa propre progression au lieu de l'amener à se battre pour ses idées (la loi ou la liberté, pour faire simple). Ainsi, il sera plus logique d'opter pour une progression sans XP (dans le sens "stats") avec une auto-gestion du nombre de pièces d'or dans la bourse, ou la possession d'un navire, et donc en comptant sur l’honnêteté et la logique des joueurs pour ne pas exagérer et s'imaginer à la tête de toute une flotte.


L'Avatar


Parallèlement à cela, il vous faudra décider de quel(s) type(s) de personnage vos joueurs pourront être les maîtres. La première décision est de savoir comment ils choisiront leur avatar. Si on devait classer ces types il y aurait trois grosses catégories :

Les réels : acteurs, actrices, chanteurs... en bref les personnalités existantes en chair et en os

Les manga ou dessin : le trait net, les couleurs vives, en gros tout personnage se trouvant dans un manga ou un dessin animé, mais également tout fan'art dont le style s'apparente à cela

Les réalistes : il s'agit des personnages imaginaires mais se rapprochant le plus possible du réel. On compte parmi cela les personnages de jeu vidéo (les jeux récents, évidemment, et en omettant les personnages du type Super Mario et Sonic...) mais aussi les fan'arts qui se rapprochent de ce style

Votre choix devra bien sûr être en rapport avec l'univers choisi. Si vous vous basez sur un contexte existant, il y a de fortes chances pour qu'il soit préférable de garder le style de base. Cependant, il n'y a pas de règles fixes dans l'invention d'un jeu, tout peut être fait dans la mesure où il est justifié. Après tout, il est fréquent de trouver des forum Harry Potter aux avatars manga.
Il s'agit aussi de faire en fonction de votre préférence. Certains parmi vous ne supportent pas de jouer avec des avatars réels, et d'autres ont au contraire développé une allergie aux personnages manga. Votre jeu ne doit pas devenir une contrainte sous prétexte de vouloir plaire au plus grande nombre. Vous devez avant tout penser qu'il s'agit de VOTRE invention, et contrairement aux Game designer qui créent pour un public qui achètera le jeu, vous vous créez aussi pour vous-même, et pour des gens qui se reconnaitront dans votre univers. Il y'en aura forcément.

Personnages existants ?


La question suivante qui découle du choix de type de personnage est de savoir si vous permettez l'utilisation de personnages existants ou non. Le problème se pose d'autant plus si vous avez utilisés une oeuvre existante comme contexte de référence, mais même en cas d'invention d'un monde l'interrogation doit être abordée, car un joueur peut très bien proposer d'intégrer un personnage d'une autre oeuvre à votre forum en gardant au maximum ses caractéristiques (caractère, personnalité, emplois ou fonction, objectif...). Le tout est de savoir si vous souhaitez le permettre ou non.
L'avantage d'incarner un personnage est que cela peut apporter une satisfaction assez indescriptible chez le joueur autant que chez ses partenaires, car on a alors l'impression d'incarner son personnage préféré ou alors (s'il est bien joué) d'être réellement en face du personnage que l'on a l'habitude de voir dans l'oeuvre. Il s'agit d'une sorte d'étrange fantasme que l'on a tous eu un jour, et pour preuve : qui s'entre vous n'a JAMAIS incarné un personnage de fiction existant dans ses jeux de rôles de cours de récréation ?

"Moi je suis Batman et toi Robin !" "Hein ? Non ! C'est toujours toi Batman, je veux être Batman moi aussi. Je vois pas pourquoi c'est toi qui conduirais toujours la Batmobile !" (en désignant le vieux caddie de supermarché)


Quelle que soit la référence, il nous est forcément arrivé de faire cela, car le jeu de rôle est un moyen de grandir, et que grandir signifie commencer par s'identifier à ce que l'on connait (nos parents sont nos premiers modèles de jeu de rôles). Incarner un personnage connu a donc quelque chose de rassurant également, puisqu'il y a moins de risque de posséder un personnage "vide" ou terne dont on se lasserait.
Les inconvénients sont cependant bien présents. Le premier est pour le joueur lui-même : il risque d'avoir du mal à "imiter" le comportement du personnage et va vouloir en faire trop, cela va tourner à la caricature comme c'est bien souvent le cas pour des personnages charismatiques (difficile de jouer LE grand méchant d'une histoire dans en faire des tonnes, par exemple). De plus, il est déterminé par ce que le personne a fait, et continue à faire dans l'oeuvre, surtout si elle encore en production. Cela peut le brider dans ses actes, tout dépend de quelle manière vous avez harmonisé votre univers en fonction de celui d'origine.
Le second inconvénient est pour les autres joueurs si le personnage est mal joué. Il est des personnages difficiles à incarner, et s'il s'agit d'un pilier de votre histoire, il est préférable qu'il soit bon. Dans le cas où le joueur ne parvient pas à faire vivre ce personnage, c'est un échec pour lui, mais également pour votre contexte si le personnage est important !

   
D'une manière générale, lorsque vous choisissez de permettre aux joueurs d'utiliser des personnages existants, cela signifie également que vous mettez délibérément certains joueurs au dessus des autres, puisque leur personnages auront déjà leur place et leur importance dans le jeu, alors que les autres devront se la créer, gagner leur réputation progressivement. Songez-y lorsque vous abordez cette question.



Basculer dans le fantastique


Evidemment, si votre contexte est basé sur du réaliste et du jeu du type "city" ou historique, vous n'aurez probablement pas à inclure du fantastique... encore que, il est parfaitement possible de le faire, notamment si vous choisissez une période comme l'Antiquité où vous pouvez alors rendre les Dieux jouables, ou encore comme dit plus haut si vous partez du principe que les sorciers et sorcières existaient vraiment au Moyen-Age.
Quoi qu'il en soit, il est possible de laisser une part plus ou moins large au fantastique, à commencer par l'incarnation d'autres types de personnages que des humains. Cela débouchera sur un concept de "races" qu'il vous faudra alors définir pour qu'elles aient chacune un intérêt. Contrairement à un jeu vidéo comme Starcraft où il est vital que les races soient de force égale, sans quoi les joueurs prendraient toujours la même, il n'est pas essentiel dans un jeu de rôle de procéder de cette façon. Il faut cependant avoir des joueurs qui ont conscience que l'intérêt du jeu est ailleurs que dans la puissance, et il faut dans ce cas que votre système de jeu ne soit pas à progression stricte avec stats & co. Si c'est le cas, les gens risquent de se tourner vers la race la plus forte qui leur permettra une évolution rapide.
Il est donc préférable d'avoir des races d'un niveau identique en cas de RPG avec statistiques (niveau identique ne signifie pas similaire, mais qui possèdent chacune des avantages et inconvénients).
Si au contraire votre jeu est "ouvert", et plus proche d'un "simulateur de vie", la puissance des races n'aura pas d'importance.

Au delà des races, on entre dans les pouvoirs de chacun. Là encore, le principe est le même et si vous choisissez d'imposer une progression par XP aux personnages, ils seront tentés de commencer haut et de s'attribuer beaucoup de pouvoir, sauf bien sûr si vous imposez à tout le monde de commencer de 0. Entre dons, capacités, pouvoirs, malédictions, le choix est vaste, mais il vous faudra quoi qu'il en soi bien définir les états et les effets de chacun. Cela ne signifie pas forcément de limiter l'imagination des joueurs qui peuvent choisir leur propres pouvoirs.
Entrer dans un système de pouvoir implique encore plus qu'avec les autres styles de jeu de devoir faire un choix entre un système libre (pas de stats, la force, les pouvoirs et l'évolution du personnage sont à l'appréciation des joueurs), un système semi-libre (une partie des stats présentes ou même toutes mais au lieu d'avoir à calculer c'est le joueur qui estime leur diminution ou leur augmentation), ou contrôlé (avec stats strictes, ne permettant pas le zèle des joueurs mais d'assurer une évolution plus réaliste et progressive). Chaque système ayant ses avantages et ses inconvénients, ils seront détaillés dans une partie qui leur est spécifique un peu plus bas dans cette étape.

Quel que soit le système choisi, il faut envisager la progression des personnages. S'ils ont un don, ils peuvent probablement apprendre à mieux l'utiliser ou le contrôler. S'ils ont des pouvoirs ils peuvent les rendre plus efficaces ou puissants. S'ils sont des techniques (physiques ou sorts) ils peuvent probablement les perfectionner et en apprendre d'autres... Tout cela sera à définir en répondant à la question suivante : comment progresse-t-on ? L'apprentissage se fait-il avec un autre joueur ? Aléatoirement ? Par nombre de post (message) ? Par RP terminé ? Simplement lorsque le joueur estime son personnage prêt ?
Il vous faudra répondre à ces questions en fonction de ce que vous attendez de votre jeu, la façon dont vous l'imaginez. Si le système est strict, le jeu sera plus "fermé", mais s'il est laissé à la gestion des joueurs eux-même il sera à la fois libre et ouvert à d'éventuels abus. Encore une fois, chacun possède une vision du jeu différente, aucune n'étant meilleure que les autres.


Quelques questions supplémentaires à se poser


L'argent :
Votre monde possède certainement sa monnaie, qu'elle soit réelle ou inventée. Il faut alors décider si le système monétaire de votre jeu a de l'importance ou non. S'il est à la gestion du joueur, peu de travail pour vous, par contre s'il est réglé et calculé, cela se complique. Il faut alors décider comment gagner de l'argent (par quelles actions), combien coûte chaque objet, armes, ou autre, et s'il est possible de voler de l'argent, ce qui cela implique, etc... Vous entrez alors dans un système complexe, mais qui peut être grandement intéressant, selon le type de jeu que vous souhaitez créer.
Tout comme pour le système d'évolution de personnage, il est possible de rester à mi-chemin entre un système contrôlé et un système libre, en demandant au joueur d'indiquer dès le début sa condition sociale, et donc l'or qu'il possède en début de partie, puis de l'obliger à tenir compte de cela tout le long du jeu, même s'il peut s'ajouter ou s'enlever de l'argent librement, il devra rester logique avec sa situation et l'évolution de celle-ci durant le jeu.

Les Déplacements
En cas de carte vaste, et même si elle ne l'est pas, il est parfois important de gérer les déplacements. Vous pouvez très bien décider que vos joueurs ont le droit d'aller partout, voire même partout à la fois, ou bien les brider à des déplacements plus réalistes, et donc leur imposer un RP dans une zone intermédiaire avant d'aller à l'autre bout de la carte. C'est un moyen comme un autre de rendre le jeu plus réaliste. Vous en possédez un bon nombre, il suffit d'être inventif ! Vous pouvez également estimer que votre personnage possède une jauge de vitalité qui doit baisser à chaque message (post) selon l'effort que fournis le personnage à ce moment là, et qu'une fois vide, et bien il est épuisé et doit s'arrêter de voyager, dormir, se reposer, bref, cesser les combats. Chaque éventualité est à étudier. Encore une fois, plus vous décider de cadrer, plus le travail sera conséquent pour élaborer un système à la fois fiable, facile et réaliste.

Les RP simultanés
Cela rejoint le point précédent, et si cela a été une question longtemps soulevée il y a quelques années pour vos systèmes de jeu, celle l'est nettement moins aujourd'hui et pour que tout soit plus fluide et rapide, les joueurs peuvent avoir plusieurs jeux en même temps avec le même personnage. Ce qui est imposé (et logique) c'est que les topics aient un ordre chronologique et que vous teniez compte d'un événement arrivé plus tôt dans un RP censé se dérouler après.
La difficulté est alors la suivante : si lors de votre RP1 qui se passe avant le RP2 votre personnage se dispute avec un autre, alors que vous êtes justement entrain de jouer avec ce même personnage dans le RP2 (se passant donc après^^), vous ne pouvez pas bien vous entendre en sachant que vous sortez d'une embrouille... Il est donc parfois difficile de jongler entre les RP.

   
Interdire le multi-RP c'est le risque de bloquer le jeu dès qu'un joueur traine, s'absente, ou disparait.



Conclusions


Comme vous pouvez le voir, la création d'un jeu de rôles peut aller du plus simple avec un contexte connu et aucun impératif pour les joueurs, à un système très complexe où l'on peut imaginer, en plus de ce qui a été dit ci-dessus, un bestiaire, des quêtes ou des lancers de dés pour pimenter le tout...
Il est important de savoir à quel type de jeu vous vous destinez, ce que vous aimez, ce qu'EST en somme le jeu de rôles à vos yeux, tout en sachant qu'il n'y a pas de bon ou de mauvais système, et qu'il n'y a pas non plus que trois système : contrôlé, semi-contrôlé et libre. Ces trois résument plutôt bien ce que l'on peut trouver sur la toile, si nous devions classifier, mais on peut également imaginer un système de jeu libre n'imposant qu'un lancer de dé pour événement aléatoire, juste pour la dimension "imprévue" dans les RP. On peut aussi imaginer un jeu comportant énormément d'éléments d'information dans la feuille de personnage (compétences, caractéristiques, points de vie, d'action, de magie, etc...) mais que le joueur puisse les gérer librement.
Finalement, ce qu'il est important de retenir c'est que votre système doit être choisi en fonction de l'objectif de votre jeu. S'il s'agit d'un RPG de socialisation (simulateur de vie), alors oubliez le jeu hyper-contrôlé, ce qui ne vous empêche pas de faire intervenir un élément ou deux dans les profils (argent, niveau...). Si vous réalisez un forum de type Final Fantasy, il sera par contre intéressant de se rapprocher des jeux, même si là encore il n'y a jamais d'obligation.

Puisque les différents systèmes de jeu seront abordés plus loin, arrêtons-nous là pour le moment, et passons à du plus concret pour votre projet de forum.

Page précédentePage suivante


Revenir en haut

La date/heure actuelle est Dim 19 Nov 2017 - 16:46