-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
126 lines (110 loc) · 3.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VERSE - Playground</title>
<style>
html, body {
margin: 0;
height:100%;
}
.playground-controls {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
z-index: 1000;
opacity: 0;
margin: 1em;
}
.playground-controls:hover {
opacity: 1;
}
.playground-control {
display: block;
width: 100%;
}
.embedded-iframe {
height: 100%;
}
#iframe-embed {
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<div class="playground-controls">
<div class="playground-control">
<label for="hash">Hash</label>
<input id="hash" name="hash" placeholder="any random hash" value="123456789"/>
<input type="checkbox" id="randomize-hash" checked="checked" />
</div>
<div class="playground-control">
<label for="edition-number">Edition Number</label>
<input id="edition-number" name="edition-number" value="1"/>
<input type="checkbox" id="randomize-edition-number" checked="checked" />
</div>
<div class="playground-control">
<label for="total-editions">Total Editions</label>
<input id="total-editions" name="total-editions" value="10"/>
<input type="checkbox" id="randomize-total-editions" checked="checked" />
</div>
<div class="playground-control">
<label for="iframe-url">IFrame URL</label>
<input id="iframe-url" name="iframe-url" value="examples/p5-example.html"/>
</div>
<div class="playground-control">
<button id="randomize-btn">Randomize</button>
</div>
</div>
<div class="embedded-iframe">
<iframe id="iframe-embed" src=""></iframe>
</div>
</body>
<script>
function randomHash(hashLength) {
hashLength = hashLength ?? 32
const alphabet = "0123456789abcdef"
let result = ""
for (let i = 0; i < hashLength; ++i) {
const letter = alphabet[Math.floor(Math.random() * alphabet.length)]
result += letter
}
return result
}
function applyChanges() {
let srcValue = iframeUrl.value
const payload = {
hash: hash.value,
editionNumber: editionNumber.value,
totalEditions: totalEditions.value,
}
srcValue += "?payload=" + btoa(JSON.stringify(payload))
iframeEmbed.setAttribute("src", srcValue)
}
const hash = document.getElementById("hash")
const editionNumber = document.getElementById("edition-number")
const totalEditions = document.getElementById("total-editions")
const iframeUrl = document.getElementById("iframe-url")
const iframeEmbed = document.getElementById("iframe-embed")
document.getElementById("randomize-btn").addEventListener('click', (ev) => {
if (document.getElementById("randomize-total-editions").checked) {
totalEditions.value = Math.round(Math.random() * 1000)
}
let maxEditions = Number(totalEditions.value)
if (document.getElementById("randomize-edition-number").checked) {
editionNumber.value = Math.ceil(Math.random() * maxEditions).toString()
}
if (document.getElementById("randomize-hash").checked) {
hash.value = randomHash(64)
}
applyChanges()
})
hash.addEventListener("input", applyChanges)
editionNumber.addEventListener("input", applyChanges)
totalEditions.addEventListener("input", applyChanges)
iframeUrl.addEventListener("input", applyChanges)
applyChanges()
</script>
</html>