-
Notifications
You must be signed in to change notification settings - Fork 7
/
action_about.html
243 lines (217 loc) · 13.6 KB
/
action_about.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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!--
- action_about.html
- Product information and language select
-->
<section id='action_about'>
<style scoped>
#action_about div { max-width: 1000px; margin: 0 auto; }
#action_about div h1, #action_about article h2 { clear: both; }
#action_about img { border: 2px ridge lightgrey; width: 400px; }
#action_about figure.right { margin-left: 1em; }
#action_about figure.left { margin-right: 1em; }
</style>
<div>
<article class='left'>
<h1 class='i18n'> action.about.h_language </h1>
<p>
Please select language <span class='i18n'> action.about.lbl_select_lang </span>
<select id='action_about_lst_lang' onchange='od.action.about.change_language(this.value)'>
<option value='' class='i18n'> action.about.opt_auto
<option value='zh'> Chinese 中文
<option value='en'> English
</select> <br/>
<span class='i18n'> action.about.lbl_toggle_highlight </span>
<label>
<input type='radio' name='highlight' id='action_about_rdo_highlight_on' checked onclick='od.gui.toggle_highlight(true)' />
<span class='i18n'> action.about.opt_highlight_on </span>
</label>
<label>
<input type='radio' name='highlight' id='action_about_rdo_highlight_off' onclick='od.gui.toggle_highlight(false)' />
<span class='i18n'> action.about.opt_highlight_off </span>
</label>
</p>
</article>
<article class='right'>
<h1 class='i18n'> action.about.h_license </h1>
<p class='i18n'> action.about.p_license </p>
<p>
<button class='i18n' onclick='od.gui.go("license")'> action.license.link_text </button>
<a class='button i18n' href='https://github.com/Sheep-y/trpg-dnd-4e-db'> action.about.a_github </a>
<button class='i18n' href='mailto:your.sheepy@gmail.com' accesskey="9" > action.about.a_email </button>
</p>
</article>
<article>
<h1 class='i18n'> action.about.h_get_data </h1>
<p class='i18n'> action.about.p_get_data </p>
</article>
<article>
<h1 class='i18n'> action.about.h_search_data </h1>
<p class='i18n'> action.about.p_search_data </p>
</article>
<article>
<h1 class='i18n'> action.about.h_move_data </h1>
<p class='i18n'> action.about.p_move_data </p>
</article>
<article>
<h1 class='i18n'> action.about.h_history </h1>
<p>
<span class="i18n"> action.about.lbl_english_only </span>
</p>
<section lang="en">
<h2> Original Prototype </h2>
<figure class='right'>
<a href="https://github.com/Sheep-y/trpg-dnd-4e-db/blob/master/src/res/img/History - 1st alpha.jpg"><img alt='' id="action_about_history_0" src=''/></a>
<figcaption>Screenshot version: <time>2010-11-17</time></figcaption>
</figure>
<p>
It all started with online Character Builder.
For many years, I was spending 3 hours on public transport each day.
Sometimes I spent them on the original, offline Character Builder.
</p><p>
Until it went online.
Wanting better offline access, the prototype as seen on right was born.
It was a bookmarket that just grabbed entries from online compendium into a popup, applied <a href='http://www.datatables.net/'>DataTables</a> on top of it, and then you can manually save the popup for offline use.
</p>
</section>
<section lang="en">
<h2> 1<sup>st</sup> Version </h2>
<figure class='left'>
<a href="https://github.com/Sheep-y/trpg-dnd-4e-db/blob/master/src/res/img/History - 1st gen.jpg"><img alt='' id="action_about_history_1" src=''/></a>
<figcaption>Screenshot version: <time>2012-03-23</time>;<br/>Main development ceased in 2011 March. </figcaption>
</figure>
<p>
So I kept working on it.
Inspired by DataTables' search code, I coded a search term parser that works with Google like syntax.
</p><p>
With the ability to search for feat with <q>"bonus to damage" OR "extra damage" -"feat bonus"</q>, it is now possible to build characters using a goal-oriented approach, instead of choosing from valid options.
</p><p>
New features are also being added. Preview panel, multi columns, or pick out items and generate a simple sheet such as character power list.
The script will also grab a <a title='Official D&D wallpaper' href='http://www.wizards.com/default.asp?x=dnd/dnd/20030711x'>nice wallpaper</a> through <a href='http://en.wikipedia.org/wiki/Coral_Content_Distribution_Network'>Coral</a>, output fancy CSS styles, data uri icons etc.
</p><p>
It helped me a lot in the two years that follows, both as a DM and as a player.
</p>
</section>
<section lang="en">
<h2> 2<sup>nd</sup> Version </h2>
<figure class='right'>
<a href="https://github.com/Sheep-y/trpg-dnd-4e-db/blob/master/src/res/img/History - 2nd alpha.jpg"><img alt='' id="action_about_history_2" src=''/></a>
<figcaption>Screenshot version: <time>2012-02-17</time></figcaption>
</figure>
<p>
The problem with first version is that it is big and slow even on PC, much less mobile.
"Powers" is a 15MB html file, and the browser has to layout 8800 full item content when it is opened.
</p><p>
Thus come the second version, powered by the then prototype <a href="http://jquerymobile.com/">jQuery Mobile</a>.
It looks good. Impressive animation, elegance style, familiar icons. An index was created from <a href='http://ails.deviantart.com/art/420-Pixel-Art-Icons-for-RPG-129892453'>Ails' RPG icons</a>, data are processed in multiple threads, and appcache used to preload data.
</p><p>
Then disaster struck. Most mobile browser refuse to load local HTML, and Google Chrome disabling a lot of features for local file.
Biggest problem is, jQuery Mobile takes very long time to display entry titles (rightmost screen). Two to three times longer then displaying their _contents_ in previous version.
This is when I give up.
</p><p>
At least the nice index were reused in first version.
</p>
</section>
<section lang="en">
<h2> 3<sup>rd</sup> Version </h2>
<figure class='left'>
<a href="https://github.com/Sheep-y/trpg-dnd-4e-db/blob/master/src/res/img/History - 3rd alpha.jpg"><img alt='' id="action_about_history_3" src=''/></a>
<figcaption>Screenshot version: <time>2012-05-16</time></figcaption>
</figure>
<p>
Third version development started in 2012 Sep, and is a bold experiment in what can JavaScript do.
Instead of letting others do most of the work, the new version do download, index, everything by itself.
</p><p>
Sadly, when first prototype is working, Firefox <a title="Security Checks and enablePrivilege in Gecko, part 1" href="https://blog.mozilla.org/mrbkap/2012/09/12/">killed file writing</a> permanently.
</p><p>
After playtesting D&D Next (5th edition) for a few months, work restarted in May 2013.
With a simplified database structure, the second prototype works like a charm.
But then my time diverted to 5e and other games, and major development stopped around May 2014.
</p>
</section>
<section lang="en">
<h2> 3.5<sup>th</sup> Version </h2>
<figure class='right'>
<a href="https://github.com/Sheep-y/trpg-dnd-4e-db/blob/master/src/res/img/History - v3.5 viewer.png"><img alt='' id="action_about_history_3_5" src=''/></a>
<figcaption>Screenshot version: <time>2016-07-20</time></figcaption>
</figure>
<p>
By 2016, I gave up 5e and switch back. The world changed a lot.
Mobile has overtaken desktop, Internet Explorer <a href='https://blogs.msdn.microsoft.com/ie/2015/02/26/a-break-from-the-past-the-birth-of-microsofts-new-web-rendering-engine/'>is dead</a>,
DDI <a href='http://www.enworld.org/forum/content.php?3087-4e-DnD-Insider-Moving'>has frozen</a> and switched login system,
<a href='https://en.wikipedia.org/wiki/JavaFX'>JavaFX 8</a> brings a <a href='https://docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebEngine.html'>scriptable browser</a> to standard Java.
Our firstborn is due in October, too, so I better to fix the <a href='https://github.com/Sheep-y/trpg-dnd-4e-db/issues/9'>download</a> <a href='https://github.com/Sheep-y/trpg-dnd-4e-db/issues/12'>problems</a> <i>asap</i>.
</p><p>
In <a href='https://github.com/Sheep-y/trpg-dnd-4e-db/commit/0fede587e31f7ec90f00e779f906822ddb3413a6#diff-49da3f7f21ed8673cfa993016bea63a7'>July 2016</a>,
a downloader is coded in Java in two weeks.
Code is simple. No need to check new data, no need to fool JavaScript security, and it makes some v3 plans come true.
Power listing now shows frequency and keywords, and full text search now excludes flavour text.
</p><p>
The plan was to bug fix the old viewer and call it a version, but it works pretty well, so maybe I'll put more work on this version before putting it down to teach my baby D&D.
</p>
</section>
</article>
<article lang="en">
<h1 class='i18n'> action.about.h_version_history </h1>
<p class="i18n"> action.about.lbl_english_only </p>
<dl>
<dt> 3.5.2.1 <time>???</time> </dt>
<dd> Raw data export. Fix new Java compatibility and other download bugs. </dd>
<dt> 3.5.2 <time>2016-11-19</time> </dt>
<dd> Multi-thread export, reduce file count from 25k to 1.8k, linkify entry names, split items into four categories, show type of items (artifact, tattoo, standard), show theme prerequisite, show background benefits, split race ability, share favicon between viewer and downloader, internal lookup, keyboard next/prev. </dd>
<dt> 3.5.1 <time>2016-07-31</time> </dt>
<dd> Implement paging, fix all category list and some search bugs, update entry style and mobile layout, and 370+ entry corrections. </dd>
<dt> 3.5.0 <time>2016-07-20</time> </dt>
<dd> Faster result display; improves layout, highlight, and search. Fix IE 11 and Chrome 51 compatibility. </dd>
<dt> 3.0 M3 <time>2014-05-12</time> </dt>
<dd> Improved search flow, guide, and navigation; implemented filter, sort, next, prev. </dd>
<dt> 3.0 M2 <time>2013-06-25</time> </dt>
<dd> Added local data reindex/delete, navbar, responsive layout, simplify data storage, proper download state tracking, sort & style category, background image, style all entries. </dd>
<dt> 3.0 M1 <time>2013-05-29</time> </dt>
<dd> Added style for power, content image conversion, help doc, AGPL license, view source, email, regx terms. </dd>
<dt> 3.0 M0 <time>2013-05-25</time> </dt>
<dd> Published through Github. Added about page, nav header style. </dd>
<dt> 3.0 Proto 2 <time>2013-05-25</time> </dt>
<dd> Prototype complete after testing on full set of compendium data. </dd>
<dt> 3.0 Design <time>2012-09-09</time> </dt>
<dd> Skeleton code outlining program structure. </dd>
</dl>
</article>
</div>
<header role="banner">
<button class='i18n' onclick='od.gui.go("list")' accesskey='1'> action.list.link_text </button>
<h1 class="i18n"> action.about.title </h1>
<button class='i18n' onclick='scrollTo(0,0)'> gui.top </button>
</header>
</section>
<section id='action_license'>
<article lang="en">
<?coco file( "../license_agpl.html" ) ?>
</article>
<header role="navigation">
<button class='i18n' onclick='od.gui.go("about")' accesskey='1'> action.about.link_text </button>
<h1 class="i18n"> action.license.title </h1>
<button class='i18n' onclick='scrollTo(0,0)'> gui.top </button>
</header>
</section>
<script><?coco-start js(minify) ?> 'use strict';(function action_about_init(){
od.action.about = {
"initialize" : function act_about_init () {
_('#action_about_history_0')[0].src = _('#img_about_history_0')[0].src;
_('#action_about_history_1')[0].src = _('#img_about_history_1')[0].src;
_('#action_about_history_2')[0].src = _('#img_about_history_2')[0].src;
_('#action_about_history_3')[0].src = _('#img_about_history_3')[0].src;
_('#action_about_history_3_5')[0].src = _('#img_about_history_3_5')[0].src;
},
"setup": function act_about_setup () {
od.action.about.change_language( _('#action_about_lst_lang')[0].value );
od.gui.toggle_highlight( od.gui.hl_enabled );
_('#action_about_lbl_folder')[0].textContent = od.config.data_read_path; // Must be after default l10n created the placeholder
},
"change_language" : function act_about_change_language ( lang ) {
_.l.saveLocale( lang );
od.gui.l10n();
},
};
od.action.license = {
};
})();<?coco-end?></script>