diff --git a/tictactoe.css b/tictactoe.css index fa8af21..105de6e 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -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; } - diff --git a/tictactoe.html b/tictactoe.html index 935d520..412d25f 100644 --- a/tictactoe.html +++ b/tictactoe.html @@ -5,35 +5,186 @@
- - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- \ No newline at end of file diff --git a/tictactoe.py b/tictactoe.py new file mode 100644 index 0000000..7974f96 --- /dev/null +++ b/tictactoe.py @@ -0,0 +1,51 @@ + +def write_html(html_file): + html_top = [ + '', + '', + ' Tic Tac Toe CSS', + ' ', + '', + '', + '
'] + + html_bottom = [ + '
', + '', + ''] + tepl_input = ' ' + + tepl_label = ' ' + html_main = [] + + for turn in range(9): + c = " ".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")