Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@SimonAlling
SimonAlling committed Mar 12, 2017
2 parents ddfe3e3 + 1f06682 commit c4a1d88
Show file tree
Hide file tree
Showing 17 changed files with 610 additions and 91 deletions.
8 changes: 7 additions & 1 deletion ZATACKA.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h1>Achtung, die Kurve!</h1>
<div id="border1" class="border">
<canvas id="canvas_main" width="559" height="480"></canvas>
<canvas id="canvas_overlay" width="559" height="480" class="overlay"></canvas>
<div id="lobby" class="overlay">
<div id="lobby" class="flex overlay">
<ul id="controls">
<li>
<div class="red controls"></div>
Expand All @@ -90,6 +90,7 @@ <h1>Achtung, die Kurve!</h1>
<div class="blue ready"></div>
</li>
</ul>
<a id="button-show-settings" class="corner icon-button"></a>
</div>
<div id="KONEC_HRY" class="hidden overlay">
<ul id="results">
Expand All @@ -102,6 +103,10 @@ <h1>Achtung, die Kurve!</h1>
</ul>
</div>
<div id="messages" class="unobtrusive overlay"></div>
<div id="settings" class="hidden overlay">
<a id="button-hide-settings" class="corner icon-button"></a>
<form id="settings-form"></form>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -135,6 +140,7 @@ <h1>Achtung, die Kurve!</h1>
<script src="js/lib/WarningMessage.js"></script>
<script src="js/locales/Zatacka.en_US.js"></script>
<script src="js/lib/preferences/Preference.js"></script>
<script src="js/lib/preferences/PreferenceWithValue.js"></script>
<script src="js/lib/preferences/MultichoicePreference.js"></script>
<script src="js/lib/preferences/BooleanPreference.js"></script>
<script src="js/lib/preferences/RangePreference.js"></script>
Expand Down
169 changes: 146 additions & 23 deletions Zatacka.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,43 +34,61 @@ a:hover, a:focus, a:active {
text-decoration: none;
}

input[type="checkbox"] {
input[type="checkbox"],
input[type="radio"] {
display: none;
}

/* Checkbox and label: */
input[type="checkbox"] + label {
cursor: pointer;
opacity: 0.75;
input[type="checkbox"] + label,
input[type="radio"] + label {
padding-left: 18px;
position: relative;
}

/* Checkbox and label on hover: */
input[type="checkbox"] + label:hover,
input[type="checkbox"] + label:focus,
input[type="checkbox"] + label:active {
opacity: 1;
}

/* Actual checkbox: */
input[type="checkbox"] + label::before {
border: 1px white solid;
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
content: "";
display: inline-block;
height: 12px;
left: 0;
position: absolute;
top: 1px;
top: 2px;
width: 12px;
}

input[type="checkbox"] + label::before {
border: 1px white solid;
}

input[type="radio"] + label::before {
background-image: url("resources/kurve-radio-button.png");
}

/* Actual checkbox when checked: */
input[type="checkbox"]:checked + label::before {
background-image: url("resources/kurve-checkbox-tickmark.png");
background-position: center center;
background-repeat: no-repeat;
}

input[type="radio"]:checked + label::before {
background-image: url("resources/kurve-radio-button-checked.png");
}

input[type="checkbox"] + label,
input[type="radio"] + label {
padding-top: 1px;
padding-bottom: 1px;
}

/* Checkbox and label on hover: */
input[type="checkbox"] + label,
input[type="radio"] + label,
select {
cursor: pointer;
}

.button {
Expand Down Expand Up @@ -131,6 +149,24 @@ input[type="checkbox"]:checked + label::before {
cursor: none;
}

.icon-button {
background-image: url("resources/kurve-icons.png");
cursor: pointer;
height: 16px;
opacity: 0.75;
width: 16px;
}

.icon-button:hover, .icon-button:focus, .icon-button:active {
opacity: 1;
}

.corner {
position: absolute;
right: 16px;
top: 16px;
}

#debug {
background-color: black;
border: 1px white solid;
Expand Down Expand Up @@ -185,6 +221,10 @@ input[type="checkbox"]:checked + label::before {
border-color: #515151;
}

.flex {
display: flex;
}

.overlay {
display: block;
height: 100%;
Expand All @@ -195,6 +235,10 @@ input[type="checkbox"]:checked + label::before {
box-sizing: border-box;
}

.hidden {
display: none;
}

.unobtrusive {
pointer-events: none;
}
Expand All @@ -204,14 +248,15 @@ input[type="checkbox"]:checked + label::before {
overflow: hidden;
}

#lobby.hidden, #KONEC_HRY.hidden {
display: none;
#lobby {
padding-left: 81px;
padding-top: 50px;
padding-bottom: 130px; /* 130 = 480 - 7 * 50, where 50 is the total height of each player's controls and 7 is 6 players plus 1 for margin */
}

#lobby #controls {
display: inline-block;
list-style-type: none;
margin-left: 80px;
margin-top: 50px;
}

#lobby #controls li {
Expand All @@ -229,13 +274,13 @@ input[type="checkbox"]:checked + label::before {
}

#lobby #controls .ready {
visibility: hidden;
background-image: url("resources/kurve-lobby-controls-ready.png");
display: none;
width: 80px;
}

#lobby #controls .ready.active {
display: block;
visibility: visible;
}

#lobby #controls .red.controls { background-position: 0px 0px; }
Expand All @@ -251,8 +296,77 @@ input[type="checkbox"]:checked + label::before {
#lobby #controls .blue.controls { background-position: 0px -250px; }
#lobby #controls .blue.ready { background-position: -160px -250px; }

#lobby footer {
#button-show-settings {
background-position: 0 -16px;
}

#button-hide-settings {
background-position: 0 0;
}

#settings {
background-color: rgba(0, 0, 0, 0.95);
padding: 50px 80px 50px 80px;
}

#settings-form > div {
box-sizing: border-box;
margin: 12px 0;
opacity: 0.6;
}

#settings-form > div:hover {
opacity: 1;
}

#settings-form > div:hover .description {
visibility: visible;
}

#settings-form fieldset {
border: 1px solid white;
padding: 2px 8px 6px 8px;
}

#settings-form fieldset legend {
padding: 0 4px;
}

#settings-form input[type="checkbox"] + label {
margin-left: 13px; /* to align with fieldset content */
}

#settings-form fieldset input[type="radio"] + label {
margin-left: 4px; /* to align with legend */
}

#settings-form label {
display: inline-block;
}

#settings-form .description {
box-sizing: border-box;
bottom: 0;
font-size: 0.75em;
height: 50px;
left: 0;
opacity: 0.8;
padding: 0 80px;
position: absolute;
visibility: hidden;
width: 100%;
}

#settings-form select {
background: black;
border: 1px solid white;
color: white;
margin-top: 2px;
width: 219px;
}

#settings-form input[type="radio"] + label {
display: block;
}

#messages {
Expand All @@ -274,6 +388,15 @@ input[type="checkbox"]:checked + label::before {
color: #C3C300;
}

#messages.hints-none .message,
#messages.hints-warnings-only .message {
display: none;
}

#messages.hints-warnings-only .message.warning {
display: block;
}

.canvasHeight {
height: 480px;
}
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ <h1>Achtung, die Kurve!</h1>
<main>
<p id="start-hint"></p>
<p id="fullscreen-hint"></p>
<p id="popup-hint"></p>
<footer>
<a href="http://github.com/SimonAlling/kurve">Source Code</a>
</footer>
Expand Down
Loading

0 comments on commit c4a1d88

Please sign in to comment.