814 lines
72 KiB
HTML
814 lines
72 KiB
HTML
<!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è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épô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éné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>Éditer</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sideNav" onclick="openClose(true, 0)">
|
||
<div style="padding: 40px;"></div>
|
||
<a href="javascript:openClose(false, 0)" class="closebtn">×</a>
|
||
<h3 style="text-decoration: underline;">Ajouter une map :</h3>
|
||
<h5>Données brutes</h5>
|
||
<textarea id="unzip-text" placeholder="000000100Ba60000..." title="Données brutes. Exemple : 0000e00063[...]15000" value="0"></textarea>
|
||
<h5>Données compressées</h5>
|
||
<textarea id="zip-text" placeholder="→2A11→42→82→64→F4→A11c(0..." title="Données compressées. Exemple : →2A11→42→82→64→F4→A11c(0→82→51"></textarea>
|
||
<h5>Données d'image</h5>
|
||
<input id="image-data" placeholder="111111111111111000011111..." type="text" title="Données de dessin">
|
||
<h5>Abscisse – I</h5>
|
||
<input id="abs" type="number" title="I (Abscisse)" min="1" max="50" value="2">
|
||
<h5>Ordonnée – J</h5>
|
||
<input id="ord" type="number" title="J (Ordonnée)" min="1" max="50" value="11">
|
||
<h5>Étage/sous-sol – K</h5>
|
||
<input id="cot" type="number" title="K (Cote, é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>
|
||
<button onclick="effacer();drawAll();">Vider la map</button>
|
||
<button onclick="writeCode();var cc = document.getElementById('copyCode');cc.style.zIndex='5';cc.style.opacity='1';">GÉNÉRER LE PUTAIN DE CODE !</button>
|
||
<!-- <input type="file" name="save" multiple> -->
|
||
<button onclick="if (confirm('Cette action est irréversible. Tout supprimer ?')){ megaMap = new Array(); wMapCtx.clearRect(0,0,5500,3000);localStorage.removeItem('sauvegarde'); myConsole.innerHTML = 'Mappemonde réinitialisée.';drawAll();}">Réinitialiser</button>
|
||
</div>
|
||
|
||
<div class="sideNav left-bar">
|
||
<div style="padding: 40px;"></div>
|
||
<a href="javascript:openClose(2, 1)" class="closebtn">×</a>
|
||
<h3 style="text-decoration: underline;">Guide rapide</h3>
|
||
<p>Ce programme est complémentaire au <a href="MapGenerator.html" target="_blank">Générateur de Map</a>. Ces deux outils ont été conçus conjointement pour fabriquer aisément des Maps à 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>Éditer</h4>
|
||
<p>Pour faire apparaître ou réduire le menu d'édition, cliquez sur le dernier icône dans le menu en haut de l'écran. Vous devez, au préalable, avoir édité une première map avec le Générateur de Map.</p>
|
||
<p>Rentrez respectivement dans les cases les données suivantes en Copiant/Collant : <ol><li>Les données «brutes» de la Map, qui correspondent à la première chaîne de caractère dans le cadre «résultat» du Générateur de Map.</li><li>Les données compressées de la map, qui correspondent à la chaîne de caractère générée en cliquant sur «Compresser».</li><li>Les données d'image, qui servent à faire apparaître la map sur le canvas de ce programme. Cliquez sur «Données d'image» pour les obtenir. Elle sera alors automatiquement enregistrée dans votre presse-papier.</li></ol></p>
|
||
<p>En réglant le zoom à votre guise et en cliquant sur une case, vous pourrez facilement choisir les coordonnées (I,J,K) de votre Map. Vous pouvez également régler ces paramètres manuellement.</p>
|
||
<p>Une fois que vous avez rentré les données comme il se doit, cliquez sur "Valider la map". Cette dernière sera enregistrée et dessinée.</p>
|
||
<h4>Effacer des maps</h4>
|
||
<p>Il se peut que, par inadvertance, vous ayez rentré de mauvaises données au mauvais en droit. Pour effacer une map, cliquez sur celle-ci dans le canvas puis, dans la barre d'édition, cliquez sur «Vider la map» et confirmez votre choix.</p>
|
||
<p>Si vous n'avez plus besoin de votre mappemonde ou que vous souhaitez tout recommencer, cliquez sur «Réinitialiser». Les données actuelles seront effacées, ainsi que votre sauvegarde.</p>
|
||
<h4>Sauvegarder</h4>
|
||
<p>Pour sauvegarder votre mappemonde dans son état actuel, cliquez sur l'icône «Sauvegarder». Votre sauvegarde sera récupérée automatiquement lorsque la page sera à nouveau chargée. Lorsque vous effectuez votre sauvegarde, le programme vous indiquera la taille estimée du code à générer en bas de l'écran. Partez du principe que la taille ré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énérer le code</h4>
|
||
<p>Pour générer le code à injecter dans le jeu, cliquez sur «Générer le putain de code» dans le menu d'édition. Une fenêtre apparaît alors avec le code à copier. Double-cliquez sur cette dernière pour la fermer.</p>
|
||
<p>Ce code s'insère au début du sous-programme «HC» dans le jeu. Veillez à 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>
|
||
|
||
<canvas id="worldMap" width="5500" height="3000" style="border:4px solid #262729;transition: 0.75s;background-color: rgba(0,0,0,0);">
|
||
</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ê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)=="θ") {
|
||
return 1;
|
||
} else {return 0;}
|
||
}
|
||
this.code = function() {return 'I=' + i + ' => "' + zipStr + '" → 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(/﹣﹣﹣﹣﹣﹣/g, "*6");
|
||
megaMap[a].zipStr=megaMap[a].zipStr.replace(/﹣﹣﹣﹣﹣/g, "*5");
|
||
megaMap[a].zipStr=megaMap[a].zipStr.replace(/﹣﹣﹣﹣/g, "*4");
|
||
megaMap[a].zipStr=megaMap[a].zipStr.replace(/﹣﹣﹣/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 + ' ⇒ "' + megaMap[b].zipStr + '" → 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(/→/g, '->');
|
||
code.innerHTML = code.innerHTML.replace(/\*/g, '');
|
||
}
|
||
|
||
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é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ée avec succès.";
|
||
var b = 0
|
||
for (a in saveItem) {
|
||
b += saveItem[a].zipStr.length + 9;
|
||
}
|
||
myConsole.innerHTML += " Poids estimé à " + b + " octets pour le jeu.";
|
||
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');
|
||
} else {
|
||
myConsole.innerHTML = "<b>ERREUR : Votre navigateur ne supporte pas le Web Storage. Essayez avec un autre navigateur.</b>";
|
||
}
|
||
}
|
||
/*
|
||
function loadManually(loadItem) {
|
||
if (typeof(Storage) !== "undefined") {
|
||
localStorage.setItem("sauvegarde", loadItem);
|
||
megaMap = JSON.parse(localStorage.getItem("sauvegarde"));
|
||
myConsole.innerHTML += " Sauvegarde importé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>";
|
||
}
|
||
}*/
|
||
|
||
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;}
|
||
/*else {bite.data[i]=255; bite.data[i-1]=255; bite.data[i-2]=255; bite.data[i-3]=255}*/
|
||
}
|
||
console.log(bite);
|
||
wMapCtx.putImageData(bite, (megaMap[a].i-1)*110, (50-megaMap[a].j)*60);
|
||
if (megaMap[a].unzipStr.charAt(0)==="θ") {
|
||
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); }
|
||
}
|
||
}
|
||
}
|
||
|
||
img.onload = function loadManually() {
|
||
if (localStorage.getItem("sauvegarde") !== null) {
|
||
megaMap = JSON.parse(localStorage.getItem("sauvegarde"));
|
||
myConsole.innerHTML += " Sauvegarde importée.";
|
||
bgCtx.fillStyle = "#ffffff";
|
||
|
||
drawAll();
|
||
} else {
|
||
myConsole.innerHTML += ".. Aucune sauvegarde trouvée.";
|
||
}
|
||
}
|
||
|
||
|
||
zoom(0.25);
|
||
openClose(true, 0);
|
||
</script>
|
||
</body>
|
||
</html> |