num ←> dollcode converter
dc.digi.rip
Initial commit
+206
+27
index.html
+27
index.html
···
1
+
<!doctype html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<title>dollcode</title>
6
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+
<link rel="stylesheet" type="text/css" href="style.css" />
8
+
</head>
9
+
10
+
<body>
11
+
<div class="main-content">
12
+
<div class="center">
13
+
<p class="info">input number/dollcode</p>
14
+
<input />
15
+
<button class="copy-btn" title="copy dollcode">copy</button>
16
+
<p class="output"></p>
17
+
</div>
18
+
</div>
19
+
<footer>
20
+
<p>
21
+
hosted @ <a href="https://wisp.place/">wisp.place</a> /
22
+
<a href="https://tangled.org/digi.rip/dollcode">source</a>
23
+
</p>
24
+
</footer>
25
+
<script src="script.js"></script>
26
+
</body>
27
+
</html>
+59
script.js
+59
script.js
···
1
+
const symbols = { 1: "▖", 2: "▘", 3: "▌" };
2
+
3
+
function genCode(n) {
4
+
if (n === 0) return "";
5
+
if (n > 1e12) return "too large";
6
+
const digits = [];
7
+
let safety = 1000;
8
+
while (n > 0 && --safety > 0) {
9
+
const m = n % 3;
10
+
const d = m === 0 ? 3 : m;
11
+
digits.unshift(symbols[d]);
12
+
n = Math.floor((n - d) / 3);
13
+
}
14
+
return digits.join("");
15
+
}
16
+
17
+
const decodeMap = { "▖": 1, "▘": 2, "▌": 3 };
18
+
19
+
function parseDollcode(s) {
20
+
let acc = 0;
21
+
for (const c of s.trim()) {
22
+
const v = decodeMap[c] ?? 0;
23
+
acc = acc * 3 + v;
24
+
}
25
+
return acc;
26
+
}
27
+
28
+
const dollcodeRe = /[▖▘▌]/;
29
+
30
+
const input = document.querySelector("input");
31
+
const output = document.querySelector(".output");
32
+
const copyBtn = document.querySelector(".copy-btn");
33
+
34
+
input.addEventListener("input", () => {
35
+
const val = input.value.trim();
36
+
let result = "";
37
+
38
+
if (val) {
39
+
if (dollcodeRe.test(val)) {
40
+
result = parseDollcode(val);
41
+
} else {
42
+
const num = parseInt(val, 10);
43
+
if (!isNaN(num) && num >= 0) {
44
+
result = genCode(num);
45
+
}
46
+
}
47
+
}
48
+
49
+
output.textContent = result;
50
+
copyBtn.classList.toggle("visible", !!result);
51
+
});
52
+
53
+
copyBtn.addEventListener("click", () => {
54
+
navigator.clipboard.writeText(output.textContent);
55
+
copyBtn.textContent = "copied!";
56
+
setTimeout(() => {
57
+
copyBtn.textContent = "copy";
58
+
}, 1500);
59
+
});
+120
style.css
+120
style.css
···
1
+
/* maple-mono-latin-400-normal */
2
+
@font-face {
3
+
font-family: "Maple Mono";
4
+
font-style: normal;
5
+
font-display: swap;
6
+
font-weight: 400;
7
+
src:
8
+
url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff2)
9
+
format("woff2"),
10
+
url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff)
11
+
format("woff");
12
+
}
13
+
14
+
:root {
15
+
--main-bg: #0d0d0d;
16
+
--text-color: #f0f0f0;
17
+
--link-color: #2e93ff;
18
+
--muted: #888;
19
+
--border: #555;
20
+
--radius: 40px;
21
+
--gap: 1.5rem;
22
+
--font-lg: 2rem;
23
+
--max-width: 80vw;
24
+
}
25
+
26
+
body {
27
+
display: flex;
28
+
flex-direction: column;
29
+
box-sizing: border-box;
30
+
min-height: 100vh;
31
+
margin: 0;
32
+
padding: 40px;
33
+
background-color: var(--main-bg);
34
+
color: var(--text-color);
35
+
font-family:
36
+
"Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
37
+
"Noto Color Emoji", sans-serif;
38
+
}
39
+
40
+
a {
41
+
color: var(--link-color);
42
+
text-decoration: none;
43
+
}
44
+
45
+
.main-content {
46
+
display: flex;
47
+
flex: 1;
48
+
align-items: center;
49
+
justify-content: center;
50
+
}
51
+
52
+
.center {
53
+
display: flex;
54
+
flex-direction: column;
55
+
align-items: center;
56
+
gap: var(--gap);
57
+
}
58
+
59
+
input {
60
+
display: block;
61
+
box-sizing: border-box;
62
+
width: 30ch;
63
+
max-width: var(--max-width);
64
+
padding: 12px;
65
+
border: 2px solid var(--muted);
66
+
border-radius: var(--radius);
67
+
outline: none;
68
+
font-family: inherit;
69
+
font-size: var(--font-lg);
70
+
text-align: center;
71
+
color: inherit;
72
+
background-color: inherit;
73
+
}
74
+
75
+
.info {
76
+
height: 1.5rem;
77
+
margin: 0;
78
+
font-size: 1rem;
79
+
line-height: 1.5rem;
80
+
}
81
+
82
+
.output {
83
+
height: 2.5rem;
84
+
max-width: var(--max-width);
85
+
margin: 0;
86
+
padding-bottom: 8px;
87
+
overflow-x: auto;
88
+
white-space: nowrap;
89
+
font-size: var(--font-lg);
90
+
line-height: 2.5rem;
91
+
}
92
+
93
+
.copy-btn {
94
+
visibility: hidden;
95
+
padding: 4px 12px;
96
+
border: 2px solid var(--border);
97
+
border-radius: var(--radius);
98
+
cursor: pointer;
99
+
font-family: inherit;
100
+
font-size: 0.9rem;
101
+
color: var(--muted);
102
+
background: none;
103
+
}
104
+
105
+
.copy-btn.visible {
106
+
visibility: visible;
107
+
}
108
+
109
+
.copy-btn:hover {
110
+
color: var(--text-color);
111
+
border-color: var(--muted);
112
+
}
113
+
114
+
footer {
115
+
display: flex;
116
+
flex-direction: column;
117
+
align-items: center;
118
+
justify-content: center;
119
+
margin: 0.5rem;
120
+
}