<?xml-stylesheet type="text/xsl" href="/exist/rest/db/apps/xsltforms/xsltforms.xsl"?><?xsltforms-options debug="yes"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Noughts and Crosses</title>
        <xf:model xmlns:xf="http://www.w3.org/2002/xforms" id="model1">
            <xf:instance id="inst1">
                <root xmlns="">
                    <row>
                        <col/>
                        <col/>
                        <col/>
                    </row>
                    <row>
                        <col/>
                        <col/>
                        <col/>
                    </row>
                    <row>
                        <col/>
                        <col/>
                        <col/>
                    </row>
                    <next>0</next>
                    <rows r1="false" r2="false" r3="false"/>
                    <columns c1="false" c2="false" c3="false"/>
                    <diagonals d1="false" d2="false"/>
                    <game resolved="false"/>
                    <game finished="false"/>
                </root>
            </xf:instance>
            <xf:bind id="row1" nodeset="rows/@r1" calculate="not(../../row[1]/col[1] = '') and ../../row[1]/col[1] = ../../row[1]/col[2] and ../../row[1]/col[2] = ../../row[1]/col[3]"/>
            <xf:bind id="row2" nodeset="rows/@r2" calculate="not(../../row[2]/col[1] = '') and ../../row[2]/col[1] = ../../row[2]/col[2] and ../../row[2]/col[2] = ../../row[2]/col[3]"/>
            <xf:bind id="row3" nodeset="rows/@r3" calculate="not(../../row[3]/col[1] = '') and ../../row[3]/col[1] = ../../row[3]/col[2] and ../../row[3]/col[2] = ../../row[3]/col[3]"/>
            <xf:bind id="col1" nodeset="columns/@c1" calculate="not(../../row[1]/col[1] = '') and ../../row[1]/col[1] = ../../row[2]/col[1] and ../../row[2]/col[1] = ../../row[3]/col[1]"/>
            <xf:bind id="col2" nodeset="columns/@c2" calculate="not(../../row[1]/col[2] = '') and ../../row[1]/col[2] = ../../row[2]/col[2] and ../../row[2]/col[2] = ../../row[3]/col[2]"/>
            <xf:bind id="col3" nodeset="columns/@c3" calculate="not(../../row[1]/col[3] = '') and ../../row[1]/col[3] = ../../row[2]/col[3] and ../../row[2]/col[3] = ../../row[3]/col[3]"/>
            <xf:bind id="diag1" nodeset="diagonals/@d1" calculate="not(../../row[1]/col[1] = '') and ../../row[1]/col[1] = ../../row[2]/col[2] and ../../row[2]/col[2] = ../../row[3]/col[3]"/>
            <xf:bind id="diag2" nodeset="diagonals/@d2" calculate="not(../../row[1]/col[3] = '') and ../../row[1]/col[3] = ../../row[2]/col[2] and ../../row[2]/col[2] = ../../row[3]/col[1]"/>
            <xf:bind id="resolved" nodeset="game/@resolved" calculate="../../rows/@* = 'true' or ../../columns/@* = 'true' or ../../diagonals/@* = 'true'"/>
            <xf:bind id="finished" nodeset="game/@finished" calculate="                     not(../../row[1]/col[1] = '') and                      not(../../row[1]/col[2] = '') and                     not(../../row[1]/col[3] = '') and                     not(../../row[2]/col[1] = '') and                     not(../../row[2]/col[2] = '') and                     not(../../row[2]/col[3] = '') and                     not(../../row[3]/col[1] = '') and                     not(../../row[3]/col[2] = '') and                     not(../../row[3]/col[3] = '')"/>
            <xf:bind id="readonly" nodeset="." readonly="game/@resolved='true'"/>
            <xf:bind id="readonly" nodeset="." readonly="game/@finished='true'"/>
            <xf:bind id="readonlycell" nodeset="row/col" readonly="not(.='')"/>
        </xf:model>
        <style type="text/css"> td.white &gt; span &gt; span &gt; input { background-color:white; }
       td.yellow &gt; span &gt; span &gt; input { background-color:yellow; } 
       input {width:1em; text-align:center; }
      </style>
        <style type="text/css">
    body {
        margin-left:2em;
        margin-top:2em;
        font-size:110%;
    }
    input {
        margin-left:1em;
        margin-right:1em;
    }
    #xsltforms_console {
        margin-top:3em;
        padding-top:1em;
        font-size:75%;
        }
    iframe {
        display:none;
    }
    #xsltforms_debug {
        padding-bottom:1em;
    }
    
    .btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-bottom-color: #A2A2A2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #BBBBBB;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #BBBBBB;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #BBBBBB;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-top:1em;
    margin-bottom:1em;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    }
    .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    background-color: #E6E6E6;
    color: #333333;
    }
    .btn:active, .btn.active {
    }
    .btn:first-child {
    }
    .btn:hover {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-color: #E6E6E6;
    background-position: 0 -15px;
    color: #333333;
    transition-delay: 0s;
    transition-duration: 0.1s;
    transition-property: background-position;
    transition-timing-function: linear;
    }
    .btn:focus {
    outline-color: #333333;
    outline-offset: -2px;
    outline-style: dotted;
    outline-width: thin;
    }
    .btn.active, .btn:active {
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: 0;
    }
    a {
    text-decoration:none;
    color: #0088CC;
    }
    a:hover {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: solid;
    color: #005580;
    }
    .xforms-value {margin-left:1em;}
    .description {
        color: gray;
        margin-top:2em;
        font-size: 80%;}
</style>
    </head>
    <body style="background-color:white;margin:50px;">
        <div class="source">
            <div class="toolbar">
                <a class="btn" href="/exist/apps/eXide/index.html?open=/db/apps/XSLTForms-Demo/data/tic-tac-toe.xml" target="eXide" data-type="XML" title="Opens the form in eXide.">Open form in eXide</a>
            </div>
        </div>
        <h2>Noughts and Crosses Game</h2>
      Click in each box. Fill a row, a column or a diagonal with all 0's or all X's to win.
      <table>
            <tbody>
                <tr>
                    <td class="{if((rows/@r1=true() or columns/@c1=true() or diagonals/@d1=true()),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[1]/col[1]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                    <td class="{if((rows/@r1=true() or columns/@c2=true() ),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[1]/col[2]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                    <td class="{if((rows/@r1=true() or columns/@c3=true() or diagonals/@d2=true() ),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[1]/col[3]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                </tr>
                <tr>
                    <td class="{if((rows/@r2=true() or columns/@c1=true()),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[2]/col[1]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                    <td class="{if((rows/@r2=true() or columns/@c2=true() or diagonals/@d1=true() or diagonals/@d2=true()),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[2]/col[2]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                    <td class="{if((rows/@r2=true() or columns/@c3=true()),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[2]/col[3]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                </tr>
                <tr>
                    <td class="{if((rows/@r3=true() or columns/@c1=true() or diagonals/@d2=true() ),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[3]/col[1]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                    <td class="{if((rows/@r3=true() or columns/@c2=true()),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[3]/col[2]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                    <td class="{if((rows/@r3=true() or columns/@c3=true() or diagonals/@d1=true() ),'yellow','white')}">
                        <xf:input xmlns:xf="http://www.w3.org/2002/xforms" ref="row[3]/col[3]" incremental="true">
                            <xf:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMFocusIn" if=".='' and instance('inst1')/game/@resolved[.!=true()]">
                                <xf:setvalue ref="." value="instance('inst1')/next"/>
                                <xf:setvalue ref="instance('inst1')/next" value="if(.='X','0','X')"/>
                            </xf:action>
                        </xf:input>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <xf:group xmlns:xf="http://www.w3.org/2002/xforms" ref="game/@finished[.=true()]">Game over!</xf:group>
            <xf:group xmlns:xf="http://www.w3.org/2002/xforms" ref="game/@resolved[.=true()]">Congratulations, you have WON!</xf:group>
            <xf:group xmlns:xf="http://www.w3.org/2002/xforms" ref="game[@finished=true() and @resolved=false()]">Cat's game!</xf:group>
        </div>
        <xf:trigger xmlns:xf="http://www.w3.org/2002/xforms">
            <xf:label>Clear</xf:label>
            <xf:reset xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMActivate"/>
        </xf:trigger>
        <div xmlns="" class="description">
            <description>Contributed by Stephen Cameron</description>
        </div>
    </body>
</html>