Skip to content

Commit 792ad9b

Browse files
juliaogrisjuliaogris
committed
wip
1 parent 378968c commit 792ad9b

File tree

6 files changed

+208
-103
lines changed

6 files changed

+208
-103
lines changed

‎frontend/editor.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>evy | Playground</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="icon" href="/img/favicon.png" />
8+
<link
9+
rel="stylesheet"
10+
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&family=Inter:wght@400;700&display=swap"
11+
/>
12+
<link rel="stylesheet" href="index.css" type="text/css" />
13+
14+
<script src="editor.js" type="module" defer></script>
15+
<style>
16+
#editor {
17+
font-family: "Fira Code", monospace;
18+
}
19+
.num {
20+
color: lightcoral;
21+
}
22+
23+
.ident {
24+
color: blue;
25+
}
26+
.builtin {
27+
color: purple;
28+
}
29+
.keyword {
30+
color: orange;
31+
}
32+
33+
.illegal {
34+
background: magenta;
35+
color: white;
36+
}
37+
38+
.op {
39+
color: orange;
40+
}
41+
42+
.str {
43+
font-weight: 500;
44+
color: mediumspringgreen;
45+
}
46+
47+
.comment {
48+
color: grey;
49+
font-style: italic;
50+
font-weight: 300;
51+
}
52+
main {
53+
height: 30rem;
54+
}
55+
#wrap {
56+
overflow: auto;
57+
border: 2px solid green;
58+
}
59+
</style>
60+
</head>
61+
<body>
62+
<main>
63+
<div id="wrap">
64+
<div id="editor"></div>
65+
</div>
66+
</main>
67+
</body>
68+
</html>

‎frontend/editor.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use strict"
2+
import Yace from "./module/yace-editor.js"
3+
4+
const code = `move 10 20
5+
line 50 50
6+
rect 25 25
7+
color "red"
8+
circle 10
9+
10+
// some comments
11+
x := 12
12+
print "x:" x
13+
if x > 10
14+
print "🍦 big x"
15+
end`
16+
17+
const editor = new Yace("#editor", { value: code })
18+
19+
editor.textarea.spellcheck = false
20+
editor.textarea.autocorrect = false
21+
editor.textarea.autocomplete = false
22+
editor.textarea.autocapitalize = false
23+
editor.textarea.wrap = "off"

‎frontend/index.css‎

Lines changed: 23 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -222,37 +222,20 @@ main.view-output {
222222
}
223223

224224
/* --- Editor --------------------------------------------------------*/
225-
.editor {
226-
/* padding-top: var(--editor-padding);*/
225+
.editor-wrap {
226+
padding: var(--editor-padding);
227+
padding-bottom: var(--editor-padding-bottom);
227228
font-size: 1rem;
228229
flex: 1;
229-
overflow: clip;
230+
overflow: auto;
230231
width: var(--editor-width);
231232
}
232-
/*.editor textarea {
233-
padding-left: var(--editor-padding);
234-
padding-right: var(--editor-padding);
233+
#editor {
235234
color: var(--color);
236235
background: var(--bg);
237236
font-size: 1rem;
238237
font-family: var(--ff-code);
239238
font-variant-ligatures: none;
240-
overflow: auto;
241-
242-
resize: none;
243-
outline: none;
244-
-webkit-text-fill-color: var(--ccolor);
245-
height: 100%;
246-
width: 100%;
247-
border: none;
248-
padding-bottom: var(--editor-padding-bottom);
249-
}
250-
*/
251-
/*TODO: change from ID to class .editor*/
252-
#editor {
253-
color: var(--color);
254-
background: var(--bg);
255-
font-family: "Fira Code", monospace;
256239
position: relative;
257240
overflow: hidden;
258241
}
@@ -266,11 +249,12 @@ main.view-output {
266249
height: 100%;
267250
z-index: 1;
268251
resize: none;
269-
caret-color: hsl(0deg 0% 100%);
252+
caret-color: var(--color);
270253
padding: inherit;
271254
outline: none;
272255
font-size: inherit;
273256
font-family: inherit;
257+
font-variant-ligatures: inherit;
274258
border: none;
275259
top: 0px;
276260
left: 0px;
@@ -283,10 +267,12 @@ main.view-output {
283267
white-space: pre-wrap;
284268
word-break: keep-all;
285269
padding: 0;
286-
width: 100%;
270+
width: max-content;
287271
margin: 0;
272+
font-size: inherit;
273+
font-family: inherit;
274+
font-variant-ligatures: inherit;
288275
pointer-events: none;
289-
overflow-wrap: break-word;
290276
font-family: inherit;
291277
overflow: auto;
292278
}
@@ -300,7 +286,7 @@ main.view-output {
300286
}
301287
#editor pre.lines .num {
302288
position: aboslute;
303-
color: #6e7781;
289+
color: hsl(212deg 8% 47%);
304290
left: 0;
305291
}
306292
#editor pre.lines .txt {
@@ -309,29 +295,30 @@ main.view-output {
309295
}
310296
#editor .num,
311297
#editor .bool {
312-
color: #80ccff;
298+
color: hsl(204deg 100% 75%);
313299
}
314300
#editor .str {
315-
color: #b6e3ff;
301+
color: hsl(203deg 100% 86%);
316302
}
317-
#editor .ident {
318-
color: #d8b9ff;
303+
#editor .func {
304+
color: hsl(266deg 100% 86%);
319305
}
320306
#editor .builtin {
321-
color: #ffb77c;
307+
color: hsl(27deg 100% 74%);
322308
}
323309
#editor .keyword {
324-
color: #ff8182;
310+
color: hsl(359deg 100% 75%);
325311
}
326-
#editor .illegal {
327-
color: #ffadda;
312+
#editor .error {
313+
background: hsl(209deg 100% 33%);
314+
color: hsl(0 0% 100%);
328315
font-style: italic;
329316
}
330317
#editor .op {
331-
color: #ff8182;
318+
color: hsl(359deg 100% 75%);
332319
}
333320
#editor .comment {
334-
color: #afb8c1;
321+
color: hsl(210deg, 13%, 72%);
335322
font-style: italic;
336323
font-weight: 300;
337324
}

‎frontend/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@
3232
</div>
3333
</header>
3434
<main>
35-
<div class="editor" id="editor"></div>
35+
<div class="editor-wrap">
36+
<div id="editor"></div>
37+
</div>
3638
<div class="output">
3739
<div class="canvas">
3840
<canvas id="canvas"></canvas>

‎frontend/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ function evySource() {
118118
// setEvySource is exported to evy go/wasm and called after formatting
119119
function setEvySource(ptr, len) {
120120
const source = memToString(ptr, len)
121-
editor.update({value: source})
121+
editor.update({ value: source })
122122
}
123123

124124
function memToString(ptr, len) {
@@ -301,7 +301,7 @@ async function handleHashChange() {
301301
throw new Error("invalid response status", response.status)
302302
}
303303
const source = await response.text()
304-
editor.update({value: source})
304+
editor.update({ value: source })
305305
updateBreadcrumbs(crumbs)
306306
clearOutput()
307307
format()
@@ -443,7 +443,6 @@ rect 25 25
443443
color "red"
444444
circle 10
445445
446-
// some comments
447446
x := 12
448447
print "x:" x
449448
if x > 10

0 commit comments

Comments
 (0)