-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
147 lines (130 loc) · 5.07 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<div id="main"></div> <!-- Elm seems to want this *here*... -->
<head>
<meta charset="utf-8">
<title>wordpet</title>
<link rel="icon" type="image/png" href="http://foldr.moe/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
<style>
body { background-color: rgb(125, 119, 168); }
.rattle { animation: rattle 0.82s step-end both; }
@keyframes rattle {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}
.hatch { animation: hatch 1s ease-out both; }
@keyframes hatch {
from { filter: brightness(800%); }
to { filter: brightness(100%); }
}
.pet .wiggly { animation: pet 0.1s ease-out both; }
@keyframes pet {
from { transform: translatey(4px); }
to { transform: none; }
}
.dizzy .wiggly { animation: dizzy 0.05s alternate infinite ease-in-out both; }
@keyframes dizzy {
from { transform: translatex(-2px); }
to { transform: translatex(2px); }
}
.wiggly { animation: up4px 0.8s alternate infinite steps(2, end); }
@keyframes up4px { to { transform: translatey(-4px);} }
/* This selects the *parent* of the speech bubble div (which is a "helper"
div that style-elments injects, hence this rule's presence in HTML-land).
It sets that elements' margin rules so that the speech bubble overflows
*downward* instead of both up and down. */
div[class^="speech-bubble-holder"]>div:nth-of-type(2)>div {
margin-top: auto; margin-bottom: auto;
}
</style>
<script src="https://unpkg.com/[email protected]/builds/compromise.min.js"></script>
<script src="main.js"></script>
<script>
var app = Elm.Main.fullscreen();
app.ports.sentences.subscribe(function(text) {
var output = nlp(text).sentences().list.map(function(x) { return x.out('text').trim(); });
app.ports.receiveSentences.send(output);
});
app.ports.normalize.subscribe(function(text) {
var output = nlp(text).out('root');
app.ports.receiveNormalize.send(output);
});
// Not sure if this helps at all?
var audioCache = {};
for (var i = 0; i < 120; i++) {
var path = 'assets/sfx/chomp' + i + '.mp3'
audioCache[path] = new Audio(path);
audioCache[path].load();
}
app.ports.playOneOf.subscribe(function(paths) {
var path = paths[Math.floor(Math.random() * paths.length)];
if (!audioCache[path]) {
audioCache[path] = new Audio(path);
}
audioCache[path].volume = 0.25;
audioCache[path].play();
});
// Animation.trigger
app.ports.trigger.subscribe(function(className) {
var critter = document.getElementById('critter');
critter.classList.add(className);
critter.addEventListener('animationend', function() {
critter.classList.remove(className);
}, false);
});
// Download.download
app.ports.download.subscribe(function(args) {
var filename = args[0], contents = args[1];
var element = document.createElement('a');
element.setAttribute('href', 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(contents));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
});
app.ports.upload.subscribe(function() {
document.getElementById('import-critter').click();
});
app.ports.prefetch.subscribe(function(href) {
var prefetchLink = document.createElement("link");
prefetchLink.href = href;
prefetchLink.rel = "prefetch";
prefetchLink.as = "image";
document.head.appendChild(prefetchLink);
});
// Save model to local storage.
app.ports.saveModel.subscribe(function(json) {
localStorage.setItem('model', json);
});
// Load model from local storage, if possible.
app.ports.loadModel.subscribe(function() {
var json = localStorage.getItem('model');
app.ports.receiveLoadModel.send(json || '');
});
// I stole this from here. https://stackoverflow.com/a/42583090/257418
function onFileLoad(elementId, event) {
app.ports.receiveContents.send(event.target.result);
}
function onChooseFile(event, onLoadFileHandler) {
if (typeof window.FileReader !== 'function')
throw ("The file API isn't supported on this browser.");
let input = event.target;
if (!input)
throw ("The browser does not properly implement the event object");
if (!input.files)
throw ("This browser does not support the `files` property of the file input.");
if (!input.files[0])
return undefined;
let file = input.files[0];
let fr = new FileReader();
fr.onload = onLoadFileHandler;
fr.readAsText(file);
}
</script>
</head>
<input id="import-critter" type="file" onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' style="display: none;" />
</html>