First working version of CSS generation. Bot not that good yet. Haha.

.gitignore

@@ -1,2 +1,3 @@
+__pycache__
 tictactoecss.sublime-project
 tictactoecss.sublime-workspace

bot.py

@@ -0,0 +1,105 @@
+from functools import lru_cache
+from collections import namedtuple
+
+
+def get_sudoku_moves():
+    PLAYER_1 = "X"
+    PLAYER_2 = "O"
+    EMPTY = "_"
+    Move = namedtuple("Move", ["ps", "n"])
+    Position = namedtuple("Position", ["t", "i"])
+
+    def all_rows(field):
+        """ Returns all rows of a Sudoku field. """
+        f = field
+        return [
+            f[0:3], f[3:6], f[6:9],        # horizontals
+            f[0:7:3], f[1:8:3], f[2:9:3],  # verticals
+            f[0:9:4], f[2:7:2]             # diagonals
+        ]
+
+    assert(all_rows(list(range(9))) == [
+           [0, 1, 2], [3, 4, 5], [6, 7, 8],
+           [0, 3, 6], [1, 4, 7], [2, 5, 8],
+           [0, 4, 8], [2, 4, 6]])
+
+    def all_equal_to(row, value):
+        """ Returns True if all elements in row are
+        equal to value.  Returns False otherwise. """
+        for e in row:
+            if e != value:
+                return False
+        return True
+
+    def player_won(field, player):
+        for row in all_rows(field):
+            if all_equal_to(row, player):
+                return True
+        return False
+
+    def player_lost(field, player):
+        other_player = PLAYER_2 if player == PLAYER_1 else PLAYER_1
+        return player_won(field, other_player)
+
+    def game_over(field):
+        for f in field:
+            if f == EMPTY:
+                return False
+        return True
+
+    def possible_moves(field):
+        return [i for i in range(len(field)) if field[i] == EMPTY]
+
+    @lru_cache(maxsize=2**16)
+    def get_equity(field, player):
+        if player_won(field, player):
+            return 1
+        elif player_lost(field, player):
+            return -1
+        elif game_over(field):
+            return 0
+
+        other_player = PLAYER_2 if player == PLAYER_1 else PLAYER_1
+        equities = []
+        for possible_move in possible_moves(field):
+            new_field = list(field)
+            new_field[possible_move] = player
+            new_field = tuple(new_field)
+            equity = get_equity(new_field, other_player)
+            equities.append(equity)
+        return min(equities) * -1
+
+    def get_moves(field, turn, moves, moves_acc, bots_turn):
+
+        if player_won(field, PLAYER_1) or player_won(field, PLAYER_2):
+            return
+
+        if game_over(field):
+            return
+
+        if not bots_turn:
+            for move in possible_moves(field):
+                new_field = list(field)
+                new_field[move] = PLAYER_1
+                new_field = tuple(new_field)
+                new_moves = Move(moves.ps + [Position(turn, move)], None)
+                get_moves(new_field, turn + 1, new_moves, moves_acc, True)
+        else:
+            equities = []
+            for move in possible_moves(field):
+                new_field = list(field)
+                new_field[move] = PLAYER_2
+                new_field = tuple(new_field)
+                equity = get_equity(new_field, PLAYER_2)
+                equities.append((equity, move))
+            move = max(equities)[1]
+            new_field = list(field)
+            new_field[move] = PLAYER_2
+            new_field = tuple(new_field)
+            bot_move = Move(moves.ps, Position(turn, move))
+            moves_acc.append(bot_move)
+            get_moves(new_field, turn + 1, moves, moves_acc, False)
+        return moves_acc
+
+    EMPTY_FIELD = tuple([EMPTY for _ in range(9)])
+    return get_moves(EMPTY_FIELD, 0, Move([], None), [], False)

template.tictactoe.css

@@ -0,0 +1,90 @@
+body {
+  text-align: center;
+  margin: 0;
+}
+
+.tic-tac-toe {
+  height: 450px;  
+  width: 450px;  
+  margin: 50px auto 30px auto;
+  position: relative;
+  background-color: #E6E6FA;
+}
+
+.tic-tac-toe label {
+  background-color: #78bec5;
+  height: 140px;
+  width: 140px; 
+  display: none;
+  margin: 5px;
+  position: absolute;
+  cursor: pointer;
+  color: #fff;
+  -moz-transition: background-color 0.3s;
+  -o-transition: background-color 0.3s;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+
+.tic-tac-toe input.col-0 + label {
+  left: 0px;
+  right: 300px;
+}
+
+.tic-tac-toe input.col-1 + label {
+  left: 150px;
+  right: 150px;
+}
+
+.tic-tac-toe input.col-2 + label {
+  left: 300px;
+  right: 0px;
+}
+
+.tic-tac-toe input.row-0 + label {
+  top: 0px;
+  bottom: 300px;
+}
+
+.tic-tac-toe input.row-1 + label {
+  top: 150px;
+  bottom: 150px;
+}
+
+.tic-tac-toe input.row-2 + label {
+  top: 300px;
+  bottom: 0px;
+}
+
+.tic-tac-toe input {
+  display: none;
+}
+
+.tic-tac-toe input.turn-0 + label {
+  z-index: 0;
+  display: block;
+}
+
+{% for turn in turns_player %}
+.tic-tac-toe input.turn-{{turn}}:checked + label {
+  cursor: default;
+  background-color: red;
+  z-index: 10 !important;
+}
+
+.tic-tac-toe input.turn-{{turn}}:checked ~ .turn-{{turn + 2}} + label {
+  z-index: {{turn + 2}};
+  display: block;
+}
+{% endfor %}
+{% for m in moves %}
+.tic-tac-toe
+{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
+input.turn-{{m.n.t}}.field-{{m.n.i}} + label {
+  display: block;
+  cursor: default;
+  background-color: green;
+  z-index: 10 !important;
+}
+{% endfor %}
+

template.tictactoe.html

@@ -0,0 +1,19 @@
+<html>
+<head>
+  <title>Tic Tac Toe CSS</title>
+  <link rel="stylesheet" type="text/css" href="tictactoe.css">
+</head>
+<body>
+  <div class="tic-tac-toe">
+    {% for turn in range(9) %}
+    <!-- turn-{{turn}} -->
+    {% for row in range(3) %}
+    {% for col in range(3) %}
+    <input class="field-{{row * 3 + col}} row-{{row}} col-{{col}} turn-{{turn}}" id="block-{{turn}}-{{row}}-{{col}}" type="radio">
+    <label class="turn-{{turn}}" for="block-{{turn}}-{{row}}-{{col}}"></label>
+    {% endfor %}
+    {% endfor %}
+    {% endfor %}
+  </div>
+</body>
+</html>

tictactoe.html

@@ -5,186 +5,331 @@
 </head>
 <body>
   <div class="tic-tac-toe">
+    
     <!-- turn-0 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-0" id="block-0-0-0" type="radio">
     <label class="turn-0" for="block-0-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-0" id="block-0-0-1" type="radio">
     <label class="turn-0" for="block-0-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-0" id="block-0-0-2" type="radio">
     <label class="turn-0" for="block-0-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-0" id="block-0-1-0" type="radio">
     <label class="turn-0" for="block-0-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-0" id="block-0-1-1" type="radio">
     <label class="turn-0" for="block-0-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-0" id="block-0-1-2" type="radio">
     <label class="turn-0" for="block-0-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-0" id="block-0-2-0" type="radio">
     <label class="turn-0" for="block-0-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-0" id="block-0-2-1" type="radio">
     <label class="turn-0" for="block-0-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-0" id="block-0-2-2" type="radio">
     <label class="turn-0" for="block-0-2-2"></label>
-
+    
+    
+    
     <!-- turn-1 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-1" id="block-1-0-0" type="radio">
     <label class="turn-1" for="block-1-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-1" id="block-1-0-1" type="radio">
     <label class="turn-1" for="block-1-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-1" id="block-1-0-2" type="radio">
     <label class="turn-1" for="block-1-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-1" id="block-1-1-0" type="radio">
     <label class="turn-1" for="block-1-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-1" id="block-1-1-1" type="radio">
     <label class="turn-1" for="block-1-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-1" id="block-1-1-2" type="radio">
     <label class="turn-1" for="block-1-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-1" id="block-1-2-0" type="radio">
     <label class="turn-1" for="block-1-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-1" id="block-1-2-1" type="radio">
     <label class="turn-1" for="block-1-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-1" id="block-1-2-2" type="radio">
     <label class="turn-1" for="block-1-2-2"></label>
-
+    
+    
+    
     <!-- turn-2 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-2" id="block-2-0-0" type="radio">
     <label class="turn-2" for="block-2-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-2" id="block-2-0-1" type="radio">
     <label class="turn-2" for="block-2-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-2" id="block-2-0-2" type="radio">
     <label class="turn-2" for="block-2-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-2" id="block-2-1-0" type="radio">
     <label class="turn-2" for="block-2-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-2" id="block-2-1-1" type="radio">
     <label class="turn-2" for="block-2-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-2" id="block-2-1-2" type="radio">
     <label class="turn-2" for="block-2-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-2" id="block-2-2-0" type="radio">
     <label class="turn-2" for="block-2-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-2" id="block-2-2-1" type="radio">
     <label class="turn-2" for="block-2-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-2" id="block-2-2-2" type="radio">
     <label class="turn-2" for="block-2-2-2"></label>
-
+    
+    
+    
     <!-- turn-3 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-3" id="block-3-0-0" type="radio">
     <label class="turn-3" for="block-3-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-3" id="block-3-0-1" type="radio">
     <label class="turn-3" for="block-3-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-3" id="block-3-0-2" type="radio">
     <label class="turn-3" for="block-3-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-3" id="block-3-1-0" type="radio">
     <label class="turn-3" for="block-3-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-3" id="block-3-1-1" type="radio">
     <label class="turn-3" for="block-3-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-3" id="block-3-1-2" type="radio">
     <label class="turn-3" for="block-3-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-3" id="block-3-2-0" type="radio">
     <label class="turn-3" for="block-3-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-3" id="block-3-2-1" type="radio">
     <label class="turn-3" for="block-3-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-3" id="block-3-2-2" type="radio">
     <label class="turn-3" for="block-3-2-2"></label>
-
+    
+    
+    
     <!-- turn-4 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-4" id="block-4-0-0" type="radio">
     <label class="turn-4" for="block-4-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-4" id="block-4-0-1" type="radio">
     <label class="turn-4" for="block-4-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-4" id="block-4-0-2" type="radio">
     <label class="turn-4" for="block-4-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-4" id="block-4-1-0" type="radio">
     <label class="turn-4" for="block-4-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-4" id="block-4-1-1" type="radio">
     <label class="turn-4" for="block-4-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-4" id="block-4-1-2" type="radio">
     <label class="turn-4" for="block-4-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-4" id="block-4-2-0" type="radio">
     <label class="turn-4" for="block-4-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-4" id="block-4-2-1" type="radio">
     <label class="turn-4" for="block-4-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-4" id="block-4-2-2" type="radio">
     <label class="turn-4" for="block-4-2-2"></label>
-
+    
+    
+    
     <!-- turn-5 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-5" id="block-5-0-0" type="radio">
     <label class="turn-5" for="block-5-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-5" id="block-5-0-1" type="radio">
     <label class="turn-5" for="block-5-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-5" id="block-5-0-2" type="radio">
     <label class="turn-5" for="block-5-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-5" id="block-5-1-0" type="radio">
     <label class="turn-5" for="block-5-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-5" id="block-5-1-1" type="radio">
     <label class="turn-5" for="block-5-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-5" id="block-5-1-2" type="radio">
     <label class="turn-5" for="block-5-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-5" id="block-5-2-0" type="radio">
     <label class="turn-5" for="block-5-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-5" id="block-5-2-1" type="radio">
     <label class="turn-5" for="block-5-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-5" id="block-5-2-2" type="radio">
     <label class="turn-5" for="block-5-2-2"></label>
-
+    
+    
+    
     <!-- turn-6 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-6" id="block-6-0-0" type="radio">
     <label class="turn-6" for="block-6-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-6" id="block-6-0-1" type="radio">
     <label class="turn-6" for="block-6-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-6" id="block-6-0-2" type="radio">
     <label class="turn-6" for="block-6-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-6" id="block-6-1-0" type="radio">
     <label class="turn-6" for="block-6-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-6" id="block-6-1-1" type="radio">
     <label class="turn-6" for="block-6-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-6" id="block-6-1-2" type="radio">
     <label class="turn-6" for="block-6-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-6" id="block-6-2-0" type="radio">
     <label class="turn-6" for="block-6-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-6" id="block-6-2-1" type="radio">
     <label class="turn-6" for="block-6-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-6" id="block-6-2-2" type="radio">
     <label class="turn-6" for="block-6-2-2"></label>
-
+    
+    
+    
     <!-- turn-7 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-7" id="block-7-0-0" type="radio">
     <label class="turn-7" for="block-7-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-7" id="block-7-0-1" type="radio">
     <label class="turn-7" for="block-7-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-7" id="block-7-0-2" type="radio">
     <label class="turn-7" for="block-7-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-7" id="block-7-1-0" type="radio">
     <label class="turn-7" for="block-7-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-7" id="block-7-1-1" type="radio">
     <label class="turn-7" for="block-7-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-7" id="block-7-1-2" type="radio">
     <label class="turn-7" for="block-7-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-7" id="block-7-2-0" type="radio">
     <label class="turn-7" for="block-7-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-7" id="block-7-2-1" type="radio">
     <label class="turn-7" for="block-7-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-7" id="block-7-2-2" type="radio">
     <label class="turn-7" for="block-7-2-2"></label>
-
+    
+    
+    
     <!-- turn-8 -->
+    
+    
     <input class="field-0 row-0 col-0 turn-8" id="block-8-0-0" type="radio">
     <label class="turn-8" for="block-8-0-0"></label>
+    
     <input class="field-1 row-0 col-1 turn-8" id="block-8-0-1" type="radio">
     <label class="turn-8" for="block-8-0-1"></label>
+    
     <input class="field-2 row-0 col-2 turn-8" id="block-8-0-2" type="radio">
     <label class="turn-8" for="block-8-0-2"></label>
+    
+    
+    
     <input class="field-3 row-1 col-0 turn-8" id="block-8-1-0" type="radio">
     <label class="turn-8" for="block-8-1-0"></label>
+    
     <input class="field-4 row-1 col-1 turn-8" id="block-8-1-1" type="radio">
     <label class="turn-8" for="block-8-1-1"></label>
+    
     <input class="field-5 row-1 col-2 turn-8" id="block-8-1-2" type="radio">
     <label class="turn-8" for="block-8-1-2"></label>
+    
+    
+    
     <input class="field-6 row-2 col-0 turn-8" id="block-8-2-0" type="radio">
     <label class="turn-8" for="block-8-2-0"></label>
+    
     <input class="field-7 row-2 col-1 turn-8" id="block-8-2-1" type="radio">
     <label class="turn-8" for="block-8-2-1"></label>
+    
     <input class="field-8 row-2 col-2 turn-8" id="block-8-2-2" type="radio">
     <label class="turn-8" for="block-8-2-2"></label>
-
+    
+    
+    
   </div>
 </body>
 </html>

tictactoe.py

@@ -1,49 +1,24 @@
+from jinja2 import Environment, FileSystemLoader
+from bot import get_sudoku_moves
+
 
 def write_html(html_file):
-    html_top = [
+    env = Environment(loader=FileSystemLoader("."))
-        '<html>',
+    template = env.get_template('template.' + html_file)
-        '<head>',
-        '  <title>Tic Tac Toe CSS</title>',
-        '  <link rel="stylesheet" type="text/css" href="tictactoe.css">',
-        '</head>',
-        '<body>',
-        '  <div class="tic-tac-toe">']
-
-    html_bottom = [
-        '  </div>',
-        '</body>',
-        '</html>']
-    tepl_input = '    <input class="field-{field} ' \
-                 'row-{row} col-{col} turn-{turn}" ' \
-                 'id="block-{turn}-{row}-{col}" type="radio">'
-
-    tepl_label = '    <label class="turn-{turn}" ' \
-                 'for="block-{turn}-{row}-{col}"></label>'
-    html_main = []
-
-    for turn in range(9):
-        c = "    <!-- turn-{} -->".format(turn)
-        html_main.append(c)
-        for row in range(3):
-            for col in range(3):
-                d = {
-                    "field": row * 3 + col,
-                    "turn": turn,
-                    "row": row,
-                    "col": col}
-                input_ = tepl_input.format(**d)
-                label_ = tepl_label.format(**d)
-                html_main.append(input_)
-                html_main.append(label_)
-        html_main.append("")
-
-    html = html_top + html_main + html_bottom
     with open(html_file, 'w') as f:
-        f.write("\n".join(html))
+        f.write(template.render())
 
 
 def write_css(css_file):
-    pass
+    kwargs = {
+        "turns_player": [0, 2, 4, 6, 8],
+        "turns_bot": [1, 3, 5, 7],
+        "moves": get_sudoku_moves(),
+    }
+    env = Environment(loader=FileSystemLoader("."))
+    template = env.get_template('template.' + css_file)
+    with open(css_file, 'w') as f:
+        f.write(template.render(**kwargs))
 
 
 if __name__ == "__main__":

todo.txt

@@ -1,4 +1,3 @@
 (D) Add message that indicates draw or loss. +tictactoecss
-(D) Create Python script that creates full CSS for bot +tictactoecss
 (D) Publish on homepage. +tictactoecss
 (D) Write readme. +tictactoecss