felixm/tictactoecss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change CSS template so that Tic Tac Toe looks nice.

Browse Source
This commit is contained in:
Felix Martin
2019-07-28 13:39:54 -04:00
parent 9f75af0f47
commit e846259282
8 changed files with 11192 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
bot.py
View File

@@ -7,6 +7,7 @@ def get_sudoku_moves():
PLAYER_2 = "O" PLAYER_2 = "O"
EMPTY = "_" EMPTY = "_"
Move = namedtuple("Move", ["ps", "n"]) Move = namedtuple("Move", ["ps", "n"])
Draw = namedtuple("Move", ["ps", "t"])
Position = namedtuple("Position", ["t", "i"]) Position = namedtuple("Position", ["t", "i"])
def all_rows(field): def all_rows(field):
@@ -69,12 +70,23 @@ def get_sudoku_moves():
equities.append(equity) equities.append(equity)
return min(equities) * -1 return min(equities) * -1
def get_moves(field, turn, moves, moves_acc, bots_turn): moves_acc = []
draws_acc = []
wins2_acc = []
if player_won(field, PLAYER_1) or player_won(field, PLAYER_2): 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 return
if game_over(field): if game_over(field):
moves = Draw(moves.ps, turn)
draws_acc.append(moves)
return return
if not bots_turn: if not bots_turn:
@@ -83,7 +95,7 @@ def get_sudoku_moves():
new_field[move] = PLAYER_1 new_field[move] = PLAYER_1
new_field = tuple(new_field) new_field = tuple(new_field)
new_moves = Move(moves.ps + [Position(turn, move)], None) new_moves = Move(moves.ps + [Position(turn, move)], None)
get_moves(new_field, turn + 1, new_moves, moves_acc, True) get_moves(new_field, turn + 1, new_moves, True)
else: else:
equities = [] equities = []
for move in possible_moves(field): for move in possible_moves(field):
@@ -98,8 +110,8 @@ def get_sudoku_moves():
new_field = tuple(new_field) new_field = tuple(new_field)
bot_move = Move(moves.ps, Position(turn, move)) bot_move = Move(moves.ps, Position(turn, move))
moves_acc.append(bot_move) moves_acc.append(bot_move)
get_moves(new_field, turn + 1, moves, moves_acc, False) get_moves(new_field, turn + 1, moves, False)
return moves_acc
EMPTY_FIELD = tuple([EMPTY for _ in range(9)]) EMPTY_FIELD = tuple([EMPTY for _ in range(9)])
return get_moves(EMPTY_FIELD, 0, Move([], None), [], False) get_moves(EMPTY_FIELD, 0, Move([], None), False)
return (moves_acc, draws_acc, wins2_acc)

4
readme.md
View File

@@ -4,4 +4,6 @@ https://eddyerburgh.me/make-responsive-tic-tac-toe-board
https://css-tricks.com/game-life/ https://css-tricks.com/game-life/
https://codepen.io/ziga-miklic/post/pure-css-tic-tac-toe https://codepen.io/ziga-miklic/post/pure-css-tic-tac-toe
https://jsfiddle.net/stackmanoz/r6E9p/

154
template.tictactoe.css
View File

@@ -4,28 +4,107 @@ body {
} }
.tic-tac-toe { .tic-tac-toe {
height: 450px; font-family: 'Open Sans', sans-serif;
width: 450px; height: 440px;
width: 440px;
margin: 50px auto 30px auto; margin: 50px auto 30px auto;
position: relative; position: relative;
background-color: #E6E6FA; }
.tic-tac-toe .grid {
background-color: grey;
position: absolute;
display: block;
border-radius: 3px;
}
.tic-tac-toe .horizontal-bar-1 {
top: 140px;
bottom: 290px;
height: 10px;
width: 440px
}
.tic-tac-toe .horizontal-bar-2 {
top: 290px;
bottom: 140px;
height: 10px;
width: 440px
}
.tic-tac-toe .vertical-bar-1 {
left: 140px;
right: 290px;
height: 440px;
width: 10px;
}
.tic-tac-toe .vertical-bar-2 {
left: 290px;
right: 140px;
height: 440px;
width: 10px;
} }
.tic-tac-toe label { .tic-tac-toe label {
background-color: #78bec5;
height: 140px; height: 140px;
width: 140px; width: 140px;
display: none; display: none;
margin: 5px; opacity: 0.0;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
color: #fff;
-moz-transition: background-color 0.3s; -moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s; -o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s; -webkit-transition: background-color 0.3s;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.tic-tac-toe label:hover {
opacity: 0.2;
}
.circle {
position: absolute;
height: 100px;
width: 100px;
margin: 10px;
border: 10px solid #dc685a;
border-radius: 50%;
}
.cross {
position: absolute;
width: 140px;
height: 140px;
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 {
left: 0px; left: 0px;
right: 300px; right: 300px;
@@ -68,7 +147,7 @@ body {
{% for turn in turns_player %} {% for turn in turns_player %}
.tic-tac-toe input.turn-{{turn}}:checked + label { .tic-tac-toe input.turn-{{turn}}:checked + label {
cursor: default; cursor: default;
background-color: red; opacity: 1.0;
z-index: 10 !important; z-index: 10 !important;
} }
@@ -77,14 +156,73 @@ body {
display: block; display: block;
} }
{% endfor %} {% endfor %}
{% for m in moves %} {% for m in moves %}
.tic-tac-toe .tic-tac-toe
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %} {% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
input.turn-{{m.n.t}}.field-{{m.n.i}} + label { input.turn-{{m.n.t}}.field-{{m.n.i}} + label {
display: block; display: block;
cursor: default; cursor: default;
background-color: green; opacity: 1.0;
z-index: 10 !important; z-index: 10 !important;
} }
{% endfor %} {% endfor %}
.tic-tac-toe .end {
width: 440px;
height: 440px;
padding-top: 125px;
position: absolute;
display: none;
background-color: #ecaf4f;
color: #3d4250;
text-align: center;
z-index: 11;
background: rgba(255, 255, 255, 0.8);
border-radius: 3px;
}
.tic-tac-toe .end h1 {
margin: 40px;
}
.tic-tac-toe .end a {
background-color: #3d4250;
border-radius: 3px;
text-decoration: none;
color: #fff;
padding: 10px;
}
{% for m in wins2 %}
.tic-tac-toe
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
.end {
display: block;
z-index: 10 !important;
}
.tic-tac-toe
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
.end > h1:before {
content: "Bot wins!" !important;
}
{% endfor %}
{% for m in draws %}
.tic-tac-toe
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
.end {
display: block;
z-index: 10 !important;
}
.tic-tac-toe
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
.end > h1:before {
content: "Tied!" !important;
}
{% endfor %}

17
template.tictactoe.html
View File

@@ -2,18 +2,33 @@
<head> <head>
<title>Tic Tac Toe CSS</title> <title>Tic Tac Toe CSS</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css"> <link rel="stylesheet" type="text/css" href="tictactoe.css">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic' rel='stylesheet'>
</head> </head>
<body> <body>
<div class="tic-tac-toe"> <div class="tic-tac-toe">
<div class="grid horizontal-bar-1"></div>
<div class="grid horizontal-bar-2"></div>
<div class="grid vertical-bar-1"></div>
<div class="grid vertical-bar-2"></div>
{% for turn in range(9) %} {% for turn in range(9) %}
<!-- turn-{{turn}} --> <!-- turn-{{turn}} -->
{% for row in range(3) %} {% for row in range(3) %}
{% for col 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"> <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> <label class="turn-{{turn}}" for="block-{{turn}}-{{row}}-{{col}}">
{% if (turn % 2 == 0) %}
<div class="circle"></div>
{% else %}
<div class="cross"></div>
{% endif %}
</label>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
<div class="end">
<h1></h1>
<a href="">Play again.</a>
</div> </div>
</body> </body>
</html> </html>

11538
tictactoe.css
View File

File diff suppressed because it is too large Load Diff

495
tictactoe.html
View File

@@ -2,43 +2,85 @@
<head> <head>
<title>Tic Tac Toe CSS</title> <title>Tic Tac Toe CSS</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css"> <link rel="stylesheet" type="text/css" href="tictactoe.css">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic' rel='stylesheet'>
</head> </head>
<body> <body>
<div class="tic-tac-toe"> <div class="tic-tac-toe">
<div class="grid horizontal-bar-1"></div>
<div class="grid horizontal-bar-2"></div>
<div class="grid vertical-bar-1"></div>
<div class="grid vertical-bar-2"></div>
<!-- turn-0 --> <!-- turn-0 -->
<input class="field-0 row-0 col-0 turn-0" id="block-0-0-0" type="radio"> <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> <label class="turn-0" for="block-0-0-0">
<div class="circle"></div>
</label>
<input class="field-1 row-0 col-1 turn-0" id="block-0-0-1" type="radio"> <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> <label class="turn-0" for="block-0-0-1">
<div class="circle"></div>
</label>
<input class="field-2 row-0 col-2 turn-0" id="block-0-0-2" type="radio"> <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> <label class="turn-0" for="block-0-0-2">
<div class="circle"></div>
</label>
<input class="field-3 row-1 col-0 turn-0" id="block-0-1-0" type="radio"> <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> <label class="turn-0" for="block-0-1-0">
<div class="circle"></div>
</label>
<input class="field-4 row-1 col-1 turn-0" id="block-0-1-1" type="radio"> <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> <label class="turn-0" for="block-0-1-1">
<div class="circle"></div>
</label>
<input class="field-5 row-1 col-2 turn-0" id="block-0-1-2" type="radio"> <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> <label class="turn-0" for="block-0-1-2">
<div class="circle"></div>
</label>
<input class="field-6 row-2 col-0 turn-0" id="block-0-2-0" type="radio"> <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> <label class="turn-0" for="block-0-2-0">
<div class="circle"></div>
</label>
<input class="field-7 row-2 col-1 turn-0" id="block-0-2-1" type="radio"> <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> <label class="turn-0" for="block-0-2-1">
<div class="circle"></div>
</label>
<input class="field-8 row-2 col-2 turn-0" id="block-0-2-2" type="radio"> <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> <label class="turn-0" for="block-0-2-2">
<div class="circle"></div>
</label>
@@ -46,35 +88,71 @@
<input class="field-0 row-0 col-0 turn-1" id="block-1-0-0" type="radio"> <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> <label class="turn-1" for="block-1-0-0">
<div class="cross"></div>
</label>
<input class="field-1 row-0 col-1 turn-1" id="block-1-0-1" type="radio"> <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> <label class="turn-1" for="block-1-0-1">
<div class="cross"></div>
</label>
<input class="field-2 row-0 col-2 turn-1" id="block-1-0-2" type="radio"> <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> <label class="turn-1" for="block-1-0-2">
<div class="cross"></div>
</label>
<input class="field-3 row-1 col-0 turn-1" id="block-1-1-0" type="radio"> <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> <label class="turn-1" for="block-1-1-0">
<div class="cross"></div>
</label>
<input class="field-4 row-1 col-1 turn-1" id="block-1-1-1" type="radio"> <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> <label class="turn-1" for="block-1-1-1">
<div class="cross"></div>
</label>
<input class="field-5 row-1 col-2 turn-1" id="block-1-1-2" type="radio"> <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> <label class="turn-1" for="block-1-1-2">
<div class="cross"></div>
</label>
<input class="field-6 row-2 col-0 turn-1" id="block-1-2-0" type="radio"> <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> <label class="turn-1" for="block-1-2-0">
<div class="cross"></div>
</label>
<input class="field-7 row-2 col-1 turn-1" id="block-1-2-1" type="radio"> <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> <label class="turn-1" for="block-1-2-1">
<div class="cross"></div>
</label>
<input class="field-8 row-2 col-2 turn-1" id="block-1-2-2" type="radio"> <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> <label class="turn-1" for="block-1-2-2">
<div class="cross"></div>
</label>
@@ -82,35 +160,71 @@
<input class="field-0 row-0 col-0 turn-2" id="block-2-0-0" type="radio"> <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> <label class="turn-2" for="block-2-0-0">
<div class="circle"></div>
</label>
<input class="field-1 row-0 col-1 turn-2" id="block-2-0-1" type="radio"> <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> <label class="turn-2" for="block-2-0-1">
<div class="circle"></div>
</label>
<input class="field-2 row-0 col-2 turn-2" id="block-2-0-2" type="radio"> <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> <label class="turn-2" for="block-2-0-2">
<div class="circle"></div>
</label>
<input class="field-3 row-1 col-0 turn-2" id="block-2-1-0" type="radio"> <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> <label class="turn-2" for="block-2-1-0">
<div class="circle"></div>
</label>
<input class="field-4 row-1 col-1 turn-2" id="block-2-1-1" type="radio"> <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> <label class="turn-2" for="block-2-1-1">
<div class="circle"></div>
</label>
<input class="field-5 row-1 col-2 turn-2" id="block-2-1-2" type="radio"> <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> <label class="turn-2" for="block-2-1-2">
<div class="circle"></div>
</label>
<input class="field-6 row-2 col-0 turn-2" id="block-2-2-0" type="radio"> <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> <label class="turn-2" for="block-2-2-0">
<div class="circle"></div>
</label>
<input class="field-7 row-2 col-1 turn-2" id="block-2-2-1" type="radio"> <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> <label class="turn-2" for="block-2-2-1">
<div class="circle"></div>
</label>
<input class="field-8 row-2 col-2 turn-2" id="block-2-2-2" type="radio"> <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> <label class="turn-2" for="block-2-2-2">
<div class="circle"></div>
</label>
@@ -118,35 +232,71 @@
<input class="field-0 row-0 col-0 turn-3" id="block-3-0-0" type="radio"> <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> <label class="turn-3" for="block-3-0-0">
<div class="cross"></div>
</label>
<input class="field-1 row-0 col-1 turn-3" id="block-3-0-1" type="radio"> <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> <label class="turn-3" for="block-3-0-1">
<div class="cross"></div>
</label>
<input class="field-2 row-0 col-2 turn-3" id="block-3-0-2" type="radio"> <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> <label class="turn-3" for="block-3-0-2">
<div class="cross"></div>
</label>
<input class="field-3 row-1 col-0 turn-3" id="block-3-1-0" type="radio"> <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> <label class="turn-3" for="block-3-1-0">
<div class="cross"></div>
</label>
<input class="field-4 row-1 col-1 turn-3" id="block-3-1-1" type="radio"> <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> <label class="turn-3" for="block-3-1-1">
<div class="cross"></div>
</label>
<input class="field-5 row-1 col-2 turn-3" id="block-3-1-2" type="radio"> <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> <label class="turn-3" for="block-3-1-2">
<div class="cross"></div>
</label>
<input class="field-6 row-2 col-0 turn-3" id="block-3-2-0" type="radio"> <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> <label class="turn-3" for="block-3-2-0">
<div class="cross"></div>
</label>
<input class="field-7 row-2 col-1 turn-3" id="block-3-2-1" type="radio"> <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> <label class="turn-3" for="block-3-2-1">
<div class="cross"></div>
</label>
<input class="field-8 row-2 col-2 turn-3" id="block-3-2-2" type="radio"> <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> <label class="turn-3" for="block-3-2-2">
<div class="cross"></div>
</label>
@@ -154,35 +304,71 @@
<input class="field-0 row-0 col-0 turn-4" id="block-4-0-0" type="radio"> <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> <label class="turn-4" for="block-4-0-0">
<div class="circle"></div>
</label>
<input class="field-1 row-0 col-1 turn-4" id="block-4-0-1" type="radio"> <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> <label class="turn-4" for="block-4-0-1">
<div class="circle"></div>
</label>
<input class="field-2 row-0 col-2 turn-4" id="block-4-0-2" type="radio"> <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> <label class="turn-4" for="block-4-0-2">
<div class="circle"></div>
</label>
<input class="field-3 row-1 col-0 turn-4" id="block-4-1-0" type="radio"> <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> <label class="turn-4" for="block-4-1-0">
<div class="circle"></div>
</label>
<input class="field-4 row-1 col-1 turn-4" id="block-4-1-1" type="radio"> <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> <label class="turn-4" for="block-4-1-1">
<div class="circle"></div>
</label>
<input class="field-5 row-1 col-2 turn-4" id="block-4-1-2" type="radio"> <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> <label class="turn-4" for="block-4-1-2">
<div class="circle"></div>
</label>
<input class="field-6 row-2 col-0 turn-4" id="block-4-2-0" type="radio"> <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> <label class="turn-4" for="block-4-2-0">
<div class="circle"></div>
</label>
<input class="field-7 row-2 col-1 turn-4" id="block-4-2-1" type="radio"> <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> <label class="turn-4" for="block-4-2-1">
<div class="circle"></div>
</label>
<input class="field-8 row-2 col-2 turn-4" id="block-4-2-2" type="radio"> <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> <label class="turn-4" for="block-4-2-2">
<div class="circle"></div>
</label>
@@ -190,35 +376,71 @@
<input class="field-0 row-0 col-0 turn-5" id="block-5-0-0" type="radio"> <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> <label class="turn-5" for="block-5-0-0">
<div class="cross"></div>
</label>
<input class="field-1 row-0 col-1 turn-5" id="block-5-0-1" type="radio"> <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> <label class="turn-5" for="block-5-0-1">
<div class="cross"></div>
</label>
<input class="field-2 row-0 col-2 turn-5" id="block-5-0-2" type="radio"> <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> <label class="turn-5" for="block-5-0-2">
<div class="cross"></div>
</label>
<input class="field-3 row-1 col-0 turn-5" id="block-5-1-0" type="radio"> <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> <label class="turn-5" for="block-5-1-0">
<div class="cross"></div>
</label>
<input class="field-4 row-1 col-1 turn-5" id="block-5-1-1" type="radio"> <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> <label class="turn-5" for="block-5-1-1">
<div class="cross"></div>
</label>
<input class="field-5 row-1 col-2 turn-5" id="block-5-1-2" type="radio"> <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> <label class="turn-5" for="block-5-1-2">
<div class="cross"></div>
</label>
<input class="field-6 row-2 col-0 turn-5" id="block-5-2-0" type="radio"> <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> <label class="turn-5" for="block-5-2-0">
<div class="cross"></div>
</label>
<input class="field-7 row-2 col-1 turn-5" id="block-5-2-1" type="radio"> <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> <label class="turn-5" for="block-5-2-1">
<div class="cross"></div>
</label>
<input class="field-8 row-2 col-2 turn-5" id="block-5-2-2" type="radio"> <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> <label class="turn-5" for="block-5-2-2">
<div class="cross"></div>
</label>
@@ -226,35 +448,71 @@
<input class="field-0 row-0 col-0 turn-6" id="block-6-0-0" type="radio"> <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> <label class="turn-6" for="block-6-0-0">
<div class="circle"></div>
</label>
<input class="field-1 row-0 col-1 turn-6" id="block-6-0-1" type="radio"> <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> <label class="turn-6" for="block-6-0-1">
<div class="circle"></div>
</label>
<input class="field-2 row-0 col-2 turn-6" id="block-6-0-2" type="radio"> <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> <label class="turn-6" for="block-6-0-2">
<div class="circle"></div>
</label>
<input class="field-3 row-1 col-0 turn-6" id="block-6-1-0" type="radio"> <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> <label class="turn-6" for="block-6-1-0">
<div class="circle"></div>
</label>
<input class="field-4 row-1 col-1 turn-6" id="block-6-1-1" type="radio"> <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> <label class="turn-6" for="block-6-1-1">
<div class="circle"></div>
</label>
<input class="field-5 row-1 col-2 turn-6" id="block-6-1-2" type="radio"> <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> <label class="turn-6" for="block-6-1-2">
<div class="circle"></div>
</label>
<input class="field-6 row-2 col-0 turn-6" id="block-6-2-0" type="radio"> <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> <label class="turn-6" for="block-6-2-0">
<div class="circle"></div>
</label>
<input class="field-7 row-2 col-1 turn-6" id="block-6-2-1" type="radio"> <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> <label class="turn-6" for="block-6-2-1">
<div class="circle"></div>
</label>
<input class="field-8 row-2 col-2 turn-6" id="block-6-2-2" type="radio"> <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> <label class="turn-6" for="block-6-2-2">
<div class="circle"></div>
</label>
@@ -262,35 +520,71 @@
<input class="field-0 row-0 col-0 turn-7" id="block-7-0-0" type="radio"> <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> <label class="turn-7" for="block-7-0-0">
<div class="cross"></div>
</label>
<input class="field-1 row-0 col-1 turn-7" id="block-7-0-1" type="radio"> <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> <label class="turn-7" for="block-7-0-1">
<div class="cross"></div>
</label>
<input class="field-2 row-0 col-2 turn-7" id="block-7-0-2" type="radio"> <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> <label class="turn-7" for="block-7-0-2">
<div class="cross"></div>
</label>
<input class="field-3 row-1 col-0 turn-7" id="block-7-1-0" type="radio"> <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> <label class="turn-7" for="block-7-1-0">
<div class="cross"></div>
</label>
<input class="field-4 row-1 col-1 turn-7" id="block-7-1-1" type="radio"> <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> <label class="turn-7" for="block-7-1-1">
<div class="cross"></div>
</label>
<input class="field-5 row-1 col-2 turn-7" id="block-7-1-2" type="radio"> <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> <label class="turn-7" for="block-7-1-2">
<div class="cross"></div>
</label>
<input class="field-6 row-2 col-0 turn-7" id="block-7-2-0" type="radio"> <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> <label class="turn-7" for="block-7-2-0">
<div class="cross"></div>
</label>
<input class="field-7 row-2 col-1 turn-7" id="block-7-2-1" type="radio"> <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> <label class="turn-7" for="block-7-2-1">
<div class="cross"></div>
</label>
<input class="field-8 row-2 col-2 turn-7" id="block-7-2-2" type="radio"> <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> <label class="turn-7" for="block-7-2-2">
<div class="cross"></div>
</label>
@@ -298,38 +592,77 @@
<input class="field-0 row-0 col-0 turn-8" id="block-8-0-0" type="radio"> <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> <label class="turn-8" for="block-8-0-0">
<div class="circle"></div>
</label>
<input class="field-1 row-0 col-1 turn-8" id="block-8-0-1" type="radio"> <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> <label class="turn-8" for="block-8-0-1">
<div class="circle"></div>
</label>
<input class="field-2 row-0 col-2 turn-8" id="block-8-0-2" type="radio"> <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> <label class="turn-8" for="block-8-0-2">
<div class="circle"></div>
</label>
<input class="field-3 row-1 col-0 turn-8" id="block-8-1-0" type="radio"> <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> <label class="turn-8" for="block-8-1-0">
<div class="circle"></div>
</label>
<input class="field-4 row-1 col-1 turn-8" id="block-8-1-1" type="radio"> <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> <label class="turn-8" for="block-8-1-1">
<div class="circle"></div>
</label>
<input class="field-5 row-1 col-2 turn-8" id="block-8-1-2" type="radio"> <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> <label class="turn-8" for="block-8-1-2">
<div class="circle"></div>
</label>
<input class="field-6 row-2 col-0 turn-8" id="block-8-2-0" type="radio"> <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> <label class="turn-8" for="block-8-2-0">
<div class="circle"></div>
</label>
<input class="field-7 row-2 col-1 turn-8" id="block-8-2-1" type="radio"> <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> <label class="turn-8" for="block-8-2-1">
<div class="circle"></div>
</label>
<input class="field-8 row-2 col-2 turn-8" id="block-8-2-2" type="radio"> <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> <label class="turn-8" for="block-8-2-2">
<div class="circle"></div>
</label>
<div class="end">
<h1></h1>
<a href="">Play again.</a>
</div> </div>
</body> </body>
</html> </html>

5
tictactoe.py
View File

@@ -10,10 +10,13 @@ def write_html(html_file):
def write_css(css_file): def write_css(css_file):
moves, draws, wins2 = get_sudoku_moves()
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": get_sudoku_moves(), "moves": moves,
"draws": draws,
"wins2": wins2,
} }
env = Environment(loader=FileSystemLoader(".")) env = Environment(loader=FileSystemLoader("."))
template = env.get_template('template.' + css_file) template = env.get_template('template.' + css_file)

3
todo.txt
View File

@@ -1,3 +0,0 @@
(D) Add message that indicates draw or loss. +tictactoecss
(D) Publish on homepage. +tictactoecss
(D) Write readme. +tictactoecss