First working version of CSS generation. Bot not that good yet. Haha.
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
||||
__pycache__
|
||||
tictactoecss.sublime-project
|
||||
tictactoecss.sublime-workspace
|
||||
|
||||
105
bot.py
Normal file
105
bot.py
Normal file
@@ -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)
|
||||
90
template.tictactoe.css
Normal file
90
template.tictactoe.css
Normal file
@@ -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 %}
|
||||
|
||||
19
template.tictactoe.html
Normal file
19
template.tictactoe.html
Normal file
@@ -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>
|
||||
6588
tictactoe.css
6588
tictactoe.css
File diff suppressed because it is too large
Load Diff
163
tictactoe.html
163
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>
|
||||
55
tictactoe.py
55
tictactoe.py
@@ -1,49 +1,24 @@
|
||||
from jinja2 import Environment, FileSystemLoader
|
||||
from bot import get_sudoku_moves
|
||||
|
||||
|
||||
def write_html(html_file):
|
||||
html_top = [
|
||||
'<html>',
|
||||
'<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
|
||||
env = Environment(loader=FileSystemLoader("."))
|
||||
template = env.get_template('template.' + html_file)
|
||||
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__":
|
||||
|
||||
Reference in New Issue
Block a user