diff --git a/TicTacToe/tictactoe_v2.html b/TicTacToe/tictactoe_v2.html
new file mode 100644
index 0000000000000000000000000000000000000000..2326472caea5e75a6bfa22c1d5b3836cf3f9556b
--- /dev/null
+++ b/TicTacToe/tictactoe_v2.html
@@ -0,0 +1,1395 @@
+<!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()">« Back</button>
+ <button onclick="forwardStep()">Forward »</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>
+