개요

GamePage은 두 명의 플레이어가 클래식 보드 게임 "Reversi"(일명 "Othello")를 플레이할 수 있도록 하는 Rails 및 JavaScript로 구축된 웹 앱입니다. 게임의 기본 전제는 보드에 토큰을 놓는 것입니다. 토큰을 배치할 때 배치한 토큰과 다른 토큰 사이에 있는 상대의 토큰을 자신의 토큰으로 교환하려고 시도합니다.

플레이어는 전체 보드가 채워질 때까지 번갈아 가며 토큰을 배치합니다. 게임이 끝나면 보드에 가장 많은 양의 토큰을 가진 플레이어가 승리합니다. 자세한 내용은 Triple S의 동영상을 시청하세요.

플레이어가 게임에서 이기면 점수가 데이터베이스에 기록되고 플레이어는 다시 플레이할 수 있습니다.

GamePage는 프런트엔드와 백엔드의 두 저장소로 나뉩니다.

프런트엔드: github.com/karsonkalt/gamepage_front_end

백엔드: github.com/karsonkalt/gamepage_back_end

프로젝트 아키텍처

GamePage는 HTTPGET 및 POST 요청에 응답하고 JSON 응답을 반환하는 Rails API에 의해 제공됩니다. 프런트엔드 문서-객체 모델은 성공적인 가져오기 응답으로 실행되는 JS 스크립트에 의해 조작되므로 프런트엔드 사용자는 원활한 단일 페이지 애플리케이션을 경험합니다.

레일스 컨트롤러

기본 메뉴에 액세스하려면 aUser가 로그인해야 합니다. 그런 다음 Play Reversi, Leaderboard 및 My Scores 옵션을 선택할 수 있습니다.


My Scores를 선택하면 fetch의 ScoresController 작업으로 라우팅되는 index 호출이 생성되고 JS의 Score 개체에 매핑되고 페이지에 렌더링되는 JSON 개체의 배열이 반환됩니다.

class ScoresController < ApplicationController
    def index
        scores = Score.where(user_id: params[:user_id])

        seralized_scores = scores.map do |score|
            {points: score.points, created_at: score.created_at.strftime('%b %d, %Y at %l:%M%P')}
        end

        render json: seralized_scores
    end
end

마찬가지로 순위표를 선택하면 레일 서버에 대한 가져오기 호출이 생성되고 JSUser 객체에 매핑되는 JSON 객체 배열이 반환됩니다.



게임을 시작하려면 다른 사람User이 로그인하여 같은 게임Board에 액세스해야 합니다. 프런트 엔드가 BoardController로부터 응답을 받으면 프런트 엔드에 보드가 렌더링됩니다. 그런 다음 각 사용자는 BoardController 의 play 작업에 대한 POST 호출을 수행하여 토큰을 배치합니다.

class BoardController < ApplicationController
    def play
        board_id = params[:board]["boardId"]
        cell = params[:id]

        board = Board.find(board_id)

        if board.set(current_user(board), cell)
            render json: board.cells_to_be_flipped
        else
            render json: {error: "You can't play here"}
        end
    end
end

POST 호출이 유효하지 않은 이동을 반환하면 방향 지시등이 흔들리고 User가 다시 시도할 수 있습니다. 이동이 성공하면 업데이트해야 하는 각 셀과 함께 JSON 개체가 반환됩니다.

프론트엔드 OO 자바스크립트

GamePage의 프런트 엔드는 components 및 services 의 두 가지 기본 js 디렉토리로 구성됩니다. components는 각 개체 및 개체 메서드를 보유하고 있지만 services는 가져오기 요청을 명시적으로 담당하는 개체를 보유합니다.

class UserAPI {
    static getTopUsers() {
        fetch(root + "/users")
            .then(resp => resp.json())
            .then(json => {
                User.addAllTopUserDivs(json)
        })
    }
}

N+1 쿼리 줄이기

가져오기 요청 속도를 높이고 ActiveRecord의 작업 부하를 줄이기 위해 .includes 메서드를 사용하여 결과 집합에 포함할 관계를 지정했습니다. 나중에 사용하려는 연결에 대해 Active Record에 알릴 수 있으면 ActiveRecord는 반복적인 방법에서 쿼리를 줄이는 데이터를 간절히 로드할 수 있습니다.

class User < ApplicationRecord
    def self.top_users
        top_users = self.includes(:scores).sort_by { |user| -user.average_score}
        top_users.map {|user| {user: user, average_score: user.average_score, games_played: user.scores.length}}
    end
end

자원

언제든지 내 Github에서 확인GamePage하거나 내 코딩 여정을 계속 따라갈 수 있도록 후속 조치를 제공하세요.

GamePage는 BSD 2-Clause 라이선스로 라이선스가 부여됩니다.

종속성

GamePage Backend

othello_ruby

hashdiff

GamePage에는 npm 종속성이 없으며 전체npm 데이터는 package.json에서 찾을 수 있습니다.