Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • master
1 result

Target

Select target project
  • general/stups/visb-visualisation-examples
1 result
Select Git revision
  • master
1 result
Show changes

Commits on Source 2

Show whitespace changes
Inline Side-by-side
TicTacToe/tictactoe_grid.svg 0 → 100644
View file @ b003a794
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
height="400" width="400"
viewBox="-2 -2 55 40"
>
<text text-align="left" x="0" y="35" font-size="2"
font-family="sans-serif">
<tspan id="visb_debug_messages_opt"> </tspan>
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05"
numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="1.2" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
TicTacToe/tictactoe_v2.html 0 → 100644
View file @ b003a794
<!DOCTYPE html>
<html>
<head>
<!-- html file generated by ProB from a VisB visualization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>
function setAttr(id, attribute, value){
var obj = document.getElementById(id);
if (obj == null) {
if (id != "visb_debug_messages") {
console.error("Unknown SVG id " + id + " for attribute " + attribute);
}
} else if(attribute=="text") {
obj.textContent = value;
} else if(attribute=="class" && value != "") {
if(value[0]=="+") {
obj.classList.add(value.substr(1));
} else if(value[0]=="-") {
obj.classList.remove(value.substr(1));
} else {
obj.setAttribute(attribute, value);
}
} else {
obj.setAttribute(attribute, value);
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var lastSelectedRow = 0;
function highlightRow(id) {
if (lastSelectedRow>0) {setAttr("row"+lastSelectedRow,"bgcolor","")};
setAttr("row"+id,"bgcolor","yellow");
lastSelectedRow = id;
}
function backStep() {
if (lastSelectedRow>1) {
var prev = lastSelectedRow-1;
document.getElementById("row"+prev).click();
}
}
function forwardStep() {
if (lastSelectedRow>0) {
var nxt = lastSelectedRow+1;
var row = document.getElementById("row"+(nxt));
if (row != null) { row.click() };
}
}
</script>
<style>
table {
font-family: arial, sans-serif;
font-size: 11px;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 2px;
}
/*
tr:nth-child(even) {
background-color: #dddddd;
}
*/
</style>
<style>
.collapsible {
cursor: pointer;
}
.collapsible-style {
background-color: #777;
color: white;
padding: 6px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.coll-content-hid {
padding: 0 12px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.coll-content-vis {
padding: 0 12px;
display: block;
overflow: hidden;
background-color: #f1f1f1;
}
.visb-messages {
text-align: left;
outline: none;
font-size: 12px;
font-family: arial, sans-serif;
}
</style>
<script>
function visualise0(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 0");
setAttr("pieceO1_1","visibility","hidden");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","hidden");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","hidden");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","hidden");
setAttr("pieceX1_2_b","visibility","hidden");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","hidden");
setAttr("pieceX2_1_b","visibility","hidden");
setAttr("pieceX2_2_a","visibility","hidden");
setAttr("pieceX2_2_b","visibility","hidden");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")}),(2|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")}),(3|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"X\"");
highlightRow(stepNr);
}
function visualise5(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 5");
setAttr("pieceO1_1","visibility","hidden");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","hidden");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","hidden");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","hidden");
setAttr("pieceX1_2_b","visibility","hidden");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","hidden");
setAttr("pieceX2_1_b","visibility","hidden");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")}),(2|->{(1|->\"_\"),(2|->\"X\"),(3|->\"_\")}),(3|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"O\"");
highlightRow(stepNr);
}
function visualise246(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 246");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","hidden");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","hidden");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","hidden");
setAttr("pieceX1_2_b","visibility","hidden");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","hidden");
setAttr("pieceX2_1_b","visibility","hidden");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"_\"),(3|->\"_\")}),(2|->{(1|->\"_\"),(2|->\"X\"),(3|->\"_\")}),(3|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"X\"");
highlightRow(stepNr);
}
function visualise204(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 204");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","hidden");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","hidden");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","hidden");
setAttr("pieceX2_1_b","visibility","hidden");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"_\")}),(2|->{(1|->\"_\"),(2|->\"X\"),(3|->\"_\")}),(3|->{(1|->\"_\"),(2|->\"_\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"O\"");
highlightRow(stepNr);
}
function visualise1725(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 1725");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","hidden");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","visible");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","hidden");
setAttr("pieceX2_1_b","visibility","hidden");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"_\")}),(2|->{(1|->\"_\"),(2|->\"X\"),(3|->\"_\")}),(3|->{(1|->\"_\"),(2|->\"O\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"X\"");
highlightRow(stepNr);
}
function visualise1671(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 1671");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","hidden");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","visible");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","visible");
setAttr("pieceX2_1_b","visibility","visible");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"_\")}),(2|->{(1|->\"X\"),(2|->\"X\"),(3|->\"_\")}),(3|->{(1|->\"_\"),(2|->\"O\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"O\"");
highlightRow(stepNr);
}
function visualise1927(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 1927");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","visible");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","visible");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","visible");
setAttr("pieceX2_1_b","visibility","visible");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","hidden");
setAttr("pieceX3_1_b","visibility","hidden");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"_\")}),(2|->{(1|->\"X\"),(2|->\"X\"),(3|->\"O\")}),(3|->{(1|->\"_\"),(2|->\"O\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"X\"");
highlightRow(stepNr);
}
function visualise2049(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 2049");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","hidden");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","visible");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","visible");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","visible");
setAttr("pieceX2_1_b","visibility","visible");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","visible");
setAttr("pieceX3_1_b","visibility","visible");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"_\")}),(2|->{(1|->\"X\"),(2|->\"X\"),(3|->\"O\")}),(3|->{(1|->\"X\"),(2|->\"O\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"O\"");
highlightRow(stepNr);
}
function visualise1995(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 1995");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","visible");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","visible");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","visible");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","visible");
setAttr("pieceX2_1_b","visibility","visible");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","visible");
setAttr("pieceX3_1_b","visibility","visible");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","hidden");
setAttr("pieceX3_3_b","visibility","hidden");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Winner:");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"O\")}),(2|->{(1|->\"X\"),(2|->\"X\"),(3|->\"O\")}),(3|->{(1|->\"X\"),(2|->\"O\"),(3|->\"_\")})}");
setAttr("bVar_nextTurn","text","\"X\"");
highlightRow(stepNr);
}
function visualise1900(stepNr) {
setAttr("trace_meter","value",stepNr);
setAttr("visb_debug_messages","text","Step "+stepNr+"/10, State ID: 1900");
setAttr("pieceO1_1","visibility","visible");
setAttr("pieceO1_2","visibility","hidden");
setAttr("pieceO1_3","visibility","visible");
setAttr("pieceO2_1","visibility","hidden");
setAttr("pieceO2_2","visibility","hidden");
setAttr("pieceO2_3","visibility","visible");
setAttr("pieceO3_1","visibility","hidden");
setAttr("pieceO3_2","visibility","visible");
setAttr("pieceO3_3","visibility","hidden");
setAttr("pieceX1_1_a","visibility","hidden");
setAttr("pieceX1_1_b","visibility","hidden");
setAttr("pieceX1_2_a","visibility","visible");
setAttr("pieceX1_2_b","visibility","visible");
setAttr("pieceX1_3_a","visibility","hidden");
setAttr("pieceX1_3_b","visibility","hidden");
setAttr("pieceX2_1_a","visibility","visible");
setAttr("pieceX2_1_b","visibility","visible");
setAttr("pieceX2_2_a","visibility","visible");
setAttr("pieceX2_2_b","visibility","visible");
setAttr("pieceX2_3_a","visibility","hidden");
setAttr("pieceX2_3_b","visibility","hidden");
setAttr("pieceX3_1_a","visibility","visible");
setAttr("pieceX3_1_b","visibility","visible");
setAttr("pieceX3_2_a","visibility","hidden");
setAttr("pieceX3_2_b","visibility","hidden");
setAttr("pieceX3_3_a","visibility","visible");
setAttr("pieceX3_3_b","visibility","visible");
setAttr("winnerO","visibility","hidden");
setAttr("winnerX_a","visibility","hidden");
setAttr("winnerX_b","visibility","hidden");
setAttr("winnerTxt","text","Draw !");
setAttr("pieceX1_1_a","points","9 1 1 9");
setAttr("pieceX1_2_a","points","9 11 1 19");
setAttr("pieceX1_3_a","points","9 21 1 29");
setAttr("pieceX2_1_a","points","19 1 11 9");
setAttr("pieceX2_2_a","points","19 11 11 19");
setAttr("pieceX2_3_a","points","19 21 11 29");
setAttr("pieceX3_1_a","points","29 1 21 9");
setAttr("pieceX3_2_a","points","29 11 21 19");
setAttr("pieceX3_3_a","points","29 21 21 29");
setAttr("pieceX1_1_b","points","9 9 1 1");
setAttr("pieceX1_2_b","points","9 19 1 11");
setAttr("pieceX1_3_b","points","9 29 1 21");
setAttr("pieceX2_1_b","points","19 9 11 1");
setAttr("pieceX2_2_b","points","19 19 11 11");
setAttr("pieceX2_3_b","points","19 29 11 21");
setAttr("pieceX3_1_b","points","29 9 21 1");
setAttr("pieceX3_2_b","points","29 19 21 11");
setAttr("pieceX3_3_b","points","29 29 21 21");
setAttr("winnerX_a","points","49 11 41 19");
setAttr("winnerX_b","points","49 19 41 11");
setAttr("bVar_board","text","{(1|->{(1|->\"O\"),(2|->\"X\"),(3|->\"O\")}),(2|->{(1|->\"X\"),(2|->\"X\"),(3|->\"O\")}),(3|->{(1|->\"X\"),(2|->\"O\"),(3|->\"X\")})}");
setAttr("bVar_nextTurn","text","\"O\"");
highlightRow(stepNr);
}
async function runAll(delay) {
visualise0(1);
setAttr("visb_debug_messages","text","Step: 1/10, State ID: 0, Event: INITIALISATION(board=\{(1\|-\>\{(1\|-\>\"_\"),(2\|-\>\"_\"),(3\|-\>\"_\")\}),(2\|-\>\{(1\|-\>\"_\"),(2\|-\>\"_\"),(3\|-\>\"_\")\}),(3\|-\>\{(1\|-\>\"_\"),(2\|-\>\"...");
await sleep(delay);
visualise5(2);
setAttr("visb_debug_messages","text","Step: 2/10, State ID: 5, Event: MoveX(2,2)");
await sleep(delay);
visualise246(3);
setAttr("visb_debug_messages","text","Step: 3/10, State ID: 246, Event: MoveO(1,1)");
await sleep(delay);
visualise204(4);
setAttr("visb_debug_messages","text","Step: 4/10, State ID: 204, Event: MoveX(1,2)");
await sleep(delay);
visualise1725(5);
setAttr("visb_debug_messages","text","Step: 5/10, State ID: 1725, Event: MoveO(3,2)");
await sleep(delay);
visualise1671(6);
setAttr("visb_debug_messages","text","Step: 6/10, State ID: 1671, Event: MoveX(2,1)");
await sleep(delay);
visualise1927(7);
setAttr("visb_debug_messages","text","Step: 7/10, State ID: 1927, Event: MoveO(2,3)");
await sleep(delay);
visualise2049(8);
setAttr("visb_debug_messages","text","Step: 8/10, State ID: 2049, Event: MoveX(3,1)");
await sleep(delay);
visualise1995(9);
setAttr("visb_debug_messages","text","Step: 9/10, State ID: 1995, Event: MoveO(1,3)");
await sleep(delay);
visualise1900(10);
setAttr("visb_debug_messages","text","Step: 10/10, State ID: 1900, Event: MoveX(3,3)");
await sleep(delay);
}
</script>
<script>
function registerHovers() {
var obj;
obj = document.getElementById("grid1_1");
obj.onmouseover = function(ev){
setAttr("grid1_1","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid1_1","fill","white")
};
obj = document.getElementById("grid1_2");
obj.onmouseover = function(ev){
setAttr("grid1_2","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid1_2","fill","white")
};
obj = document.getElementById("grid1_3");
obj.onmouseover = function(ev){
setAttr("grid1_3","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid1_3","fill","white")
};
obj = document.getElementById("grid2_1");
obj.onmouseover = function(ev){
setAttr("grid2_1","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid2_1","fill","white")
};
obj = document.getElementById("grid2_2");
obj.onmouseover = function(ev){
setAttr("grid2_2","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid2_2","fill","white")
};
obj = document.getElementById("grid2_3");
obj.onmouseover = function(ev){
setAttr("grid2_3","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid2_3","fill","white")
};
obj = document.getElementById("grid3_1");
obj.onmouseover = function(ev){
setAttr("grid3_1","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid3_1","fill","white")
};
obj = document.getElementById("grid3_2");
obj.onmouseover = function(ev){
setAttr("grid3_2","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid3_2","fill","white")
};
obj = document.getElementById("grid3_3");
obj.onmouseover = function(ev){
setAttr("grid3_3","fill","gray")
};
obj.onmouseout = function(){
setAttr("grid3_3","fill","white")
};
obj = document.getElementById("mctsRect");
obj.onmouseover = function(ev){
setAttr("mctsRect","fill","green")
};
obj.onmouseout = function(){
setAttr("mctsRect","fill","lightgray")
};
obj = document.getElementById("mctsRectTxt");
obj.onmouseover = function(ev){
setAttr("mctsRect","fill","green")
};
obj.onmouseout = function(){
setAttr("mctsRect","fill","lightgray")
};
}
</script>
</head>
<body>
<button type="button" class="collapsible collapsible-style">SVG Visualisation</button>
<div text-align="left">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
height="400" width="400"
viewBox="-2 -2 55 40"
>
<text text-align="left" x="0" y="35" font-size="2"
font-family="sans-serif">
<tspan id="visb_debug_messages_opt"> </tspan>
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05"
numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="1.2" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<script>
const svg = document.querySelector("svg");
const svgns = "http://www.w3.org/2000/svg";
if(document.getElementById("grid1_1") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid1_1");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","0");
new___obj.setAttribute("y","0");
svg.appendChild(new___obj);
}
if(document.getElementById("grid1_2") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid1_2");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","0");
new___obj.setAttribute("y","10");
svg.appendChild(new___obj);
}
if(document.getElementById("grid1_3") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid1_3");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","0");
new___obj.setAttribute("y","20");
svg.appendChild(new___obj);
}
if(document.getElementById("grid2_1") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid2_1");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","10");
new___obj.setAttribute("y","0");
svg.appendChild(new___obj);
}
if(document.getElementById("grid2_2") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid2_2");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","10");
new___obj.setAttribute("y","10");
svg.appendChild(new___obj);
}
if(document.getElementById("grid2_3") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid2_3");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","10");
new___obj.setAttribute("y","20");
svg.appendChild(new___obj);
}
if(document.getElementById("grid3_1") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid3_1");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","20");
new___obj.setAttribute("y","0");
svg.appendChild(new___obj);
}
if(document.getElementById("grid3_2") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid3_2");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","20");
new___obj.setAttribute("y","10");
svg.appendChild(new___obj);
}
if(document.getElementById("grid3_3") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","grid3_3");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","20");
new___obj.setAttribute("y","20");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO1_1") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO1_1");
new___obj.setAttribute("cx","5");
new___obj.setAttribute("cy","5");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO1_2") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO1_2");
new___obj.setAttribute("cx","5");
new___obj.setAttribute("cy","15");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO1_3") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO1_3");
new___obj.setAttribute("cx","5");
new___obj.setAttribute("cy","25");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO2_1") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO2_1");
new___obj.setAttribute("cx","15");
new___obj.setAttribute("cy","5");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO2_2") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO2_2");
new___obj.setAttribute("cx","15");
new___obj.setAttribute("cy","15");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO2_3") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO2_3");
new___obj.setAttribute("cx","15");
new___obj.setAttribute("cy","25");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO3_1") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO3_1");
new___obj.setAttribute("cx","25");
new___obj.setAttribute("cy","5");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO3_2") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO3_2");
new___obj.setAttribute("cx","25");
new___obj.setAttribute("cy","15");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceO3_3") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","pieceO3_3");
new___obj.setAttribute("cx","25");
new___obj.setAttribute("cy","25");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX1_1_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX1_1_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX1_1_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX1_1_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX1_2_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX1_2_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX1_2_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX1_2_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX1_3_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX1_3_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX1_3_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX1_3_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX2_1_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX2_1_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX2_1_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX2_1_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX2_2_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX2_2_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX2_2_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX2_2_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX2_3_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX2_3_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX2_3_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX2_3_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX3_1_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX3_1_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX3_1_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX3_1_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX3_2_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX3_2_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX3_2_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX3_2_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX3_3_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX3_3_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("pieceX3_3_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","pieceX3_3_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("winnerRect") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","winnerRect");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("height","10");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","40");
new___obj.setAttribute("y","10");
svg.appendChild(new___obj);
}
if(document.getElementById("mctsRect") == null) {
var new___obj = document.createElementNS(svgns,"rect");
new___obj.setAttribute("id","mctsRect");
new___obj.setAttribute("fill","lightgray");
new___obj.setAttribute("height","5");
new___obj.setAttribute("stroke","black");
new___obj.setAttribute("stroke-width","0.25");
new___obj.setAttribute("width","10");
new___obj.setAttribute("x","40");
new___obj.setAttribute("y","22.5");
svg.appendChild(new___obj);
}
if(document.getElementById("winnerTxt") == null) {
var new___obj = document.createElementNS(svgns,"text");
new___obj.setAttribute("id","winnerTxt");
new___obj.setAttribute("font-family","sans-serif");
new___obj.setAttribute("font-size","3.0");
new___obj.textContent = "Winner: ";
new___obj.setAttribute("x","40");
new___obj.setAttribute("y","8");
svg.appendChild(new___obj);
}
if(document.getElementById("winnerO") == null) {
var new___obj = document.createElementNS(svgns,"circle");
new___obj.setAttribute("id","winnerO");
new___obj.setAttribute("cx","45");
new___obj.setAttribute("cy","15");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("r","4.5");
new___obj.setAttribute("stroke","red");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("winnerX_a") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","winnerX_a");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("winnerX_b") == null) {
var new___obj = document.createElementNS(svgns,"polyline");
new___obj.setAttribute("id","winnerX_b");
new___obj.setAttribute("fill","white");
new___obj.setAttribute("points","0 0 10 10");
new___obj.setAttribute("stroke","blue");
new___obj.setAttribute("stroke-width","0.5");
new___obj.setAttribute("style","");
svg.appendChild(new___obj);
}
if(document.getElementById("mctsRectTxt") == null) {
var new___obj = document.createElementNS(svgns,"text");
new___obj.setAttribute("id","mctsRectTxt");
new___obj.setAttribute("font-family","sans-serif");
new___obj.setAttribute("font-size","2.5");
new___obj.textContent = "MCTS";
new___obj.setAttribute("x","41.6");
new___obj.setAttribute("y","25.9");
svg.appendChild(new___obj);
}
</script>
</div>
<button type="button" class="collapsible-style">Replay Trace</button>
<div class="coll-content-vis">
<button onclick="backStep()">&laquo; Back</button>
<button onclick="forwardStep()">Forward &raquo;</button>
<button onclick="runAll(10)">Run Trace (10 ms delay)</button>
<button onclick="runAll(500)">Run Trace (500 ms delay)</button>
<br><text id="visb_debug_messages" class="visb-messages"> </text>
</div>
<progress id="trace_meter" min="0" max="10" value="0"></progress>
<button type="button" class="collapsible collapsible-style">Variables (2/2)</button>
<div class="coll-content-hid">
<table> <tr> <th>Nr</th> <th>Name</th> <th>Value</th> </tr>
<tr id="var_rowboard"> <td>1</td> <td>board</td> <td id="bVar_board">?</td></tr>
<tr id="var_rownextTurn"> <td>2</td> <td>nextTurn</td> <td id="bVar_nextTurn">?</td></tr>
</table>
</div>
<button type="button" class="collapsible-style">Trace (length=10)</button>
<div class="coll-content-vis">
<table> <tr> <th>Nr</th> <th>Event</th> <th>Target State ID</th> </tr>
<tr id="row1" onclick="visualise0(1)"><td>1</td><td style="cursor:pointer">INITIALISATION(board={(1|->{(1|->"_"),(2|->"_"),(3|->"_")}),(2|->{(1|->"_"),(2|->"_"),(3|->"_")}),(3|->{(1|->"_"),(2|->"...</td><td><button onclick="visualise0(1);">State 0</button></td></tr>
<tr id="row2" onclick="visualise5(2)"><td>2</td><td style="cursor:pointer">MoveX(2,2)</td><td><button onclick="visualise5(2);">State 5</button></td></tr>
<tr id="row3" onclick="visualise246(3)"><td>3</td><td style="cursor:pointer">MoveO(1,1)</td><td><button onclick="visualise246(3);">State 246</button></td></tr>
<tr id="row4" onclick="visualise204(4)"><td>4</td><td style="cursor:pointer">MoveX(1,2)</td><td><button onclick="visualise204(4);">State 204</button></td></tr>
<tr id="row5" onclick="visualise1725(5)"><td>5</td><td style="cursor:pointer">MoveO(3,2)</td><td><button onclick="visualise1725(5);">State 1725</button></td></tr>
<tr id="row6" onclick="visualise1671(6)"><td>6</td><td style="cursor:pointer">MoveX(2,1)</td><td><button onclick="visualise1671(6);">State 1671</button></td></tr>
<tr id="row7" onclick="visualise1927(7)"><td>7</td><td style="cursor:pointer">MoveO(2,3)</td><td><button onclick="visualise1927(7);">State 1927</button></td></tr>
<tr id="row8" onclick="visualise2049(8)"><td>8</td><td style="cursor:pointer">MoveX(3,1)</td><td><button onclick="visualise2049(8);">State 2049</button></td></tr>
<tr id="row9" onclick="visualise1995(9)"><td>9</td><td style="cursor:pointer">MoveO(1,3)</td><td><button onclick="visualise1995(9);">State 1995</button></td></tr>
<tr id="row10" onclick="visualise1900(10)"><td>10</td><td style="cursor:pointer">MoveX(3,3)</td><td><button onclick="visualise1900(10);">State 1900</button></td></tr>
</table>
</div>
<button type="button" class="collapsible-style">Info</button>
<div class="coll-content-vis visb-messages">
Generated on 2/1/2024 at 17:41 using ProB version 1.12.3-nightly
<br>Main specification file: tictactoe_v2.tla (modified on 2/1/2024 at 17:37)
<br>Main specification name: tictactoe_v2
<br>Main VisB JSON file: tictactoe_visb.json (modified on 2/1/2024 at 17:35)
<br>VisB SVG file: tictactoe_grid.svg (modified on 2/1/2024 at 13:46)
<script> visualise1900(10); </script>
</div>
<script> registerHovers() </script>
<script>
var collapsibles = document.getElementsByClassName("collapsible");
var ii;
for (ii = 0; ii < collapsibles.length; ii++) {
collapsibles[ii].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
TicTacToe/tictactoe_v2.tla 0 → 100644
View file @ b003a794
---------------------------- MODULE tictactoe_v2 ----------------------------
(* taken from https://elliotswart.github.io/pragmaticformalmodeling/ *)
(* version adapted for TLA2B so that we can have B-style operations with parameters for VisB *)
(* also contains GAME state definitions for ProB so that we can use MCTS *)
EXTENDS Naturals
VARIABLES
board, \* board[1..3][1..3] A 3x3 tic-tac-toe board
nextTurn \* who goes next
Pieces == {"X", "O", "_"} \* "_" represents a blank square
Init ==
/\ nextTurn = "X" \* X always goes first
\* Every space in the board states blank
/\ board = [i \in 1..3 |-> [j \in 1..3 |-> "_"]]
MoveO ==
\E i \in 1..3: \E j \in 1..3: \* There exists a position on the board
/\ nextTurn = "O" \* Only enabled on player's turn
/\ nextTurn' = "X" \* The future state of next turn is other player
/\ board[i][j] = "_" \* Where the board is currently empty
(********************************************************************)
(* The future state of board is the same, except a piece is in that *)
(* spot *)
(********************************************************************)
/\ board' = [board EXCEPT
![i][j] = "O"]
MoveX ==
\E i \in 1..3: \E j \in 1..3: \* There exists a position on the board
/\ nextTurn = "X" \* Only enabled on player's turn
/\ nextTurn' = "O" \* The future state of next turn is other player
/\ board[i][j] = "_" \* Where the board is currently empty
(********************************************************************)
(* The future state of board is the same, except a piece is in that *)
(* spot *)
(********************************************************************)
/\ board' = [board EXCEPT
![i][j] = "X"]
\* Every state, X will move if X's turn, O will move on O's turn
Next == MoveX \/ MoveO
\* A description of every possible game of tic-tac-toe
\* will play until the board fills up, even if someone won
Spec == Init /\ [][Next]_<<board,nextTurn>>
(***************************************************************************)
(* Invariants: The things we are checking for. *)
(***************************************************************************)
WinningPositions == {
\* Horizonal wins
{<<1,1>>, <<1,2>>, <<1,3>>},
{<<2,1>>, <<2,2>>, <<2,3>>},
{<<3,1>>, <<3,2>>, <<3,3>>},
\* Vertical wins
{<<1,1>>, <<2,1>>, <<3,1>>},
{<<1,2>>, <<2,2>>, <<3,2>>},
{<<1,3>>, <<2,3>>, <<3,3>>},
\* Diagonal wins
{<<1,1>>, <<2,2>>, <<3,3>>},
{<<3,1>>, <<2,2>>, <<1,3>>}
}
Won(player) ==
\* A player has won if there exists a winning position
\E winningPosition \in WinningPositions:
\* Where all the needed spaces
\A neededSpace \in winningPosition:
\* are occupied by one player
board[neededSpace[1]][neededSpace[2]] = player
XHasNotWon == ~Won("X")
OHasNotWon == ~Won("O")
BoardFilled ==
\* There does not exist
~\E i \in 1..3, j \in 1..3:
\* an empty space
LET space == board[i][j] IN
space = "_"
\* It's not a stalemate if one player has won or the board is not filled
NotStalemate ==
\/ Won("X")
\/ Won("O")
\/ ~BoardFilled
\* additions for ProB:
VISB_JSON_FILE == "tictactoe_visb.json"
GOAL == Won("O")
\* the following Invariant is violated by this model
INVARIANT == ~Won("O") \/ ~Won("X")
\* additions for ProB so that we can apply MCTS auto play:
GAME_MCTS_RUNS == 100
GAME_PLAYER == IF nextTurn = "X" THEN "max" ELSE "min"
GAME_OVER == IF Won("X") \/ Won("O") THEN TRUE ELSE FALSE
GAME_VALUE == IF Won("X") THEN 1 ELSE 0
=============================================================================
TicTacToe/tictactoe_visb.json 0 → 100644
View file @ b003a794
{
"svg": "tictactoe_grid.svg",
"comment": "version which uses new svg object creation",
"definitions": [
{ "name":"x_offset",
"value" : "4"
},
{ "name":"center",
"value" : "%i.(i:INTEGER|5+10*(i-1))"
},
{ "name":"vert_line_a",
"value":"%(i,j).(i:INTEGER & j:INTEGER | TO_STRING(center(i)+x_offset) ^ \" \" ^ TO_STRING(center(j)-x_offset) ^ \" \" ^ TO_STRING(center(i)-x_offset) ^ \" \" ^ TO_STRING(center(j)+x_offset))"
},
{ "name":"vert_line_b",
"value":"%(i,j).(i:INTEGER & j:INTEGER | TO_STRING(center(i)+x_offset) ^ \" \" ^ TO_STRING(center(j)+x_offset) ^ \" \" ^ TO_STRING(center(i)-x_offset) ^ \" \" ^ TO_STRING(center(j)-x_offset))"
}
],
"svg_objects":[
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"svg_class":"rect",
"id":"grid%0_%1",
"x":"10*(%0-1)",
"y":"10*(%1-1)",
"width":"10",
"height" : "10",
"stroke":"black",
"stroke-width":"0.25",
"fill":"white"
},
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":"3"},
"svg_class":"circle",
"id":"pieceO%0_%1",
"cx":"center(%0)",
"cy":"center(%1)",
"r":"4.5",
"stroke":"red",
"stroke-width":"0.5",
"style": "",
"fill":"white"
},
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":"3"},
"repeat": ["a","b"],
"svg_class":"polyline",
"id":"pieceX%0_%1_%2",
"points":"0 0 10 10",
"stroke":"blue",
"stroke-width":"0.5",
"style": "",
"fill":"white"
},
{
"svg_class":"rect",
"id":"winnerRect",
"x":"10*(5-1)",
"y":"10*(2-1)",
"width":"10",
"height" : "10",
"stroke":"black",
"stroke-width":"0.25",
"fill":"white"
},
{
"svg_class":"rect",
"id":"mctsRect",
"x":"10*(5-1)",
"y":"10.0*(2.0)+2.5",
"width":"10",
"height" : "5",
"stroke":"black",
"stroke-width":"0.25",
"fill":"lightgray"
},
{
"svg_class":"text",
"id":"winnerTxt",
"x":"40",
"y":"8",
"font-size":"3.0",
"font-family":"sans-serif",
"text":"Winner: "
},
{
"svg_class":"circle",
"id":"winnerO",
"cx":"center(5)",
"cy":"center(2)",
"r":"4.5",
"stroke":"red",
"stroke-width":"0.5",
"style": "",
"fill":"white"
},
{
"repeat": ["a","b"],
"svg_class":"polyline",
"id":"winnerX_%0",
"points":"0 0 10 10",
"stroke":"blue",
"stroke-width":"0.5",
"style": "",
"fill":"white"
},
{
"svg_class":"text",
"id":"mctsRectTxt",
"x":"41.6",
"y":"25.9",
"font-size":"2.5",
"font-family":"sans-serif",
"text":"MCTS"
}
],
"items": [
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"id":"pieceO%0_%1",
"attr": "visibility",
"value": "IF board(%0)(%1) = \"O\" THEN \"visible\" ELSE \"hidden\" END"
},
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"repeat": ["a","b"],
"id":"pieceX%0_%1_%2",
"attr": "visibility",
"value": "IF board(%0)(%1) = \"X\" THEN \"visible\" ELSE \"hidden\" END"
},
{
"id":"winnerO",
"attr": "visibility",
"value": "IF Won(\"O\") THEN \"visible\" ELSE \"hidden\" END"
},
{
"repeat": ["a","b"],
"id":"winnerX_%0",
"attr": "visibility",
"value": "IF Won(\"X\") THEN \"visible\" ELSE \"hidden\" END"
},
{
"id":"winnerTxt",
"attr": "text",
"value": "IF ran(union(ran(board)))={\"O\",\"X\"} & not(Won(\"X\")) & not(Won(\"O\")) THEN \"Draw !\" ELSE \"Winner:\" END"
},
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"repeat": ["a"],
"id":"pieceX%0_%1_%2",
"attr": "points",
"value": "vert_line_a(%0,%1)"
},
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"repeat": ["b"],
"id":"pieceX%0_%1_%2",
"attr": "points",
"value": "vert_line_b(%0,%1)"
},
{
"id":"winnerX_a",
"attr": "points",
"value": "vert_line_a(5,2)"
},
{
"id":"winnerX_b",
"attr": "points",
"value": "vert_line_b(5,2)"
}
],
"events":[
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"id":"grid%0_%1",
"optional": "true",
"event":"MoveX",
"predicates": [ "i=%0", "j=%1"],
"hovers": [{ "attr":"fill", "enter":"gray", "leave":"white"}]
},
{
"for":{"from":1,"to":"3"},
"for":{"from":1,"to":3},
"id":"grid%0_%1",
"optional": "true",
"event":"MoveO",
"predicates": [ "i=%0", "j=%1"]
},
{
"id":"mctsRect",
"event": "MCTS_AUTO_PLAY",
"hovers": [{ "attr":"fill", "enter":"green", "leave":"lightgray"}]
},
{
"id":"mctsRectTxt",
"event": "MCTS_AUTO_PLAY",
"hovers": [{ "id":"mctsRect", "attr":"fill", "enter":"green", "leave":"lightgray"}]
}
]
}