Create HTML with script. Add proof-of-concept for multi-turn events.
This commit is contained in:
@@ -11,28 +11,73 @@ body {
|
|||||||
background-color: #E6E6FA;
|
background-color: #E6E6FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"] {
|
.tic-tac-toe input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].turn-1 + label {
|
.tic-tac-toe input.turn-1 + label {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].turn-1:checked + label {
|
.tic-tac-toe input.turn-1:checked + label {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
z-index: 10 !important;
|
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;
|
display: block;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: green;
|
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 {
|
.tic-tac-toe label {
|
||||||
background-color: #78bec5;
|
background-color: #78bec5;
|
||||||
height: 140px;
|
height: 140px;
|
||||||
@@ -48,34 +93,33 @@ body {
|
|||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].left + label {
|
.tic-tac-toe input.col-0 + label {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
right: 300px;
|
right: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].middle + label {
|
.tic-tac-toe input.col-1 + label {
|
||||||
left: 150px;
|
left: 150px;
|
||||||
right: 150px;
|
right: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].right + label {
|
.tic-tac-toe input.col-2 + label {
|
||||||
left: 300px;
|
left: 300px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].top + label {
|
.tic-tac-toe input.row-0 + label {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
bottom: 300px;
|
bottom: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].center + label {
|
.tic-tac-toe input.row-1 + label {
|
||||||
top: 150px;
|
top: 150px;
|
||||||
bottom: 150px;
|
bottom: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tic-tac-toe input[type="radio"].bottom + label {
|
.tic-tac-toe input.row-2 + label {
|
||||||
top: 300px;
|
top: 300px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
201
tictactoe.html
201
tictactoe.html
@@ -5,35 +5,186 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="tic-tac-toe">
|
<div class="tic-tac-toe">
|
||||||
<input class="player-1 field-1 left top turn-1" id="block1-1-1" type="radio">
|
<!-- turn-0 -->
|
||||||
<label class="turn-1" for="block1-1-1"></label>
|
<input class="field-0 row-0 col-0 turn-0" id="block-0-0-0" type="radio">
|
||||||
<input class="player-1 middle top turn-1" id="block1-1-2" type="radio">
|
<label class="turn-0" for="block-0-0-0"></label>
|
||||||
<label class="turn-1" for="block1-1-2"></label>
|
<input class="field-1 row-0 col-1 turn-0" id="block-0-0-1" type="radio">
|
||||||
<input class="player-1 right top turn-1" id="block1-1-3" type="radio">
|
<label class="turn-0" for="block-0-0-1"></label>
|
||||||
<label class="turn-1" for="block1-1-3"></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">
|
<!-- turn-1 -->
|
||||||
<label class="turn-1" for="block1-2-1"></label>
|
<input class="field-0 row-0 col-0 turn-1" id="block-1-0-0" type="radio">
|
||||||
<input class="player-1 middle center turn-1" id="block1-2-2" type="radio">
|
<label class="turn-1" for="block-1-0-0"></label>
|
||||||
<label class="turn-1" for="block1-2-2"></label>
|
<input class="field-1 row-0 col-1 turn-1" id="block-1-0-1" type="radio">
|
||||||
<input class="player-1 right center turn-1" id="block1-2-3" type="radio">
|
<label class="turn-1" for="block-1-0-1"></label>
|
||||||
<label class="turn-1" for="block1-2-3"></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">
|
<!-- turn-2 -->
|
||||||
<label class="turn-1" for="block1-3-1"></label>
|
<input class="field-0 row-0 col-0 turn-2" id="block-2-0-0" type="radio">
|
||||||
<input class="player-1 middle bottom turn-1" id="block1-3-2" type="radio">
|
<label class="turn-2" for="block-2-0-0"></label>
|
||||||
<label class="turn-1" for="block1-3-2"></label>
|
<input class="field-1 row-0 col-1 turn-2" id="block-2-0-1" type="radio">
|
||||||
<input class="player-1 right field-9 bottom turn-1" id="block1-3-3" type="radio">
|
<label class="turn-2" for="block-2-0-1"></label>
|
||||||
<label class="turn-1" for="block1-3-3"></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">
|
<!-- turn-3 -->
|
||||||
<label class="turn-2" for="block2-1-1"></label>
|
<input class="field-0 row-0 col-0 turn-3" id="block-3-0-0" type="radio">
|
||||||
<input class="player-1 field-2 middle top turn-2" id="block2-1-2" type="radio">
|
<label class="turn-3" for="block-3-0-0"></label>
|
||||||
<label class="turn-2" for="block2-1-2"></label>
|
<input class="field-1 row-0 col-1 turn-3" id="block-3-0-1" type="radio">
|
||||||
<input class="player-1 field-3 right top turn-2" id="block2-1-3" type="radio">
|
<label class="turn-3" for="block-3-0-1"></label>
|
||||||
<label class="turn-2" for="block2-1-3"></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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
51
tictactoe.py
Normal file
51
tictactoe.py
Normal file
@@ -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")
|
||||||
Reference in New Issue
Block a user