Skip to content

Commit 05b05ac

Browse files
juliaogrisjuliaogris
committed
wip
1 parent b86fd82 commit 05b05ac

File tree

6 files changed

+205
-101
lines changed

6 files changed

+205
-101
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 & 35 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;
@@ -285,8 +269,11 @@ main.view-output {
285269
padding: 0;
286270
width: 100%;
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;
276+
overflow-wrap: break-word; /* TODO: scroll x rather than wrap.... */
290277
font-family: inherit;
291278
overflow: auto;
292279
}
@@ -300,7 +287,7 @@ main.view-output {
300287
}
301288
#editor pre.lines .num {
302289
position: aboslute;
303-
color: #6e7781;
290+
color: hsl(212deg 8% 47%);
304291
left: 0;
305292
}
306293
#editor pre.lines .txt {
@@ -309,29 +296,30 @@ main.view-output {
309296
}
310297
#editor .num,
311298
#editor .bool {
312-
color: #80ccff;
299+
color: hsl(204deg 100% 75%);
313300
}
314301
#editor .str {
315-
color: #b6e3ff;
302+
color: hsl(203deg 100% 86%);
316303
}
317-
#editor .ident {
318-
color: #d8b9ff;
304+
#editor .func {
305+
color: hsl(266deg 100% 86%);
319306
}
320307
#editor .builtin {
321-
color: #ffb77c;
308+
color: hsl(27deg 100% 74%);
322309
}
323310
#editor .keyword {
324-
color: #ff8182;
311+
color: hsl(359deg 100% 75%);
325312
}
326-
#editor .illegal {
327-
color: #ffadda;
313+
#editor .error {
314+
background: hsl(209deg 100% 33%);
315+
color: hsl(0 0% 100%);
328316
font-style: italic;
329317
}
330318
#editor .op {
331-
color: #ff8182;
319+
color: hsl(359deg 100% 75%);
332320
}
333321
#editor .comment {
334-
color: #afb8c1;
322+
color: hsl(210deg, 13%, 72%);
335323
font-style: italic;
336324
font-weight: 300;
337325
}

‎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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ function evySource() {
9696
// setEvySource is exported to evy go/wasm and called after formatting
9797
function setEvySource(ptr, len) {
9898
const source = memToString(ptr, len)
99-
editor.update({value: source})
99+
editor.update({ value: source })
100100
}
101101

102102
function memToString(ptr, len) {
@@ -282,7 +282,7 @@ async function handleHashChange() {
282282
throw new Error("invalid response status", response.status)
283283
}
284284
const source = await response.text()
285-
editor.update({value: source})
285+
editor.update({ value: source })
286286
updateBreadcrumbs(crumbs)
287287
clearOutput()
288288
await stopAndSlide() // go to code screen for new code

0 commit comments

Comments
 (0)