HFS Play

j'ai rédité et préparer le code ma poule, le voilà : https://codepen.io/camarade35/pen/MoVMaN" onclick="window.open(this.href);return false;

porko a écrit :Comment lui dire.... width: %zspin-speed%vh; ??? <=== pas test

ça je vais jeter un œil dans la journée

H ouaip! Bien ton code!

Faudra que je vois comment lier les valeurs du JS au xml mais ça pète! Et c'es exactement le truc que voulait biloon

Merci mec t'assure à donf!

EDIT: c bon vik m'a montré ! Je test ça dès que je peux

Porko a écrit : EDIT: c bon vik m'a montré ! Je test ça dès que je peux

si tu peux partager, car perso mon chart disparait tout de suite après son apparition

G pas encore testé ton chart... Il m'a juste montrer comment appeler les données du XML dans le js

Punaise ! Alors là, respect, vous assurez !
Je ravale ma langue pour arrêter de baver sur le clavier

Je tente de mettre le morceau de js dans la page mais ça chie...

Code : Tout sélectionner

<script type="text/javascript">
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx,{
"type":"doughnut",
  "data":{"labels":["Visibilité","Graphisme","Rapidité","Bande-son"],
 "datasets":[{"label":"My First Dataset",
 "data":[17,50,25,50],
 "backgroundColor":["rgb(233,76,59)",
 "rgb(54,152,221)","rgb(242,195,19)","rgb(24,189,155)"
                     
    ]}
  ]}
});
</script>

CAMAAAAaaaAAaaaAAADEEEEUUUUUUU!

How it works? kè ke cé ke je fé mal?

bah si j'ai pas le code complet ^^

Sinon oublie pas la div qui contient le canvas et les valeurs de la div

.myChartDiv {
max-width: 30%;
max-height: 30%;
}

la partie script après le body

Sinon keskichi ?

Bah oui ya tout! Et aux bons endroits! (a priori)
Et ca marche ni sur navigateur ni sous Zspin

J'ai tenté de créer un fichier js que j'appel, j'ai tenter le script direct.... Et pleins de trucs mais que dalle de nib prout caca tshuintshuin

look
https://pastebin.com/dg476C8G

ça c'est le html avec le js dedans

YO les gars ,
Je me suis fais cambrioler dans la nuit...voiture, argent la totale....LOOZ

bref je reviens dans une semaine avec ce qu'il faut pour finir le projet
désolé

oh merde Oo, courage @biloon

sinon, @porko je dirais

Code : Tout sélectionner

<script src="assets/Chart.min.js"></script>

et surtout : Le fichier qui va bien ^^

@biloon, SHIIIIT! je suis vraiment désolé pour toi!

Yep camarade! a marche merki, faut que je lise la doc pour paramétrer l'affichage
Là comme ça brut j'y bite pas grand chose

Merci en tout cas ça pète bien!

@biloon
Ce serait pas plus pertinent ça?

C'est le mm code en fait (merci camarade)

Là on voit la différence entre toutes les valeur à 1% et tout à 100%... Que sur le cercles l'affichage sera identique

PS: animation, couleur, traits... Tout se paramètre

Yo Porko !
J'avais déjà essayé avec le motif radar mais c'etait pas très lisible pour l'utilisateur. :: pas assez graphique mais super précis

De toute façon on va passer au cribles tous les shumps Verticaux et on aura suffisamment de données pour écrire une bible sur le Shumps aux editions HFS !

la on devra utiliser les radars ! ahahah

Moi je trouvais les cercles cools parce que c'est très graphique et coloré !!

L'idée c’était surtout de voir la dominante du jeu en se basant sur :
** La vitesse de défilement)
** le nombre d'ennemis et de boulette à l'écran
** La complexité des partens

Mais je suis pas contre un rajout de caractéristiques, ni contre un radar pour voir ce que ca peut donner une fois codé ! il faut juste que ça soit joli en fait ^^ uj

et surtot Merci encore PORKO pour ton taf la dessus...
C'est en train de devenir vraiment énorme ce projet

Et faire quelque chose comma ça qui mixerait les deux approches ?

La taille des parts de camembert restent constantes, mais plus la portion augmente vers le centre et plus la valeur est élevée.

@porko

http://www.chartjs.org/samples/latest/c ... -area.html" onclick="window.open(this.href);return false;

Oui je l'ai test celui lâ^^

camarade35 a écrit :@porko

http://www.chartjs.org/samples/latest/c ... -area.html" onclick="window.open(this.href);return false;

c'est pas mal ça

Glop!

Test avec 3 jeux en mode portrait

[BBvideo 560,340][/BBvideo]

Si vous voulez tester:

Download l'archive et décompréssez ====> https://mega.nz/#!KRYCHRaB!hfL8lNC7bn46 ... oMC5eiQBCg
récuperez la version de Zspin qui convient à votre OS ====> releases-f115/beta-test-t7243.html#p109555
et foutez le dans le premier dossier nommé ZspinShumpBox

Lancez, parametrez et testez (ya pas de jeux c juste le frontend)

Si vous êtes en mode paysage (normal quoi) virez le plein écran et redimentionnez pour avoir les bonnes proportions (c juste plus fluide sur l'anim des wheels)

Merci @biloon pour le graphisme et l'idée orginale
Merci @camarade35 pour le chart
Merci @vik pour l'aide au code
Merci @jer570 pour le database

Pour les fucking portes faut me filer des trucs... Ca c'est pour le test, ça va pas avec le reste
Je vais voir à animer les differentes apparitions d'items
L'encart en bas à droite affichera des images en boucle instruction cards, artworks...
Et faut que j'optimise le theme pour qu'il soit léger et commenter le code

EDIT: changement du nom du sujet pour le coup

YES PORKO !
Dès que je récupère un ordinateur je te fais les portes !
Super taf encore une fois

J'ai hate de voir la suite des animations

Quelques remarques :
-Je ne suis pas trop fan finalement de ce camembert : - Penses tu que tu pourrais mettre une option pour choisir le type de graphique ? du genre : CERCLE / HISTOGRAMME / RADAR

- Il faudrait se pencher sur ce écran noir de transition pour que le fond reste statique

- parce que une fois ce truc résolu ca sera énorme

BIG UP PORKO !

-

Alors si tu veux la wheel fixe prends celle là
https://mega.nz/#!fNhBSY5A!f7muSqBVdXaS ... TjNCEDKx1w

pour passer en un autre type de chart, toi tu veux le Doughnut

il faut que dans le script tu changes le type et virer une option
origin:

Code : Tout sélectionner

<script type="text/javascript">
function putChart() {
  var diff = parseInt($('.zspin-difficulty').text());
  var visi = parseInt($('.zspin-visibility').text());
  var graph = parseInt($('.zspin-graphics').text());
  var speed = parseInt($('.zspin-speed').text());
  var sound = parseInt($('.zspin-soundtrack').text());
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
      type: "polarArea",

      options: {
        scale:{
          display : false,
          },
        legend: {
          display: false,
          }
        },
      data: {
          labels: ["Visibilité", "Graphisme", "Rapidité", "Bande-son", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, graph, speed, sound, diff],
                  borderWidth: "0",
                  borderColor: "rgb(0,0,0)",
                  backgroundColor:[
                  "rgb(0,0,204)",
                  "rgb(0,204,0)",
                  "rgb(255,128,0)",
                  "rgb(204,0,204)",
                  "rgb(204,0,0)"
                  ]

              }

          ]

      }

  });
}
setTimeout(function(){ putChart();}, 1000);


</script>

par:

Code : Tout sélectionner

<script type="text/javascript">
function putChart() {
  var diff = parseInt($('.zspin-difficulty').text());
  var visi = parseInt($('.zspin-visibility').text());
  var graph = parseInt($('.zspin-graphics').text());
  var speed = parseInt($('.zspin-speed').text());
  var sound = parseInt($('.zspin-soundtrack').text());
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
      type: "doughnut",

      options: {

        legend: {
          display: false,
          }
        },
      data: {
          labels: ["Visibilité", "Graphisme", "Rapidité", "Bande-son", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, graph, speed, sound, diff],
                  borderWidth: "0",
                  borderColor: "rgb(0,0,0)",
                  backgroundColor:[
                  "rgb(0,0,204)",
                  "rgb(0,204,0)",
                  "rgb(255,128,0)",
                  "rgb(204,0,204)",
                  "rgb(204,0,0)"
                  ]

              }

          ]

      }

  });
}
setTimeout(function(){ putChart();}, 1000);


</script>

le cercle n'a pas les mêmes proprtions donc il faudra ajuster la taille ici sur le "width" le heigth ne sert pas je crois (faudra que je le vire au moment de l'optimisation)

Code : Tout sélectionner

<div class="myChartDiv"style="position: absolute; height:5vh; width:15vh"><canvas id="myChart"></canvas></div>
<div class="year zspin-year zspin_d"></div>

et pour le placement c'est là en jouant sur top et left

Code : Tout sélectionner

.myChartDiv {
  position: absolute;
  width: 30vh;
  top: 63vh;
  left: 6vh;
  z-index: 4;
}

Pour etre précis tu peux mettre des chiffre après la virgule (enfin le point)

ex:

Code : Tout sélectionner

 top: 63.35vh;

HFS Play

[DEV in PROGRESS]Box verticale 16/9 sur Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: Créer une Box pour jeux verticaux avec Zspin

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin