Canonical repo for Dong Web (dong.vielle.dev)
Add barebones UI
+70
-1
+3
.gitignore
+3
.gitignore
+67
-1
src/pages/index.astro
+67
-1
src/pages/index.astro
···
2
2
import Base from "../layouts/Base.astro";
3
3
---
4
4
5
-
<Base title="Dong Web"> Hello World</Base>
5
+
<Base title="Dong Web">
6
+
<script>
7
+
class CreateDong extends HTMLElement {
8
+
connectedCallback() {
9
+
const shadow = this.attachShadow({ mode: "open" });
10
+
11
+
// create input
12
+
const form = document.createElement("form");
13
+
const imageSelect = document.createElement("input");
14
+
const audioSelect = document.createElement("input");
15
+
const createButton = document.createElement("button");
16
+
17
+
imageSelect.type = "file";
18
+
imageSelect.accept = "image/*";
19
+
audioSelect.type = "file";
20
+
audioSelect.accept = "audio/*";
21
+
createButton.type = "submit";
22
+
createButton.textContent = "Create";
23
+
24
+
form.appendChild(imageSelect);
25
+
form.appendChild(audioSelect);
26
+
form.appendChild(createButton);
27
+
28
+
shadow.appendChild(form);
29
+
}
30
+
}
31
+
32
+
class LoadDong extends HTMLElement {
33
+
connectedCallback() {
34
+
const shadow = this.attachShadow({ mode: "open" });
35
+
36
+
// create input
37
+
const form = document.createElement("form");
38
+
const dongSelect = document.createElement("input");
39
+
const loadButton = document.createElement("button");
40
+
// canvas
41
+
const canvas = document.createElement("canvas");
42
+
43
+
dongSelect.type = "file";
44
+
dongSelect.accept = ".dong";
45
+
loadButton.type = "submit";
46
+
loadButton.textContent = "Load";
47
+
48
+
form.appendChild(dongSelect);
49
+
form.appendChild(loadButton);
50
+
51
+
shadow.appendChild(form);
52
+
shadow.appendChild(canvas);
53
+
54
+
const sheet = new CSSStyleSheet();
55
+
sheet.replaceSync(`
56
+
canvas {
57
+
border: 1px solid white;
58
+
}
59
+
`);
60
+
61
+
shadow.adoptedStyleSheets = [sheet];
62
+
}
63
+
}
64
+
65
+
customElements.define("create-dong", CreateDong);
66
+
customElements.define("load-dong", LoadDong);
67
+
</script>
68
+
69
+
<create-dong></create-dong>
70
+
<load-dong></load-dong>
71
+
</Base>