Donc le singe savant va expliquer aux autres singes ce qu'il comprend... Je compte sur ceux qui savent pour rectifier mes absurdités.
1) Récupérer les infos
Le but est de récupérer les infos du database pour les afficher dans notre theme
Dans un database il y a des balises, nous allons prendre l'exemple du genre.
Dans chaque jeu on retrouve ceci:
Code : Tout sélectionner
<genre>Sport</genre>
Cette div est: zspin-genre
Pour pouvoir lui donner des propriétés css (plus tard dans le tuto) on va lui rajouter un nom "info_genre"
Code : Tout sélectionner
<body>
<div class="info_genre"><div class="zspin-genre"></div></div>
</body>
2) Afficher les infos
Maintenant on va lui donner les instruction d'affichage (zone, police, couleur...)
Il faut pour cela l'appeler dans la zone "style"
Code : Tout sélectionner
<style>
.info_genre {
position: absolute; /** laisser en absolute pour le moment le relative viendra avec votre futur skill**/
top: 10%; /** position par rapport au haut**/
left: 32.2%; /** position par rapport a la gauche**/
width: 16.3%; /**largeur de la zone**/
height: 6%; /** hauteur de la zone**/
font-family: "Arial"; /** police de caractère**/
color: #A9A9A9; /** couleur police**/
line-height: 1vw; /** Hauteur interligne**/
font-size: 1.3vw; /** Taille de police**/
background: transparent; /** couleur du fond**/
text-align: left; /** alignement**/
z-index: 3; /** position Z c'est à dire devant ou derrière: 0=fond 42=facade**/
}
</style>
Vous remarquez que la fonte est en vw car dans mon exemple je veux que la police ne change de taille que si l'on réduit la largeur
Si je voulais le contraire j'aurais mis vh et la police n'aurait réduit que sur la hauteur
Voila c'est tout pour les infos à afficher!! Déjà ça doit marcher
3) Afficher dans un tableau
Là ça se corse donc on va rester concentré!
On va prendre 1943 de la PC Engine (seul database à jour sur la HFSBox synchro pour le moment)
Code : Tout sélectionner
<game name="1943 Kai (Japan)" index="True" image="">
<description>1943 Kai</description>
<cloneof>...</cloneof>
<crc>...</crc>
<systems>PCE, ARC</systems>
<manufacturer>Naxat Soft</manufacturer>
<developer>Capcom</developer>
<year>1991</year>
<genre>Shoot them up</genre>
<rating>CERO - NR</rating>
<score>14</score>
<players>2 joueurs</players>
<language>JAP</language>
<synopsis>Vous êtes un pilote du Stearman, un avion de chasse biplan, pendant la Seconde Guerre Mondiale, plus précisément pendant la Guerre du Pacifique. Vous avez pour mission de détruire des vagues d'avions de chasse ennemis ,des bombardiers et des navires de guerre de grande taille de la force aérienne japonaise.</synopsis>
<enabled>yes</enabled>
</game>
Chaque "tr" est une ligne et chaque "td" est une colone
Dans cet exemple je vais afficher dans la première colonne l'intitulé et dans la 2ème colonne les infos du database
Toujours dans le body on va ajouter une table (un tableau quoi) et lui donner un nom: position_tab
Code : Tout sélectionner
</body>
<table class="position_tab"> </tab>
<tr>
<td>DEVELOPER :</td><td><div class="zspin-developer"<div></td>
</tr>
<tr>
<td>MANUFACTURER :</td><td><div class="zspin-manufacturer"<div></td>
</tr>
<tr>
<td>YEAR :</td><td><div class="zspin-year"<div></td>
</tr>
<tr>
<td>GENRE :</td><td><div class="zspin-genre"<div></td>
</tr>
<tr>
<td>RATING :</td><td><div class="zspin-rating"<div></td>
</tr>
<tr>
<td>PLAYERS :</td><td><div class="zspin-players"<div></td>
</tr>
<tr>
<td>LANGUAGE :</td><td><div class="zspin-language"<div></td>
</tr>
<tr>
<td>SCORE :</td><td><div class="zspin-score"<div></td>
</tr>
</table>
</body>
Code : Tout sélectionner
<style>
.position_tab {
position: absolute;
top: 22%;
left: 29%;
z-index: 3;
font-family: "Arial";
color: #383838;
font-size: 1.7vw;
background: transparent;
text-align: left;
text-transform: uppercase; /**tout passer en majuscule**/
}
td:nth-child(1) {
width: 17vw;
text-align: left;
}
td:nth-child(2) {
width: 21vw;
text-align: left;
}
tr {
line-height: 2.3vh;
height: 4vh;
}
</style>
Je vous mets le theme EmulationStation-like qui comporte des div standard et le tableau afin que vous puissiez vous entrainer (Il y a même l'auto scroll sur le synopsis si il est trop long)
https://mega.nz/#!LBZ1USiJ!W13B0To4tuI3 ... 0i5remY_bw
Appel à ceux qui savent: corrigez moi!