Canonical repo for Dong Web (dong.vielle.dev)
Create dong functionality added
+106
+106
src/pages/index.astro
+106
src/pages/index.astro
···
4
4
5
5
<Base title="Dong Web">
6
6
<script>
7
+
import { ViewTransitions } from "astro:transitions";
8
+
7
9
class CreateDong extends HTMLElement {
8
10
connectedCallback() {
9
11
const shadow = this.attachShadow({ mode: "open" });
···
26
28
form.appendChild(createButton);
27
29
28
30
shadow.appendChild(form);
31
+
32
+
// functionality
33
+
createButton.addEventListener("click", async (e) => {
34
+
// dont refresh
35
+
e.preventDefault();
36
+
// quit early if no files
37
+
if (
38
+
!imageSelect.files ||
39
+
!audioSelect.files ||
40
+
imageSelect.files.length === 0 ||
41
+
audioSelect.files.length === 0
42
+
)
43
+
return console.warn("No files selected");
44
+
45
+
// get files
46
+
const image = imageSelect.files[0];
47
+
const audio = audioSelect.files[0];
48
+
49
+
if (image.type === "" || audio.type === "")
50
+
return console.warn("Mime types invalid");
51
+
52
+
console.log(
53
+
image.size,
54
+
audio.size,
55
+
await image.bytes(),
56
+
await audio.bytes()
57
+
);
58
+
59
+
const dongFile = new File(
60
+
[
61
+
// version
62
+
(() => {
63
+
const version = new Int8Array(new ArrayBuffer(2));
64
+
version[0] = 0xd0;
65
+
version[1] = 2;
66
+
return version;
67
+
})(),
68
+
// image type
69
+
image.type,
70
+
// 00 padding
71
+
new ArrayBuffer(256 - image.type.length),
72
+
// image size
73
+
(() => {
74
+
const value = new Uint32Array(1);
75
+
value[0] = image.size;
76
+
return value;
77
+
})(),
78
+
// audio type
79
+
audio.type,
80
+
// 00 padding
81
+
new ArrayBuffer(256 - audio.type.length),
82
+
// audio size
83
+
(() => {
84
+
const value = new Uint32Array(1);
85
+
value[0] = audio.size;
86
+
return value;
87
+
})(),
88
+
// image data
89
+
await image.bytes(),
90
+
// audio data
91
+
await audio.bytes(),
92
+
],
93
+
`${prompt("Filename:") ?? "file"}.dong`,
94
+
{
95
+
type: "application/prs.vielle.dong",
96
+
}
97
+
);
98
+
99
+
console.log(
100
+
dongFile,
101
+
dongFile.size,
102
+
await dongFile.text(),
103
+
await dongFile.bytes()
104
+
);
105
+
106
+
// download the dong file
107
+
const url = URL.createObjectURL(dongFile);
108
+
const a = document.createElement("a");
109
+
a.href = url;
110
+
a.download = dongFile.name;
111
+
document.body.appendChild(a);
112
+
a.click();
113
+
document.body.removeChild(a);
114
+
URL.revokeObjectURL(url);
115
+
});
29
116
}
30
117
}
31
118
···
68
155
69
156
<create-dong></create-dong>
70
157
<load-dong></load-dong>
158
+
159
+
<!-- <form action="">
160
+
<label for="image">
161
+
Pick an image file
162
+
<input type="file" id="image" name="image" accept="image/*" />
163
+
</label>
164
+
<label for="audio">
165
+
Pick an audio file
166
+
<input type="file" id="audio" name="audio" accept="audio/*" />
167
+
</label>
168
+
<button id="create">Create</button>
169
+
</form> -->
170
+
<!-- <form action="">
171
+
<label>
172
+
Pick a dong file
173
+
<input type="file" id="dong" name="dong" accept=".dong" />
174
+
</label>
175
+
<canvas id="renderer"></canvas>
176
+
</form> -->
71
177
</Base>