-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
175 lines (173 loc) · 7.58 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>GLEAM visual novel creator</title>
<link rel="stylesheet" type="text/css" href="css/editor.css">
<link rel="stylesheet" type="text/css" href="css/player.css">
</head>
<body>
<main id="gleam-editor-launcher">
<header><h1><span class="gleam-title">GLEAM</span> visual novel creator v0.3</h1></header>
<section id="gleam-editor-load">
<h1>Load project</h1>
<ul id="gleam-editor-projects-list">
<li class="-empty">You don't have any projects yet.</li>
</ul>
</section>
<section id="gleam-editor-new">
<h1>Create a project</h1>
<form>
<dl id="gleam-editor-new-form">
<dt>Title</dt>
<dd><input type="text" name="title" placeholder="(untitled)"></dd>
<dt>Subtitle</dt>
<dd><input type="text" name="subtitle"></dd>
<dt>Author</dt>
<dd><input type="text" name="author"></dd>
<dt>Size</dt>
<dd>
<input type="text" name="width" inputmode="numeric" pattern="\d+" size="5"> × <input type="text" name="width" inputmode="numeric" size="5">
</dd>
<dd>
<p>Note that currently, VNs can't scale to fit the screen.</p>
<p>Some people are still on 1280 × 720, and that size will only fit if they go fullscreen.</p>
<p>Phones are a mess, good luck there!</p>
<p>
Some common sizes:
<button type="button">800 × 600</button>
<button type="button">1280 × 720</button>
</p>
<!--
TODO am i ever gonna use this, not clear
<br>
<div class="gleam-editor-size-preview">
<div class="-1080p" data-label="1080p"></div>
<div class="-720p" data-label="720p"></div>
<div class="-screen" data-label="screen"></div>
<div class="-browser" data-label="browser"></div>
<div class="-viewport" data-label="viewport"></div>
<div class="-vn" data-label="VN size"></div>
</div>
-->
</dd>
<dd><button type="submit" class="gleam-big-button">Create</button>
</dl>
</form>
</section>
<section id="gleam-editor-intro">
<h1>What is this?</h1>
<p>This is <span class="gleam-title">GLEAM</span>, a web-based visual novel creator.</p>
<p>It's still a work in progress, but it should allow you to create simple linear VNs.</p>
<p><span class="gleam-title">GLEAM</span> <em>is not</em>, and will never be, a substitute for much more powerful tools like <a href="https://www.renpy.org/">Ren'Py</a>. It's for visual novels that are meant to be read more than played. On the other hand, it doesn't require programming or a text editor.</p>
<p>Supported features: backgrounds (or comic panels), speakers with portraits, scrolling text, simple transitions.</p>
<p>Planned features: remembering your place, indexable by Google.</p>
<p>Features that will <strong>never</strong> be implemented: saving/loading during playback, dynamic jumping, shaders...</p>
</section>
</main>
<main hidden id="gleam-editor-main">
<header>
<h1><span class="gleam-title">GLEAM</span> visual novel creator v0.2</h1>
<div id="gleam-editor-header-metadata">
<h2></h2>
<h3></h3>
</div>
<nav id="gleam-editor-toolbar">
<button type="button" disabled>Undo</button>
<button type="button" disabled>Redo</button>
<output>heavily modified!</output>
<button type="button" disabled>Save copy</button>
<button type="button" disabled>Close</button>
</nav>
</header>
<section class="gleam-editor-panel" id="gleam-editor-player">
<header>
<h1>Preview</h1>
<nav></nav>
</header>
<div class="gleam-editor-panel-body">
</div>
</section>
<section class="gleam-editor-panel" id="gleam-editor-roles">
<header>
<h1>Roles</h1>
<nav></nav>
</header>
<div class="gleam-editor-panel-body">
<ol class="gleam-editor-roles">
</ol>
</div>
</section>
<section class="gleam-editor-panel" id="gleam-editor-assets">
<header><h1>Assets</h1></header>
<div class="gleam-editor-panel-body">
<div id="gleam-editor-assets-source"></div>
<button type="button" id="assets-directory-button">Choose directory</button>
<input type="file" id="assets-directory-file" webkitdirectory>
<div id="gleam-editor-asset-hint" class="gleam-editor-hint">
Put all your assets (images, music, etc.) in a directory, then drag that directory here to use them!
</div>
<!--
<input type="file" webkitdirectory>
-->
<ol class="gleam-editor-assets">
</ol>
</div>
</section>
<section class="gleam-editor-panel" id="gleam-editor-script">
<header>
<h1>Script</h1>
<nav></nav>
</header>
<div class="gleam-editor-panel-body">
<ol class="gleam-editor-beats-list">
</ol>
<!-- TODO waterfall view? see what the state of anything is at any point? -->
</div>
<footer>
<!-- state of selected beat goes here -->
</footer>
</section>
</main>
<script type="module">
import { attach_editor } from './build/gleam-editor.js';
// FIXME give a real api for this. question is, how do i inject into the editor AND the player
window.addEventListener('load', ev => {
let launcher = attach_editor();
//launcher.load_from_url('res/species-lunekos/');
/*
// TODO i guess this needs some ui
let json = window.localStorage.getItem('gleam-temp');
let script;
if (json) {
// TODO error handling here, probably
script = MutableScript.from_json(JSON.parse(json));
}
else {
script = new MutableScript;
script.add_role(new Stage('stage'));
}
editor.load_script(script, new NullAssetLibrary);
return;
//*/
// NOTE TO FUTURE GIT SPELUNKERS: sorry this exists only on my filesystem and points to all the old flora vns lol
/*
// FIXME is there ANY kind of hijinks i can do to allow loading a VN cross-domain without CORS?
let root = 'res/prompt2-itchyitchy-final/';
let root_url = new URL(root, document.location);
//root_url = new URL('https://apps.veekun.com/flora-cutscenes/res/prompt2-itchyitchy-final/');
let library = new RemoteAssetLibrary(root_url);
let xhr = new XMLHttpRequest;
xhr.addEventListener('load', ev => {
// FIXME handle errors yadda yadda
let script = MutableScript.from_legacy_json(JSON.parse(xhr.responseText));
editor.load_script(script, library);
});
// XXX lol
xhr.open('GET', new URL('script.json', root_url));
xhr.send();
*/
});
</script>
</body>
</html>