PlaneteCasio
/
Le_Royaume_Poudingue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Le_Royaume_Poudingue/Development Tools/WorldMapEditor.html

814 lines
72 KiB
HTML
Raw Permalink Normal View History

WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
<EFBFBD><EFBFBD><!DOCTYPE html>
<html>
<head>
<title>Map</title>
<style type="text/css">
body{
font-family: courier new;
background-color: #eff5df;
color: #eff5df;
}
.sideNav {
height: 100%;
width: 300px;
margin-left: -20px;
position: fixed;
z-index: 2;
top: 0; left: 100%;
overflow-x: hidden;
padding: 0 20px 0 20px;
transition: 0.5s;
background-color: rgba(20,10,60,0.8);
color: #eff5df;
text-decoration: none;
}
.sideNav textarea, button, input {
margin: 15px 10px;
display: block;
width: 240px;
}
.sideNav h3, .sideNav a, .sideNav h5, .sideNav h4, .sideNav p { font-family: inherit; color: #eff5df; position: relative;}
.sideNav h3, h5, h4 { text-align: center; margin: 5px 0 0 -20px; width: 100%; position: relative;}
.sideNav .closebtn {
text-decoration: none;
font-size: 25px;
font-weight: bold;
position: relative;
top: 0px;
left: 0px;
}
.sideNav input[type=number] {
text-align: center;
}
.left-bar {margin-left: -340px;left: 0px;}
.left-bar .closebtn {left: 270px;}
.giant-box {
position: absolute;
top: 50px; left: 0;
margin: 0;
}
.giant-box::after {
content: "Message subliminal ! *-*";
opacity: 0;
height: 20px; margin: 0; padding: 0;
}
.giant-box #selecteur {
height: 2%;
width: 2%;
position: relative;
border: 4px dashed #d52a6c;
margin: -4px 0 0 -4px;
transition: 0.3s;
background-color: rgba(20,10,60,0.1);
top: 0; left: 0;
}
canvas ,.grillade{
image-rendering: -moz-crisp-edges;
width: 550px;
height: 300px; position: absolute;
}
.grillade {
background-image: url('Grille.png');
background-color: rgba(0,0,0,0);
background-size: 2%;
position: absolute;
margin: 4px;
transition: 0.75s;
opacity: 0.8;
}
.icon-bar {
top: 0; left: 0;
width: 100vw;
height: 50px;
background-color: #5036e2;
position: fixed;
z-index: 3;
display: inline-flex;
flex-wrap: nowrap;
}
.icon-bar .box {height: 50px; width: 16.6vw;}
.icon-bar a {
/*float: left;*/
font-size: 45px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.icon-bar svg { transition: 0.3s; }
.icon-bar .planet-casio {
background-color: rgb(30,18,70);
}
.icon-bar svg:hover {
background-color: rgba(20,20,0,0.8);
}
.icon-bar div {
pointer-events: none;
color: #eff5df;
font-size: 18px;
background-color: rgba(20,10,30,0.9);
width: 14vw;
margin-left: 1vw;
padding: 5px;
border-radius: 5px;
transition: 0.25s;
opacity: 0;
}
.console-output {
background-color: rgb(30,18,70);
position: fixed;
height: 20px; top: 100%; width: 100%; left: 0;
margin: -20px 0 0 0;
overflow: hidden;
font-size: 12px;
color: inherit; padding: 0; z-index: 2;
}
.console-output p {
margin: 4px 0 0 5px;
}
#copyCode {
position: absolute;
top: 50px;
background-color: black;
z-index: -2;
opacity: 0;
transition: 0.8s;
left: 5%;
width: 90%;
padding: 10px;
}
</style>
</head>
<body>
<div class="icon-bar">
<a onmouseover="hoverMenu(this, true)" onmouseout="hoverMenu(this, false)" href="https://www.planet-casio.com/Fr/forums/topic14452-1-Projet-de-RPG...-en-BASIC-!.html" target="_blank">
<svg class="box planet-casio" viewBox="0 0 800 800">
<path fill="#eff5df" stroke="#eff5df" stroke-width="4" d="M 112.00,385.00
C 112.00,385.00 117.21,358.00 117.21,358.00
117.21,358.00 105.52,328.00 105.52,328.00
97.61,304.50 90.04,276.90 90.00,252.00
89.96,225.88 91.15,207.35 102.31,183.00
120.10,144.18 155.37,122.73 196.00,114.60
205.50,112.70 215.29,111.12 225.00,111.00
225.00,111.00 250.00,111.00 250.00,111.00
250.00,111.00 262.00,111.91 262.00,111.91
289.66,113.81 316.69,120.73 343.00,129.26
419.37,154.00 495.24,203.79 553.00,259.04
573.79,278.92 593.00,300.40 610.79,323.00
610.79,323.00 635.00,356.00 635.00,356.00
636.71,349.98 636.01,339.58 636.00,333.00
635.99,330.23 636.17,327.61 635.07,325.00
633.09,320.28 617.22,300.96 613.08,296.00
587.83,265.74 563.26,241.46 533.00,216.25
466.48,160.81 379.04,112.17 293.00,97.08
264.41,92.07 247.37,92.96 219.00,93.00
205.03,93.02 187.45,97.03 174.00,100.86
161.64,104.38 145.74,111.36 135.00,118.34
127.18,123.43 116.72,131.32 110.42,138.09
91.76,158.16 81.04,179.34 75.34,206.00
73.73,213.54 72.04,220.20 72.00,228.00
72.00,228.00 72.00,261.00 72.00,261.00
72.02,275.78 76.87,295.55 80.53,310.00
85.05,327.87 91.70,345.16 99.14,362.00
102.17,368.85 106.52,380.17 112.00,385.00 Z
M 455.00,140.00
C 458.61,143.90 478.16,157.78 483.00,159.66
483.00,159.66 503.00,164.01 503.00,164.01
510.14,165.59 520.11,168.82 527.00,171.42
558.86,183.44 583.43,200.21 605.84,226.00
616.28,238.01 625.72,253.51 632.30,268.00
666.23,342.70 644.53,430.68 599.97,496.00
582.02,522.31 561.27,544.20 537.00,564.73
519.06,579.89 494.05,596.22 473.00,606.75
473.00,606.75 451.00,616.80 451.00,616.80
446.07,618.79 439.18,620.98 435.00,624.00
438.95,625.74 456.57,632.38 460.00,632.35
463.73,632.32 471.46,628.17 475.00,626.37
475.00,626.37 503.00,611.42 503.00,611.42
543.13,588.40 577.39,556.28 605.79,520.00
631.11,487.66 651.94,444.18 660.66,404.00
660.66,404.00 663.57,391.00 663.57,391.00
663.57,391.00 665.32,377.00 665.32,377.00
666.44,370.28 666.99,371.90 667.00,364.00
667.00,364.00 667.00,331.00 667.00,331.00
666.99,323.70 665.27,316.22 664.08,309.00
658.86,277.42 645.77,247.65 626.73,222.00
617.26,209.25 601.66,193.74 589.00,184.13
572.14,171.33 552.00,160.35 532.00,153.34
514.24,147.13 484.65,140.03 466.00,140.00
466.00,140.00 455.00,140.00 455.00,140.00 Z
M 381.00,656.00
C 378.28,651.77 369.70,649.10 365.00,646.75
360.97,644.74 354.28,641.23 350.00,640.19
350.00,640.19 330.00,640.19 330.00,640.19
330.00,640.19 298.00,636.85 298.00,636.85
298.00,636.85 281.00,633.13 281.00,633.13
246.25,624.69 213.23,607.77 188.09,581.96
175.48,569.02 164.87,554.03 156.58,538.00
118.38,464.19 137.08,373.96 181.08,307.00
201.69,275.63 229.17,246.63 259.00,223.88
283.27,205.38 313.41,188.22 342.00,177.42
342.00,177.42 368.00,168.74 368.00,168.74
368.00,168.74 389.00,163.00 389.00,163.00
384.52,159.44 379.10,157.75 374.00,155.24
371.14,153.84 367.17,151.50 364.00,151.39
361.22,151.30 352.98,154.02 350.00,155.00
350.00,155.00 320.00,166.58 320.00,166.58
267.36,189.47 222.98,223.94 186.28,268.00
158.84,300.96 138.04,341.76 126.58,383.00
123.19,395.18 118.15,419.70 118.00,432.00
118.00,432.00 118.00,466.00 118.00,466.00
118.04,492.29 130.09,529.05 142.70,552.00
149.92,565.15 159.54,579.26 170.01,590.00
183.66,603.98 196.22,615.17 213.00,625.39
235.15,638.87 258.82,647.27 284.00,652.88
293.99,655.11 308.94,657.98 319.00,658.00
319.00,658.00 358.00,658.00 358.00,658.00
358.00,658.00 381.00,656.00 381.00,656.00 Z
M 254.00,444.00
C 254.00,444.00 317.00,444.00 317.00,444.00
317.00,444.00 317.00,358.00 317.00,358.00
317.00,358.00 408.00,358.00 408.00,358.00
417.80,357.98 435.91,355.33 440.15,345.00
441.15,342.56 440.99,339.60 441.00,337.00
441.00,337.00 441.00,256.00 441.00,256.00
441.00,253.56 441.13,250.27 440.26,248.00
436.71,238.73 421.93,235.11 413.00,235.00
413.00,235.00 269.00,235.00 269.00,235.00
262.77,235.01 258.17,235.74 255.02,242.00
253.55,244.93 254.00,251.55 254.00,255.00
254.00,255.00 254.00,284.00 254.00,284.00
254.00,284.00 254.00,444.00 254.00,444.00 Z
M 378.00,271.00
C 378.00,271.00 378.00,322.00 378.00,322.00
378.00,322.00 317.00,322.00 317.00,322.00
317.00,322.00 317.00,271.00 317.00,271.00
317.00,271.00 378.00,271.00 378.00,271.00 Z
M 533.00,499.00
C 533.00,499.00 472.00,499.00 472.00,499.00
472.00,499.00 472.00,532.00 472.00,532.00
472.00,532.00 412.00,532.00 412.00,532.00
412.00,532.00 412.00,403.00 412.00,403.00
412.00,403.00 472.00,403.00 472.00,403.00
472.00,403.00 472.00,435.00 472.00,435.00
472.00,435.00 533.00,435.00 533.00,435.00
533.00,435.00 533.00,389.00 533.00,389.00
533.00,386.57 533.13,383.26 532.26,381.00
528.98,372.50 515.20,369.10 507.00,369.00
507.00,369.00 379.00,369.00 379.00,369.00
370.08,369.01 356.98,371.20 352.45,380.01
350.81,383.21 351.01,386.53 351.00,390.00
351.00,390.00 351.00,545.00 351.00,545.00
351.01,548.35 350.81,551.86 352.45,554.91
356.97,563.29 371.32,565.96 380.00,566.00
380.00,566.00 434.00,566.00 434.00,566.00
434.00,566.00 503.00,566.00 503.00,566.00
511.88,565.99 526.97,563.67 531.55,554.96
533.19,551.84 532.99,548.41 533.00,545.00
533.00,545.00 533.00,499.00 533.00,499.00 Z
M 676.00,393.00
C 676.00,393.00 673.01,421.00 673.01,421.00
672.76,432.14 679.28,443.28 682.57,454.00
688.34,472.84 694.77,500.41 695.00,520.00
695.33,548.65 691.47,574.91 676.55,600.00
657.46,632.09 626.39,648.99 591.00,656.88
581.97,658.90 570.21,660.89 561.00,661.00
561.00,661.00 533.00,661.00 533.00,661.00
505.53,660.96 467.17,651.24 441.00,642.51
369.91,618.82 305.15,577.94 249.00,528.72
224.37,507.13 201.99,483.16 181.08,458.00
181.08,458.00 163.37,435.00 163.37,435.00
160.23,430.80 157.66,425.61 153.00,423.00
152.78,427.84 150.56,445.74 151.51,449.00
152.90,453.79 165.97,469.27 169.80,474.00
187.61,495.98 207.49,515.66 228.00,535.03
264.15,569.19 309.27,600.61 353.00,624.31
395.67,647.44 442.09,665.92 490.00,674.58
490.00,674.58 526.00,679.00 526.00,679.00
526.00,679.00 566.00,679.00 566.00,679.00
579.22,678.98 595.20,675.26 608.00,671.88
621.02,668.44 635.57,662.44 647.00,655.32
659.04,647.81 668.28,640.62 677.83,630.00
696.05,609.76 706.56,584.62 711.08,558.00
712.38,550.38 712.99,550.16 713.00,542.00
713.00,542.00 713.00,512.00 713.00,512.00
712.98,499.30 707.42,473.61 703.86,461.00
698.86,443.28 694.51,431.92 687.60,415.00
685.02,408.69 680.81,397.52 676.00,393.00 Z" />
</svg>
<div>Plan<00>te Casio</div>
</a>
<a href="https://git.planet-casio.com/Drak/Le_Royaume_Poudingue" onmouseover="hoverMenu(this, true)" onmouseout="hoverMenu(this, false)" target="_blank">
<svg class="box" style="padding: 5px 0; height:40px;" viewBox="0 0 36 36">
<path fill="#b3d194" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"></path>
<path fill="#b3d194" d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"></path>
<path fill="#b3d194" d="M18,34.38 3,14 33,14 Z"></path>
<path fill="#d8e6b3" d="M18,34.38 11.38,14 2,14 6,25Z"></path>
<path fill="#d8e6b3" d="M18,34.38 24.62,14 34,14 30,25Z"></path>
<path fill="#eff5df" d="M2 14L.1 20.16c-.18.565 0 1.2.5 1.56l17.42 12.66z"></path>
<path fill="#eff5df" d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"></path>
</svg>
<div>D<00>p<00>t Git</div>
</a>
<a onmouseover="hoverMenu(this, true)" onmouseout="hoverMenu(this, false)" href="MapGenerator.html" target="_blank">
<svg class="box" style="padding: 5px 0; height:40px;" viewBox="0 0 100 100">
<path fill="#eff5df" stroke="#eff5df"
stroke-width="0"
d="M 40.00,0.00
C 40.00,0.00 40.00,10.00 40.00,10.00
40.00,10.00 30.00,10.00 30.00,10.00
30.00,10.00 30.00,20.00 30.00,20.00
30.00,20.00 20.00,20.00 20.00,20.00
20.00,20.00 20.00,30.00 20.00,30.00
20.00,30.00 10.00,30.00 10.00,30.00
10.00,30.00 10.00,100.00 10.00,100.00
10.00,100.00 90.00,100.00 90.00,100.00
90.00,100.00 90.00,30.00 90.00,30.00
90.00,30.00 80.00,30.00 80.00,30.00
80.00,30.00 80.00,20.00 80.00,20.00
80.00,20.00 70.00,20.00 70.00,20.00
70.00,20.00 70.00,10.00 70.00,10.00
70.00,10.00 60.00,10.00 60.00,10.00
60.00,10.00 60.00,0.00 60.00,0.00
60.00,0.00 40.00,0.00 40.00,0.00 Z
M 60.00,10.00
C 60.00,10.00 60.00,20.00 60.00,20.00
60.00,20.00 70.00,20.00 70.00,20.00
70.00,20.00 70.00,30.00 70.00,30.00
70.00,30.00 80.00,30.00 80.00,30.00
80.00,30.00 80.00,90.00 80.00,90.00
80.00,90.00 60.00,90.00 60.00,90.00
60.00,90.00 60.00,50.00 60.00,50.00
60.00,50.00 70.00,50.00 70.00,50.00
70.00,50.00 70.00,40.00 70.00,40.00
70.00,40.00 30.00,40.00 30.00,40.00
30.00,40.00 30.00,50.00 30.00,50.00
30.00,50.00 40.00,50.00 40.00,50.00
40.00,50.00 40.00,90.00 40.00,90.00
40.00,90.00 20.00,90.00 20.00,90.00
20.00,90.00 20.00,30.00 20.00,30.00
20.00,30.00 30.00,30.00 30.00,30.00
30.00,30.00 30.00,20.00 30.00,20.00
30.00,20.00 40.00,20.00 40.00,20.00
40.00,20.00 40.00,10.00 40.00,10.00
40.00,10.00 60.00,10.00 60.00,10.00 Z" />
</svg>
<div>G<00>n<00>rateur de map</div>
</a>
<a onmouseover="hoverMenu(this, true)" onmouseout="hoverMenu(this, false)" href="javascript:void(0)" onclick="save(megaMap)">
<svg class="box" style="padding: 5px 0; height:40px;" viewBox="0 0 100 100">
<path fill="#eff5df" stroke="black" stroke-width="0"
d="M 20.00,0.00
C 20.00,0.00 20.00,70.00 20.00,70.00
20.00,70.00 10.00,70.00 10.00,70.00
10.00,70.00 10.00,80.00 10.00,80.00
10.00,80.00 20.00,80.00 20.00,80.00
20.00,80.00 20.00,90.00 20.00,90.00
20.00,90.00 10.00,90.00 10.00,90.00
10.00,90.00 10.00,100.00 10.00,100.00
10.00,100.00 90.00,100.00 90.00,100.00
90.00,100.00 90.00,90.00 90.00,90.00
90.00,90.00 80.00,90.00 80.00,90.00
80.00,90.00 80.00,80.00 80.00,80.00
80.00,80.00 90.00,80.00 90.00,80.00
90.00,80.00 90.00,70.00 90.00,70.00
90.00,70.00 80.00,70.00 80.00,70.00
80.00,70.00 80.00,0.00 80.00,0.00
80.00,0.00 20.00,0.00 20.00,0.00 Z
M 70.00,10.00
C 70.00,10.00 70.00,20.00 70.00,20.00
70.00,20.00 40.00,20.00 40.00,20.00
40.00,20.00 40.00,30.00 40.00,30.00
40.00,30.00 70.00,30.00 70.00,30.00
70.00,30.00 70.00,40.00 70.00,40.00
70.00,40.00 60.00,40.00 60.00,40.00
60.00,40.00 60.00,50.00 60.00,50.00
60.00,50.00 70.00,50.00 70.00,50.00
70.00,50.00 70.00,60.00 70.00,60.00
70.00,60.00 60.00,60.00 60.00,60.00
60.00,60.00 60.00,70.00 60.00,70.00
60.00,70.00 70.00,70.00 70.00,70.00
70.00,70.00 70.00,80.00 70.00,80.00
70.00,80.00 30.00,80.00 30.00,80.00
30.00,80.00 30.00,10.00 30.00,10.00
30.00,10.00 70.00,10.00 70.00,10.00 Z
M 40.00,40.00
C 40.00,40.00 40.00,50.00 40.00,50.00
40.00,50.00 50.00,50.00 50.00,50.00
50.00,50.00 50.00,40.00 50.00,40.00
50.00,40.00 40.00,40.00 40.00,40.00 Z
M 40.00,60.00
C 40.00,60.00 40.00,70.00 40.00,70.00
40.00,70.00 50.00,70.00 50.00,70.00
50.00,70.00 50.00,60.00 50.00,60.00
50.00,60.00 40.00,60.00 40.00,60.00 Z" />
</svg>
<div>Sauvegarder</div>
</a>
<a onmouseover="hoverMenu(this, true)" onmouseout="hoverMenu(this, false)" href="javascript:openClose(2, 1)">
<svg class="box" style="padding: 5px 0; height:40px;" viewBox="0 0 100 100">
<path fill="#eff5df" stroke="#eff5df" stroke-width="0"
d="M 20.00,20.00
C 20.00,20.00 20.00,30.00 20.00,30.00
20.00,30.00 10.00,30.00 10.00,30.00
10.00,30.00 10.00,40.00 10.00,40.00
10.00,40.00 20.00,40.00 20.00,40.00
20.00,40.00 20.00,30.00 20.00,30.00
20.00,30.00 30.00,30.00 30.00,30.00
30.00,30.00 30.00,40.00 30.00,40.00
30.00,40.00 40.00,40.00 40.00,40.00
40.00,40.00 40.00,70.00 40.00,70.00
40.00,70.00 10.00,70.00 10.00,70.00
10.00,70.00 10.00,80.00 10.00,80.00
10.00,80.00 20.00,80.00 20.00,80.00
20.00,80.00 20.00,90.00 20.00,90.00
20.00,90.00 10.00,90.00 10.00,90.00
10.00,90.00 10.00,100.00 10.00,100.00
10.00,100.00 90.00,100.00 90.00,100.00
90.00,100.00 90.00,90.00 90.00,90.00
90.00,90.00 80.00,90.00 80.00,90.00
80.00,90.00 80.00,80.00 80.00,80.00
80.00,80.00 90.00,80.00 90.00,80.00
90.00,80.00 90.00,70.00 90.00,70.00
90.00,70.00 60.00,70.00 60.00,70.00
60.00,70.00 60.00,40.00 60.00,40.00
60.00,40.00 70.00,40.00 70.00,40.00
70.00,40.00 70.00,30.00 70.00,30.00
70.00,30.00 80.00,30.00 80.00,30.00
80.00,30.00 80.00,40.00 80.00,40.00
80.00,40.00 90.00,40.00 90.00,40.00
90.00,40.00 90.00,30.00 90.00,30.00
90.00,30.00 80.00,30.00 80.00,30.00
80.00,30.00 80.00,20.00 80.00,20.00
80.00,20.00 70.00,20.00 70.00,20.00
70.00,20.00 70.00,30.00 70.00,30.00
70.00,30.00 60.00,30.00 60.00,30.00
60.00,30.00 60.00,40.00 60.00,40.00
60.00,40.00 40.00,40.00 40.00,40.00
40.00,40.00 40.00,30.00 40.00,30.00
40.00,30.00 30.00,30.00 30.00,30.00
30.00,30.00 30.00,20.00 30.00,20.00
30.00,20.00 20.00,20.00 20.00,20.00 Z" />
</svg>
<div>Aide rapide</div>
</a>
<a onmouseover="hoverMenu(this, true)" onmouseout="hoverMenu(this, false)" href="javascript:openClose(2, 0)">
<svg class="box" style="padding: 5px 0; height:40px" viewBox="0 0 100 100">
<path fill="#eff5df" stroke="#eff5df" stroke-width="0"
d="M 0.00,0.00
C 0.00,0.00 0.00,100.00 0.00,100.00
0.00,100.00 100.00,100.00 100.00,100.00
100.00,100.00 100.00,0.00 100.00,0.00
100.00,0.00 0.00,0.00 0.00,0.00 Z
M 90.00,10.00
C 90.00,10.00 90.00,90.00 90.00,90.00
90.00,90.00 70.00,90.00 70.00,90.00
70.00,90.00 70.00,10.00 70.00,10.00
70.00,10.00 90.00,10.00 90.00,10.00 Z
M 60.00,30.00
C 60.00,30.00 60.00,90.00 60.00,90.00
60.00,90.00 40.00,90.00 40.00,90.00
40.00,90.00 40.00,30.00 40.00,30.00
40.00,30.00 60.00,30.00 60.00,30.00 Z
M 30.00,50.00
C 30.00,50.00 30.00,90.00 30.00,90.00
30.00,90.00 10.00,90.00 10.00,90.00
10.00,90.00 10.00,50.00 10.00,50.00
10.00,50.00 30.00,50.00 30.00,50.00 Z" />
</svg>
<div><00>diter</div>
</a>
</div>
<div class="sideNav" onclick="openClose(true, 0)">
<div style="padding: 40px;"></div>
<a href="javascript:openClose(false, 0)" class="closebtn"><00></a>
<h3 style="text-decoration: underline;">Ajouter une map :</h3>
<h5>Donn<00>es brutes</h5>
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
<textarea id="unzip-text" placeholder="000000100Ba60000..." title="Donn<00>es brutes. Exemple : 0000e00063[...]15000" value="0"></textarea>
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
<h5>Donn<00>es compress<00>es</h5>
<textarea id="zip-text" placeholder="!<21>2A11!<21>42!<21>82!<21>64!<21>F4!<21>A11c(0..." title="Donn<00>es compress<00>es. Exemple : !<21>2A11!<21>42!<21>82!<21>64!<21>F4!<21>A11c(0!<21>82!<21>51"></textarea>
<h5>Donn<00>es d'image</h5>
<input id="image-data" placeholder="111111111111111000011111..." type="text" title="Donn<00>es de dessin">
<h5>Abscisse  I</h5>
<input id="abs" type="number" title="I (Abscisse)" min="1" max="50" value="2">
<h5>Ordonn<00>e  J</h5>
<input id="ord" type="number" title="J (Ordonn<00>e)" min="1" max="50" value="11">
<h5><00>tage/sous-sol  K</h5>
<input id="cot" type="number" title="K (Cote, <00>tage ou sous-sol)" min="-9" max="9" value="0" onchange="drawAll()">
<h5>Zoom</h5>
<input id="superDuperZoomer" type="range" title="Zoom : 0.5" min="0.1" max="4" step="0.05" value="0.5" onchange="zoom(this.value)">
<button onclick="megaMap.push(submit());drawAll();">Valider la map</button>
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
<button onclick="effacer();drawAll();">Vider la map</button>
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
<button onclick="writeCode();var cc = document.getElementById('copyCode');cc.style.zIndex='5';cc.style.opacity='1';">G<00>N<00>RER LE PUTAIN DE CODE !</button>
<!-- <input type="file" name="save" multiple> -->
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
<button onclick="if (confirm('Cette action est irr<00>versible. Tout supprimer ?')){ megaMap = new Array(); wMapCtx.clearRect(0,0,5500,3000);localStorage.removeItem('sauvegarde'); myConsole.innerHTML = 'Mappemonde r<00>initialis<00>e.';drawAll();}">R<00>initialiser</button>
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
</div>
<div class="sideNav left-bar">
<div style="padding: 40px;"></div>
<a href="javascript:openClose(2, 1)" class="closebtn"><00></a>
<h3 style="text-decoration: underline;">Guide rapide</h3>
<p>Ce programme est compl<00>mentaire au <a href="MapGenerator.html" target="_blank">G<00>n<00>rateur de Map</a>. Ces deux outils ont <00>t<00> con<00>us conjointement pour fabriquer ais<00>ment des Maps <00> destination du jeu <a href="https://www.planet-casio.com/Fr/forums/topic14452-1-Projet-de-RPG...-en-BASIC-!.html" target="_blank">Aventura, le Royaume Poudingue</a>.</p>
<h4><00>diter</h4>
<p>Pour faire appara<00>tre ou r<00>duire le menu d'<00>dition, cliquez sur le dernier ic<00>ne dans le menu en haut de l'<00>cran. Vous devez, au pr<00>alable, avoir <00>dit<00> une premi<00>re map avec le G<00>n<00>rateur de Map.</p>
<p>Rentrez respectivement dans les cases les donn<00>es suivantes en Copiant/Collant<00>: <ol><li>Les donn<00>es <00>brutes<00> de la Map, qui correspondent <00> la premi<00>re cha<00>ne de caract<00>re dans le cadre <00>r<00>sultat<00> du G<00>n<00>rateur de Map.</li><li>Les donn<00>es compress<00>es de la map, qui correspondent <00> la cha<00>ne de caract<00>re g<00>n<00>r<00>e en cliquant sur <00>Compresser<00>.</li><li>Les donn<00>es d'image, qui servent <00> faire appara<00>tre la map sur le canvas de ce programme. Cliquez sur <00>Donn<00>es d'image<00> pour les obtenir. Elle sera alors automatiquement enregistr<00>e dans votre presse-papier.</li></ol></p>
<p>En r<00>glant le zoom <00> votre guise et en cliquant sur une case, vous pourrez facilement choisir les coordonn<00>es (I,J,K) de votre Map. Vous pouvez <00>galement r<00>gler ces param<00>tres manuellement.</p>
<p>Une fois que vous avez rentr<00> les donn<00>es comme il se doit, cliquez sur "Valider la map". Cette derni<00>re sera enregistr<00>e et dessin<00>e.</p>
<h4>Effacer des maps</h4>
<p>Il se peut que, par inadvertance, vous ayez rentr<00> de mauvaises donn<00>es au mauvais en droit. Pour effacer une map, cliquez sur celle-ci dans le canvas puis, dans la barre d'<00>dition, cliquez sur <00>Vider la map<00> et confirmez votre choix.</p>
<p>Si vous n'avez plus besoin de votre mappemonde ou que vous souhaitez tout recommencer, cliquez sur <00>R<00>initialiser<00>. Les donn<00>es actuelles seront effac<00>es, ainsi que votre sauvegarde.</p>
<h4>Sauvegarder</h4>
<p>Pour sauvegarder votre mappemonde dans son <00>tat actuel, cliquez sur l'ic<00>ne <00>Sauvegarder<00>. Votre sauvegarde sera r<00>cup<00>r<00>e automatiquement lorsque la page sera <00> nouveau charg<00>e. Lorsque vous effectuez votre sauvegarde, le programme vous indiquera la taille estim<00>e du code <00> g<00>n<00>rer en bas de l'<00>cran. Partez du principe que la taille r<00>elle sera toujours plus lourde de quelques octets.</p>
<p>La sauvegarde se trouvera dans votre <a href="https://www.w3schools.com/jsref/prop_win_localstorage.asp">LocalStorage</a>. Si vous effectuez un nettoyage au niveau de votre navigateur, ou que vous supprimez votre historique, il se peut que vous perdiez votre sauvegarde.</p>
<h4>G<00>n<00>rer le code</h4>
<p>Pour g<00>n<00>rer le code <00> injecter dans le jeu, cliquez sur <00>G<00>n<00>rer le putain de code<00> dans le menu d'<00>dition. Une fen<00>tre appara<00>t alors avec le code <00> copier. Double-cliquez sur cette derni<00>re pour la fermer.</p>
<p>Ce code s'ins<00>re au d<00>but du sous-programme <00>HC<00> dans le jeu. Veillez <00> ne pas faire de doublon.</p>
</div>
<div class="giant-box">
<div class="grillade" style="z-index: 1;">
<div id="selecteur" style="opacity: 1;"></div>
</div>
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
<canvas id="worldMap" width="5500" height="3000" style="border:4px solid #262729;transition: 0.75s;background-color: rgba(0,0,0,0);">
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
</canvas>
<canvas id="background" width="5500" height="3000" style="border:4px solid #262729;transition: 0.75s;left: 0;top: 0px;z-index: -1;"></canvas>
</div>
<img src="PICT6.png" hidden="true">
<div class="console-output">
<p>Par Drak, 08/2018.</p>
</div>
<div id="copyCode" ondblclick="this.style.zIndex='-2';this.style.opacity='0';" style="border-radius: 20px;">
<h4>Copiez/collez le code suivant :</h4>
<h5>Double-cliquez pour fermer cette fen<00>tre.</h5>
<p></p>
</div>
<script type="text/javascript">
var side = document.getElementsByClassName('sideNav')[0];
var unzip = document.getElementById('unzip-text');
var zip = document.getElementById('zip-text');
var imgData = document.getElementById('image-data');
var myX = document.getElementById('abs');
var myY = document.getElementById('ord');
var myZ = document.getElementById('cot');
var zoomer = document.getElementById('superDuperZoomer');
var grille = document.getElementsByClassName('grillade')[0];
var selec = document.getElementById('selecteur');
var worldMap = document.getElementById('worldMap');
var wMapCtx = worldMap.getContext("2d");
var bgMap = document.getElementById('background');
var bgCtx = bgMap.getContext('2d');
var myConsole = document.getElementsByClassName('console-output')[0];
myConsole = myConsole.lastElementChild;
var megaMap = new Array();
var img = document.getElementsByTagName('img')[0];
function Map(j, i, k, unzipStr, zipStr, imageDataStr) {
this.j = j;
this.i = i;
this.k = k;
this.unzipStr = unzipStr;
this.zipStr = zipStr;
this.imageDataStr = imageDataStr;
this.field = function() {
if (this.unzipStr.charAt(0)=="<03>") {
return 1;
} else {return 0;}
}
this.code = function() {return 'I=' + i + ' => "' + zipStr + '" !<21> Str 2';}
}
function writeCode () {
var code = document.getElementById('copyCode').lastElementChild;
var Abs; var Ord; var Cot; var a; var b;
megaMap.sort();
for (a in megaMap) {
megaMap[a].zipStr=megaMap[a].zipStr.replace(/<2F>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c/g, "*6");
megaMap[a].zipStr=megaMap[a].zipStr.replace(/<2F>c<EFBFBD>c<EFBFBD>c<EFBFBD>c<EFBFBD>c/g, "*5");
megaMap[a].zipStr=megaMap[a].zipStr.replace(/<2F>c<EFBFBD>c<EFBFBD>c<EFBFBD>c/g, "*4");
megaMap[a].zipStr=megaMap[a].zipStr.replace(/<2F>c<EFBFBD>c<EFBFBD>c/g, "*3");
}
code.innerHTML ="";
for (Cot = -9; Cot <10; Cot ++) {
code.innerHTML += 'If K = '+ Cot +'<br>Then ';
for (Ord = 1; Ord <=50; Ord++){
for (a in megaMap) {
if (megaMap[a].k == Cot && megaMap[a].j == Ord) {
code.innerHTML += 'If J = ' + Ord + '<br>Then ';
for (Abs = 1; Abs <= 50; Abs ++){
for (b in megaMap) {
if (megaMap[b].k == Cot && megaMap[b].j == Ord && megaMap[b].i == Abs) {
code.innerHTML += 'I = ' + Abs + ' !<21> "' + megaMap[b].zipStr + '" !<21> Str 2<br>'
}
}
}
code.innerHTML += 'IfEnd<br>';
break;
}
}
}
code.innerHTML += 'IfEnd<br>';
code.innerHTML = code.innerHTML.replace('If K = '+ Cot +'<br>Then IfEnd<br>', '');
}
code.innerHTML = code.innerHTML.replace(/!<21>/g, '->');
code.innerHTML = code.innerHTML.replace(/\*/g, '<27>b');
}
function openClose(bool, element) {
if (bool === true) {
/*alors on ouvre*/
document.getElementsByClassName('sideNav')[element].style.marginLeft = (-300 - 40*element)+'px';
}
else if (bool === false){
/*on ferme !*/
document.getElementsByClassName('sideNav')[element].style.marginLeft = (-20 + 20*element) +'px';
}
else {
if (document.getElementsByClassName('sideNav')[element].style.marginLeft === '-20px' || document.getElementsByClassName('sideNav')[element].style.marginLeft === '0px') {
openClose(true, element);
} else { openClose(false, element);}
}
}
grille.onclick = function(event) {
console.log("click !");
var mPos = grille.getBoundingClientRect();
var mWidth = mPos.right-mPos.left;
var mHeight = mPos.bottom-mPos.top;
var absc = Math.round(event.clientX-mPos.left);
var ordo = Math.round(event.clientY-mPos.top);
absc = (100*absc / mWidth) - (100*absc / mWidth)%2
ordo = (100*ordo/ mHeight) - (100*ordo/ mHeight)%2
if (absc>=100) {absc = 98;}
if (ordo>=100) {ordo = 98;}
selec.style.left = (absc) + "%";
selec.style.top = (ordo) + "%";
myX.value = (absc+2)*50/100;
myY.value = 51-(ordo+2)*50/100;
zip.value = "";
unzip.value = "";
imgData.value = "";
for (i in megaMap) {
if (megaMap[i].j === myY.value && megaMap[i].i === myX.value && megaMap[i].k === myZ.value) {
zip.value = megaMap[i].zipStr;
unzip.value = megaMap[i].unzipStr;
imgData.value = megaMap[i].imageDataStr;
break;
}
}
myConsole.innerHTML = ("Position (I, J, K) : (" + myX.value + ", " + myY.value + ", " + myZ.value +")");
}
function submit() {
var createMap = new Map( myY.value, myX.value, myZ.value, unzip.value, zip.value, imgData.value);
unzip.value = "";
zip.value = "";
imgData.value = "";
return createMap;
}
function zoom(actualZoom) {
worldMap.style.width = (actualZoom * 5500) + "px";
worldMap.style.height = (actualZoom * 3000) + "px";
bgMap.style.width = (actualZoom * 5500) + "px";
bgMap.style.height = (actualZoom * 3000) + "px";
grille.style.width = (actualZoom * 5500) + "px";
grille.style.height = (actualZoom * 3000) + "px";
/*grille.style.backgroundSize = 100*actualZoom + "%";*/
zoomer.title = "Zoom : " + actualZoom;
if (zoomer.value != actualZoom) {zoomer.value = actualZoom;}
}
function hoverMenu(element, bool) {
if (bool === true) {
element.lastElementChild.style.opacity = "1";
} else {
element.lastElementChild.style.opacity = "0";
}
}
function effacer() {
var i = 0;
for (i in megaMap) {
if (megaMap[i].j === myY.value && megaMap[i].i === myX.value && megaMap[i].k === myZ.value) {
if (confirm("Supprimer la map d'abscisse " + (megaMap[i].i) + " et d'ordonn<00>e " + (megaMap[i].j) + " ?") === true) {
wMapCtx.clearRect((megaMap[i].i-1)*110,(50-megaMap[i].j)*60,110,60);
bgCtx.clearRect((megaMap[i].i-1)*110,(50-megaMap[i].j)*60,110,60);
delete megaMap[i];
megaMap.sort();
megaMap.pop();
}
}
}
}
function save(saveItem) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem("sauvegarde", JSON.stringify(saveItem));
myConsole.innerHTML = "Sauvegarde effectu<00>e avec succ<00>s.";
var b = 0
for (a in saveItem) {
b += saveItem[a].zipStr.length + 9;
}
myConsole.innerHTML += " Poids estim<00> <00> " + b + " octets pour le jeu.";
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
var cc = document.getElementById('copyCode');cc.style.zIndex='5';cc.style.opacity='1';
cc = cc.lastElementChild;
cc.innerHTML = '<input type="text" style="width: 90%;"></input>';
cc.lastElementChild.value= JSON.stringify(saveItem);
cc.lastElementChild.select();
document.execCommand('copy');
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
} else {
myConsole.innerHTML = "<b>ERREUR : Votre navigateur ne supporte pas le Web Storage. Essayez avec un autre navigateur.</b>";
}
}
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
/*
function loadManually(loadItem) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem("sauvegarde", loadItem);
megaMap = JSON.parse(localStorage.getItem("sauvegarde"));
myConsole.innerHTML += " Sauvegarde import<00>e. Whee !";
bgCtx.fillStyle = "#ffffff";
drawAll();
} else {
myConsole.innerHTML = "<b>ERREUR : Votre navigateur ne supporte pas le Web Storage. Essayez avec un autre navigateur.</b>";
}
}*/
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
function drawAll() {
wMapCtx.clearRect(0,0,5500,3000);
bgCtx.clearRect(0,0,5500,3000);
var bite;
for (a in megaMap) {
if (megaMap[a].k === myZ.value) {
bite = wMapCtx.createImageData(110,60);
for (var i=3; i<bite.data.length; i+=4) {
if (megaMap[a].imageDataStr.charAt(Math.floor(i/4))=="0") {bite.data[i]=255;}
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
/*else {bite.data[i]=255; bite.data[i-1]=255; bite.data[i-2]=255; bite.data[i-3]=255}*/
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
}
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
console.log(bite);
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
wMapCtx.putImageData(bite, (megaMap[a].i-1)*110, (50-megaMap[a].j)*60);
if (megaMap[a].unzipStr.charAt(0)==="<03>") {
bgCtx.drawImage(img, 2,2,110,60,(megaMap[a].i-1)*110, (50-megaMap[a].j)*60,110,60);
} else { bgCtx.fillRect((megaMap[a].i-1)*110, (50-megaMap[a].j)*60,110,60); }
}
}
}
Replace WorldMapEditor.html
2018-09-19 12:58:48 +02:00
img.onload = function loadManually() {
WorldMapEditor.html téléversé.
2018-08-16 15:34:53 +02:00
if (localStorage.getItem("sauvegarde") !== null) {
megaMap = JSON.parse(localStorage.getItem("sauvegarde"));
myConsole.innerHTML += " Sauvegarde import<00>e.";
bgCtx.fillStyle = "#ffffff";
drawAll();
} else {
myConsole.innerHTML += ".. Aucune sauvegarde trouv<00>e.";
}
}
zoom(0.25);
openClose(true, 0);
</script>
</body>
</html>