danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Render the initial board in Phoenix

Browse Source
This commit is contained in:
Daniel Barber 2021-01-05 13:09:00 -05:00 committed by Dan Barber
parent a26f044822
commit 34551788c7
6 changed files with 114 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/components/_board.scss
View File

@ -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%;

25
assets/css/components/_square.scss
View File

@ -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;

35
lib/chess_web/templates/game/_board.html.eex Normal file
View File

@ -0,0 +1,35 @@
<div class="board board--black-to-move board--player-is-white">
<div class="board__rank-labels">
<div class="board__label">1</div>
<div class="board__label">2</div>
<div class="board__label">3</div>
<div class="board__label">4</div>
<div class="board__label">5</div>
<div class="board__label">6</div>
<div class="board__label">7</div>
<div class="board__label">8</div>
</div>
<div class="board__file-labels">
<div class="board__label">a</div>
<div class="board__label">b</div>
<div class="board__label">c</div>
<div class="board__label">d</div>
<div class="board__label">e</div>
<div class="board__label">f</div>
<div class="board__label">g</div>
<div class="board__label">h</div>
</div>
<div class="board__body">
<%= for rank <- 0..7 do %>
<div class="board__row">
<%= for file <- 0..7 do %>
<%= render "_square.html",
rank: rank,
file: file,
piece: @game.board["#{file},#{rank}"] %>
<% end %>
</div>
<% end %>
</div>
<div class="game-state game-state--null"></div>
</div>

5
lib/chess_web/templates/game/_square.html.eex Normal file
View File

@ -0,0 +1,5 @@
<%= if @piece == nil do %>
<div id="f<%= @file %>-r<%= @rank %>" class="square"></div>
<% else %>
<div id="f<%= @file %>-r<%= @rank %>" class="square square--<%= @piece["type"] %> square--<%= @piece["colour"] %>"></div>
<% end %>

25
lib/chess_web/templates/game/show.html.eex
View File

@ -1,2 +1,25 @@
<div id="game" data-game-id="<%= @game.id %>">
<div data-game-id="<%= @game.id %>">
<div class="game-grid">
<%= render "_board.html", conn: @conn, game: @game %>
<div class="game-info">
<p>Playing Zaphod Beeblebrox <img class="game-info__opponent-status" src="/images/eye-closed.svg" alt="offline"></p>
</div>
<div class="move-list">
<table class="table table--condensed">
<thead>
<tr>
<th class="move-list__line-number"><span class="visually-hidden">Move no.</span></th>
<th class="move-list__header--white">White</th>
<th class="move-list__header--black">Black</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="move-list__line-number">1.</th>
<td class="move-list__move move-list__move--white">e4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

13
lib/chess_web/views/game_view.ex
View File

@ -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"