Write readme. Refactor rules generation.
This commit is contained in:
@@ -63,46 +63,13 @@ body {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
border: 10px solid #dc685a;
|
||||
border-radius: 50%;
|
||||
.tic-tac-toe input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cross {
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
.tic-tac-toe input.turn-0 + label {
|
||||
z-index: 0;
|
||||
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 {
|
||||
@@ -135,39 +102,49 @@ body {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.tic-tac-toe input {
|
||||
display: none;
|
||||
|
||||
/* CSS for creating the O and X check marks on the field. */
|
||||
.tic-tac-toe .circle {
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
border: 10px solid #dc685a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-0 + label {
|
||||
z-index: 0;
|
||||
.tic-tac-toe .cross {
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: block;
|
||||
transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
}
|
||||
|
||||
{% for turn in turns_player %}
|
||||
.tic-tac-toe input.turn-{{turn}}:checked + label {
|
||||
cursor: default;
|
||||
opacity: 1.0;
|
||||
z-index: 10 !important;
|
||||
.tic-tac-toe .cross:before, .cross:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #78bec5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-{{turn}}:checked ~ .turn-{{turn + 2}} + label {
|
||||
z-index: {{turn + 2}};
|
||||
display: block;
|
||||
.tic-tac-toe .cross:before {
|
||||
top: 65px;
|
||||
bottom: 65px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 10px;
|
||||
width: 140px;
|
||||
}
|
||||
{% 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;
|
||||
opacity: 1.0;
|
||||
z-index: 10 !important;
|
||||
.tic-tac-toe .cross:after {
|
||||
left: 65px;
|
||||
right: 65px;
|
||||
height: 140px;
|
||||
width: 10px;
|
||||
}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
.tic-tac-toe .end {
|
||||
width: 440px;
|
||||
@@ -195,34 +172,77 @@ input.turn-{{m.n.t}}.field-{{m.n.i}} + label {
|
||||
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;
|
||||
/*
|
||||
Rules for player moves. Make selected field permanently visible and make next
|
||||
board visible. The next player board is the current turn + 2 because every
|
||||
second board is for the bot.
|
||||
*/
|
||||
{%- for turn in turns_player %}
|
||||
.tic-tac-toe input.turn-{{turn}}:checked + label {
|
||||
cursor: default;
|
||||
opacity: 1.0;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.tic-tac-toe input.turn-{{turn}}:checked ~ .turn-{{turn + 2}} + label {
|
||||
z-index: {{turn + 2}};
|
||||
display: block;
|
||||
}
|
||||
{% endfor %}
|
||||
|
||||
/* BEGIN: bot_move_rules */
|
||||
{% for rule in bot_move_rules %}
|
||||
.tic-tac-toe
|
||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
||||
{% for move in rule.moves -%}
|
||||
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||
{% endfor -%}
|
||||
input.turn-{{rule.next_move.turn}}.field-{{rule.next_move.field}} + label {
|
||||
display: block;
|
||||
cursor: default;
|
||||
opacity: 1.0;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
{% endfor %}
|
||||
/* END: bot_move_rules */
|
||||
|
||||
|
||||
/* BEGING: Rules for when the bot has won. */
|
||||
{% for rule in win_rules %}
|
||||
.tic-tac-toe
|
||||
{% for move in rule.moves -%}
|
||||
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||
{% endfor -%}
|
||||
.end {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tic-tac-toe
|
||||
{% for move in rule.moves -%}
|
||||
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||
{% endfor -%}
|
||||
.end > h1:before {
|
||||
content: "Bot wins!" !important;
|
||||
}
|
||||
{% endfor %}
|
||||
/* END: Rules for when the bot has won. */
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% for m in draws %}
|
||||
/* BEGING: draws */
|
||||
{% for rule in draw_rules %}
|
||||
.tic-tac-toe
|
||||
{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
|
||||
{% for move in rule.moves -%}
|
||||
input.turn-{{move.turn}}.field-{{move.field}}: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 %}
|
||||
{% for move in rule.moves -%}
|
||||
input.turn-{{move.turn}}.field-{{move.field}}:checked ~
|
||||
{% endfor -%}
|
||||
.end > h1:before {
|
||||
content: "Tied!" !important;
|
||||
}
|
||||
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
/* END: draws */
|
||||
|
||||
Reference in New Issue
Block a user