Phoenix LiveView로 바둑 만들기

또 다른 불로장생의 연금술로 돌아온 것을 환영합니다!이번에 우리는 상호작용 게임을 구축함으로써 Phoenix LiveView의 위력을 발견할 것이다.
서버에 HTML을 보여주고 웹 플러그인을 통해 전방과 백엔드 사이의 통신을 통해 LiveView는 자바스크립트를 작성하거나 브라우저의 상태를 업데이트할 필요가 없이 실시간 인터페이스를 구축하는 데 도움을 줍니다.LiveView는 서버 측의 상태를 업데이트하여 페이지에서 업데이트해야 할 부분만 업데이트하여 네트워크를 통해 최소한의 데이터를 전송하는 빠른 응용 프로그램을 생성합니다.
이를 설명하기 위해 우리는 봉황성에서 게임을 구축하고 LiveView를 사용하여 상호작용을 할 것이다.비록 tic-tac-toe는 매우 재미있지만, 우리는 구축Go을 통해 더욱 웅대한 목표를 실현할 것이다.

Go is an abstract strategy board game for two players, in which the aim is to surround more territory than the opponent. The game was invented in China more than 2,500 years ago and is believed to be the oldest board game continuously played to the present day.

final result는 바둑 게임의 실현으로 유저가 번갈아 바둑판에 돌을 놓을 수 있도록 한다.유저는 상대방의 돌을 잡을 수 있으며, 게임은 잡은 돌을 추적할 수 있습니다.

이 과정에서 우리는 Phoenix LiveView 모든 내용을 Elixir에 저장하여 전단과 백엔드 코드를 복제하지 않고 상호작용 응용 프로그램을 구축하는 방법을 배울 것입니다.

우리 갑시다!

starter app는 Phoenix 응용 프로그램으로 그 중 일부는 이미 설정되어 있다.이것은 생성된 파일을 정리하고 바둑판에 스타일을 추가합니다. README의 설치 안내서에 따라 Phoenix LiveView를 미리 설치하고 게임 상태를 추적하는 모듈이 있습니다.
우리 게임에서 State 모듈은 게임의 상태를 묘사했다.starter 응용 프로그램에는 이미 State 모듈이 포함되어 있기 때문에 우리는 LiveView 사용에 전념할 수 있다.State 구조는 :positions 목록에 있는 판의 돌을 추적하고 :current 키의 다음 유저를 알 수 있습니다.

# lib/hayago/state.ex
defmodule Hayago.State do
  alias Hayago.State
  defstruct positions: Enum.map(1..81, fn _ -> nil end), current: :black

  # ...
end

새로 생성된 상태는 보드가 비어 있고 9x9개의 위치가 있기 때문에 81nil 개의 값 목록으로 초기화됩니다.블랙스톤을 가진 유저가 첫 번째로 이동하기 때문에 모든 새로운 상태에 대해 :positions키를 :current로 설정합니다.:black 모듈은 두 가지 기능을 공개했다.첫 번째는 칠판에 새 돌을 놓았다는 것이다.새 돌이 다른 돌의 모든 자유를 훔쳐가면, 잡은 돌은 자동으로 판에서 제거된다.State 기능은 다른 돌이 이 위치를 차지했는지 확인하고 이 돌을 즉각 포획하지 않아 이동이 합법적인지 검사한다.
-> 우리가 사용할 place/2 모듈의 실현에 대해 더 알고 싶으면 module’s documentation 을 보십시오. 이것은 판에 돌을 놓고 돌을 포획하고 가능한 이동을 검증하는 방법을 설명합니다.

법률 /2 모듈

우리는 회로판을 렌더링하는 것부터 시작할 것이다.먼저, 렌더링과 업데이트를 처리하기 위해 실시간 보기를 응용 프로그램에 추가합니다.그것 State 이라고 하는데, 그것 GameLive 과 GameLive 리셋 함수가 있다.

# lib/hayago_web/live/game_live.ex
defmodule HayagoWeb.GameLive do
  use Phoenix.LiveView

  def render(assigns) do
    HayagoWeb.GameView.render("index.html", assigns)
  end

  def mount(_session, socket) do
    {:ok, assign(socket, state: %Hayago.State{})}
  end
end

render/1 뷰의 초기 상태를 설정하기 위해 mount/2 에서 값을 리셋합니다.우리는 템플릿에서 사용할 수 있도록 새 상태를 만들고 플러그인 분배에 추가합니다.
그런 다음 보드를 렌더링하는 템플릿을 추가합니다.우리는 이를 mount/2 로 명명하여 실시간 EEx 템플릿으로 만듭니다.일반적인 EEx 템플릿과 유사하지만, 라이브 템플릿은 보기가 업데이트될 때 네트워크를 통해 최소한의 데이터를 전송할 수 있도록 변경 사항을 추적합니다.

# lib/hayago_web/templates/game/index.html.leex
<div class="board <%= @state.current %>">
  <%= for _position <- @state.positions do %>
    <button></button>
  <% end %>
</div>

실시간 보기에서 지정한 socket 구조에서 모든 위치를 순환하고 모든 위치에 빈 index.html.leex 요소를 순환합니다.버튼은 @state 요소에 있으며 스타일시트는 자동으로 Go board로 설정됩니다.또한 현재 색상을 패널에 클래스 이름으로 추가하여 마우스를 어느 위치에 놓을 때 놓을 돌을 스타일시트에 표시할 수 있도록 합니다.
마지막으로, 우리는 모든 요청 루트를 <button> 공유기의 <div> 모듈로 연결합니다.

# lib/hayago_web/router.ex
defmodule HayagoWeb.Router
  # ...

  scope "/", HayagoWeb do
    pipe_through :browser

    live "/", GameLive
  end
end

만약 우리가 피닉스 서버를 시작하고 브라우저에서 https://localhost:4000 로 내비게이션을 한다면, 우리는 응용 프로그램이 비어 있는 바둑판을 볼 수 있을 것이다.비록 우리는 아직 돌을 놓을 수 없지만, 바둑판 위의 위치에 멈추면 새 돌이 놓을 위치를 표시할 수 있다.

이동

판에 돌을 놓기 위해 / 함수를 실현했고 이 함수는 GameLive 구조와 색인을 사용했다.이것은 색인에 대응하는 위치를 State 키의 값으로 대체합니다. 이 값은 place/2 또는 State입니다. 구체적으로 어느 유저가 차례가 되느냐에 따라 달라집니다.
템플릿에서 단추에 :current 및 :black 속성을 추가합니다.이러한 속성은 LiveView가 :white 모듈에 이벤트를 보내는 것을 알려줍니다.

# lib/hayago_web/templates/game/index.html.leex
<div class="board">
  <%= for {value, index} <- Enum.with_index(@state.positions) do %>
    <button phx-click="place" phx-value="<%= index %>" class="<%= value %>"></button>
  <% end %>
</div>

실시간 보기에서 템플릿에 설정된 속성과 일치하여 이벤트를 처리합니다.우리는 전달된 색인 호출 phx-click 을 사용했는데, 그것은 새로운 상태로 되돌아왔고, 그 중 돌은 판 위에 놓여 있었다.우리는 새로운 상태를 가진 phx-value - 원조로 돌아갈 것이다.

# lib/hayago_web/live/game_live.ex
defmodule HayagoWeb.GameLive do
  # ...

  def handle_event("place", index, %{assigns: assigns} = socket) do
    new_state = State.place(assigns.state, String.to_integer(index))
    {:noreply, assign(socket, state: new_state)}
  end
end

LiveView는 소켓의 상태를 업데이트하여 템플릿에서 변경된 부분을 다시 제출하는 방법을 알고 있습니다.그런 다음 업데이트된 페이지를 렌더링 페이지와 비교하여 렌더링된 페이지에 최소 패치를 적용합니다.
우리의 브라우저로 돌아가면, 우리가 변경을 한 후에, 그것은 자동으로 페이지를 갱신하고, 우리의 프로젝트는 이미 정상적인 바둑 게임처럼 보이기 시작한다.우리는 돌을 바둑판 위에 놓을 수도 있고, 심지어는 적의 돌을 둘러싸서 옮길 수도 있다.
우리 안 한 거 봐!우리는 어떤 코드를 만들어서 데이터를 브라우저에 보낼 필요도 없고, 나타나는 페이지를 업데이트할 걱정도 없다.LiveView는 상태 변경 시 페이지를 업데이트합니다.
그러나 동일한 위치를 두 번 클릭하면 배치된 돌이 다른 돌로 바뀝니다.이런 상황을 방지하기 위해서 우리는 불법 이동을 표시하는 단추를 비활성화해야 한다.

불법 이동 방지

불법 이동을 방지하기 위해서, 우리는 이미 돌이 있는 위치나 새로 놓인 돌이 자유롭지 않은 위치에 비활성화된 단추를 덧붙일 것이다.
이 점을 실현하기 위해서, 우리는 GameLive 을 사용하여, 현재 상태와 색인을 가져오고, 현재 유저가 거기에 돌을 놓을 수 있는지를 표시하는 값을 되돌려줍니다.

<div class="board <%= @state.current %>">
  <%= for {value, index} <- Enum.with_index(@state.positions) do %>
    <%= if Hayago.State.legal?(@state, index) do %>
      <button phx-click="place" phx-value="<%= index %>" class="<%= value %>"></button>
    <% else %>
      <button class="<%= value %>" disabled="disabled"></button>
    <% end %>
  <% end %>
</div>

LiveView가 페이지를 업데이트하기 때문에 템플릿에 if 문장을 추가하여 모든 위치에 돌을 놓는 것이 합법적인지 확인할 수 있습니다.만약 그렇다면, 우리는 이전과 같은 단추를 렌더링합니다.그렇지 않으면 비활성화된 단추를 렌더링합니다.
스타일시트는 비활성화된 버튼에 서스펜션이 표시되지 않도록 하고 커서를 돌을 놓을 수 있도록 표시로 변경합니다.

돌을 잡다

돌을 잡을 때 State.place/2 함수는 현재 상태의 :noreply 지도에 계수기를 추가합니다. 이 지도는 검은색과 흰색 돌을 동시에 포함하는 계수기입니다.
포획된 모든 돌에 대해 우리는 칠판 위에 돌을 표시할 것이다.라이브뷰에서 수신한 State.legal?/2 구조에서 포획을 사용할 수 있기 때문에, 우리는 모든 계수기를 순환하여 정확한 클래스 이름place/2을 사용하여 스타일시트를 단추로 만들 것입니다.

<div class="captures">
  <div>
    <%= for _ <- 1..@state.captures.black, @state.captures.black > 0 do %>
      <span class="black"></span>
    <% end %>
  </div>
  <div>
    <%= for _ <- 1..@state.captures.white, @state.captures.white > 0 do %>
      <span class="white"></span>
    <% end %>
  </div>
</div>

목록 이해에 범위를 사용했기 때문에, 목록이 순환할 때 비어 있지 않도록 필터를 추가할 것입니다.
이제 우리는 칠판에 전시되어 있기 때문에 어떤 돌이 잡히는지 추적하는 방법이 생겼다.

득점, 역사 및 Ko 규칙

Go를 실현하는 데 약간의 진전이 있었습니다. 이제 LiveView 프로젝트를 설정하는 방법을 배웠습니다.자세히 상태를 업데이트하면 인터페이스를 구축할 수 있고 보기를 업데이트할 염려가 없다는 것을 우리는 이미 보았다.반대로 우리는 현재 상태의 정적 표시에 전념하고 유저가 본 페이지를 업데이트하는 작업을 라이브뷰에 남긴다.liveview 모듈을 설정하는 것 외에 메인보드 상태를 표시하는 코드는 템플릿에 논리를 추가하여 작성합니다. 자바스크립트를 직접 작성할 필요가 없습니다.
그러나 우리는 여전히 뭔가를 해야 한다.다음에 만날 때, 우리는 게임에 역사 기록을 추가하여 유저가 이동을 취소할 수 있도록 하고, 반복 이동을 방지하기 위해 실시할 것이다.마지막으로, 우리는 모든 유저의 현재 점수를 표시하기 위해 분수 계수기를 추가할 것이다.그때 봐요!