2 * emcclib.js: one of the Javascript components of an Emscripten-based
3 * web/Javascript front end for Puzzles.
5 * The other parts of this system live in emcc.c and emccpre.js. It
6 * also depends on being run in the context of a web page containing
7 * an appropriate collection of bits and pieces (a canvas, some
8 * buttons and links etc), which is generated for each puzzle by the
9 * script html/jspage.pl.
11 * This file contains a set of Javascript functions which we insert
12 * into Emscripten's library object via the --js-library option; this
13 * allows us to provide JS code which can be called from the
14 * Emscripten-compiled C, mostly dealing with UI interaction of
18 mergeInto(LibraryManager.library, {
20 * void js_debug(const char *message);
22 * A function to write a diagnostic to the Javascript console.
23 * Unused in production, but handy in development.
25 js_debug: function(ptr) {
26 console.log(Pointer_stringify(ptr));
30 * void js_error_box(const char *message);
32 * A wrapper around Javascript's alert(), so the C code can print
33 * simple error message boxes (e.g. when invalid data is entered
34 * in a configuration dialog).
36 js_error_box: function(ptr) {
37 alert(Pointer_stringify(ptr));
41 * void js_remove_type_dropdown(void);
43 * Get rid of the drop-down list on the web page for selecting
44 * game presets. Called at setup time if the game back end
45 * provides neither presets nor configurability.
47 js_remove_type_dropdown: function() {
48 document.getElementById("gametype").style.display = "none";
52 * void js_remove_solve_button(void);
54 * Get rid of the Solve button on the web page. Called at setup
55 * time if the game doesn't support an in-game solve function.
57 js_remove_solve_button: function() {
58 document.getElementById("solve").style.display = "none";
62 * void js_add_preset(const char *name);
64 * Add a preset to the drop-down types menu. The provided text is
65 * the name of the preset. (The corresponding game_params stays on
66 * the C side and never comes out this far; we just pass a numeric
67 * index back to the C code when a selection is made.)
69 * The special 'Custom' preset is requested by passing NULL to
70 * this function, rather than the string "Custom", since in that
71 * case we need to do something special - see below.
73 js_add_preset: function(ptr) {
74 var name = (ptr == 0 ? "Customise..." : Pointer_stringify(ptr));
75 var value = gametypeoptions.length;
77 var option = document.createElement("option");
79 option.appendChild(document.createTextNode(name));
80 gametypeselector.appendChild(option);
81 gametypeoptions.push(option);
84 // The option we've just created is the one for inventing
85 // a new custom setup.
86 gametypenewcustom = option;
89 // Now create another element called 'Custom', which will
90 // be auto-selected by us to indicate the custom settings
91 // you've previously selected. However, we don't add it to
92 // the game type selector; it will only appear when the
93 // user actually has custom settings selected.
94 option = document.createElement("option");
96 option.appendChild(document.createTextNode("Custom"));
97 gametypethiscustom = option;
102 * int js_get_selected_preset(void);
104 * Return the index of the currently selected value in the type
107 js_get_selected_preset: function() {
108 for (var i in gametypeoptions) {
109 if (gametypeoptions[i].selected) {
110 return gametypeoptions[i].value;
117 * void js_select_preset(int n);
119 * Cause a different value to be selected in the type dropdown
120 * (for when the user selects values from the Custom configurer
121 * which turn out to exactly match a preset).
123 js_select_preset: function(n) {
124 if (gametypethiscustom !== null) {
125 // Fiddle with the Custom/Customise options. If we're
126 // about to select the Custom option, then it should be in
127 // the menu, and the other one should read "Re-customise";
128 // if we're about to select another one, then the static
129 // Custom option should disappear and the other one should
132 if (gametypethiscustom.parentNode == gametypeselector)
133 gametypeselector.removeChild(gametypethiscustom);
134 if (gametypenewcustom.parentNode == gametypeselector)
135 gametypeselector.removeChild(gametypenewcustom);
138 gametypeselector.appendChild(gametypethiscustom);
139 gametypenewcustom.lastChild.data = "Re-customise...";
141 gametypenewcustom.lastChild.data = "Customise...";
143 gametypeselector.appendChild(gametypenewcustom);
144 gametypenewcustom.selected = false;
148 gametypethiscustom.selected = true;
150 gametypeoptions[n].selected = true;
155 * void js_get_date_64(unsigned *p);
157 * Return the current date, in milliseconds since the epoch
158 * (Javascript's native format), as a 64-bit integer. Used to
159 * invent an initial random seed for puzzle generation.
161 js_get_date_64: function(ptr) {
162 var d = (new Date()).valueOf();
163 setValue(ptr, d, 'i64');
167 * void js_update_permalinks(const char *desc, const char *seed);
169 * Update the permalinks on the web page for a new game
170 * description and optional random seed. desc can never be NULL,
171 * but seed might be (if the game was generated by entering a
172 * descriptive id by hand), in which case we suppress display of
173 * the random seed permalink.
175 js_update_permalinks: function(desc, seed) {
176 desc = Pointer_stringify(desc);
177 permalink_desc.href = "#" + desc;
180 permalink_seed.style.display = "none";
182 seed = Pointer_stringify(seed);
183 permalink_seed.href = "#" + seed;
184 permalink_seed.style.display = "inline";
189 * void js_enable_undo_redo(int undo, int redo);
191 * Set the enabled/disabled states of the undo and redo buttons,
194 js_enable_undo_redo: function(undo, redo) {
195 undo_button.disabled = (undo == 0);
196 redo_button.disabled = (redo == 0);
200 * void js_activate_timer();
202 * Start calling the C timer_callback() function every 20ms.
204 js_activate_timer: function() {
205 if (timer === null) {
206 timer_reference_date = (new Date()).valueOf();
207 timer = setInterval(function() {
208 var now = (new Date()).valueOf();
209 timer_callback((now - timer_reference_date) / 1000.0);
210 timer_reference_date = now;
217 * void js_deactivate_timer();
219 * Stop calling the C timer_callback() function every 20ms.
221 js_deactivate_timer: function() {
222 if (timer !== null) {
223 clearInterval(timer);
229 * void js_canvas_start_draw(void);
231 * Prepare to do some drawing on the canvas.
233 js_canvas_start_draw: function() {
234 ctx = offscreen_canvas.getContext('2d');
235 update_xmin = update_xmax = update_ymin = update_ymax = undefined;
239 * void js_canvas_draw_update(int x, int y, int w, int h);
241 * Mark a rectangle of the off-screen canvas as needing to be
242 * copied to the on-screen one.
244 js_canvas_draw_update: function(x, y, w, h) {
246 * Currently we do this in a really simple way, just by taking
247 * the smallest rectangle containing all updates so far. We
248 * could instead keep the data in a richer form (e.g. retain
249 * multiple smaller rectangles needing update, and only redraw
250 * the whole thing beyond a certain threshold) but this will
253 if (update_xmin === undefined || update_xmin > x) update_xmin = x;
254 if (update_ymin === undefined || update_ymin > y) update_ymin = y;
255 if (update_xmax === undefined || update_xmax < x+w) update_xmax = x+w;
256 if (update_ymax === undefined || update_ymax < y+h) update_ymax = y+h;
260 * void js_canvas_end_draw(void);
262 * Finish the drawing, by actually copying the newly drawn stuff
263 * to the on-screen canvas.
265 js_canvas_end_draw: function() {
266 if (update_xmin !== undefined) {
267 var onscreen_ctx = onscreen_canvas.getContext('2d');
268 onscreen_ctx.drawImage(offscreen_canvas,
269 update_xmin, update_ymin,
270 update_xmax - update_xmin,
271 update_ymax - update_ymin,
272 update_xmin, update_ymin,
273 update_xmax - update_xmin,
274 update_ymax - update_ymin);
280 * void js_canvas_draw_rect(int x, int y, int w, int h,
281 * const char *colour);
285 js_canvas_draw_rect: function(x, y, w, h, colptr) {
286 ctx.fillStyle = Pointer_stringify(colptr);
287 ctx.fillRect(x, y, w, h);
291 * void js_canvas_clip_rect(int x, int y, int w, int h);
293 * Set a clipping rectangle.
295 js_canvas_clip_rect: function(x, y, w, h) {
298 ctx.rect(x, y, w, h);
303 * void js_canvas_unclip(void);
305 * Reset to no clipping.
307 js_canvas_unclip: function() {
312 * void js_canvas_draw_line(float x1, float y1, float x2, float y2,
313 * int width, const char *colour);
315 * Draw a line. We must adjust the coordinates by 0.5 because
316 * Javascript's canvas coordinates appear to be pixel corners,
317 * whereas we want pixel centres. Also, we manually draw the pixel
318 * at each end of the line, which our clients will expect but
319 * Javascript won't reliably do by default (in common with other
320 * Postscriptish drawing frameworks).
322 js_canvas_draw_line: function(x1, y1, x2, y2, width, colour) {
323 colour = Pointer_stringify(colour);
326 ctx.moveTo(x1 + 0.5, y1 + 0.5);
327 ctx.lineTo(x2 + 0.5, y2 + 0.5);
328 ctx.lineWidth = width;
329 ctx.lineCap = 'round';
330 ctx.lineJoin = 'round';
331 ctx.strokeStyle = colour;
333 ctx.fillStyle = colour;
334 ctx.fillRect(x1, y1, 1, 1);
335 ctx.fillRect(x2, y2, 1, 1);
339 * void js_canvas_draw_poly(int *points, int npoints,
340 * const char *fillcolour,
341 * const char *outlinecolour);
345 js_canvas_draw_poly: function(pointptr, npoints, fill, outline) {
347 ctx.moveTo(getValue(pointptr , 'i32') + 0.5,
348 getValue(pointptr+4, 'i32') + 0.5);
349 for (var i = 1; i < npoints; i++)
350 ctx.lineTo(getValue(pointptr+8*i , 'i32') + 0.5,
351 getValue(pointptr+8*i+4, 'i32') + 0.5);
354 ctx.fillStyle = Pointer_stringify(fill);
358 ctx.lineCap = 'round';
359 ctx.lineJoin = 'round';
360 ctx.strokeStyle = Pointer_stringify(outline);
365 * void js_canvas_draw_circle(int x, int y, int r,
366 * const char *fillcolour,
367 * const char *outlinecolour);
371 js_canvas_draw_circle: function(x, y, r, fill, outline) {
373 ctx.arc(x + 0.5, y + 0.5, r, 0, 2*Math.PI);
375 ctx.fillStyle = Pointer_stringify(fill);
379 ctx.lineCap = 'round';
380 ctx.lineJoin = 'round';
381 ctx.strokeStyle = Pointer_stringify(outline);
386 * int js_canvas_find_font_midpoint(int height, const char *fontptr);
388 * Return the adjustment required for text displayed using
389 * ALIGN_VCENTRE. We want to place the midpoint between the
390 * baseline and the cap-height at the specified position; so this
391 * function returns the adjustment which, when added to the
392 * desired centre point, returns the y-coordinate at which you
393 * should put the baseline.
395 * There is no sensible method of querying this kind of font
396 * metric in Javascript, so instead we render a piece of test text
397 * to a throwaway offscreen canvas and then read the pixel data
398 * back out to find the highest and lowest pixels. That's good
399 * _enough_ (in that we only needed the answer to the nearest
400 * pixel anyway), but rather disgusting!
402 * Since this is a very expensive operation, we cache the results
403 * per (font,height) pair.
405 js_canvas_find_font_midpoint: function(height, font) {
406 font = Pointer_stringify(font);
408 // Reuse cached value if possible
409 if (midpoint_cache[font] !== undefined)
410 return midpoint_cache[font];
412 // Find the width of the string
413 var ctx1 = onscreen_canvas.getContext('2d');
415 var width = (ctx1.measureText(midpoint_test_str).width + 1) | 0;
417 // Construct a test canvas of appropriate size, initialise it to
418 // black, and draw the string on it in white
419 var measure_canvas = document.createElement('canvas');
420 var ctx2 = measure_canvas.getContext('2d');
421 ctx2.canvas.width = width;
422 ctx2.canvas.height = 2*height;
423 ctx2.fillStyle = "#000000";
424 ctx2.fillRect(0, 0, width, 2*height);
425 var baseline = (1.5*height) | 0;
426 ctx2.fillStyle = "#ffffff";
428 ctx2.fillText(midpoint_test_str, 0, baseline);
430 // Scan the contents of the test canvas to find the top and bottom
432 var pixels = ctx2.getImageData(0, 0, width, 2*height).data;
433 var ymin = 2*height, ymax = -1;
434 for (var y = 0; y < 2*height; y++) {
435 for (var x = 0; x < width; x++) {
436 if (pixels[4*(y*width+x)] != 0) {
437 if (ymin > y) ymin = y;
438 if (ymax < y) ymax = y;
444 var ret = (baseline - (ymin + ymax) / 2) | 0;
445 midpoint_cache[font] = ret;
450 * void js_canvas_draw_text(int x, int y, int halign,
451 * const char *colptr, const char *fontptr,
454 * Draw text. Vertical alignment has been taken care of on the C
455 * side, by optionally calling the above function. Horizontal
456 * alignment is handled here, since we can get the canvas draw
457 * function to do it for us with almost no extra effort.
459 js_canvas_draw_text: function(x, y, halign, colptr, fontptr, text) {
460 ctx.font = Pointer_stringify(fontptr);
461 ctx.fillStyle = Pointer_stringify(colptr);
462 ctx.textAlign = (halign == 0 ? 'left' :
463 halign == 1 ? 'center' : 'right');
464 ctx.textBaseline = 'alphabetic';
465 ctx.fillText(Pointer_stringify(text), x, y);
469 * int js_canvas_new_blitter(int w, int h);
471 * Create a new blitter object, which is just an offscreen canvas
472 * of the specified size.
474 js_canvas_new_blitter: function(w, h) {
475 var id = blittercount++;
476 blitters[id] = document.createElement("canvas");
477 blitters[id].width = w;
478 blitters[id].height = h;
483 * void js_canvas_free_blitter(int id);
485 * Free a blitter (or rather, destroy our reference to it so JS
486 * can garbage-collect it, and also enforce that we don't
487 * accidentally use it again afterwards).
489 js_canvas_free_blitter: function(id) {
494 * void js_canvas_copy_to_blitter(int id, int x, int y, int w, int h);
496 * Copy from the puzzle image to a blitter. The size is passed to
497 * us, partly so we don't have to remember the size of each
498 * blitter, but mostly so that the C side can adjust the copy
499 * rectangle in the case where it partially overlaps the edge of
502 js_canvas_copy_to_blitter: function(id, x, y, w, h) {
503 var blitter_ctx = blitters[id].getContext('2d');
504 blitter_ctx.drawImage(offscreen_canvas,
510 * void js_canvas_copy_from_blitter(int id, int x, int y, int w, int h);
512 * Copy from a blitter back to the puzzle image. As above, the
513 * size of the copied rectangle is passed to us from the C side
514 * and may already have been modified.
516 js_canvas_copy_from_blitter: function(id, x, y, w, h) {
517 ctx.drawImage(blitters[id],
523 * void js_canvas_make_statusbar(void);
525 * Cause a status bar to exist. Called at setup time if the puzzle
526 * back end turns out to want one.
528 js_canvas_make_statusbar: function() {
529 var statusholder = document.getElementById("statusbarholder");
530 statusbar = document.createElement("div");
531 statusbar.style.overflow = "hidden";
532 statusbar.style.width = (onscreen_canvas.width - 4) + "px";
533 statusholder.style.width = onscreen_canvas.width + "px";
534 statusbar.style.height = "1.2em";
535 statusbar.style.textAlign = "left";
536 statusbar.style.background = "#d8d8d8";
537 statusbar.style.borderLeft = '2px solid #c8c8c8';
538 statusbar.style.borderTop = '2px solid #c8c8c8';
539 statusbar.style.borderRight = '2px solid #e8e8e8';
540 statusbar.style.borderBottom = '2px solid #e8e8e8';
541 statusbar.appendChild(document.createTextNode(" "));
542 statusholder.appendChild(statusbar);
546 * void js_canvas_set_statusbar(const char *text);
548 * Set the text in the status bar.
550 js_canvas_set_statusbar: function(ptr) {
551 var text = Pointer_stringify(ptr);
552 statusbar.replaceChild(document.createTextNode(text),
553 statusbar.lastChild);
557 * void js_canvas_set_size(int w, int h);
559 * Set the size of the puzzle canvas. Called at setup, and every
560 * time the user picks new puzzle settings requiring a different
563 js_canvas_set_size: function(w, h) {
564 onscreen_canvas.width = w;
565 offscreen_canvas.width = w;
566 if (statusbar !== null) {
567 statusbar.style.width = (w - 4) + "px";
568 document.getElementById("statusbarholder").style.width = w + "px";
570 resizable_div.style.width = w + "px";
572 onscreen_canvas.height = h;
573 offscreen_canvas.height = h;
577 * void js_dialog_init(const char *title);
579 * Begin constructing a 'dialog box' which will be popped up in an
580 * overlay on top of the rest of the puzzle web page.
582 js_dialog_init: function(titletext) {
583 // Create an overlay on the page which darkens everything
585 dlg_dimmer = document.createElement("div");
586 dlg_dimmer.style.width = "100%";
587 dlg_dimmer.style.height = "100%";
588 dlg_dimmer.style.background = '#000000';
589 dlg_dimmer.style.position = 'fixed';
590 dlg_dimmer.style.opacity = 0.3;
591 dlg_dimmer.style.top = dlg_dimmer.style.left = 0;
592 dlg_dimmer.style["z-index"] = 99;
594 // Now create a form which sits on top of that in turn.
595 dlg_form = document.createElement("form");
596 dlg_form.style.width = (window.innerWidth * 2 / 3) + "px";
597 dlg_form.style.opacity = 1;
598 dlg_form.style.background = '#ffffff';
599 dlg_form.style.color = '#000000';
600 dlg_form.style.position = 'absolute';
601 dlg_form.style.border = "2px solid black";
602 dlg_form.style.padding = "20px";
603 dlg_form.style.top = (window.innerHeight / 10) + "px";
604 dlg_form.style.left = (window.innerWidth / 6) + "px";
605 dlg_form.style["z-index"] = 100;
607 var title = document.createElement("p");
608 title.style.marginTop = "0px";
609 title.appendChild(document.createTextNode
610 (Pointer_stringify(titletext)));
611 dlg_form.appendChild(title);
613 dlg_return_funcs = [];
618 * void js_dialog_string(int i, const char *title, const char *initvalue);
620 * Add a string control (that is, an edit box) to the dialog under
623 js_dialog_string: function(index, title, initialtext) {
624 dlg_form.appendChild(document.createTextNode(Pointer_stringify(title)));
625 var editbox = document.createElement("input");
626 editbox.type = "text";
627 editbox.value = Pointer_stringify(initialtext);
628 dlg_form.appendChild(editbox);
629 dlg_form.appendChild(document.createElement("br"));
631 dlg_return_funcs.push(function() {
632 dlg_return_sval(index, editbox.value);
637 * void js_dialog_choices(int i, const char *title, const char *choicelist,
640 * Add a choices control (i.e. a drop-down list) to the dialog
641 * under construction. The 'choicelist' parameter is unchanged
642 * from the way the puzzle back end will have supplied it: i.e.
643 * it's still encoded as a single string whose first character
644 * gives the separator.
646 js_dialog_choices: function(index, title, choicelist, initvalue) {
647 dlg_form.appendChild(document.createTextNode(Pointer_stringify(title)));
648 var dropdown = document.createElement("select");
649 var choicestr = Pointer_stringify(choicelist);
650 var items = choicestr.slice(1).split(choicestr[0]);
652 for (var i in items) {
653 var option = document.createElement("option");
655 option.appendChild(document.createTextNode(items[i]));
656 if (i == initvalue) option.selected = true;
657 dropdown.appendChild(option);
658 options.push(option);
660 dlg_form.appendChild(dropdown);
661 dlg_form.appendChild(document.createElement("br"));
663 dlg_return_funcs.push(function() {
665 for (var i in options) {
666 if (options[i].selected) {
667 val = options[i].value;
671 dlg_return_ival(index, val);
676 * void js_dialog_boolean(int i, const char *title, int initvalue);
678 * Add a boolean control (a checkbox) to the dialog under
679 * construction. Checkboxes are generally expected to be sensitive
680 * on their label text as well as the box itself, so for this
681 * control we create an actual label rather than merely a text
682 * node (and hence we must allocate an id to the checkbox so that
683 * the label can refer to it).
685 js_dialog_boolean: function(index, title, initvalue) {
686 var checkbox = document.createElement("input");
687 checkbox.type = "checkbox";
688 checkbox.id = "cb" + String(dlg_next_id++);
689 checkbox.checked = (initvalue != 0);
690 dlg_form.appendChild(checkbox);
691 var checkboxlabel = document.createElement("label");
692 checkboxlabel.setAttribute("for", checkbox.id);
693 checkboxlabel.textContent = Pointer_stringify(title);
694 dlg_form.appendChild(checkboxlabel);
695 dlg_form.appendChild(document.createElement("br"));
697 dlg_return_funcs.push(function() {
698 dlg_return_ival(index, checkbox.checked ? 1 : 0);
703 * void js_dialog_launch(void);
705 * Finish constructing a dialog, and actually display it, dimming
706 * everything else on the page.
708 js_dialog_launch: function() {
709 // Put in the OK and Cancel buttons at the bottom.
712 button = document.createElement("input");
713 button.type = "button";
715 button.onclick = function(event) {
716 for (var i in dlg_return_funcs)
717 dlg_return_funcs[i]();
720 dlg_form.appendChild(button);
722 button = document.createElement("input");
723 button.type = "button";
724 button.value = "Cancel";
725 button.onclick = function(event) {
728 dlg_form.appendChild(button);
730 document.body.appendChild(dlg_dimmer);
731 document.body.appendChild(dlg_form);
735 * void js_dialog_cleanup(void);
737 * Stop displaying a dialog, and clean up the internal state
738 * associated with it.
740 js_dialog_cleanup: function() {
741 document.body.removeChild(dlg_dimmer);
742 document.body.removeChild(dlg_form);
743 dlg_dimmer = dlg_form = null;
744 onscreen_canvas.focus();
748 * void js_focus_canvas(void);
750 * Return keyboard focus to the puzzle canvas. Called after a
751 * puzzle-control button is pressed, which tends to have the side
752 * effect of taking focus away from the canvas.
754 js_focus_canvas: function() {
755 onscreen_canvas.focus();