mirror of
https://github.com/danbee/chess
synced 2025-03-04 08:39:06 +00:00
Redesign whole site in B&W
* Forms and board tweaks for small screen sizes * Re-style game status indicators * Re-style viewing/offline indicator * Better eyecons 👁 * Re-organise CSS according to ITCSS principles * Pick new font from Google Fonts * Fix up tests * Move some things into partials
This commit is contained in:
parent
bcb6e40ee7
commit
bedd6605ef
GPG Key ID:
931D8112E0103DD8
@ -1,222 +0,0 @@
|
||||
@mixin move-indicator {
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 2%;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
width: 2%;
|
||||
}
|
||||
|
||||
.board {
|
||||
background: lighten($black-square-color, 7%);
|
||||
border-collapse: unset;
|
||||
border-radius: 2.8%;
|
||||
border-spacing: 1px;
|
||||
box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color;
|
||||
color: $white-square-color;
|
||||
grid-area: board;
|
||||
height: var(--board-size);
|
||||
padding: calc(var(--board-size) / 20);
|
||||
position: relative;
|
||||
width: var(--board-size);
|
||||
|
||||
&.white-to-move::before {
|
||||
@include move-indicator;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&.black-to-move::before {
|
||||
@include move-indicator;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
&.player-is-white.white-to-move::before,
|
||||
&.player-is-black.black-to-move::before {
|
||||
bottom: 2%;
|
||||
}
|
||||
|
||||
&.player-is-white.black-to-move::before,
|
||||
&.player-is-black.white-to-move::before {
|
||||
top: 2%;
|
||||
}
|
||||
|
||||
.board-rank-labels,
|
||||
.board-file-labels {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.player-is-white {
|
||||
.board-rank-labels {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.board-file-labels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&.player-is-black {
|
||||
.board-rank-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.board-file-labels {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.board-rank-labels {
|
||||
display: flex;
|
||||
height: 90%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.board-file-labels {
|
||||
display: flex;
|
||||
height: 5%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.board-game-state {
|
||||
align-items: center;
|
||||
background-color: $game-state-background-color;
|
||||
border-radius: calc(var(--board-size) / 75);
|
||||
bottom: -2.5%;
|
||||
box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color, inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
|
||||
color: $foreground-color;
|
||||
display: none;
|
||||
font-size: calc(var(--board-size) / 40);
|
||||
height: 6%;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 15%;
|
||||
|
||||
&.check,
|
||||
&.checkmate,
|
||||
&.stalemate {
|
||||
display: block; // So PhantomJS will display it.
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.checkmate,
|
||||
&.stalemate {
|
||||
font-size: calc(var(--board-size) / 30);
|
||||
height: 7.5%;
|
||||
left: calc(50% - 15%);
|
||||
top: calc(50% - 3.5%);
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.board-label {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.board-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-template-rows: repeat(8, 1fr);
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
%black-square {
|
||||
background-color: $black-square-color;
|
||||
|
||||
&.selected {
|
||||
background-color: mix($black-square-color, $selected-square-color, 60%);
|
||||
box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
|
||||
}
|
||||
|
||||
&.available {
|
||||
background-color: mix($black-square-color, $available-square-color, 80%);
|
||||
box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
|
||||
}
|
||||
}
|
||||
|
||||
%white-square {
|
||||
background-color: $white-square-color;
|
||||
|
||||
&.selected {
|
||||
background-color: mix($white-square-color, $selected-square-color, 60%);
|
||||
box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
|
||||
}
|
||||
|
||||
&.available {
|
||||
background-color: mix($white-square-color, $available-square-color, 80%);
|
||||
box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
|
||||
}
|
||||
}
|
||||
|
||||
.board-square {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
border-radius: 2%;
|
||||
margin: 0.5px;
|
||||
|
||||
// This is to ensure the squares can be clicked on in PhantomJS
|
||||
// TODO: Figure out why we need this
|
||||
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
|
||||
@include odd-between(1, 8) { @extend %white-square; }
|
||||
@include even-between(1, 8) { @extend %black-square; }
|
||||
|
||||
@include odd-between(9, 16) { @extend %black-square; }
|
||||
@include even-between(9, 16) { @extend %white-square; }
|
||||
|
||||
@include odd-between(17, 24) { @extend %white-square; }
|
||||
@include even-between(17, 24) { @extend %black-square; }
|
||||
|
||||
@include odd-between(25, 32) { @extend %black-square; }
|
||||
@include even-between(25, 32) { @extend %white-square; }
|
||||
|
||||
@include odd-between(33, 40) { @extend %white-square; }
|
||||
@include even-between(33, 40) { @extend %black-square; }
|
||||
|
||||
@include odd-between(41, 48) { @extend %black-square; }
|
||||
@include even-between(41, 48) { @extend %white-square; }
|
||||
|
||||
@include odd-between(49, 56) { @extend %white-square; }
|
||||
@include even-between(49, 56) { @extend %black-square; }
|
||||
|
||||
@include odd-between(57, 64) { @extend %black-square; }
|
||||
@include even-between(57, 64) { @extend %white-square; }
|
||||
|
||||
@each $colour in $colours {
|
||||
@each $piece in $pieces {
|
||||
&.#{$colour}.#{$piece} {
|
||||
background-image: url(/images/#{$piece}_#{$colour}.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.board-body {
|
||||
grid-gap: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.board-body {
|
||||
grid-gap: 2px;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.form {
|
||||
background-color: $form-background-color;
|
||||
border-radius: $base-border-radius;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 0 auto;
|
||||
max-width: 40rem;
|
||||
padding: $base-spacing;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
.game-info {
|
||||
grid-area: game-info;
|
||||
|
||||
.offline,
|
||||
.viewing {
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
width: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
opacity: 0.4;
|
||||
|
||||
&::before {
|
||||
background-color: $offline-opponent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.viewing {
|
||||
&::before {
|
||||
background-color: $viewing-opponent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
.player-indicator {
|
||||
img {
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.your-turn {
|
||||
background-color: $your-turn-background-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: $heading-font-family;
|
||||
font-size: modular-scale(1);
|
||||
line-height: $heading-line-height;
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
html {
|
||||
background: $background-color;
|
||||
color: mix($background-color, $foreground-color, 20%);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
color: mix($background-color, $link-color, 30%);
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 5vmin;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-top: 2em;
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
[role='banner'] {
|
||||
background: $black;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.user-nav {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
$background-color: #1e3f51;
|
||||
$foreground-color: $white;
|
||||
|
||||
$link-color: #fd0;
|
||||
|
||||
$form-background-color: darken($background-color, 4%);
|
||||
|
||||
$board-border-color: #000;
|
||||
$board-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
$board-square-size: 9vmin;
|
||||
$base-font-size: 16px;
|
||||
|
||||
$black-square-color: #777;
|
||||
$white-square-color: #bbb;
|
||||
|
||||
$selected-square-color: #0cf;
|
||||
$available-square-color: #6f0;
|
||||
|
||||
$your-turn-background-color: rgba($white, 0.1);
|
||||
|
||||
$game-state-background-color: rgba(darken($black-square-color, 10%), 0.9);
|
||||
|
||||
$offline-opponent-color: #c33;
|
||||
$viewing-opponent-color: #6c3;
|
||||
|
||||
$square-outline-color: darken($black-square-color, 20%);
|
||||
$selected-outline-color: lighten($selected-square-color, 20%);
|
||||
$available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);
|
||||
|
||||
$colours: "black" "white";
|
||||
$pieces: king queen bishop knight rook pawn;
|
||||
|
||||
:root {
|
||||
--board-size: 64vw;
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 14/11) {
|
||||
:root {
|
||||
--board-size: 80vmin;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 9/11) {
|
||||
:root {
|
||||
--board-size: 90vmin;
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,56 @@
|
||||
@import "bourbon/bourbon";
|
||||
// 0. Vendor - Imported from other source
|
||||
@import "vendor/bourbon/bourbon";
|
||||
@import "vendor/family";
|
||||
@import "base/base";
|
||||
|
||||
@import "variables";
|
||||
// 1. Settings – used with preprocessors and contain font,
|
||||
// colors definitions, etc.
|
||||
@import "settings/colors";
|
||||
@import "settings/typography";
|
||||
@import "settings/forms";
|
||||
@import "settings/global";
|
||||
@import "settings/chess";
|
||||
@import "settings/board";
|
||||
|
||||
@import "utilities";
|
||||
// 2. Tools – globally used mixins and functions.
|
||||
// It’s important not to output any CSS in the first 2 layers.
|
||||
|
||||
@import "tables";
|
||||
@import "headings";
|
||||
@import "forms";
|
||||
// 3. Generic – reset and/or normalize styles, box-sizing definition, etc.
|
||||
// This is the first layer which generates actual CSS.
|
||||
@import "generic/typography";
|
||||
@import "generic/layout";
|
||||
|
||||
@import "layout";
|
||||
@import "nav";
|
||||
// 4. Elements – styling for bare HTML elements (like H1, A, etc.).
|
||||
// These come with default styling from the browser so we can redefine
|
||||
// them here.
|
||||
@import "elements/main";
|
||||
@import "elements/headings";
|
||||
@import "elements/paragraphs";
|
||||
@import "elements/links";
|
||||
@import "elements/lists";
|
||||
@import "elements/tables";
|
||||
@import "elements/forms";
|
||||
@import "elements/buttons";
|
||||
|
||||
@import "game_list";
|
||||
@import "board";
|
||||
@import "move_list";
|
||||
@import "game_info";
|
||||
@import "game_grid";
|
||||
// 5. Objects – class-based selectors which define undecorated design patterns,
|
||||
// for example media object known from OOCSS
|
||||
@import "objects/container";
|
||||
@import "objects/form";
|
||||
@import "objects/form-group";
|
||||
@import "objects/tables";
|
||||
|
||||
// 6. Components – specific UI components.
|
||||
// This is where majority of our work takes place and our UI components
|
||||
// are often composed of Objects and Components
|
||||
@import "components/nav";
|
||||
@import "components/board";
|
||||
@import "components/square";
|
||||
@import "components/game-list";
|
||||
@import "components/game-grid";
|
||||
@import "components/game-info";
|
||||
@import "components/move-list";
|
||||
@import "components/game-state";
|
||||
|
||||
// 7. Utilities – utilities and helper classes with ability to override
|
||||
// anything which goes before in the triangle, eg. hide helper class
|
||||
@import "utilities/visually-hidden";
|
||||
@import "utilities/text-right";
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
// Bitters 1.8.0
|
||||
// http://bitters.bourbon.io
|
||||
// Copyright 2013-2017 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "variables";
|
||||
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "layout";
|
||||
@import "lists";
|
||||
@import "media";
|
||||
@import "tables";
|
||||
@import "typography";
|
||||
@ -1,9 +0,0 @@
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
html {
|
||||
color: $base-font-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: 100%;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $heading-font-family;
|
||||
font-size: modular-scale(1);
|
||||
line-height: $heading-line-height;
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $small-spacing 0 $small-spacing;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $action-color;
|
||||
text-decoration-skip: ink;
|
||||
transition: color $base-duration $base-timing;
|
||||
|
||||
&:hover {
|
||||
color: shade($action-color, 25%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: $focus-outline;
|
||||
outline-offset: $focus-outline-offset;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: $base-border;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
margin: $base-spacing 0;
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
// Typography
|
||||
$base-font-family: $font-stack-system;
|
||||
$heading-font-family: $base-font-family;
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.2;
|
||||
|
||||
// Other Sizes
|
||||
$base-border-radius: 0.5rem;
|
||||
$base-spacing: 2em;
|
||||
$small-spacing: $base-spacing / 2;
|
||||
$x-small-spacing: $small-spacing / 2;
|
||||
$base-z-index: 0;
|
||||
|
||||
// Colors
|
||||
$blue: #1565c0;
|
||||
$dark-gray: #333;
|
||||
$medium-gray: #999;
|
||||
$light-gray: #ddd;
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $light-gray;
|
||||
$action-color: $light-gray;
|
||||
|
||||
// Border
|
||||
$base-border-color: $light-gray;
|
||||
$base-border: 1px solid $base-border-color;
|
||||
|
||||
// Background Colors
|
||||
$viewport-background-color: #fff;
|
||||
|
||||
// Focus
|
||||
$focus-outline-color: transparentize($action-color, 0.4);
|
||||
$focus-outline-width: 3px;
|
||||
$focus-outline: $focus-outline-width solid $focus-outline-color;
|
||||
$focus-outline-offset: 2px;
|
||||
|
||||
// Animations
|
||||
$base-duration: 150ms;
|
||||
$base-timing: ease;
|
||||
139
assets/css/components/_board.scss
Normal file
139
assets/css/components/_board.scss
Normal file
@ -0,0 +1,139 @@
|
||||
@mixin move-indicator {
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.5%;
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
width: 1.5%;
|
||||
}
|
||||
|
||||
.board {
|
||||
background: $background-color;
|
||||
border-collapse: unset;
|
||||
border-radius: 2.8%;
|
||||
border-spacing: 1px;
|
||||
color: $foreground-color;
|
||||
grid-area: board;
|
||||
height: var(--board-size);
|
||||
padding: calc(var(--board-size) / 20);
|
||||
position: relative;
|
||||
width: var(--board-size);
|
||||
}
|
||||
|
||||
.board--white-to-move,
|
||||
.board--black-to-move {
|
||||
&::before {
|
||||
@include move-indicator;
|
||||
background: $foreground-color;
|
||||
}
|
||||
}
|
||||
|
||||
.board--player-is-white.board--white-to-move,
|
||||
.board--player-is-black.board--black-to-move {
|
||||
&::before {
|
||||
bottom: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.board--player-is-white.board--black-to-move,
|
||||
.board--player-is-black.board--white-to-move {
|
||||
&::before {
|
||||
top: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.board__rank-labels,
|
||||
.board__file-labels {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.board--player-is-white {
|
||||
.board__rank-labels {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.board__file-labels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.board--player-is-black {
|
||||
.board__rank-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.board__file-labels {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.board__body {
|
||||
background: $background-color;
|
||||
border: 0.25rem solid $foreground-color;
|
||||
border-radius: calc(var(--board-size) / 100);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-template-rows: repeat(8, 1fr);
|
||||
height: 100%;
|
||||
padding: 1%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.board__rank-labels {
|
||||
display: flex;
|
||||
height: 90%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.board__file-labels {
|
||||
display: flex;
|
||||
height: 5%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.board__label {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
font-size: calc(0.25rem + (var(--board-size) / 50));
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 9/11) and (max-width: 640px),
|
||||
(max-aspect-ratio: 9/11) and (max-height: 640px),
|
||||
(min-aspect-ratio: 9/11) and (max-width: 720px),
|
||||
(min-aspect-ratio: 9/11) and (max-height: 720px) {
|
||||
.board__body {
|
||||
border-width: 0.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 9/11) and (max-width: 480px),
|
||||
(max-aspect-ratio: 9/11) and (max-height: 480px),
|
||||
(min-aspect-ratio: 9/11) and (max-width: 560px),
|
||||
(min-aspect-ratio: 9/11) and (max-height: 560px) {
|
||||
.board__body {
|
||||
border-width: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.board__body {
|
||||
grid-gap: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.board__body {
|
||||
grid-gap: 2px;
|
||||
}
|
||||
}
|
||||
@ -26,15 +26,3 @@
|
||||
grid-template-rows: min-content min-content min-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 960px), (max-width: 768px) {
|
||||
html {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 480px), (max-width: 400px) {
|
||||
html {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
8
assets/css/components/_game-info.scss
Normal file
8
assets/css/components/_game-info.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.game-info {
|
||||
grid-area: game-info;
|
||||
}
|
||||
|
||||
.game-info__opponent-status {
|
||||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
11
assets/css/components/_game-list.scss
Normal file
11
assets/css/components/_game-list.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.games-list__player-indicator {
|
||||
img {
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.games-list__your-turn {
|
||||
background-color: $background-color;
|
||||
font-weight: $heavy-font-weight;
|
||||
}
|
||||
31
assets/css/components/_game-state.scss
Normal file
31
assets/css/components/_game-state.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.game-state {
|
||||
align-items: center;
|
||||
background-color: $foreground-color;
|
||||
border-radius: calc(var(--board-size) / 100);
|
||||
bottom: -2.5%;
|
||||
box-shadow: 0 0 0 0.2rem $background-color;
|
||||
color: $background-color;
|
||||
display: none;
|
||||
font-size: calc(var(--board-size) / 40);
|
||||
height: 6%;
|
||||
justify-content: center;
|
||||
left: 5%;
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
&.game-state--check,
|
||||
&.game-state--checkmate,
|
||||
&.game-state--stalemate {
|
||||
display: block; // So PhantomJS will display it.
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.game-state--checkmate,
|
||||
&.game-state--stalemate {
|
||||
font-size: calc(var(--board-size) / 30);
|
||||
height: 7.5%;
|
||||
left: calc(50% - 15%);
|
||||
top: calc(50% - 3.5%);
|
||||
width: 30%;
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
.move-list__line-number {
|
||||
color: mix($background-color, $foreground-color);
|
||||
color: $foreground-color;
|
||||
font-feature-settings: "tnum";
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
38
assets/css/components/_nav.scss
Normal file
38
assets/css/components/_nav.scss
Normal file
@ -0,0 +1,38 @@
|
||||
.header {
|
||||
background: $nav-background-color;
|
||||
color: $nav-foreground-color;
|
||||
margin-bottom: $small-spacing;
|
||||
padding: $x-small-spacing 0;
|
||||
|
||||
.container {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $nav-foreground-color;
|
||||
text-decoration: underline dashed;
|
||||
|
||||
&:hover {
|
||||
color: $nav-foreground-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__title {
|
||||
flex: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__user-nav {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
178
assets/css/components/_square.scss
Normal file
178
assets/css/components/_square.scss
Normal file
@ -0,0 +1,178 @@
|
||||
%square--black {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
$background-color,
|
||||
$background-color ($diagonal-pixel * 5),
|
||||
$foreground-color ($diagonal-pixel * 5),
|
||||
$foreground-color ($diagonal-pixel * 8)
|
||||
);
|
||||
|
||||
&.square--selected {
|
||||
box-shadow: inset 0 0 0 0.2rem $foreground-color,
|
||||
inset 0 0 0 0.4rem $background-color;
|
||||
}
|
||||
|
||||
&.square--available {
|
||||
&::after {
|
||||
border-radius: 50%;
|
||||
bottom: 20%;
|
||||
box-shadow: 0 0 0 0.2rem $foreground-color,
|
||||
0 0 0 0.4rem $background-color,
|
||||
inset 0 0 0 0.2rem $background-color;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%square--white {
|
||||
background-color: $background-color;
|
||||
|
||||
&.square--selected {
|
||||
box-shadow: inset 0 0 0 0.2rem $foreground-color;
|
||||
}
|
||||
|
||||
&.square--available {
|
||||
&::after {
|
||||
border-radius: 50%;
|
||||
bottom: 20%;
|
||||
box-shadow: 0 0 0 0.2rem $foreground-color,
|
||||
0 0 0 0.4rem $background-color,
|
||||
inset 0 0 0 0.2rem $background-color;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
border-radius: 4%;
|
||||
margin: 0.5px;
|
||||
position: relative;
|
||||
|
||||
// This is to ensure the squares can be clicked on in PhantomJS
|
||||
// TODO: Figure out why we need this
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
|
||||
@include odd-between(1, 8) { @extend %square--white; }
|
||||
@include even-between(1, 8) { @extend %square--black; }
|
||||
|
||||
@include odd-between(9, 16) { @extend %square--black; }
|
||||
@include even-between(9, 16) { @extend %square--white; }
|
||||
|
||||
@include odd-between(17, 24) { @extend %square--white; }
|
||||
@include even-between(17, 24) { @extend %square--black; }
|
||||
|
||||
@include odd-between(25, 32) { @extend %square--black; }
|
||||
@include even-between(25, 32) { @extend %square--white; }
|
||||
|
||||
@include odd-between(33, 40) { @extend %square--white; }
|
||||
@include even-between(33, 40) { @extend %square--black; }
|
||||
|
||||
@include odd-between(41, 48) { @extend %square--black; }
|
||||
@include even-between(41, 48) { @extend %square--white; }
|
||||
|
||||
@include odd-between(49, 56) { @extend %square--white; }
|
||||
@include even-between(49, 56) { @extend %square--black; }
|
||||
|
||||
@include odd-between(57, 64) { @extend %square--black; }
|
||||
@include even-between(57, 64) { @extend %square--white; }
|
||||
|
||||
&::before {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@each $colour in $colours {
|
||||
@each $piece in $pieces {
|
||||
&.square--#{$colour}.square--#{$piece}::before {
|
||||
background-image: url("/images/#{$piece}_#{$colour}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 9/11) and (max-width: 640px),
|
||||
(max-aspect-ratio: 9/11) and (max-height: 640px),
|
||||
(min-aspect-ratio: 9/11) and (max-width: 720px),
|
||||
(min-aspect-ratio: 9/11) and (max-height: 720px) {
|
||||
%square--black {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
$background-color,
|
||||
$background-color ($diagonal-pixel * 3),
|
||||
$foreground-color ($diagonal-pixel * 3),
|
||||
$foreground-color ($diagonal-pixel * 5)
|
||||
);
|
||||
|
||||
&.square--selected {
|
||||
box-shadow: inset 0 0 0 0.15rem $foreground-color,
|
||||
inset 0 0 0 0.3rem $background-color;
|
||||
}
|
||||
|
||||
&.square--available::after {
|
||||
box-shadow: 0 0 0 0.15rem $foreground-color,
|
||||
0 0 0 0.3rem $background-color,
|
||||
inset 0 0 0 0.15rem $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
%square--white {
|
||||
&.square--selected {
|
||||
box-shadow: inset 0 0 0 0.15rem $foreground-color;
|
||||
}
|
||||
|
||||
&.square--available::after {
|
||||
box-shadow: 0 0 0 0.15rem $foreground-color,
|
||||
0 0 0 0.3rem $background-color,
|
||||
inset 0 0 0 0.15rem $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 9/11) and (max-width: 480px),
|
||||
(max-aspect-ratio: 9/11) and (max-height: 480px),
|
||||
(min-aspect-ratio: 9/11) and (max-width: 560px),
|
||||
(min-aspect-ratio: 9/11) and (max-height: 560px) {
|
||||
%square--black {
|
||||
&.square--selected {
|
||||
box-shadow: inset 0 0 0 0.1rem $foreground-color,
|
||||
inset 0 0 0 0.2rem $background-color;
|
||||
}
|
||||
|
||||
&.square--available::after {
|
||||
box-shadow: 0 0 0 0.1rem $foreground-color,
|
||||
0 0 0 0.2rem $background-color,
|
||||
inset 0 0 0 0.1rem $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
%square--white {
|
||||
&.square--selected {
|
||||
box-shadow: inset 0 0 0 0.1rem $foreground-color;
|
||||
}
|
||||
|
||||
&.available::after {
|
||||
box-shadow: 0 0 0 0.1rem $foreground-color,
|
||||
0 0 0 0.2rem $background-color,
|
||||
inset 0 0 0 0.1rem $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
$_button-border-color: $action-color;
|
||||
$_button-background-color: rgba(0, 0, 0, 0);
|
||||
$_button-background-color-hover: $action-color;
|
||||
$_button-border-color: $foreground-color;
|
||||
$_button-background-color: $foreground-color;
|
||||
$_button-background-color-hover: $background-color;
|
||||
|
||||
#{$all-buttons} {
|
||||
appearance: none;
|
||||
@ -11,9 +11,8 @@ $_button-background-color-hover: $action-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: $base-font-family;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 600;
|
||||
font-size: inherit;
|
||||
font-weight: $base-font-weight;
|
||||
line-height: 1;
|
||||
padding: $small-spacing $base-spacing;
|
||||
text-align: center;
|
||||
@ -29,8 +28,8 @@ $_button-background-color-hover: $action-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: $focus-outline;
|
||||
outline-offset: $focus-outline-offset;
|
||||
background-color: $_button-background-color-hover;
|
||||
color: contrast-switch($_button-background-color-hover);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -1,6 +1,4 @@
|
||||
$_form-background-color: #fff;
|
||||
$_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
|
||||
$_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
|
||||
$_form-background-color: $background-color;
|
||||
|
||||
fieldset {
|
||||
background-color: transparent;
|
||||
@ -10,14 +8,14 @@ fieldset {
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
font-weight: $heavy-font-weight;
|
||||
margin-bottom: $small-spacing / 2;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-weight: $heavy-font-weight;
|
||||
margin-bottom: $small-spacing / 2;
|
||||
}
|
||||
|
||||
@ -26,7 +24,7 @@ select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-family: $base-font-family;
|
||||
font-size: 16px;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
#{$all-text-inputs} {
|
||||
@ -34,35 +32,25 @@ textarea {
|
||||
background-color: $_form-background-color;
|
||||
border: $base-border;
|
||||
border-radius: $base-border-radius;
|
||||
box-shadow: $_form-box-shadow;
|
||||
box-sizing: border-box;
|
||||
color: $foreground-color;
|
||||
margin-bottom: $small-spacing;
|
||||
padding: $base-spacing / 3;
|
||||
transition: border-color $base-duration $base-timing;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: shade($base-border-color, 20%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $action-color;
|
||||
box-shadow: $_form-box-shadow-focus;
|
||||
border: 1px solid $base-border-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: shade($_form-background-color, 5%);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border: $base-border;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: tint($base-font-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@ -72,7 +60,7 @@ textarea {
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: inline;
|
||||
margin-right: $small-spacing / 2;
|
||||
margin-right: $x-small-spacing;
|
||||
}
|
||||
|
||||
[type="file"] {
|
||||
@ -84,13 +72,3 @@ select {
|
||||
margin-bottom: $small-spacing;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="file"],
|
||||
select {
|
||||
&:focus {
|
||||
outline: $focus-outline;
|
||||
outline-offset: $focus-outline-offset;
|
||||
}
|
||||
}
|
||||
24
assets/css/elements/_headings.scss
Normal file
24
assets/css/elements/_headings.scss
Normal file
@ -0,0 +1,24 @@
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $heading-font-family;
|
||||
font-size: modular-scale(1);
|
||||
line-height: $heading-line-height;
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: modular-scale(2);
|
||||
font-weight: $base-font-weight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: $heading-font-family;
|
||||
font-size: modular-scale(1);
|
||||
line-height: $heading-line-height;
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
3
assets/css/elements/_links.scss
Normal file
3
assets/css/elements/_links.scss
Normal file
@ -0,0 +1,3 @@
|
||||
a {
|
||||
color: $foreground-color;
|
||||
}
|
||||
@ -10,7 +10,7 @@ dl {
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
font-weight: $heavy-font-weight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
3
assets/css/elements/_main.scss
Normal file
3
assets/css/elements/_main.scss
Normal file
@ -0,0 +1,3 @@
|
||||
main {
|
||||
margin-top: 5vmin;
|
||||
}
|
||||
3
assets/css/elements/_paragraphs.scss
Normal file
3
assets/css/elements/_paragraphs.scss
Normal file
@ -0,0 +1,3 @@
|
||||
p {
|
||||
margin: $small-spacing 0;
|
||||
}
|
||||
@ -19,10 +19,11 @@ tr {
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
font-weight: $heavy-font-weight;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $x-small-spacing;
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
html {
|
||||
background-color: $viewport-background-color;
|
||||
background: $background-color;
|
||||
box-sizing: border-box;
|
||||
color: $foreground-color;
|
||||
font-weight: $base-font-weight;
|
||||
}
|
||||
|
||||
*,
|
||||
@ -9,11 +11,11 @@ html {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
18
assets/css/generic/_typography.scss
Normal file
18
assets/css/generic/_typography.scss
Normal file
@ -0,0 +1,18 @@
|
||||
html {
|
||||
color: $base-font-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: $large-font-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
@media (max-height: 960px), (max-width: 1024px) {
|
||||
html {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 480px), (max-width: 768px) {
|
||||
html {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
4
assets/css/objects/_container.scss
Normal file
4
assets/css/objects/_container.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: $container-width;
|
||||
}
|
||||
3
assets/css/objects/_form-group.scss
Normal file
3
assets/css/objects/_form-group.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.form-group {
|
||||
margin-top: $base-spacing;
|
||||
}
|
||||
15
assets/css/objects/_form.scss
Normal file
15
assets/css/objects/_form.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.form {
|
||||
h2 {
|
||||
margin: 0 auto;
|
||||
max-width: $base-form-width;
|
||||
padding: $base-spacing;
|
||||
}
|
||||
|
||||
form {
|
||||
border: $base-solid-border;
|
||||
border-radius: $base-border-radius;
|
||||
margin: 0 auto;
|
||||
max-width: $base-form-width;
|
||||
padding: 0 $base-spacing $base-spacing;
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,6 @@
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0 $base-spacing 0 0;
|
||||
padding: 0 $small-spacing 0 0;
|
||||
}
|
||||
}
|
||||
17
assets/css/settings/_board.scss
Normal file
17
assets/css/settings/_board.scss
Normal file
@ -0,0 +1,17 @@
|
||||
:root {
|
||||
--board-size: 64vw;
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 14/11) {
|
||||
:root {
|
||||
--board-size: 80vmin;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 9/11) {
|
||||
:root {
|
||||
--board-size: 90vmin;
|
||||
}
|
||||
}
|
||||
|
||||
$diagonal-pixel: 0.7071067812px;
|
||||
2
assets/css/settings/_chess.scss
Normal file
2
assets/css/settings/_chess.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$colours: "black" "white";
|
||||
$pieces: king queen bishop knight rook pawn;
|
||||
18
assets/css/settings/_colors.scss
Normal file
18
assets/css/settings/_colors.scss
Normal file
@ -0,0 +1,18 @@
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
// Background Colors
|
||||
$background-color: $white;
|
||||
$foreground-color: $black;
|
||||
|
||||
$nav-background-color: $black;
|
||||
$nav-foreground-color: $white;
|
||||
|
||||
$link-color: $black;
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $black;
|
||||
$action-color: $black;
|
||||
|
||||
// Border
|
||||
$base-border-color: $black;
|
||||
1
assets/css/settings/_forms.scss
Normal file
1
assets/css/settings/_forms.scss
Normal file
@ -0,0 +1 @@
|
||||
$base-form-width: 40rem;
|
||||
16
assets/css/settings/_global.scss
Normal file
16
assets/css/settings/_global.scss
Normal file
@ -0,0 +1,16 @@
|
||||
$base-border-radius: 0.5rem;
|
||||
$base-spacing: 2rem;
|
||||
$small-spacing: $base-spacing / 2;
|
||||
$x-small-spacing: $small-spacing / 2;
|
||||
$base-z-index: 0;
|
||||
|
||||
$container-width: 90%;
|
||||
|
||||
// Border
|
||||
$base-border-color: $black;
|
||||
$base-border: 1px dashed $base-border-color;
|
||||
$base-solid-border: 0.25rem solid $base-border-color;
|
||||
|
||||
// Animations
|
||||
$base-duration: 150ms;
|
||||
$base-timing: ease;
|
||||
19
assets/css/settings/_typography.scss
Normal file
19
assets/css/settings/_typography.scss
Normal file
@ -0,0 +1,19 @@
|
||||
$base-font-family: "Enriqueta", serif;
|
||||
$base-font-size: 1em;
|
||||
$heading-font-family: $base-font-family;
|
||||
|
||||
$small-font-size: 0.8em;
|
||||
$large-font-size: 1.2em;
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.2;
|
||||
|
||||
// Font weights
|
||||
$base-font-weight: 400;
|
||||
$heavy-font-weight: 700;
|
||||
|
||||
// Modular scale
|
||||
$bourbon: (
|
||||
"modular-scale-ratio": $major-third,
|
||||
);
|
||||
3
assets/css/utilities/_text-right.scss
Normal file
3
assets/css/utilities/_text-right.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
@ -22,16 +22,16 @@ class ChessBoardSquare extends React.Component {
|
||||
get squareClass() {
|
||||
if (this.props.piece == undefined) {
|
||||
return classNames(
|
||||
"board-square",
|
||||
{ "available": this.isAvailableSquare() }
|
||||
"square",
|
||||
{ "square--available": this.isAvailableSquare() }
|
||||
);
|
||||
} else {
|
||||
return classNames(
|
||||
"board-square",
|
||||
this.props.piece.type,
|
||||
this.props.piece.colour,
|
||||
{ "selected": this.isSelectedSquare() },
|
||||
{ "available": this.isAvailableSquare() }
|
||||
"square",
|
||||
`square--${this.props.piece.type}`,
|
||||
`square--${this.props.piece.colour}`,
|
||||
{ "square--selected": this.isSelectedSquare() },
|
||||
{ "square--available": this.isAvailableSquare() }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +81,11 @@ class ChessBoard extends React.Component {
|
||||
const turn = this.turn;
|
||||
const player = this.player;
|
||||
|
||||
return classNames("board", turn + "-to-move", "player-is-" + player);
|
||||
return classNames(
|
||||
"board",
|
||||
`board--${turn}-to-move`,
|
||||
`board--player-is-${player}`
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -90,7 +94,7 @@ class ChessBoard extends React.Component {
|
||||
<RankLabels />
|
||||
<FileLabels />
|
||||
|
||||
<div className="board-body">
|
||||
<div className="board__body">
|
||||
{this.renderSquares()}
|
||||
</div>
|
||||
|
||||
|
||||
@ -6,14 +6,14 @@ const FILE_LABELS = ["a", "b", "c", "d", "e", "f", "g", "h"];
|
||||
const renderFileLabels = () => {
|
||||
return _.map(FILE_LABELS, (fileLabel) => {
|
||||
return (
|
||||
<div key={fileLabel} className="board-label">{fileLabel}</div>
|
||||
<div key={fileLabel} className="board__label">{fileLabel}</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const FileLabels = () => {
|
||||
return (
|
||||
<div className="board-file-labels">
|
||||
<div className="board__file-labels">
|
||||
{renderFileLabels()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,19 +1,37 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
const GameInfo = (props) => {
|
||||
const renderStatus = status => {
|
||||
if (status == "viewing") {
|
||||
return (
|
||||
<img
|
||||
className="game-info__opponent-status"
|
||||
src="/images/eye-open.svg"
|
||||
alt="viewing"
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<img
|
||||
className="game-info__opponent-status"
|
||||
src="/images/eye-closed.svg"
|
||||
alt="offline"
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const GameInfo = props => {
|
||||
return (
|
||||
<div className="game-info">
|
||||
<p>
|
||||
Playing {props.opponent} - <span className={props.opponentStatus}>
|
||||
{props.opponentStatus}
|
||||
</span>
|
||||
Playing {props.opponent} {renderStatus(props.opponentStatus)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
opponent: state.opponent,
|
||||
opponentStatus: state.opponentStatus,
|
||||
|
||||
@ -15,7 +15,7 @@ const friendlyGameState = (state) => {
|
||||
};
|
||||
|
||||
const gameStateClass = (state) => {
|
||||
return classNames("board-game-state", state);
|
||||
return classNames("game-state", `game-state--${state}`);
|
||||
};
|
||||
|
||||
const GameState = (props) => {
|
||||
|
||||
@ -50,8 +50,6 @@ const MoveList = (props) => {
|
||||
return (
|
||||
<div className="move-list">
|
||||
<table className="table table--condensed">
|
||||
<caption className="heading">Moves</caption>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="move-list__line-number">
|
||||
|
||||
@ -6,14 +6,14 @@ const RANK_LABELS = [1, 2, 3, 4, 5, 6, 7, 8];
|
||||
const renderRankLabels = () => {
|
||||
return _.map(RANK_LABELS, (rankLabel) => {
|
||||
return (
|
||||
<div key={rankLabel} className="board-label">{rankLabel}</div>
|
||||
<div key={rankLabel} className="board__label">{rankLabel}</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const RankLabels = () => {
|
||||
return (
|
||||
<div className="board-rank-labels">
|
||||
<div className="board__rank-labels">
|
||||
{renderRankLabels()}
|
||||
</div>
|
||||
);
|
||||
|
||||
1
assets/static/images/eye-closed.svg
Normal file
1
assets/static/images/eye-closed.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="356" viewBox="0 0 460 356" width="460" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="25" transform="matrix(1 0 0 -1 19 311)"><path d="m1.0000057 154.5c45.9861739-66.7467696 122.9511533-110.5 210.1352473-110.5s164.149074 43.7532304 210.135248 110.5c-45.986168 66.746766-122.95115 110.5-210.135248 110.5-87.184097 0-164.1490797-43.753234-210.135253-110.500008z" stroke-linejoin="round"/><path d="m211.25 43.5v-43"/><path d="m282.942315 52.7633091v-42.99999997" transform="matrix(.96592583 .25881905 -.25881905 .96592583 17.725751 -72.113825)"/><path d="m349.243301 80.5775589v-43" transform="matrix(.8660254 .5 -.5 .8660254 76.301715 -166.606758)"/><path d="m138.942315 53.7633091v-43" transform="matrix(.96592583 -.25881905 .25881905 .96592583 -3.622829 37.008499)"/><path d="m72.2433013 80.5775589v-43" transform="matrix(.8660254 -.5 .5 .8660254 -19.886807 43.936543)"/><path d="m15.7917045 125.091705v-43.0000005" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -68.683692 41.366308)"/><path d="m406.791705 124.091705v-43.0000005" transform="matrix(.70710678 .70710678 -.70710678 .70710678 191.631244 -257.455337)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
assets/static/images/eye-open.svg
Normal file
1
assets/static/images/eye-open.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="356" viewBox="0 0 460 356" width="460" xmlns="http://www.w3.org/2000/svg"><g fill="none" transform="translate(19 26)"><g stroke="#000" stroke-linecap="round" stroke-width="25"><path d="m1.0000057 154.5c45.9861739-66.7467696 122.9511533-110.5 210.1352473-110.5s164.149074 43.7532304 210.135248 110.5c-45.986168 66.746766-122.95115 110.5-210.135248 110.5-87.184097 0-164.1490797-43.753234-210.135253-110.500008z" stroke-linejoin="round"/><path d="m211.25 43.5v-43"/><path d="m282.942315 52.7633091v-42.99999997" transform="matrix(.96592583 .25881905 -.25881905 .96592583 17.725751 -72.113825)"/><path d="m349.243301 80.5775589v-43" transform="matrix(.8660254 .5 -.5 .8660254 76.301715 -166.606758)"/><path d="m138.942315 53.7633091v-43" transform="matrix(.96592583 -.25881905 .25881905 .96592583 -3.622829 37.008499)"/><path d="m72.2433013 80.5775589v-43" transform="matrix(.8660254 -.5 .5 .8660254 -19.886807 43.936543)"/><path d="m15.7917045 125.091705v-43.0000005" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -68.683692 41.366308)"/><path d="m406.791705 124.091705v-43.0000005" transform="matrix(.70710678 .70710678 -.70710678 .70710678 191.631244 -257.455337)"/><ellipse cx="211.13525" cy="154.122536" rx="108.223972" ry="106.122536" stroke-linejoin="round"/></g><path d="m155.227975 113.387908c-.109847.900709-.16637 1.817568-.16637 2.747427 0 12.592957 10.366882 22.801566 23.155079 22.801566s23.155079-10.208609 23.155079-22.801566c0-11.860297-9.195679-21.6056177-20.949172-22.699441 8.892571-4.1279809 18.82795-6.435894 29.310728-6.435894 38.009363 0 68.82204 30.342255 68.82204 67.771322 0 37.429068-30.812677 67.771323-68.82204 67.771323s-68.822041-30.342255-68.822041-67.771323c0-15.582002 5.340206-29.935775 14.316697-41.383414z" fill="#000"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,11 +1,11 @@
|
||||
<h2><%= gettext "Listing games" %></h2>
|
||||
|
||||
<table class="table table--games-list">
|
||||
<table class="games-list">
|
||||
<tbody>
|
||||
<%= for game <- @games do %>
|
||||
<tr class="<%= turn_class(@conn, game) %>">
|
||||
<td>
|
||||
<span class="player-indicator">
|
||||
<span class="games-list__player-indicator">
|
||||
<img src="images/pawn_<%= player_colour(@conn, game) %>.svg">
|
||||
</span>
|
||||
<%= link gettext(
|
||||
@ -25,8 +25,7 @@
|
||||
<%= link gettext("Delete"),
|
||||
to: game_path(@conn, :delete, game),
|
||||
method: :delete,
|
||||
data: [confirm: gettext("Are you sure?")],
|
||||
class: "btn btn-danger btn-xs" %>
|
||||
data: [confirm: gettext("Are you sure?")] %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
8
lib/chess_web/templates/layout/_alerts.html.eex
Normal file
8
lib/chess_web/templates/layout/_alerts.html.eex
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="container alerts">
|
||||
<p class="alert alert--info" role="alert">
|
||||
<%= get_flash(@conn, :info) %>
|
||||
</p>
|
||||
<p class="alert alert--danger" role="alert">
|
||||
<%= get_flash(@conn, :error) %>
|
||||
</p>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user