-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
220 lines (216 loc) · 10.4 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
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슈숙 언어</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7ET8LJD2ES"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-7ET8LJD2ES');
</script>
</head>
<body>
<h1>슈숙 언어</h1>
<h2>Syusuk Language</h2>
<div class="chat">
<div class="mine messages" style="margin-top: 8px;">
<div class="message last">
넵 확인햇구용 킽스 배송 오면 다시 연락드릴게요! 배송방법은 어떻게 하시겟어요?? 반택 / 우체국택배 가능하십니당
</div>
</div>
<div class="yours messages">
<div class="message last">
반택으로 할게요~
</div>
</div>
<div class="mine messages">
<div class="message last">
네네! 그럼 나중에 배송 오면 다시 연락드릴게요~
</div>
</div>
<div class="yours messages">
<div id="output" class="message last">
혹시 반택으로 하면 얼마일지 알려주실슈숙. 슉. 시. 시발럼아. 슈숙. 시. 시. 시발럼아. 슈슉 슈숙. 슉. 시. 시발럼아. 슈숙. 시. 시. 시발롬아. 슈슉 슈숙. 슉. 시 시발럼아.
슈숙. 시. 시. 시발롬아. 슈슉 슈숙. 슉. 시. 시발럼아. 슈숙. 시. 시. 시발럼아. 슈슉
</div>
</div>
<div class="mine messages">
<div class="message last">
앗.. 1600원입니당..
</div>
</div>
<div class="yours messages">
<div class="message">
아니... 알려주실 수 있으세요..? ㅠㅠ 죄송해요.. 자동 텍스트때문에.. ;;; 아.. ㅠㅠㅠ
</div>
<div class="message last">
죄송합니다 깜짝 놀랐네요...
</div>
</div>
<div class="mine messages">
<div class="message last">
ㅜㅜ.. 아녜용갠차나요 .. 그냥넘어가는나제법젠틀해요
</div>
</div>
<div class="bottom">
<div class="input-wrapper">
<textarea name="input"
id="input">슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.시발럼아.슈숙.슉.슉.슉.슉.슉.슉.슉.슈숙.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슈숙.슉.슉.슉.슈숙.슉.슈슉.슈슉.슈슉.슈슉.시.시발롬아.슈숙.슉.슉.슈슉 슈숙.슈숙.슉.슈슉 슈숙.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.슈슉 슈숙.슉.슉.슉.슈슉 슈숙.슈숙.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.시.시.시.시.시.시.시.시.시.시.시.시.슈슉 슈숙.슈슉.슈슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.슈숙.슈슉 슈숙.슉.슉.슉.슈슉 슈숙.시.시.시.시.시.시.슈슉 슈숙.시.시.시.시.시.시.시.시.슈슉 슈숙.슈숙.슉.슈슉 슈숙.</textarea>
</div>
<button id="run"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send"
width="28" height="28" viewBox="0 0 24 24" stroke-width="2" stroke="#FFFFFF" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="10" y1="14" x2="21" y2="3" />
<path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
</svg></button>
</div>
</div>
<div class="info">
<p>슈숙 언어는 Brainfuck의 명령어와 1대1 대응되는 방언으로, 다음과 같이 정의됩니다.</p>
<table>
<tr>
<td class="tc">슈숙 언어</td>
<td class="tc">Brainfuck</td>
<td class="tc">의미</td>
</tr>
<tr>
<td class="tc">슈숙.</td>
<td class="tc">></td>
<td>포인터를 증가시킨다.</td>
</tr>
<tr>
<td class="tc">슈슉.</td>
<td class="tc"><</td>
<td>포인터를 감소시킨다.</td>
</tr>
<tr>
<td class="tc">슉.</td>
<td class="tc">+</td>
<td>포인터가 가리키는 바이트의 값을 증가시킨다.</td>
</tr>
<tr>
<td class="tc">시.</td>
<td class="tc">-</td>
<td>포인터가 가리키는 바이트의 값을 감소시킨다.</td>
</tr>
<tr>
<td class="tc">슈슉 슈숙.</td>
<td class="tc">.</td>
<td>포인터가 가리키는 바이트의 값을 ASCII 문자로 출력한다.</td>
</tr>
<tr>
<td class="tc">시발.</td>
<td class="tc">,</td>
<td>포인터가 가리키는 바이트에 입력받은 문자의 ASCII 값을 넣는다.</td>
</tr>
<tr>
<td class="tc">시발럼아.</td>
<td class="tc">[</td>
<td>포인터가 가리키는 바이트의 값이 0이면 짝이 되는 뒤쪽의 ]로 이동한다.</td>
</tr>
<tr>
<td class="tc">시발롬아.</td>
<td class="tc">]</td>
<td>포인터가 가리키는 바이트의 값이 0이 아니면 짝이 되는 앞쪽의 [로 이동한다.</td>
</tr>
</table>
<p>코드 실행시 슈숙 언어에서 정의되지 않은 모든 키워드는 무시됩니다.</p>
<h3>코드 예시</h3>
<h4>Hello, World!</h4>
<pre>
슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.시발럼아.
슈숙.슉.슉.슉.슉.슉.슉.슉.슈숙.슉.슉.슉.
슉.슉.슉.슉.슉.슉.슉.슈숙.슉.슉.슉.슈숙.
슉.슈슉.슈슉.슈슉.슈슉.시.시발롬아.슈숙.
슉.슉.슈슉 슈숙.슈숙.슉.슈슉 슈숙.슉.슉.
슉.슉.슉.슉.슉.슈슉 슈숙.슈슉 슈숙.슉.
슉.슉.슈슉 슈숙.슈숙.슉.슉.슉.슉.슉.슉.
슉.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.시.시.
시.시.시.시.시.시.시.시.시.시.슈슉 슈숙.
슈슉.슈슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
슉.슉.슉.슉.슉.슈슉 슈숙.슈숙.슈슉 슈숙.
슉.슉.슉.슈슉 슈숙.시.시.시.시.시.시.
슈슉 슈숙.시.시.시.시.시.시.시.시.
슈슉 슈숙.슈숙.슉.슈슉 슈숙.
</pre>
<h3>Q&A</h3>
<h4>슈숙이 뭔가요?</h4>
<p>
<a target="_blank" href="https://twitter.com/hw_0615/status/1365469861367799808">링크</a>의 내용을 참고하세요.
</p>
<h4>한글 문장은 어떻게 출력하나요?</h4>
<p>
<a target="_blank" href="https://tnu.me/brainfuck/generator">Brainfuck Generator</a>에서 한글 문장을 Brainfuck 코드로
변환할 수 있습니다.<br>
변환된 Brainfuck 코드를 적절하게 슈숙 언어로 한번 더 변환하시면 됩니다.<br>
(bf_to_ss 함수를 사용하시면 더 편합니다.)
</p>
<h4>이런걸 왜 만드셨나요?</h4>
<pre>
슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
시발럼아.슈숙.슉.슉.슉.슉.슉.슉.슉.슉.
슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
슈숙.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
슉.슈숙.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
슉.슉.슉.슈숙.슉.슉.슉.슈숙.슉.슉.슉.
슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
슈숙.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.
슈숙.슉.슉.슉.슉.슈슉.슈슉.슈슉.슈슉.
슈슉.슈슉.슈슉.시.시발롬아.슈숙.시.
시.시.시.슈슉 슈숙.슈숙.시.시.시.시.
시.슈슉 슈숙.슈숙.슈슉 슈숙.슈슉.슈슉.
슉.슈슉 슈숙.슈숙.슈숙.시.시.시.시.시.
슈슉 슈숙.슉.슈슉 슈숙.슈숙.시.시.시.
시.슈슉 슈숙.슈슉.슈슉.슈슉.시.시.
슈슉 슈숙.슈숙.슈숙.슈숙.슈숙.슈숙.
시.시.시.슈슉 슈숙.슈슉.슈슉.슈슉.슉.
슉.슉.슉.슉.슈슉 슈숙.슈슉.슈슉.
슈슉 슈숙.슈숙.슈숙.슈숙.슈숙.슈숙.슉.
슈슉 슈숙.슈슉.슈슉.슈슉.시.시.시.시.
시.슈슉 슈숙.슈슉.슈슉.시.슈슉 슈숙.
슈숙.슈숙.슈숙.슈숙.시.슈슉 슈숙.슈슉.
슈슉.슉.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.
슈숙.슈슉 슈숙.슈슉.슈슉.슈슉.슉.슉.
슈슉 슈숙.슈숙.슈슉 슈숙.슈숙.슈숙.
슈숙.시.시.시.시.시.시.시.슈슉 슈숙.
슈슉.슈슉.슈슉.슈슉.슈슉 슈숙.슈숙.
슈슉 슈숙.슈숙.슈숙.슈숙.슈슉 슈숙.
슈슉.슈슉.슈슉.슈슉.슉.슈슉 슈숙.슈숙.
슉.슉.슉.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.
슈숙.슈숙.슈숙.슉.슉.슉.슉.슉.슉.슉.
슉.슈슉 슈숙.슈슉.슈슉.슈슉.슈슉.시.
슈슉 슈숙.슈숙.슈숙.슈숙.슈숙.슈숙.슉.
슉.슈슉 슈숙.슈슉.슈슉.슈슉.시.시.시.
시.슈슉 슈숙.슈숙.슈슉 슈숙.슈슉.슈슉.
슈슉.시.슈슉 슈숙.슈숙.슈숙.슉.슉.슉.
슉.슉.슉.슉.슉.슉.슉.슉.슈슉 슈숙.슈슉.
시.시.시.시.시.시.시.시.시.슈슉 슈숙.
슈슉.슈슉 슈숙.슈숙.슉.슉.슉.슉.슉.슉.
슉.슈슉 슈숙.슈숙.시.시.시.슈슉 슈숙.
슈슉.슈슉.슉.슈슉 슈숙.슈숙.슉.슉.슉.
슉.슈슉 슈숙.슈숙.슈숙.슈숙.슈숙.슉.슉.
슉.슉.슈슉 슈숙.슈슉.슈슉.슈슉.슈슉.
슈슉.슈슉 슈숙.슈숙.슈숙.슈숙.슈숙.
슈숙.슉.슉.슈슉 슈숙.슈슉.슉.슈슉 슈숙.
슈슉.슈슉.슈슉.슈슉.시.슈슉 슈숙.슈숙.
슈숙.슈숙.슈숙.슈숙.슉.슈슉 슈숙.시.시.
시.슈슉 슈숙.슈슉.슈슉.슈슉.슈슉.슈슉.
슈슉 슈숙.슈숙.슈숙.슈숙.슈숙.슈숙.슉.
슉.슉.슈슉 슈숙.슈슉.슈슉.슈슉.슈슉 슈숙.
슈숙.슈숙.슈숙.슈숙.시.시.슈슉 슈숙.
</pre>
<h3>License</h3>
<p>MIT</p>
</div>
<script src="brainfuck.js"></script>
<script src="main.js"></script>
</body>
</html>