Le_Royaume_Poudingue/Development Tools/MapGenerator.html

369 lines
29 KiB
HTML
Raw Normal View History

2018-08-16 15:35:24 +02:00
<EFBFBD><EFBFBD><!DOCTYPE html>
<html>
<head>
<title>Aventura Map Generator</title>
<style type="text/css">
.box {
border: 3px solid #262729;
border-radius: 10px 2px;
padding: 10px;
display: block;
margin: 5px auto;
max-width: 600px;
background-color: rgba(80, 54, 226, 0.5) ;
}
canvas {
margin: 10px;
image-rendering: -moz-crisp-edges;
display: block;
margin: auto;
background-color: white;
}
#TileSet, .putain {
width: 330px;
height: 210px;
display: block;
margin: 0 auto 0 auto;
border: 2px solid #262729;
}
.Map {
width: 512px;
height: 256px;
background-image: url("PICT5.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#tile {
width: 100px;
height: 100px;
margin: 5px auto;
}
#selector {
width: 30px;
height: 30px;
pointer-events: none;
}
.text-block {
background-color: #5036e2;;
padding: 2px 12px;
color: #eff5df;
max-width: 700px;
margin: auto;
text-align: center;
border-radius: 2px;
}
body {
background-color: #edf0dd;
font-family: courier new
}
.box button, select { margin: 0 3px;}
pre { margin: 0; }
.sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0; left: 0;
overflow-x: hidden;
padding-top: 10px;
transition: 0.5s;
background-color: rgba(20,10,60,0.8);
color: #eff5df;
}
.sideNav a {color: inherit;}
.sideNav p {margin: 5%;}
.sideNav h4, h3, h5 {text-align: center; text-decoration: underline;}
.sideNav .closebtn {
padding: 8px;
text-decoration: none;
color: #eff5df;
font-size: 26px;
font-weight: bold;
display: block;
transition: 0.3s;
position: relative;
left: 80%;
}
input[type=number] {
width: 40px;
}
</style>
</head>
<body>
<div class="sideNav">
<a href="javascript:help()" class="closebtn"><00></a>
<h3>Guide rapide</h3>
<p>Ce programme a <00>t<00> con<00>u pour le jeu <a href="https://www.planet-casio.com/Fr/forums/topic14452-1-Projet-de-RPG...-en-BASIC-!.html" style="color: inherit;">Aventura, le Royaume Poudingue</a>. Il permet de concevoir des maps assez facilement, puisque le syst<00>me de maps du jeu peut s'av<00>rer assez complexe <00> certains endroits.</p>
<h4>Dessiner</h4>
<p>Le premier canvas contient le tileset. Cliquez sur un tile pour le s<00>lectionner. Il appara<00>t en gros dans le deuxi<00>me canvas. Cliquez dans le troisi<00>me canvas pour appliquer le tile o<00> vous voulez. En cas d'erreur, utilisez un tile blanc pour effacer. Pour tout recommencer, cliquez sur <a href="javascript:change()"><00>Effacer<00></a>.</p>
<h4>Terrains</h4>
<p>Vous pouvez choisir le type de terrain. Il y en a deux : <00>Normal<00> et <00>Donjon<00>. Attention, changer de terrain effacera votre map.</p>
<p>Si vous appliquez un tile en dehors du cadre par inadvertance ou que vous avez effac<00> une dalle dans le terrain <00>Donjon<00> avec un tile blanc, <s>cliquez sur <a href="javascript:cleanse()"><00>Nettoyer<00></a></s>. V<00>rifiez ensuite que votre map est encore compl<00>te : il se peut que des tiles aient disparu dans quelques rares cas.</p>
<h4>Ajouter un ennemi</h4>
<p>Les monstres sont symbolis<00>s par le tile le plus en haut <00> droite du tile set (tile n<00><03>). Il est inutile d'en mettre plusieurs : il n'y aura jamais qu'un seul monstre sur la map <00> la fois. Sa position sur la map sera son point d'apparition.</p>
<p>Un monstre ne prend aucune prori<00>t<00>. (Ses informations sont tra<00>t<00>es ailleurs)</p>
<h4>R<00>sultat</h4>
<p>Dans le cadre <00>R<00>sultat :<00> se trouvent respectivement le code brut de la map et le code compress<00> <00> int<00>grer dans le programme  via <a href="https://www.planet-casio.com/Fr/logiciels/voir_un_logiciel_casio.php?cat=6" style="color: inherit;">BIDE</a> par exemple. Cliquez sur <a href="javascript:zip()"><00>Compresser<00></a> pour r<00>actualiser ce dernier.</p>
<h4>Ajout de propri<00>t<00>s</h4>
<p>Il est possible d'ajouter des propri<00>t<00>s aux tiles en se servant du Mode d'<00>dition. Par d<00>faut, il est r<00>gl<00> sur <00>Dessin de Tile<00>. N'appliquez de propri<00>t<00>s qu'apr<00>s avoir cliqu<00> sur <a href="javascript:zip()"><00>Compresser<00></a> apr<00>s avoir fini le dessin.</p>
<h5>Mode Dessin</h5>
<p>Le mode par d<00>faut. Utilisez ce mode tant que vous dessinez votre map. Compressez votre map puis changer de mode pour appliquer d'<00>ventuelles propri<00>t<00>s.</p>
<h5>Propri<00>t<00> : PNJ</h5>
<p>Choisissez l'ID du PNJ, compris entre 0 et 42, puis cliquez sur <00>Appliquer<00>. Si vous avez plusieurs PNJs, ils devront partager le m<00>me ID. Il est donc pr<00>f<00>rable d'<00>viter ce cas de figure, sauf si ces derniers sont des PNJs lambda.</p>
<h5>Propr. : Bouton/m<00>canismes</h5>
<p>/!\ Fonction non impl<00>ment<00>e <00> ce programme. Il peut y avoir jusqu'<00> 10 boutons aux effets diff<00>rents dans une zone. Pour qu'un tile soit d<00>plac<00> par l'effet d'un bouton, ajoutez "{" suivi de l'indice du bouton (1 <00> 9) apr<00>s le tile en question dans le code compress<00>. Faites de m<00>me pour attribuer un indice <00> un bouton (tile n<00>6), autrement il ne fonctionnera pas.</p>
<h5>Propri<00>t<00> : Warp</h5>
<p>Choississez respectivement les valeurs I (Abscisse mondiale du joueur) et J (Ordonn<00>e mondiale) qui seront transmises au joueur s'il marche sur le Warp (tile n<00>A). Ne cliquez sur <00>Appliquer<00> qu'une seule fois !</p>
<h4>Messages d'erreur</h4>
<p style="margin-bottom: 40px;">En cas d'erreur effectant le code de la map, un message en rouge s'affichera pour pr<00>ciser l'erreur. Cliquez dessus pour le faire dispara<00>tre.</p>
</div>
<div class="text-block">
<h2>AVENTURA : G<00>n<00>rateur de maps</h2>
<p>R<00>sultat :</p>
<pre>000000000000000000000000000000000000000000000000000000000000000000</pre>
<pre>!<21>X!<21>X</pre>
<p id="debug" style="color: red; font-weight: bold; background-color: background-color: #5036e2;;" onclick="this.innerHTML='';"></p>
</div>
<img src="TILESET NEW.png" hidden="true">
<div class="box">
<div class="putain" style="position: relative;">
<div id="selector" style="background-color: rgba(30,20,60,0.3); position: absolute;"></div>
<canvas id="TileSet" width="110" height="70" style="border:1px solid #262729;">
</canvas>
</div>
<canvas id="tile" width="10" height="10" style="border:1px solid #262729;" >
</canvas>
<div class="box" style=" display: flex; flex-wrap: wrap; justify-content: center;">
<select onchange="change()" title="S<00>lectionner le terrain">
<option value="0">Normal</option>
<option value="1">Donjon/Int<00>rieur</option>
</select>
<button onclick="change()">Effacer</button>
<button onclick="zip()">Compresser</button>
<!-- <button onclick="cleanse()">Nettoyer</button> -->
<button onclick="help()">Aide rapide</button>
<button onclick="scrnSht()">Donn<00>es d'image</button>
<select onchange="editionMode(this.value)" title="Mode d'<00>dition" style="margin-top: 5px;" value="0">
<option value="0">Dessin de Tile</option>
<option value="1">Propri<00>t<00> : PNJ</option>
<option value="2">Propr. : Bouton/m<00>canismes</option>
<option value="3">Propri<00>t<00> : Warp</option>
</select>
<div id="controller" style="margin-top: 5px;"></div>
</div>
<canvas class="Map FL" width="128" height="64">
</canvas>
</div>
<input type="text" id="voidText" style="width: 80%; margin-left: 10%;">
<img src="PICT6.png" id="castleBG" hidden="true">
<pre><span style="color: grey; font-size: 8">Par <a href="https://www.planet-casio.com/Fr/compte/voir_profil.php?membre=Drak">Drak</a> ; 08/2018. Compatible avec les versions -0,22 et plus r<00>centes du jeu. <a href="https://git.planet-casio.com/Drak/Le_Royaume_Poudingue">Acc<00>der au d<00>p<00>t Git.</a><br>En cas de probl<00>me, de remarque ou de suggestion, <a href="https://www.planet-casio.com/Fr/compte/message.php?dest=Drak">contactez-moi.</a></span></pre>
<script type="text/javascript">
var tileSet = document.getElementById('TileSet');
var tileSetCtx = tileSet.getContext("2d");
var tile = document.getElementById('tile');
var tileCtx = tile.getContext("2d");
var mapFl = document.getElementsByClassName('FL')[0];
var flCtx = mapFl.getContext("2d");
var select = document.getElementById('selector');
var img = document.getElementsByTagName("img")[0];
var str = document.getElementsByTagName("pre")[0];
var strZip = document.getElementsByTagName("pre")[1];
var indexes = "<22>c123456789A00000000000BCDEFGHIJKL00000000000MNOPQRSTUVW00000000000XYZabcdefg<03>";
var debug = document.getElementsByTagName("p")[0];
window.onload = function() {tileSetCtx.drawImage(img,0,0);}
var xClip = 0;var yClip = 0;
tileSet.onclick = function(event) {
var tPos = tileSet.getBoundingClientRect();
xClip = 30*Math.floor((event.clientX-tPos.left)/30);
yClip = 30*Math.floor((event.clientY-tPos.top)/30);
console.log( xClip +" and " + yClip );
select.style.left = (xClip+1) +"px";
select.style.top = (yClip+1) +"px";
xClip = Math.round((xClip)/3);
yClip = Math.round((yClip)/3);
tileCtx.clearRect(0,0,10,10);
tileCtx.drawImage(img,xClip,yClip,10,10,0,0,10,10);
}
mapFl.onclick = function(event) {
var mPos = mapFl.getBoundingClientRect();
var myX = 10*Math.round((event.clientX-20-mPos.left)/40);
var myY = 10*Math.round((event.clientY-20-mPos.top)/40);
var char = indexes.charAt(11*(60-yClip)/10 +xClip/10);
console.log(myX + ", " + myY + " char : " + char);
var pos = myX / 10 + 11*(5-myY/10);
str.innerHTML = str.innerHTML.substr(0,pos) + char + str.innerHTML.substring(pos+1);
if (str.innerHTML.length > 66) {str.innerHTML = str.innerHTML.substr(0,66);}
flCtx.clearRect(2+myX,2+myY,10,10);
flCtx.drawImage(img,xClip,yClip,10,10,2+myX,2+myY,10,10);
}
function scrnSht() {
var screenShot = flCtx.getImageData(2,2,110,60);
console.log(screenShot);
var write = document.getElementById('voidText');
var carotteMalade = "";
for (var i=3; i<screenShot.data.length; i+=4) {
if (screenShot.data[i]==0 || screenShot.data[i-1]>0) {carotteMalade+="1";}
else {carotteMalade+="0";}
}
write.value = carotteMalade;
write.select();
document.execCommand('copy');
}
function zip() {
var char;
strZip.innerHTML = "";
var i=-1, hideux=0;
do {
i++
char = str.innerHTML.charAt(i)
if (char == "0" && hideux < 33 && i<66) {
hideux ++;
} else if (hideux > 0) {
strZip.innerHTML +="!<21>" + "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefgh".charAt(hideux);
console.log(hideux);
hideux=0;
i--;
continue;
}
if (hideux == 0){
strZip.innerHTML += char;
}
} while (i<66)
strZip.innerHTML=strZip.innerHTML.replace(/!<21>1/g, "0");
strZip.innerHTML=strZip.innerHTML.replace(/!<21>2/g, "00");
strZip.innerHTML=strZip.innerHTML.replace(/<2F>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c/g, "*6");
strZip.innerHTML=strZip.innerHTML.replace(/<2F>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c/g, "*5");
strZip.innerHTML=strZip.innerHTML.replace(/<2F>c<EFBFBD>c<EFBFBD>c<EFBFBD>c/g, "*4");
strZip.innerHTML=strZip.innerHTML.replace(/<2F>c<EFBFBD>c<EFBFBD>c/g, "*3");
}
function cleanse() {
for (var i=0; i<66 ; i++) {
if (str.innerHTML.charAt(i)=="0") {
flCtx.clearRect(2+10*(i%11),2+10*(5-Math.floor(i/11)),10,10);
}
flCtx.clearRect(112,0,15,64);
flCtx.clearRect(0,0,128,2);
flCtx.clearRect(0,0,2,64);
flCtx.clearRect(0,62,128,2);
}
if (str.innerHTML.charAt(0) === "<03>") {
flCtx.drawImage(document.getElementById('castleBG'),0,0);
}
}
function change() {
var what = document.getElementsByTagName("select")[0].value;
flCtx.clearRect(0,0,128,64);
if (what == 1) {
str.innerHTML = "<03><>c<EFBFBD>c<EFBFBD>c<EFBFBD>c0<>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c000000000<>c<EFBFBD>c000000000<>c00000000000<>c000000000<>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c0<>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c";
mapFl.style.backgroundImage = "url('PICT6.png')";
/*flCtx.drawImage(document.getElementById('castleBG'),0,0);*/
console.log(flCtx.getImageData(0,0,3,3));
} else {
str.innerHTML = "000000000000000000000000000000000000000000000000000000000000000000"
mapFl.style.backgroundImage = "url('PICT5.png')";
}
}
function help() {
var nav = document.getElementsByClassName('sideNav')[0];
console.log(window.getComputedStyle(nav,null).getPropertyValue("width"));
if (window.getComputedStyle(nav,null).getPropertyValue("width") == "0px") {
nav.style.width = "375px";
} else {
nav.style.width = "0px";
}
}
function editionMode(lol) {
var cont = document.getElementById('controller');
switch(lol) {
case "1":
cont.innerHTML = '<input type="number" title="Id PNJ" min="1" max="42" value="1"><button onclick="appliquer('+lol+')">Appliquer</button>';
break;
case "2":
cont.innerHTML = '<input type="number" title="Num<00>ro de bouton" min="1" max="9" value="1"><button onclick="appliquer('+lol+')">Appliquer</button>';
break;
case "3":
cont.innerHTML = '<input type="number" title="Abscisse Warp" min="0" max="42" value="1"><input type="number" title="Ordonn<00>e Warp" min="0" max="42" value="1"><button onclick="appliquer('+lol+')">Appliquer</button>'
break;
default :
cont.innerHTML = 'Mode Dessin';
}
}
function debugOutput(message) {
if (message.search("<") == -1 && message.search(";") == -1) {
document.getElementById('debug').innerHTML = message; }
else {console.log("Erreur : le message <00> afficher est invalide.");}
}
function appliquer(lol) {
console.log(lol);
var cont = document.getElementById('controller');
var myVal = cont.getElementsByTagName('input')[0].value; var i; var littleChar; var bigStr = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg";
switch(lol) {
case 1 :
if (strZip.innerHTML.search("\\(") == -1) {
for (i = 0; i<5; i++) {
littleChar = "abcde".charAt(i);
strZip.innerHTML = strZip.innerHTML.replace(littleChar, littleChar + "(" + bigStr.charAt(myVal) );
}
} else {
debugOutput("Attention : l'Id de PNJ a d<00>j<00> <00>t<00> attribu<00>. Pour changer l'Id du PNJ, compressez <00> nouveau puis r<00>appliquez la propri<00>t<00>.");
}
break
case 2 :
debugOutput("Fonction non impl<00>ment<00>e. Pour attribuer une propri<00>t<00> <00> un tile, rajoutez <00>{<00> suivi de l'indice du m<00>canisme (de 1 <00> 9) dans le code. Plus d'info dans <00>Aide rapide<00>");
case 3 :
littleChar = bigStr.charAt(cont.getElementsByTagName('input')[1].value);
strZip.innerHTML = strZip.innerHTML.replace(/A/g, "A" + bigStr.charAt(myVal) + littleChar );
break
default :
debug("L'application ne s'est pas effectu<00>e. Veuillez contacter le guignol qui a cod<00> ce truc avec son cul.");
}
}
editionMode("0");
</script>
</body>
</html>