-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
148 lines (109 loc) · 5.08 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
148
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>inklewriter to ink converter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo_bar">
<img src="https://www.inklestudios.com/img/inkle-logo@2x.png"/>
</div>
<div class="container">
<h1>inklewriter JSON to ink converter</h1>
<p>This converter takes the data from an <a href="https://www.inklestudios.com/inklewriter">inklewriter</a> story, and converts it to an <a href="https://www.inklestudios.com/ink">ink</a> file.</p>
<p>To use:</p>
<ul>
<li>Download your story data. Click on the Share button in inklewriter, copy the URL and put ".json" on the end. Download that file to your computer.</li>
<li>Click choose file below and pick the .json file.</li>
<li>It will attempt to convert your story into ink. You can then copy/paste it or simply download the ink file.</li>
</ul>
<div class="input_option">
<label for="file">inklewriter JSON file: </label>
<input type="file" id="file" class="file" name="inklewriter JSON file" />
</div>
<div class="input_option">
<label for="terminateLooseEnds">Terminate all loose ends with <pre class='inline'>-> END</pre>: </label>
<input type="checkbox" id="terminateLooseEnds" checked/>
</div>
<div id="converted_ink" class="hidden converted_ink">
<button class="download_button" id="download_button">Download</button>
<pre id="result_ink" class="ink"></pre>
</div>
</pre>
</div>
<!-- Hack to allow easy reuse of the node-based JS file! -->
<script>let exports = {}</script>
<script src="dist/inklewriter-convert.js"></script>
<script>
let currentFilename = "";
let convertedInk = "";
let convertedInkFilename = "";
let loadedJSONTxt = "";
function onSelectFile(evt) {
let files = evt.target.files; // FileList object
if( !files || files.length <= 0 )
return;
let file = files[0];
var reader = new FileReader();
currentFilename = file.name;
reader.onload = function(theFile) {
loadedJSONTxt = reader.result;
convertLoadedText();
};
// Read in the image file as a data URL.
reader.readAsText(file);
}
function onCheckTerminate(evt) {
if( loadedJSONTxt ) {
// The re-conversion is too fast to be noticeable
// so let's insert a pause so it's clear that it's refreshed!
document.getElementById("result_ink").style.color = "white";
setTimeout(() => {
convertLoadedText();
document.getElementById("result_ink").style.color = "black";
}, 100);
}
}
document.getElementById('file').addEventListener('change', onSelectFile, false);
document.getElementById('terminateLooseEnds').addEventListener('change', onCheckTerminate, false);
document.getElementById('download_button').addEventListener('click', download, false);
function convertLoadedText() {
let terminateLooseEnds = document.getElementById('terminateLooseEnds').checked;
try {
let loadedJSON = JSON.parse(loadedJSONTxt);
convertedInk = convert(loadedJSON, terminateLooseEnds);
} catch(e) {
convertedInk = e.toString();
}
convertedInkFilename = currentFilename.replace(".json", ".ink");
if( convertedInkFilename.indexOf(".ink") == -1 ) convertedInkFilename += ".ink";
document.getElementById('result_ink').innerText = convertedInk;
document.getElementById('converted_ink').classList.remove("hidden");
document.getElementById('download_button').innerText = "Download "+convertedInkFilename;
}
function download() {
download_file(convertedInkFilename, convertedInk);
}
// Yay, stackoverflow coding!
// https://stackoverflow.com/questions/8310657/how-to-create-a-dynamic-file-link-for-download-in-javascript
function download_file(name, contents, mime_type) {
mime_type = mime_type || "text/plain";
var blob = new Blob([contents], {type: mime_type});
var dlink = document.createElement('a');
dlink.download = name;
dlink.href = window.URL.createObjectURL(blob);
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
</body>
</html>