zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 08:01:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

New front end! To complement the webification of my puzzles via Java

Browse Source 
applets, here's an alternative webification in Javascript, using
Emscripten in asm.js mode (so that as browsers incorporate asm.js
optimisation, the game generation should run really fast).

[originally from svn r9781]
This commit is contained in:
Simon Tatham
2013-03-30 20:16:21 +00:00
parent e2c84a5fd2
commit 49fba922ea
8 changed files with 1936 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
emccpre.js Normal file
View File

@ -0,0 +1,258 @@
/*
* emccpre.js: one of the Javascript components of an Emscripten-based
* web/Javascript front end for Puzzles.
*
* The other parts of this system live in emcc.c and emcclib.js.
*
* This file contains the Javascript code which is prefixed unmodified
* to Emscripten's output via the --pre-js option. It declares all our
* global variables, and provides the puzzle init function and a
* couple of other helper functions.
*/
// To avoid flicker while doing complicated drawing, we use two
// canvases, the same size. One is actually on the web page, and the
// other is off-screen. We do all our drawing on the off-screen one
// first, and then copy rectangles of it to the on-screen canvas in
// response to draw_update() calls by the game backend.
var onscreen_canvas, offscreen_canvas;
// A persistent drawing context for the offscreen canvas, to save
// constructing one per individual graphics operation.
var ctx;
// Bounding rectangle for the copy to the onscreen canvas that will be
// done at drawing end time. Updated by js_canvas_draw_update and used
// by js_canvas_end_draw.
var update_xmin, update_xmax, update_ymin, update_ymax;
// Module object for Emscripten. We fill in these parameters to ensure
// that Module.run() won't be called until we're ready (we want to do
// our own init stuff first), and that when main() returns nothing
// will get cleaned up so we remain able to call the puzzle's various
// callbacks.
var Module = {
'noInitialRun': true,
'noExitRuntime': true,
};
// Variables used by js_canvas_find_font_midpoint().
var midpoint_test_str = "ABCDEFGHIKLMNOPRSTUVWXYZ0123456789";
var midpoint_cache = [];
// Variables used by js_activate_timer() and js_deactivate_timer().
var timer = null;
var timer_reference_date;
// void timer_callback(double tplus);
//
// Called every 20ms while timing is active.
var timer_callback;
// The status bar object, if we create one.
var statusbar = null;
// Currently live blitters. We keep an integer id for each one on the
// JS side; the C side, which expects a blitter to look like a struct,
// simply defines the struct to contain that integer id.
var blittercount = 0;
var blitters = [];
// State for the dialog-box mechanism. dlg_dimmer and dlg_form are the
// page-darkening overlay and the actual dialog box respectively;
// dlg_next_id is used to allocate each checkbox a unique id to use
// for linking its label to it (see js_dialog_boolean);
// dlg_return_funcs is a list of JS functions to be called when the OK
// button is pressed, to pass the results back to C.
var dlg_dimmer = null, dlg_form = null;
var dlg_next_id = 0;
var dlg_return_funcs = null;
// void dlg_return_sval(int index, const char *val);
// void dlg_return_ival(int index, int val);
//
// C-side entry points called by functions in dlg_return_funcs, to
// pass back the final value in each dialog control.
var dlg_return_sval, dlg_return_ival;
// The <select> object implementing the game-type drop-down, and a
// list of the <option> objects inside it. Used by js_add_preset(),
// js_get_selected_preset() and js_select_preset().
var gametypeselector = null, gametypeoptions = [];
// The two anchors used to give permalinks to the current puzzle. Used
// by js_update_permalinks().
var permalink_seed, permalink_desc;
// The undo and redo buttons. Used by js_enable_undo_redo().
var undo_button, redo_button;
// Helper function which is passed a mouse event object and a DOM
// element, and returns the coordinates of the mouse event relative to
// the top left corner of the element by iterating upwards through the
// DOM finding each element's offset from its parent, and thus
// calculating the page-relative position of the target element so
// that we can subtract that from event.page{X,Y}.
function relative_mouse_coords(event, element) {
var ex = 0, ey = 0;
while (element.offsetParent) {
ex += element.offsetLeft;
ey += element.offsetTop;
element = element.offsetParent;
}
return {x: event.pageX - ex,
y: event.pageY - ey};
}
// Init function called from body.onload.
function initPuzzle() {
// Construct the off-screen canvas used for double buffering.
onscreen_canvas = document.getElementById("puzzlecanvas");
offscreen_canvas = document.createElement("canvas");
offscreen_canvas.width = onscreen_canvas.width;
offscreen_canvas.height = onscreen_canvas.height;
// Stop right-clicks on the puzzle from popping up a context menu.
// We need those right-clicks!
onscreen_canvas.oncontextmenu = function(event) { return false; }
// Set up mouse handlers. We do a bit of tracking of the currently
// pressed mouse buttons, to avoid sending mousemoves with no
// button down (our puzzles don't want those events).
mousedown = Module.cwrap('mousedown', 'void',
['number', 'number', 'number']);
buttons_down = 0;
onscreen_canvas.onmousedown = function(event) {
var xy = relative_mouse_coords(event, onscreen_canvas);
mousedown(xy.x - onscreen_canvas.offsetLeft,
xy.y - onscreen_canvas.offsetTop,
event.button);
buttons_down |= 1 << event.button;
onscreen_canvas.setCapture(true);
};
mousemove = Module.cwrap('mousemove', 'void',
['number', 'number', 'number']);
onscreen_canvas.onmousemove = function(event) {
if (buttons_down) {
var xy = relative_mouse_coords(event, onscreen_canvas);
mousemove(xy.x - onscreen_canvas.offsetLeft,
xy.y - onscreen_canvas.offsetTop,
buttons_down);
}
};
mouseup = Module.cwrap('mouseup', 'void',
['number', 'number', 'number']);
onscreen_canvas.onmouseup = function(event) {
if (buttons_down & (1 << event.button)) {
buttons_down ^= 1 << event.button;
var xy = relative_mouse_coords(event, onscreen_canvas);
mouseup(xy.x - onscreen_canvas.offsetLeft,
xy.y - onscreen_canvas.offsetTop,
event.button);
}
};
// Set up keyboard handlers. We expect ordinary keys (with a
// charCode) to be handled by onkeypress, but function keys
// (arrows etc) to be handled by onkeydown.
//
// We also call event.preventDefault() in both handlers. This
// means that while the canvas itself has focus, _all_ keypresses
// go only to the puzzle - so users of this puzzle collection in
// other media can indulge their instinct to press ^R for redo,
// for example, without accidentally reloading the page.
key = Module.cwrap('key', 'void',
['number', 'number', 'number', 'number']);
onscreen_canvas.onkeydown = function(event) {
key(event.keyCode, event.charCode,
event.shiftKey ? 1 : 0, event.ctrlKey ? 1 : 0);
event.preventDefault();
};
onscreen_canvas.onkeypress = function(event) {
if (event.charCode != 0)
key(event.keyCode, event.charCode,
event.shiftKey ? 1 : 0, event.ctrlKey ? 1 : 0);
event.preventDefault();
};
// command() is a C function called to pass back events which
// don't fall into other categories like mouse and key events.
// Mostly those are button presses, but there's also one for the
// game-type dropdown having been changed.
command = Module.cwrap('command', 'void', ['number']);
// Event handlers for buttons and things, which call command().
document.getElementById("specific").onclick = function(event) {
// Ensure we don't accidentally process these events when a
// dialog is actually active, e.g. because the button still
// has keyboard focus
if (dlg_dimmer === null)
command(0);
};
document.getElementById("random").onclick = function(event) {
if (dlg_dimmer === null)
command(1);
};
document.getElementById("new").onclick = function(event) {
if (dlg_dimmer === null)
command(5);
};
document.getElementById("restart").onclick = function(event) {
if (dlg_dimmer === null)
command(6);
};
undo_button = document.getElementById("undo");
undo_button.onclick = function(event) {
if (dlg_dimmer === null)
command(7);
};
redo_button = document.getElementById("redo");
redo_button.onclick = function(event) {
if (dlg_dimmer === null)
command(8);
};
document.getElementById("solve").onclick = function(event) {
if (dlg_dimmer === null)
command(9);
};
gametypeselector = document.getElementById("gametype");
gametypeselector.onchange = function(event) {
if (dlg_dimmer === null)
command(2);
};
// In our dialog boxes, Return and Escape should be like pressing
// OK and Cancel respectively
document.addEventListener("keydown", function(event) {
if (dlg_dimmer !== null && event.keyCode == 13) {
for (var i in dlg_return_funcs)
dlg_return_funcs[i]();
command(3);
}
if (dlg_dimmer !== null && event.keyCode == 27)
command(4);
});
// Set up the function pointers we haven't already grabbed.
dlg_return_sval = Module.cwrap('dlg_return_sval', 'void',
['number','string']);
dlg_return_ival = Module.cwrap('dlg_return_ival', 'void',
['number','number']);
timer_callback = Module.cwrap('timer_callback', 'void', ['number']);
// Save references to the two permalinks.
permalink_desc = document.getElementById("permalink-desc");
permalink_seed = document.getElementById("permalink-seed");
// Default to giving keyboard focus to the puzzle.
onscreen_canvas.focus();
// And run the C setup function, passing argv[1] as the fragment
// identifier (so that permalinks of the form puzzle.html#game-id
// can launch the specified id).
Module.arguments = [location.hash];
Module.run();
}