diff --git a/assets/css/components/_board.scss b/assets/css/components/_board.scss index 5d0ef5f..211da09 100644 --- a/assets/css/components/_board.scss +++ b/assets/css/components/_board.scss @@ -58,6 +58,14 @@ display: flex; flex-direction: row; } + + .board__body { + flex-direction: column-reverse; + } + + .board__row { + flex-direction: row; + } } .board--player-is-black { @@ -70,20 +78,45 @@ display: flex; flex-direction: row-reverse; } + + .board__body { + flex-direction: column; + } + + .board__row { + 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); + display: flex; + flex-direction: column; height: 100%; padding: 1%; width: 100%; } +.board__row { + display: flex; + flex-grow: 1; + + @include odd-between(1, 8) { + .square { + @include odd-between(1, 8) { @extend %square--black; } + @include even-between(1, 8) { @extend %square--white; } + } + } + @include even-between(1, 8) { + .square { + @include odd-between(1, 8) { @extend %square--white; } + @include even-between(1, 8) { @extend %square--black; } + } + } +} + .board__rank-labels { display: none; height: 90%; diff --git a/assets/css/components/_square.scss b/assets/css/components/_square.scss index ccbaf4c..52c3d53 100644 --- a/assets/css/components/_square.scss +++ b/assets/css/components/_square.scss @@ -57,36 +57,13 @@ border-radius: 4%; margin: 0.5px; position: relative; + flex-grow: 1; // 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; diff --git a/lib/chess_web/templates/game/_board.html.eex b/lib/chess_web/templates/game/_board.html.eex new file mode 100644 index 0000000..e7c94a5 --- /dev/null +++ b/lib/chess_web/templates/game/_board.html.eex @@ -0,0 +1,35 @@ +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
+
+
a
+
b
+
c
+
d
+
e
+
f
+
g
+
h
+
+
+ <%= for rank <- 0..7 do %> +
+ <%= for file <- 0..7 do %> + <%= render "_square.html", + rank: rank, + file: file, + piece: @game.board["#{file},#{rank}"] %> + <% end %> +
+ <% end %> +
+
+
diff --git a/lib/chess_web/templates/game/_square.html.eex b/lib/chess_web/templates/game/_square.html.eex new file mode 100644 index 0000000..937c827 --- /dev/null +++ b/lib/chess_web/templates/game/_square.html.eex @@ -0,0 +1,5 @@ +<%= if @piece == nil do %> +
+<% else %> +
square--<%= @piece["colour"] %>">
+<% end %> diff --git a/lib/chess_web/templates/game/show.html.eex b/lib/chess_web/templates/game/show.html.eex index 96e010f..87adea1 100644 --- a/lib/chess_web/templates/game/show.html.eex +++ b/lib/chess_web/templates/game/show.html.eex @@ -1,2 +1,25 @@ -
+
+
+ <%= render "_board.html", conn: @conn, game: @game %> +
+

Playing Zaphod Beeblebrox offline

+
+
+ + + + + + + + + + + + + + +
WhiteBlack
1.e4
+
+
diff --git a/lib/chess_web/views/game_view.ex b/lib/chess_web/views/game_view.ex index 2a789ab..04c21a8 100644 --- a/lib/chess_web/views/game_view.ex +++ b/lib/chess_web/views/game_view.ex @@ -44,6 +44,19 @@ defmodule ChessWeb.GameView do (current_user(conn).id == game.user_id && "white") || "black" end + def files(conn, game) do + ranks(conn, game) + |> Enum.reverse + end + + def ranks(conn, game) do + if game.user_id == current_user(conn).id do + 7..0 + else + 0..7 + end + end + def player(game, user_id) do if game.user_id == user_id do "white"