forked from redblobgames/mapgen4
-
Notifications
You must be signed in to change notification settings - Fork 0
/
embed.html
98 lines (90 loc) · 4.55 KB
/
embed.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div style="width:auto">
<style>
html, body { margin: 0; padding: 0; }
button { text-align: center; padding: 0; background: hsl(60,20%,90%); border-radius: 4px; cursor: pointer; }
button svg { width: 100%; height: 100%; }
button text { text-anchor: middle; font-size: 24px; font-family: var(--sans-serif, Arial); }
button.current-control { background: hsl(60,100%,80%); outline: 2px solid hsl(220,50%,50%); }
button:focus { outline: none; }
input[type="range"] { cursor: ew-resize; margin-left: 0; margin-right: 0; }
button:disabled, input:disabled { cursor: unset; opacity: 0.25; }
#ui {
display: grid;
min-height: calc(100vmin - 130px);
grid-template-rows: repeat(3, 40px) calc(100vmin - 130px - 120px - 40px);
grid-template-columns: 1fr calc(100vmin - 130px) repeat(4, 30px) 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
#map { grid-area: 1 / 2 / span 4 / span 1; width:100%; height:100%; }
#tiny { grid-area: 1 / 3 / span 1 / span 1; }
#small { grid-area: 1 / 4 / span 1 / span 1; }
#medium { grid-area: 1 / 5 / span 1 / span 1; }
#large { grid-area: 1 / 6 / span 1 / span 1; }
#ocean { grid-area: 2 / 3 / span 1 / span 2; }
#shallow { grid-area: 2 / 5 / span 1 / span 2; }
#valley { grid-area: 3 / 3 / span 1 / span 2; }
#mountain { grid-area: 3 / 5 / span 1 / span 2; }
#sliders { grid-area: 4 / 3 / span 1 / span 4; overflow-y: scroll; overflow-x: clip; line-height: 1.1; }
@media (orientation: portrait) {
/* Put the buttons on bottom instead of on the right */
#ui {
grid-template-rows: calc(100vmin) repeat(4, 40px) 1fr;
grid-template-columns: 70px 70px calc(100vmin - 50px - 140px - 40px);
}
#map { grid-area: 1 / 1 / span 1 / span 6; }
#tiny { grid-area: 2 / 1 / span 1 / span 1; }
#small { grid-area: 3 / 1 / span 1 / span 1; }
#medium { grid-area: 4 / 1 / span 1 / span 1; }
#large { grid-area: 5 / 1 / span 1 / span 1; }
#ocean { grid-area: 2 / 2 / span 1 / span 1; }
#shallow { grid-area: 3 / 2 / span 1 / span 1; }
#valley { grid-area: 4 / 2 / span 1 / span 1; }
#mountain { grid-area: 5 / 2 / span 1 / span 1; }
#sliders { grid-area: 2 / 3 / span 5 / span 1; justify-self: end; width: 100%; column-width: 20ch; }
}
#mapgen4 { width: 100%; height: 100%; cursor: crosshair; }
#sliders h3 {
background-color: hsl(60,20%,90%);
margin: 0.5em 0;
padding: 0.5em;
font-family: var(--sans-serif, sans-serif);
font-size: 66%;
}
#sliders label {
display: block;
font-size: 66%;
}
#sliders label > * {
max-width: 99%;
}
#sliders label span {
font-family: var(--monospace, monospace);
display: inline-block;
width: 17ch;
}
#button-reset {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 2em;
}
</style>
<div id="ui">
<button id="tiny"><svg viewBox="-50 -50 100 100"><circle r="7"/></svg></button>
<button id="small"><svg viewBox="-50 -50 100 100"><circle r="20"/></svg></button>
<button id="medium"><svg viewBox="-50 -50 100 100"><circle r="35"/></svg></button>
<button id="large"><svg viewBox="-50 -50 100 100"><circle r="50"/></svg></button>
<button id="ocean" title="Ocean"><svg viewBox="-50 -50 100 100"><text y="45">Ocean</text><path d="M -50,-30 q 25,-20 50,0 q 25,20 50,0 l 0,50 l -100,0 z" fill="hsl(240,50%,40%)"/></svg></button>
<button id="shallow" title="Water"><svg viewBox="-50 -50 100 100"><text y="45">Water</text><path d="M -50,-20 q 15,20 30,0 q 20,20 40,0 q 15,20 30,0 l 0,40 l -100,0 z" fill="hsl(200,50%,70%)"/></svg></button>
<button id="valley" title="Valley"><svg viewBox="-50 -50 100 100"><text y="45">Valley</text><path d="M -50,-20 c 20,10 80,10 100,0 l 0,40 l -100,0 z" fill="hsl(100,40%,60%)"/></svg></button>
<button id="mountain" title="Mountain"><svg viewBox="-50 -50 100 100"><text y="45">Mountains</text><g fill="hsl(60,50%,40%)" stroke="white" stroke-width="2"><path d="M -30,20 l 30,-60 l 30,60 z"/><path d="M -50,20 l 20,-40 l 20,40 z"/><path d="M 10,20 l 15,-30 l 15,30 z"/></g></svg></button>
<div id="sliders">
<button id="button-reset">Reset</button>
</div>
<div id="map"><canvas id="mapgen4" width="2048" height="2048"/></div>
</div>
<script defer="defer" src="draggable.v2.js"></script>
<script defer="defer" src="build/_bundle.js"></script>
</div>