Create HTML with script. Add proof-of-concept for multi-turn events.
parent
60ee0dd172
commit
a391633172
|
|
@ -11,28 +11,73 @@ body {
|
|||
background-color: #E6E6FA;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"] {
|
||||
.tic-tac-toe input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].turn-1 + label {
|
||||
.tic-tac-toe input.turn-1 + label {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].turn-1:checked + label {
|
||||
.tic-tac-toe input.turn-1:checked + label {
|
||||
cursor: default;
|
||||
background-color: red;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].turn-1.field-9:checked ~ .turn-2.field-3 + label {
|
||||
.tic-tac-toe input.turn-1:checked ~ .turn-3 + label {
|
||||
z-index: 3;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-1.field-0:checked ~ .turn-2.field-3 + label {
|
||||
display: block;
|
||||
cursor: default;
|
||||
background-color: green;
|
||||
z-index: 2;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-1.field-1:checked ~ .turn-2.field-4 + label {
|
||||
display: block;
|
||||
cursor: default;
|
||||
background-color: green;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-1.field-2:checked ~ .turn-2.field-5 + label {
|
||||
display: block;
|
||||
cursor: default;
|
||||
background-color: green;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-3:checked + label {
|
||||
cursor: default;
|
||||
background-color: blue;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
/*.tic-tac-toe input.turn-2:checked ~ .turn-3 + label {
|
||||
z-index: 3;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-3:checked + label {
|
||||
cursor: default;
|
||||
background-color: yellow;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
*/
|
||||
|
||||
/*.tic-tac-toe input.turn-1.field-8:checked ~ input.turn-2.field-3:checked ~ .turn-3.field-7 + label {
|
||||
display: block;
|
||||
cursor: default;
|
||||
background-color: green;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
*/
|
||||
|
||||
.tic-tac-toe label {
|
||||
background-color: #78bec5;
|
||||
height: 140px;
|
||||
|
|
@ -48,34 +93,33 @@ body {
|
|||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].left + label {
|
||||
.tic-tac-toe input.col-0 + label {
|
||||
left: 0px;
|
||||
right: 300px;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].middle + label {
|
||||
.tic-tac-toe input.col-1 + label {
|
||||
left: 150px;
|
||||
right: 150px;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].right + label {
|
||||
.tic-tac-toe input.col-2 + label {
|
||||
left: 300px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
|
||||
.tic-tac-toe input[type="radio"].top + label {
|
||||
.tic-tac-toe input.row-0 + label {
|
||||
top: 0px;
|
||||
bottom: 300px;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].center + label {
|
||||
.tic-tac-toe input.row-1 + label {
|
||||
top: 150px;
|
||||
bottom: 150px;
|
||||
}
|
||||
|
||||
.tic-tac-toe input[type="radio"].bottom + label {
|
||||
.tic-tac-toe input.row-2 + label {
|
||||
top: 300px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
|
|
|
|||
201
tictactoe.html
201
tictactoe.html
|
|
@ -5,35 +5,186 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="tic-tac-toe">
|
||||
<input class="player-1 field-1 left top turn-1" id="block1-1-1" type="radio">
|
||||
<label class="turn-1" for="block1-1-1"></label>
|
||||
<input class="player-1 middle top turn-1" id="block1-1-2" type="radio">
|
||||
<label class="turn-1" for="block1-1-2"></label>
|
||||
<input class="player-1 right top turn-1" id="block1-1-3" type="radio">
|
||||
<label class="turn-1" for="block1-1-3"></label>
|
||||
<!-- 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>
|
||||
|
||||
<input class="player-1 left center turn-1" id="block1-2-1" type="radio">
|
||||
<label class="turn-1" for="block1-2-1"></label>
|
||||
<input class="player-1 middle center turn-1" id="block1-2-2" type="radio">
|
||||
<label class="turn-1" for="block1-2-2"></label>
|
||||
<input class="player-1 right center turn-1" id="block1-2-3" type="radio">
|
||||
<label class="turn-1" for="block1-2-3"></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>
|
||||
|
||||
<input class="player-1 left bottom turn-1" id="block1-3-1" type="radio">
|
||||
<label class="turn-1" for="block1-3-1"></label>
|
||||
<input class="player-1 middle bottom turn-1" id="block1-3-2" type="radio">
|
||||
<label class="turn-1" for="block1-3-2"></label>
|
||||
<input class="player-1 right field-9 bottom turn-1" id="block1-3-3" type="radio">
|
||||
<label class="turn-1" for="block1-3-3"></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>
|
||||
|
||||
<input class="player-1 field-1 left top turn-2" id="block2-1-1" type="radio">
|
||||
<label class="turn-2" for="block2-1-1"></label>
|
||||
<input class="player-1 field-2 middle top turn-2" id="block2-1-2" type="radio">
|
||||
<label class="turn-2" for="block2-1-2"></label>
|
||||
<input class="player-1 field-3 right top turn-2" id="block2-1-3" type="radio">
|
||||
<label class="turn-2" for="block2-1-3"></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>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
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
|
||||
with open(html_file, 'w') as f:
|
||||
f.write("\n".join(html))
|
||||
|
||||
|
||||
def write_css(css_file):
|
||||
pass
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
write_html("tictactoe.html")
|
||||
write_css("tictactoe.css")
|
||||
Loading…
Reference in New Issue