-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
190 lines (175 loc) · 7.38 KB
/
script.js
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const sign = {
"!": [1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0], //!
"\"": [0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], //"
"#": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], //#
"$": [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1], //$
"%": [0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0], //%
"&": [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], //&
"'": [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //'
"(": [1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0], //(
")": [0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1], //)
"*": [0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1], //*
"+": [0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0], //+
",": [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //,
"-": [0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0], //-
".": [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0], //.
"/": [0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0], ///
"0": [1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1], //0
"1": [1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], //1
"2": [1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0], //2
"3": [1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1], //3
"4": [0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1], //4
"5": [0, 1, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1], //5
"6": [1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1], //6
"7": [1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1], //7
"8": [1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1], //8
"9": [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1], //9
":": [0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0], //:
";": [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0], //;
"<": [0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0], //<
"=": [0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0], //=
">": [1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0], //>
"?": [1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0], //?
"@": [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1], //@
"A": [1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1], //A
"B": [1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1], //B
"C": [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0], //C
"D": [1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1], //D
"E": [1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0], //E
"F": [1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0], //F
"G": [1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1], //G
"H": [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1], //H
"I": [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], //I
"J": [1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1], //J
"K": [0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0], //K
"L": [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0], //L
"M": [1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1], //M
"N": [1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1], //N
"O": [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1], //O
"P": [1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0], //P
"Q": [1, 1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0], //Q
"R": [1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0], //R
"S": [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], //S
"T": [1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0], //T
"U": [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1], //U
"V": [0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0], //V
"W": [0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1], //W
"X": [0, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1], //X
"Y": [0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0], //Y
"Z": [1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0], //Z
"[": [1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0], //[
"\\": [1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1], //\
"]": [0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1], //]
"^": [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0], //^
"_": [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0], //_
"`": [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //`
"a": [0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0], //a
"b": [0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1], //b
"c": [0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0], //c
"d": [0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1], //d
"e": [1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], //e
"f": [0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0], //f
"g": [0, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1], //g
"h": [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1], //h
"i": [0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0], //i
"j": [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1], //j
"k": [0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0], //k
"l": [0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0], //l
"m": [0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1], //m
"n": [0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1], //n
"o": [0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 1], //o
"p": [0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0], //p
"q": [1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0], //q
"r": [0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0], //r
"s": [0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0], //s
"t": [0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0], //t
"u": [0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1], //u
"v": [0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1], //v
"w": [0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1], //w
"x": [0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0], //x
"y": [0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1], //y
"z": [0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0], //z
"{": [0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0], //{
"|": [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0], //|
"}": [1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0], //}
"~": [1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0], //~
}
let l = 0; // left offset
let d = 0; // down offset
let w = 2; // width
let s = 12; // size
let on = true;
const widthSpan = document.querySelector('#width span');
const sizeSpan = document.querySelector('#size span');
widthSpan.textContent = w;
sizeSpan.textContent = s;
console.log(widthSpan.textContent, sizeSpan.textContent)
document.querySelectorAll('button')
.forEach(el => el.addEventListener('click', (event) => {
console.log(event.target.parentElement.id, event.target.className)
if (event.target.parentElement.id === 'width') {
w = Math.max(1, w + Number(event.target.className));
widthSpan.textContent = w;
} else if (event.target.parentElement.id === 'size') {
s = Math.max(1, s + Number(event.target.className));
sizeSpan.textContent = s;
}
}))
const clear = () => {
ctx.clearRect(s / 2 + l, s / 2 + d, s * 3, s * 3);
};
const cursor = () => {
if (on) {
clear();
ctx.beginPath();
ctx.lineWidth = w;
ctx.moveTo(s + l, s * 3 + d);
ctx.lineTo(s * 3 + l, s * 3 + d);
ctx.stroke();
on = false;
} else {
clear();
on = true;
}
}
setInterval(cursor, 500);
document.addEventListener('keydown', (event) => {
const key = event.key;
// console.log({ key })
clear();
if (key === 'Backspace') { // Backspace
l -= s * 3;
if (l < 0) {
l = 0;
}
} else if (key === 'Enter' || l >= canvas.width - s * 3) { // Enter or end of line
l = 0;
d += s * 3;
} else if (key === ' ') { // Space
l += s * 3;
} else {
ctx.beginPath();
ctx.lineWidth = w;
if (!sign[key]) return;
//horizontal lines
ctx.moveTo(s + l, s + d); if (sign[key][0]) { ctx.lineTo(s * 2 + l, s + d); }
ctx.moveTo(s * 2 + l, s + d); if (sign[key][1]) { ctx.lineTo(s * 3 + l, s + d); }
ctx.moveTo(s + l, s * 2 + d); if (sign[key][2]) { ctx.lineTo(s * 2 + l, s * 2 + d); }
ctx.moveTo(s * 2 + l, s * 2 + d); if (sign[key][3]) { ctx.lineTo(s * 3 + l, s * 2 + d); }
ctx.moveTo(s + l, s * 3 + d); if (sign[key][4]) { ctx.lineTo(s * 2 + l, s * 3 + d); }
ctx.moveTo(s * 2 + l, s * 3 + d); if (sign[key][5]) { ctx.lineTo(s * 3 + l, s * 3 + d); }
//vertical lines
ctx.moveTo(s + l, s + d); if (sign[key][6]) { ctx.lineTo(s + l, s * 2 + d); }
ctx.moveTo(s + l, s * 2 + d); if (sign[key][7]) { ctx.lineTo(s + l, s * 3 + d); }
ctx.moveTo(s * 2 + l, s + d); if (sign[key][8]) { ctx.lineTo(s * 2 + l, s * 2 + d); }
ctx.moveTo(s * 2 + l, s * 2 + d); if (sign[key][9]) { ctx.lineTo(s * 2 + l, s * 3 + d); }
ctx.moveTo(s * 3 + l, s + d); if (sign[key][10]) { ctx.lineTo(s * 3 + l, s * 2 + d); }
ctx.moveTo(s * 3 + l, s * 2 + d); if (sign[key][11]) { ctx.lineTo(s * 3 + l, s * 3 + d); }
ctx.stroke();
l += s * 3;
}
});