Source

fc-solve / fc-solve / site / wml / src / js-fc-solve / text / index.html.wml

Full commit
#include '../template.wml'

<latemp_subject "Online Freecell solver (text based)" />

<page_extra_head_elements>
<script type="text/javascript">
(function() {
    try {
        var a = new Float64Array(1);
        return; //no need
    } catch(e) { window.location.replace("$(ROOT)/js-fc-solve/incompatible-browser.html"); }
})();
</script>
<script type="text/javascript" src="$(ROOT)/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$(ROOT)/js/jquery.querystring.js"></script>
<link rel="stylesheet" type="text/css" href="$(ROOT)/css/redmond/jquery-ui-1.9.2.custom.min.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="$(ROOT)/jqui-override.css" media="screen, projection" />
<script type="text/javascript" src="$(ROOT)/js/joose.mini.js"></script>
<script type="text/javascript" src="$(ROOT)/js/libfreecell-solver.min.js"></script>
<script type="text/javascript" src="$(ROOT)/js/ms-rand.js"></script>
<script type="text/javascript" src="$(ROOT)/js/gen-ms-fc-board.js"></script>
<script type="text/javascript" src="$(ROOT)/js/web-fc-solve.js"></script>
<script type="text/javascript" src="$(ROOT)/js/web-fc-solve-ui.js"></script>
<link rel="stylesheet" type="text/css" href="$(ROOT)/web-fc-solve.css" />
</page_extra_head_elements>


<h2 id="about">About</h2>

<div id="about_sect">

<p>
An online solver for
<a href="http://en.wikipedia.org/wiki/FreeCell">Freecell</a>, a kind of
card solitaire game. <span class="enable_js">Please enable
<strong>JavaScript</strong>.</span>
</p>

<script type="text/javascript">
$(function() { $('.enable_js').addClass('ok'); })
</script>

<p>
<a href="#how_to_use"><strong class="instructions_link">Instructions</strong></a>
</p>

</div>

<h2 id="ui">Solver</h2>

<div class="disabled">
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<!--
  <progress value="0" max="100" id="progress"></progress>
-->
</div>
<!--
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-->
</div>

<script type="text/javascript">
$(function() { $( "#fc_solve_tabs" ).tabs({
    beforeActivate: function( event, ui) {
        var mynew = ui.newPanel;
        var old = ui.oldPanel;

        var common_old = old.find('.fcs_common');
        var old_text = common_old.find('textarea').val();

        var common_html = common_old.html();

        common_old.html('');

        var common_new = mynew.find('.fcs_common');

        common_new.html(common_html);
        common_new.find('textarea').val(old_text);

        return;
    },
    }
);

restore_bookmark();

});
</script>

<div id="fc_solve_tabs" class="fc_solve_tabs">

<ul>
<li><a href="#fc_solve_tabs__numbered_deal">Solve a Numbered Deal</a></li>
<li><a href="#fc_solve_tabs__any_board">Solve any Board</a></li>
</ul>

<div id="fc_solve_tabs__numbered_deal" class="tab">

<p class="first">
<label for="deal_number">Enter an MS Freecell Deal:</label>
<input type="text" id="deal_number" size="12" />
<button id="populate_input" onclick="javascript:populate_input_with_numbered_deal()" title="Populate Input with a Windows Freecell Numbered Deal">Populate</button><br />
</p>

<div class="fcs_common">

<label for="stdin">Input:</label><br />
<textarea class="emscripten" id="stdin" cols="30" rows="10"></textarea><br />
<button id="run_do_solve" onclick="javascript:fc_solve_do_solve()">Solve!</button>
<label for="preset">Solving method:</label>
<select id="preset">
<option value="as" selected="selected">Amateur Star (fast on average)</option>
<option value="qs">Qualified Seed (short solutions)</option>
<option value="default">Default</option>
</select>

</div> ;;; end of fcs_common

</div> ;;; end of fc_solve_tabs__numbered_deal

<div id="fc_solve_tabs__any_board" class="tab">

<p class="first">
Input a Freecell layout in the <a href="$(ROOT)/docs/distro/README.html">fc-solve format</a>:<br />
</p>

<div class="fcs_common">
</div>

</div> ;;; end of fc_solve_tabs__any_board

</div>

<div class="disabled">

<div class="emscripten">
<input type="button" value="fullscreen" onclick="Module.requestFullScreen()" />
</div>

</div> ;;; end of .disabled


<p id="status_wrap">

<strong>Status:</strong> <span id="fc_solve_status" class="not_started">Not started</span> <br />

</p>

<label for="output">Output:</label><br />

<div class="output_form">
<textarea class="emscripten" id="output" cols="50" rows="30" readonly="readonly"></textarea>

<div class="controls">
<input id="one_based" type="checkbox" title="1-based offset" checked="checked" onclick="javascript:on_toggle_one_based()">1-based</button><br />
<button id="clear_output" onclick="javascript:clear_output()" title="Clear the Output Box">Clear Output</button>
</div>
</div>
<br />


<div id="fc_solve_bookmark">

<h3 id="bookmark">Bookmark This Form</h3>

<p>
You can use the button below to generate a URL that will
auto-populate the form. This is also useful for reporting problems.
</p>

<div class="controls_wrapper">
<button id="fc_solve_bookmark_button" onclick="javascript:on_bookmarking()">Bookmark</button>

<ul id="fcs_bookmark_wrapper" class="disabled">

<li>
<label for="fcs_bm_results_input">URL:</label>
<input type="text" id="fcs_bm_results_input" size="40" readonly="readonly" />
</li>

<li>
<a id="fcs_bm_results_a" href="">Bookmark Link</a>
</li>

</ul>

</div> ;;; end of .controls_wrapper

</div> ;;; end of #fc_solve_bookmark

<hr />

<h2 id="how_to_use">How to Use</h2>

<p>
Enter a board in <a href="#stdin">the input text area</a> in
<a href="http://fc-solve.shlomifish.org/docs/distro/README.html">Freecell
Solver’s input format</a> with each line of input representing a column (or
stack) of cards. Freecells and foundations can also be specified. Numbered
layouts (compatible with
<a href="http://en.wikipedia.org/wiki/FreeCell_%28Windows%29">Microsoft
Windows FreeCell</a>, FreeCell Pro and compatible
Freecell implementations) can be input using the
<a href="#deal_number">deal number feature</a>. Press the <a href="#run_do_solve">“Solve” button</a> to
run the solver, and assuming it was successful, you will be able to read
and/or copy the output from <a href="#output">the output box</a>.
</p>

<p>
Enjoy!
</p>

<h2 id="technology">Technology</h2>

<p>
This is a web-based interface to
<a href="http://fc-solve.shlomifish.org/">Freecell Solver</a>, that was
translated from the C source code to JavaScript, by using the
<a href="https://github.com/kripken/emscripten">emscripten</a> LLVM bit-code
to JavaScript compiler. Like Freecell Solver itself, this JavaScript port
is open-source software under the permissive
<a href="http://en.wikipedia.org/wiki/MIT_License">MIT/X11 licence</a>.
</p>

<p>
Other technologies used for writing this page are:
</p>

<ul>

<li>
<p>
<a href="http://jquery.com/">jQuery</a> - the “write less, do more”
JavaScript library. A convenient JavaScript browser-side library for
DOM manipulations, UI and much more.
</p>
</li>

<li>
<p>
<a href="http://jqueryui.com/">jQuery UI</a> - a library for user-interface
controls based on jQuery.
</p>
</li>

<li>
<p>
<a href="http://code.google.com/p/joose-js/">Joose</a> - an object oriented
programming system for JavaScript (inspired by
<a href="http://moose.iinteractive.com/">Perl's Moose</a>).
</p>
</li>

<li>
<p>
<a href="https://github.com/kylefox/jquery-querystring">jquery-quertstring</a> -a plugin for jQuery for manipulating query strings.
</p>
</li>

<li>
<p>
<a href="https://getfirebug.com/">Firebug</a> - a web development tool for
Firefox, that provides a JavaScript debugger, a CSS manipulation tool, DOM
introspection and more. (The Opera web browser's Opera Dragonfly does something
similar for Opera, and is also useful.)
</p>
</li>

<li>
<p>
<a href="http://www.google.com/webfonts">Google Web Fonts</a> - provides an
attractive font for the button leading to this page.
</p>
</li>
</ul>

<h2 id="credits">Credits</h2>
<ul>

<li>
<p>
<a href="https://github.com/kripken">Alon Zakai</a> - writing
<a href="https://github.com/kripken/emscripten">emscripten</a>, the
LLVM-to-JavaScript compiler that was used to prepare this page, based
on the original C (gnu99) source, and answering some bug reports and questions
I filed about it.
</p>
</li>

<li>
<p>
<a href="http://garage-coding.com/">Stefan Petrea</a> - inspired the
implementation of the populate-with-sample-board button.
</p>
</li>

<li>
<p>
<a href="http://en.wikipedia.org/wiki/User:Amire80">Amir Aharoni</a> - tipped
me regarding integrating <tt>@font-face</tt> into my CSS.
</p>
</li>

<li>
<p>
<a href="mailto:ari.i.becker@gmail.com">Ari Becker</a> - tipped me regarding
unsolvable deals.
</p>
</li>

</ul>