Write readme. Refactor rules generation.
parent
e846259282
commit
0a586a33c1
117
bot.py
117
bot.py
|
@ -1,117 +0,0 @@
|
||||||
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"])
|
|
||||||
Draw = namedtuple("Move", ["ps", "t"])
|
|
||||||
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
|
|
||||||
|
|
||||||
moves_acc = []
|
|
||||||
draws_acc = []
|
|
||||||
wins2_acc = []
|
|
||||||
|
|
||||||
def get_moves(field, turn, moves, bots_turn):
|
|
||||||
|
|
||||||
if player_won(field, PLAYER_1):
|
|
||||||
raise Exception("If we got here our bot screwed up.")
|
|
||||||
|
|
||||||
if player_won(field, PLAYER_2):
|
|
||||||
moves = Draw(moves.ps, turn)
|
|
||||||
wins2_acc.append(moves)
|
|
||||||
return
|
|
||||||
|
|
||||||
if game_over(field):
|
|
||||||
moves = Draw(moves.ps, turn)
|
|
||||||
draws_acc.append(moves)
|
|
||||||
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, 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_1)
|
|
||||||
equities.append((equity, move))
|
|
||||||
move = min(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, False)
|
|
||||||
|
|
||||||
EMPTY_FIELD = tuple([EMPTY for _ in range(9)])
|
|
||||||
get_moves(EMPTY_FIELD, 0, Move([], None), False)
|
|
||||||
return (moves_acc, draws_acc, wins2_acc)
|
|
File diff suppressed because one or more lines are too long
151
readme.md
151
readme.md
|
@ -1,9 +1,150 @@
|
||||||
# Tic Tac Toe CSS
|
# Pure CSS Tic-tac-toe Bot
|
||||||
|
|
||||||
https://eddyerburgh.me/make-responsive-tic-tac-toe-board
|
Tic-tac-toe CSS is a static Tic-tac-toe *bot* in pure CSS *without* any JavaScript.
|
||||||
|
I had the idea for this project when I learned the basics of CSS many years ago.
|
||||||
|
For me the hard part of this project was to figure out a way to respond to different board constellations in CSS.
|
||||||
|
Once I had understood how to make rule based decisions it was easy to generate the necessary HTML and CSS for the bot in Python using the [Jinja template engine](http://jinja.pocoo.org).
|
||||||
|
|
||||||
https://css-tricks.com/game-life/
|
## HTML and CSS Generation
|
||||||
|
|
||||||
https://codepen.io/ziga-miklic/post/pure-css-tic-tac-toe
|
Luckily, [Žiga Miklič](https://codepen.io/ziga-miklic/)
|
||||||
|
has created a dual player
|
||||||
|
[Tic-tac-toe](https://codepen.io/ziga-miklic/post/pure-css-tic-tac-toe)
|
||||||
|
version in pure CSS.
|
||||||
|
Without his example it would have been hard for me to come up with a solution as elegant as his (or possibly a solution at all).
|
||||||
|
The idea is to generate a complete Tic-tac-toe board for each turn.
|
||||||
|
Each field of the board consists of an `<input>` tag to mark the field as checked and a `<label>` tag to visualize it.
|
||||||
|
This Jinja template generates nine boards - one for each turn.
|
||||||
|
The classes `.field-n` and `.turn-n` help to control the game flow
|
||||||
|
while `.row-n` and `.col-n` place the field on the board.
|
||||||
|
|
||||||
https://jsfiddle.net/stackmanoz/r6E9p/
|
~~~html
|
||||||
|
{% 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 %}
|
||||||
|
~~~
|
||||||
|
|
||||||
|
At the start of the game the CSS rules hide all fields but `.turn-0`.
|
||||||
|
For each turn the checked field moves to the front and the next board becomes visible.
|
||||||
|
In fact, only every second board moves to the front because the other move is done by the bot (note that the z-index is incremented by two).
|
||||||
|
|
||||||
|
~~~css
|
||||||
|
{% for turn in turns_player %}
|
||||||
|
.tic-tac-toe input.turn-{{turn}}:checked + label {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1.0;
|
||||||
|
z-index: 10 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tic-tac-toe input.turn-{{turn}}:checked ~ .turn-{{turn + 2}} + label {
|
||||||
|
z-index: {{turn + 2}};
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
{% endfor %}
|
||||||
|
~~~
|
||||||
|
|
||||||
|
Using the `.turn` and `.field` classes we can now tell the bot to make certain moves.
|
||||||
|
For example, let's say the player marks the first field `.field-0` in turn `.turn-0` and the second field `.field-1` in turn `.turn-2`.
|
||||||
|
We do not want the player to win by marking all fields in the first row and tell the bot to mark the third field (`.field-2`) of that row.
|
||||||
|
|
||||||
|
~~~css
|
||||||
|
.tic-tac-toe
|
||||||
|
input.turn-0.field-0:checked ~ input.turn-2.field-1:checked ~
|
||||||
|
input.turn-3.field-2 + label {
|
||||||
|
display: block;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1.0;
|
||||||
|
z-index: 10 !important;
|
||||||
|
}
|
||||||
|
~~~
|
||||||
|
|
||||||
|
We do not care which field has been checked in `.turn-1` because the bot rule generation algorithm keeps track of the bot's moves.
|
||||||
|
The CSS file contains a couple of other rules to create the Tic-tac-toe grid, pretty check marks, and a message for when the game has ended.
|
||||||
|
Credits to this [JS fiddle](https://jsfiddle.net/stackmanoz/r6E9p/) for teaching me how to make crosses in CSS.
|
||||||
|
I was not aware of the rotate property.
|
||||||
|
The next step is to generate the CSS rules for the bot.
|
||||||
|
|
||||||
|
|
||||||
|
## Bot Rules Generation
|
||||||
|
|
||||||
|
There has to be a CSS rule for every possible sequence of moves by the human player.
|
||||||
|
We define a `Move` as an integer two-tuple.
|
||||||
|
The first element represents the turn and the second element the index of the field that is selected by the move.
|
||||||
|
|
||||||
|
~~~python
|
||||||
|
Move = namedtuple("Move", ["turn", "field"])
|
||||||
|
~~~
|
||||||
|
|
||||||
|
We define a `Rule` as a two-tuple where the first element is a sequence of moves and the second element is the next move, i.e. the response to the player moves by the bot.
|
||||||
|
|
||||||
|
~~~python
|
||||||
|
Rule = namedtuple("Rule", ["moves", "next_move"])
|
||||||
|
~~~
|
||||||
|
|
||||||
|
One might think that there are too many rules to cover all potential player moves statically.
|
||||||
|
However, it can be shown that this is not an issue.
|
||||||
|
Tic-tac-toe is a simple game with only *9!* possible sequences of moves.
|
||||||
|
In the first round there are nine free fields, then eight, then seven and so on.
|
||||||
|
The bot can only select one of its available options per turn.
|
||||||
|
Hence, the number of possible sequences further reduces to *9 * 7 * 5 * 3 * 1 = 945*.
|
||||||
|
|
||||||
|
To compute the rules we implement a recursive procedure `get_rules`.
|
||||||
|
The procedure takes a board, the current turn, a partial rule (a rule including all moves till this point), and a flag whether indicating if it is the bot's or the player's turn.
|
||||||
|
The procedure terminates when either of the players has won or when the board is full.
|
||||||
|
In either case we create a rule which we append to `draw_rules` and `win_rules` which we use to display a nice message at the end of the game.
|
||||||
|
|
||||||
|
If the game is still open and it is not the bot's turn we iterate over all potential moves by the player.
|
||||||
|
For each move we make another call to `get_rules` with the new board and partial rule.
|
||||||
|
|
||||||
|
If it is the bot's turn we also iterate over all potential moves and call a procedure `get_equity` for every new potential board.
|
||||||
|
We choose the move with the highest equity for us and the lowest equity for our opponent.
|
||||||
|
For this move we then create a new final rule and call `get_rules` recursively with the updated board and the current rule (not the new rule!).
|
||||||
|
|
||||||
|
The procedure `get_equity` takes a board and a player and returns the expected value for the constellation.
|
||||||
|
If the player wins the game the equity is one, if they lose it is minus one, and a draw means zero.
|
||||||
|
If the game is undecided `get_equity` calls itself recursively with every potential move and the opposite player.
|
||||||
|
The procedure assumes that the other player always selects the move that maximizes their equity.
|
||||||
|
By choosing the move with the minimal equity for the other player the current player can maximize their own equity:
|
||||||
|
|
||||||
|
~~~python
|
||||||
|
def get_equity(board, player):
|
||||||
|
if player_won(board, player):
|
||||||
|
return 1
|
||||||
|
elif player_lost(board, player):
|
||||||
|
return -1
|
||||||
|
elif game_over(board):
|
||||||
|
return 0
|
||||||
|
|
||||||
|
other_player = PLAYER_2 if player == PLAYER_1 else PLAYER_1
|
||||||
|
equities = []
|
||||||
|
for field_index in get_unchecked_fields(board):
|
||||||
|
new_board = get_new_board(board, field_index, player)
|
||||||
|
equity = get_equity(new_board, other_player)
|
||||||
|
equities.append(equity)
|
||||||
|
return min(equities) * -1
|
||||||
|
~~~
|
||||||
|
|
||||||
|
To avoid recomputing of equities we use `lru_cache` from `functools` to cache existing equities.
|
||||||
|
Once we have computed all rules we can feed them to Jinja to generate the respective CSS code and thus have generated a static Tic-tac-toe bot in pure CSS.
|
||||||
|
|
||||||
|
~~~css
|
||||||
|
{% for rule in bot_move_rules %}
|
||||||
|
.tic-tac-toe
|
||||||
|
{% for move in rule.moves -%}
|
||||||
|
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||||
|
{% endfor -%}
|
||||||
|
input.turn-{{rule.next_move.turn}}.field-{{rule.next_move.field}} + label {
|
||||||
|
display: block;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1.0;
|
||||||
|
z-index: 10 !important;
|
||||||
|
}
|
||||||
|
{% endfor %}
|
||||||
|
~~~
|
||||||
|
|
|
@ -0,0 +1,120 @@
|
||||||
|
from functools import lru_cache
|
||||||
|
from collections import namedtuple
|
||||||
|
|
||||||
|
|
||||||
|
def get_tictactoe_rules():
|
||||||
|
PLAYER_1 = "X"
|
||||||
|
PLAYER_2 = "O"
|
||||||
|
UNCHECKED = "_"
|
||||||
|
Rule = namedtuple("Rule", ["moves", "next_move"])
|
||||||
|
Move = namedtuple("Move", ["turn", "field"])
|
||||||
|
|
||||||
|
def all_rows(board):
|
||||||
|
""" Returns all rows of a Sudoku field. """
|
||||||
|
f = board
|
||||||
|
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 elem in row:
|
||||||
|
if elem != value:
|
||||||
|
return False
|
||||||
|
return True
|
||||||
|
|
||||||
|
def player_won(board, player):
|
||||||
|
for row in all_rows(board):
|
||||||
|
if all_equal_to(row, player):
|
||||||
|
return True
|
||||||
|
return False
|
||||||
|
|
||||||
|
def player_lost(board, player):
|
||||||
|
other_player = PLAYER_2 if player == PLAYER_1 else PLAYER_1
|
||||||
|
return player_won(board, other_player)
|
||||||
|
|
||||||
|
def game_over(board):
|
||||||
|
for field in board:
|
||||||
|
if field == UNCHECKED:
|
||||||
|
return False
|
||||||
|
return True
|
||||||
|
|
||||||
|
def get_unchecked_fields(board):
|
||||||
|
return [field_index for field_index in range(len(board))
|
||||||
|
if board[field_index] == UNCHECKED]
|
||||||
|
|
||||||
|
def get_new_board(board, field_index, player):
|
||||||
|
new_board = list(board)
|
||||||
|
new_board[field_index] = player
|
||||||
|
return tuple(new_board)
|
||||||
|
|
||||||
|
def get_empty_board():
|
||||||
|
return tuple([UNCHECKED for _ in range(9)])
|
||||||
|
|
||||||
|
@lru_cache(maxsize=2**16)
|
||||||
|
def get_equity(board, player):
|
||||||
|
if player_won(board, player):
|
||||||
|
return 1
|
||||||
|
elif player_lost(board, player):
|
||||||
|
return -1
|
||||||
|
elif game_over(board):
|
||||||
|
return 0
|
||||||
|
|
||||||
|
other_player = PLAYER_2 if player == PLAYER_1 else PLAYER_1
|
||||||
|
equities = []
|
||||||
|
for field_index in get_unchecked_fields(board):
|
||||||
|
new_board = get_new_board(board, field_index, player)
|
||||||
|
equity = get_equity(new_board, other_player)
|
||||||
|
equities.append(equity)
|
||||||
|
return min(equities) * -1
|
||||||
|
|
||||||
|
bot_move_rules = []
|
||||||
|
draw_rules = []
|
||||||
|
win_rules = []
|
||||||
|
|
||||||
|
def get_rules(current_board, turn, current_rule, bots_turn):
|
||||||
|
|
||||||
|
if player_won(current_board, PLAYER_1):
|
||||||
|
raise Exception("If we got here our bot screwed up.")
|
||||||
|
|
||||||
|
if player_won(current_board, PLAYER_2):
|
||||||
|
rule = Rule(current_rule.moves, Move(turn, None))
|
||||||
|
win_rules.append(rule)
|
||||||
|
return
|
||||||
|
|
||||||
|
if game_over(current_board):
|
||||||
|
rule = Rule(current_rule.moves, Move(turn, None))
|
||||||
|
draw_rules.append(rule)
|
||||||
|
return
|
||||||
|
|
||||||
|
if not bots_turn:
|
||||||
|
for field_index in get_unchecked_fields(current_board):
|
||||||
|
new_board = get_new_board(current_board, field_index, PLAYER_1)
|
||||||
|
new_moves = current_rule.moves + [Move(turn, field_index)]
|
||||||
|
new_current_rule = Rule(new_moves, None)
|
||||||
|
get_rules(new_board, turn + 1, new_current_rule, True)
|
||||||
|
else:
|
||||||
|
equities = []
|
||||||
|
for field_index in get_unchecked_fields(current_board):
|
||||||
|
new_board = get_new_board(current_board, field_index, PLAYER_2)
|
||||||
|
equity = get_equity(new_board, PLAYER_1)
|
||||||
|
equities.append((equity, field_index))
|
||||||
|
new_index = min(equities)[1]
|
||||||
|
new_board = get_new_board(current_board, new_index, PLAYER_2)
|
||||||
|
|
||||||
|
bot_rule = Rule(current_rule.moves, Move(turn, new_index))
|
||||||
|
bot_move_rules.append(bot_rule)
|
||||||
|
get_rules(new_board, turn + 1, current_rule, False)
|
||||||
|
|
||||||
|
EMPTY_BOARD = get_empty_board()
|
||||||
|
get_rules(EMPTY_BOARD, 0, Rule([], None), False)
|
||||||
|
|
||||||
|
return (bot_move_rules, draw_rules, win_rules)
|
|
@ -63,46 +63,13 @@ body {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle {
|
.tic-tac-toe input {
|
||||||
position: absolute;
|
display: none;
|
||||||
height: 100px;
|
|
||||||
width: 100px;
|
|
||||||
margin: 10px;
|
|
||||||
border: 10px solid #dc685a;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cross {
|
.tic-tac-toe input.turn-0 + label {
|
||||||
position: absolute;
|
z-index: 0;
|
||||||
width: 140px;
|
|
||||||
height: 140px;
|
|
||||||
display: block;
|
display: block;
|
||||||
transform:rotate(45deg);
|
|
||||||
-ms-transform:rotate(45deg);
|
|
||||||
-webkit-transform:rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cross:before, .cross:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
background: #78bec5;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cross:before {
|
|
||||||
top: 65px;
|
|
||||||
bottom: 65px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
height: 10px;
|
|
||||||
width: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cross:after {
|
|
||||||
left: 65px;
|
|
||||||
right: 65px;
|
|
||||||
height: 140px;
|
|
||||||
width: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input.col-0 + label {
|
.tic-tac-toe input.col-0 + label {
|
||||||
|
@ -135,39 +102,49 @@ body {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input {
|
|
||||||
display: none;
|
/* CSS for creating the O and X check marks on the field. */
|
||||||
|
.tic-tac-toe .circle {
|
||||||
|
position: absolute;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin: 10px;
|
||||||
|
border: 10px solid #dc685a;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input.turn-0 + label {
|
.tic-tac-toe .cross {
|
||||||
z-index: 0;
|
position: absolute;
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
display: block;
|
display: block;
|
||||||
|
transform:rotate(45deg);
|
||||||
|
-ms-transform:rotate(45deg);
|
||||||
|
-webkit-transform:rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
{% for turn in turns_player %}
|
.tic-tac-toe .cross:before, .cross:after {
|
||||||
.tic-tac-toe input.turn-{{turn}}:checked + label {
|
content: "";
|
||||||
cursor: default;
|
position: absolute;
|
||||||
opacity: 1.0;
|
background: #78bec5;
|
||||||
z-index: 10 !important;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input.turn-{{turn}}:checked ~ .turn-{{turn + 2}} + label {
|
.tic-tac-toe .cross:before {
|
||||||
z-index: {{turn + 2}};
|
top: 65px;
|
||||||
display: block;
|
bottom: 65px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
height: 10px;
|
||||||
|
width: 140px;
|
||||||
}
|
}
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% for m in moves %}
|
.tic-tac-toe .cross:after {
|
||||||
.tic-tac-toe
|
left: 65px;
|
||||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
right: 65px;
|
||||||
input.turn-{{m.n.t}}.field-{{m.n.i}} + label {
|
height: 140px;
|
||||||
display: block;
|
width: 10px;
|
||||||
cursor: default;
|
|
||||||
opacity: 1.0;
|
|
||||||
z-index: 10 !important;
|
|
||||||
}
|
}
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
|
|
||||||
.tic-tac-toe .end {
|
.tic-tac-toe .end {
|
||||||
width: 440px;
|
width: 440px;
|
||||||
|
@ -195,34 +172,77 @@ input.turn-{{m.n.t}}.field-{{m.n.i}} + label {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
{% for m in wins2 %}
|
/*
|
||||||
.tic-tac-toe
|
Rules for player moves. Make selected field permanently visible and make next
|
||||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
board visible. The next player board is the current turn + 2 because every
|
||||||
.end {
|
second board is for the bot.
|
||||||
display: block;
|
*/
|
||||||
|
{%- for turn in turns_player %}
|
||||||
|
.tic-tac-toe input.turn-{{turn}}:checked + label {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1.0;
|
||||||
z-index: 10 !important;
|
z-index: 10 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tic-tac-toe input.turn-{{turn}}:checked ~ .turn-{{turn + 2}} + label {
|
||||||
|
z-index: {{turn + 2}};
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
/* BEGIN: bot_move_rules */
|
||||||
|
{% for rule in bot_move_rules %}
|
||||||
.tic-tac-toe
|
.tic-tac-toe
|
||||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
{% for move in rule.moves -%}
|
||||||
|
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||||
|
{% endfor -%}
|
||||||
|
input.turn-{{rule.next_move.turn}}.field-{{rule.next_move.field}} + label {
|
||||||
|
display: block;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1.0;
|
||||||
|
z-index: 10 !important;
|
||||||
|
}
|
||||||
|
{% endfor %}
|
||||||
|
/* END: bot_move_rules */
|
||||||
|
|
||||||
|
|
||||||
|
/* BEGING: Rules for when the bot has won. */
|
||||||
|
{% for rule in win_rules %}
|
||||||
|
.tic-tac-toe
|
||||||
|
{% for move in rule.moves -%}
|
||||||
|
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||||
|
{% endfor -%}
|
||||||
|
.end {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tic-tac-toe
|
||||||
|
{% for move in rule.moves -%}
|
||||||
|
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||||
|
{% endfor -%}
|
||||||
.end > h1:before {
|
.end > h1:before {
|
||||||
content: "Bot wins!" !important;
|
content: "Bot wins!" !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
/* END: Rules for when the bot has won. */
|
||||||
|
|
||||||
{% for m in draws %}
|
|
||||||
|
/* BEGING: draws */
|
||||||
|
{% for rule in draw_rules %}
|
||||||
.tic-tac-toe
|
.tic-tac-toe
|
||||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
{% for move in rule.moves -%}
|
||||||
|
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||||
|
{% endfor -%}
|
||||||
.end {
|
.end {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 10 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe
|
.tic-tac-toe
|
||||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
{% for move in rule.moves -%}
|
||||||
|
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||||
|
{% endfor -%}
|
||||||
.end > h1:before {
|
.end > h1:before {
|
||||||
content: "Tied!" !important;
|
content: "Tied!" !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
/* END: draws */
|
||||||
|
|
12612
tictactoe.css
12612
tictactoe.css
File diff suppressed because it is too large
Load Diff
10
tictactoe.py
10
tictactoe.py
|
@ -1,5 +1,5 @@
|
||||||
from jinja2 import Environment, FileSystemLoader
|
from jinja2 import Environment, FileSystemLoader
|
||||||
from bot import get_sudoku_moves
|
from rules import get_tictactoe_rules
|
||||||
|
|
||||||
|
|
||||||
def write_html(html_file):
|
def write_html(html_file):
|
||||||
|
@ -10,13 +10,13 @@ def write_html(html_file):
|
||||||
|
|
||||||
|
|
||||||
def write_css(css_file):
|
def write_css(css_file):
|
||||||
moves, draws, wins2 = get_sudoku_moves()
|
bot_move_rules, draw_rules, win_rules = get_tictactoe_rules()
|
||||||
kwargs = {
|
kwargs = {
|
||||||
"turns_player": [0, 2, 4, 6, 8],
|
"turns_player": [0, 2, 4, 6, 8],
|
||||||
"turns_bot": [1, 3, 5, 7],
|
"turns_bot": [1, 3, 5, 7],
|
||||||
"moves": moves,
|
"bot_move_rules": bot_move_rules,
|
||||||
"draws": draws,
|
"draw_rules": draw_rules,
|
||||||
"wins2": wins2,
|
"win_rules": win_rules,
|
||||||
}
|
}
|
||||||
env = Environment(loader=FileSystemLoader("."))
|
env = Environment(loader=FileSystemLoader("."))
|
||||||
template = env.get_template('template.' + css_file)
|
template = env.get_template('template.' + css_file)
|
||||||
|
|
Loading…
Reference in New Issue