-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (110 loc) · 2.89 KB
/
index.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
<title>dot2bas</title>
</head><body>
<h1>dot2bas</h1>
<div class="divw">
<label><input type=radio name=radiow id=radiow8 checked>8x8</label>
<label><input type=radio name=radiow id=radiow16>16x16</label>
</div>
<div id="box"></div>
<textarea id="ta"></textarea>
<div class="divhex">
CHAR <input id=infirstch type=text value=224 style="display: inlino-black; width: 4em; font-size: 14px;">
<label><input type=radio name=radiohex id=radiohex checked>HEX</label>
<label><input type=radio name=radiohex id=radiodec>DEC</label>
</div>
<button id=btnclear>CLEAR</button>
<footer>
<hr>
forked from: <a href="http://fukuno.jig.jp/2012/multidots">multidots みんなでドット絵 一日一創2012</a><br>
<a href=https://github.com/ichigojam/dot2bas>src on GitHub</a><br>
</footer>
<script type="module">
import { getStringFromDiv, setStringToDiv } from "./divstr.js";
import { hex2bas } from "./hex2bas.js";
const show = () => {
const s = getStringFromDiv(box);
const hex = radiohex.checked;
const firstch = infirstch.value;
ta.value = hex2bas(s, hex, firstch);
location.hash = s;
};
const init = () => {
const w = radiow8.checked ? 8 : 16;
box.style.gridTemplateColumns = `repeat(${w}, 1fr)`;
const size = radiow8.checked ? 8 : 4;
document.documentElement.style.setProperty('--boxdiv-w', size + "vw");
document.documentElement.style.setProperty('--boxdiv-h', size + "vh");
box.innerHTML = "";
for (let i = 0; i < w * w; i++) {
const div = document.createElement("div");
div.onmousedown = () => {
div.style.background = div.style.background == "black" ? "white" : "black";
show();
};
box.appendChild(div);
}
};
window.onload = () => {
const hash = location.hash.substring(1);
radiow16.checked = hash.length == 64;
init();
radiow8.onchange = radiow16.onchange = () => init();
radiohex.onchange = radiodec.onchange = () => show();
infirstch.onchange = () => show();
setStringToDiv(box, hash);
show();
btnclear.onclick = () => {
location.hash = "";
init();
show();
};
};
</script>
<style>
a {
color: gray !important;
}
body {
margin: 0px;
text-align: center;
}
h1 {
padding: 0;
margin: 0.5em;
}
#box {
margin: 1em auto 1em auto;
display: inline-grid;
grid-template-columns: repeat(8, 1fr);
line-height: 0px;
border: 4px solid black;
}
#box div {
display: inline-block;
width: min(var(--boxdiv-w), var(--boxdiv-h));
height: min(var(--boxdiv-w), var(--boxdiv-h));
border: 1px solid black;
background: white;
margin: 0px;
padding: 0px;
}
button {
text-align: center;
border: 3px solid black;
background: white;
}
textarea {
border: 2px solid black;
padding: .5em;
width: 80vw;
height: 5em;
font-size: 20px;
}
#btnclear {
margin: .8em;
padding: .5em 2em;
}
</style>
</body>
<html>