neslinesli93

@spec advance_paddle(Socket.t()) :: Socket.t()
defp advance_paddle(%{assigns: %{paddle: paddle, unit: unit}} = socket) do
  case paddle.direction do
    :left -> assign(socket, :paddle, move_paddle_left(paddle, unit))
    :right -> assign(socket, :paddle, move_paddle_right(paddle, unit))
    :stationary -> socket
  end
end

@spec move_paddle_left(map(), number()) :: map()

neslinesli93

@spec game_loop(Socket.t()) :: Socket.t()
defp game_loop(socket) do
  socket
  |> advance_paddle()
end

neslinesli93

@spec move_paddle(Socket.t(), :left | :right) :: Socket.t()
defp move_paddle(%{assigns: %{paddle: paddle}} = socket, direction) do
  if paddle.direction == direction do
    socket
  else
    assign(socket, :paddle, %{paddle | direction: direction})
  end
end

@spec stop_paddle(Socket.t(), :left | :right) :: Socket.t()

neslinesli93

@left_keys ["ArrowLeft", "KeyA"]
@right_keys ["ArrowRight", "KeyD"]

neslinesli93

# Handle keydown events
@spec on_input(Socket.t(), String.t()) :: Socket.t()
defp on_input(socket, key) when key in @left_keys,
  do: move_paddle(socket, :left)

defp on_input(socket, key) when key in @right_keys,
  do: move_paddle(socket, :right)

defp on_input(socket, _), do: socket

neslinesli93

@spec handle_event(String.t(), map(), Socket.t()) :: {:noreply, Socket.t()} | {:stop, Socket.t()}
def handle_event("keydown", %{"code" => code}, socket) do
  {:noreply, on_input(socket, code)}
end

def handle_event("keyup", %{"code" => code}, socket) do
  {:noreply, on_stop_input(socket, code)}
end

neslinesli93

.game-container .block.paddle {
  background: #717d7e;
  border-radius: 20px;
}

neslinesli93

<div class="game-container">
  <div class="block paddle"
      style="transform: translate3d(<%= @paddle.left %>px, <%= @paddle.top %>px, 0px);
      width: <%= @paddle.width %>px;
      height: <%= @paddle.height %>px; ">
  </div>

  <!-- ... other code below -->
</div>

neslinesli93

def mount(_session, socket) do
  state = %{
    unit: @unit,
    tick: @tick,
    paddle: %{
      width: @paddle_length * @unit,
      height: @paddle_height * @unit,
      # Coordinates of the box surrounding the paddle
      left: Helpers.coordinate(@paddle_left, @unit),
      top: Helpers.coordinate(@paddle_top, @unit),

neslinesli93

# Coordinates of the top-left vertex of the paddle. They are relative to the board matrix
@paddle_left 11
@paddle_top 18
# Paddle length/height expressed in basic units
@paddle_length 5
@paddle_height 1
# Misc
@paddle_speed 5