// 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(),
+// The <ul> object implementing the game-type drop-down, and a list of
+// the <li> objects inside it. Used by js_add_preset(),
// js_get_selected_preset() and js_select_preset().
-//
-// gametypethiscustom is an option which indicates some custom game
-// params you've already set up, and which will be auto-selected on
-// return from the customisation dialog; gametypenewcustom is an
-// option which you select to indicate that you want to bring up the
-// customisation dialog and select a new configuration. Ideally I'd do
-// this with just one option serving both purposes, but instead we
-// have to do this a bit oddly because browsers don't send 'onchange'
-// events for a select element if you reselect the same one - so if
-// you've picked a custom setup and now want to change it, you need a
-// way to specify that.
-var gametypeselector = null, gametypeoptions = [];
-var gametypethiscustom = null, gametypehiddencustom = null;
+var gametypelist = null, gametypeitems = [];
+var gametypeselectedindex = null;
+var gametypesubmenus = [];
// The two anchors used to give permalinks to the current puzzle. Used
// by js_update_permalinks().
// The undo and redo buttons. Used by js_enable_undo_redo().
var undo_button, redo_button;
+// A div element enclosing both the puzzle and its status bar, used
+// for positioning the resize handle.
+var resizable_div;
+
// Helper function to find the absolute position of a given DOM
// element on a page, by iterating upwards through the DOM finding
// each element's offset from its parent, and thus calculating the
y: event.pageY - ecoords.y};
}
+// Enable and disable items in the CSS menus.
+function disable_menu_item(item, disabledFlag) {
+ if (disabledFlag)
+ item.className = "disabled";
+ else
+ item.className = "";
+}
+
+// Dialog-box functions called from both C and JS.
+function dialog_init(titletext) {
+ // Create an overlay on the page which darkens everything
+ // beneath it.
+ dlg_dimmer = document.createElement("div");
+ dlg_dimmer.style.width = "100%";
+ dlg_dimmer.style.height = "100%";
+ dlg_dimmer.style.background = '#000000';
+ dlg_dimmer.style.position = 'fixed';
+ dlg_dimmer.style.opacity = 0.3;
+ dlg_dimmer.style.top = dlg_dimmer.style.left = 0;
+ dlg_dimmer.style["z-index"] = 99;
+
+ // Now create a form which sits on top of that in turn.
+ dlg_form = document.createElement("form");
+ dlg_form.style.width = (window.innerWidth * 2 / 3) + "px";
+ dlg_form.style.opacity = 1;
+ dlg_form.style.background = '#ffffff';
+ dlg_form.style.color = '#000000';
+ dlg_form.style.position = 'absolute';
+ dlg_form.style.border = "2px solid black";
+ dlg_form.style.padding = "20px";
+ dlg_form.style.top = (window.innerHeight / 10) + "px";
+ dlg_form.style.left = (window.innerWidth / 6) + "px";
+ dlg_form.style["z-index"] = 100;
+
+ var title = document.createElement("p");
+ title.style.marginTop = "0px";
+ title.appendChild(document.createTextNode(titletext));
+ dlg_form.appendChild(title);
+
+ dlg_return_funcs = [];
+ dlg_next_id = 0;
+}
+
+function dialog_launch(ok_function, cancel_function) {
+ // Put in the OK and Cancel buttons at the bottom.
+ var button;
+
+ if (ok_function) {
+ button = document.createElement("input");
+ button.type = "button";
+ button.value = "OK";
+ button.onclick = ok_function;
+ dlg_form.appendChild(button);
+ }
+
+ if (cancel_function) {
+ button = document.createElement("input");
+ button.type = "button";
+ button.value = "Cancel";
+ button.onclick = cancel_function;
+ dlg_form.appendChild(button);
+ }
+
+ document.body.appendChild(dlg_dimmer);
+ document.body.appendChild(dlg_form);
+}
+
+function dialog_cleanup() {
+ document.body.removeChild(dlg_dimmer);
+ document.body.removeChild(dlg_form);
+ dlg_dimmer = dlg_form = null;
+ onscreen_canvas.focus();
+}
+
// Init function called from body.onload.
function initPuzzle() {
// Construct the off-screen canvas used for double buffering.
command(9);
};
- gametypeselector = document.getElementById("gametype");
- gametypeselector.onchange = function(event) {
- if (dlg_dimmer === null)
- command(2);
+ // 'number' is used for C pointers
+ get_save_file = Module.cwrap('get_save_file', 'number', []);
+ free_save_file = Module.cwrap('free_save_file', 'void', ['number']);
+ load_game = Module.cwrap('load_game', 'void', ['string', 'number']);
+
+ document.getElementById("save").onclick = function(event) {
+ if (dlg_dimmer === null) {
+ var savefile_ptr = get_save_file();
+ var savefile_text = Pointer_stringify(savefile_ptr);
+ free_save_file(savefile_ptr);
+ dialog_init("Download saved-game file");
+ dlg_form.appendChild(document.createTextNode(
+ "Click to download the "));
+ var a = document.createElement("a");
+ a.download = "puzzle.sav";
+ a.href = "data:application/octet-stream," +
+ encodeURIComponent(savefile_text);
+ a.appendChild(document.createTextNode("saved-game file"));
+ dlg_form.appendChild(a);
+ dlg_form.appendChild(document.createTextNode("."));
+ dlg_form.appendChild(document.createElement("br"));
+ dialog_launch(function(event) {
+ dialog_cleanup();
+ });
+ }
+ };
+
+ document.getElementById("load").onclick = function(event) {
+ if (dlg_dimmer === null) {
+ dialog_init("Upload saved-game file");
+ var input = document.createElement("input");
+ input.type = "file";
+ input.multiple = false;
+ dlg_form.appendChild(input);
+ dlg_form.appendChild(document.createElement("br"));
+ dialog_launch(function(event) {
+ if (input.files.length == 1) {
+ var file = input.files.item(0);
+ var reader = new FileReader();
+ reader.addEventListener("loadend", function() {
+ var string = reader.result;
+ load_game(string, string.length);
+ });
+ reader.readAsBinaryString(file);
+ }
+ dialog_cleanup();
+ }, function(event) {
+ dialog_cleanup();
+ });
+ }
};
+ gametypelist = document.getElementById("gametype");
+ gametypesubmenus.push(gametypelist);
+
// In IE, the canvas doesn't automatically gain focus on a mouse
// click, so make sure it does
onscreen_canvas.addEventListener("mousedown", function(event) {
// Default to giving keyboard focus to the puzzle.
onscreen_canvas.focus();
+ // Create the resize handle.
+ var resize_handle = document.createElement("canvas");
+ resize_handle.width = 10;
+ resize_handle.height = 10;
+ {
+ var ctx = resize_handle.getContext("2d");
+ ctx.beginPath();
+ for (var i = 1; i <= 7; i += 3) {
+ ctx.moveTo(8.5, i + 0.5);
+ ctx.lineTo(i + 0.5, 8.5);
+ }
+ ctx.lineWidth = '1px';
+ ctx.lineCap = 'round';
+ ctx.lineJoin = 'round';
+ ctx.strokeStyle = '#000000';
+ ctx.stroke();
+ }
+ resizable_div = document.getElementById("resizable");
+ resizable_div.appendChild(resize_handle);
+ resize_handle.style.position = 'absolute';
+ resize_handle.style.zIndex = 98;
+ resize_handle.style.bottom = "0";
+ resize_handle.style.right = "0";
+ resize_handle.style.cursor = "se-resize";
+ resize_handle.title = "Drag to resize the puzzle. Right-click to restore the default size.";
+ var resize_xbase = null, resize_ybase = null, restore_pending = false;
+ var resize_xoffset = null, resize_yoffset = null;
+ var resize_puzzle = Module.cwrap('resize_puzzle',
+ 'void', ['number', 'number']);
+ var restore_puzzle_size = Module.cwrap('restore_puzzle_size', 'void', []);
+ resize_handle.oncontextmenu = function(event) { return false; }
+ resize_handle.onmousedown = function(event) {
+ if (event.button == 0) {
+ var xy = element_coords(onscreen_canvas);
+ resize_xbase = xy.x + onscreen_canvas.width / 2;
+ resize_ybase = xy.y;
+ resize_xoffset = xy.x + onscreen_canvas.width - event.pageX;
+ resize_yoffset = xy.y + onscreen_canvas.height - event.pageY;
+ } else {
+ restore_pending = true;
+ }
+ resize_handle.setCapture(true);
+ event.preventDefault();
+ };
+ window.addEventListener("mousemove", function(event) {
+ if (resize_xbase !== null && resize_ybase !== null) {
+ resize_puzzle((event.pageX + resize_xoffset - resize_xbase) * 2,
+ (event.pageY + resize_yoffset - resize_ybase));
+ event.preventDefault();
+ // Chrome insists on selecting text during a resize drag
+ // no matter what I do
+ if (window.getSelection)
+ window.getSelection().removeAllRanges();
+ else
+ document.selection.empty(); }
+ });
+ window.addEventListener("mouseup", function(event) {
+ if (resize_xbase !== null && resize_ybase !== null) {
+ resize_xbase = null;
+ resize_ybase = null;
+ onscreen_canvas.focus(); // return focus to the puzzle
+ event.preventDefault();
+ } else if (restore_pending) {
+ // If you have the puzzle at larger than normal size and
+ // then right-click to restore, I haven't found any way to
+ // stop Chrome and IE popping up a context menu on the
+ // revealed piece of document when you release the button
+ // except by putting the actual restore into a setTimeout.
+ // Gah.
+ setTimeout(function() {
+ restore_pending = false;
+ restore_puzzle_size();
+ onscreen_canvas.focus();
+ }, 20);
+ event.preventDefault();
+ }
+ });
+
// 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();
+ Module.callMain([location.hash]);
// And if we get here with everything having gone smoothly, i.e.
// we haven't crashed for one reason or another during setup, then
~ian / sgt-puzzles.git / blobdiff