私はこのアイデアの前にゲームのアイデアとそのルールを導入しました.本稿では私はそのプロジェクトの建築についていくつもりです.
この記事は進行中の仕事です、そして、私はしばしばそれを更新します.

ゲーム要件

任意の実世界アプリケーションを構築する最初のステップは、要件分析と収集です.
オンラインの単語は、2000年初頭/小学校の美学とゲームを推測を構築する.

実時間

その試合は今行きますonline 我々がユーザーがリアルタイムで遊ぶのを許す必要があるという意味.
ゲームは、プレイヤーが作成したり、公共/プライベートルームに参加し、リアルタイムで他のユーザーと遊ぶことができます.このような機能は、Webソケットを介して実現されます.
私たちがhasuraを使用している時から、この機能を成し遂げるために、graphql購読を使用しています.
私はFacebookやGoogle経由で認証を有効にした新しいゲームの友人を招待することを容易にします.

レトロな美学

私の開発プロセスを簡素化するためにUIライブラリを使用する必要がありました.

一貫したテーマ

レイアウトコンポーネント

カスタマイズ可能なコンポーネント

私はチャクラUIが良いライブラリになることを発見したので、それは私のほとんどの状況で私自身のカスタムスタイルを使用できるようにすることで柔軟性のトンを与えた.私は、アクセシビリティとよく設計されたAPIのためにチャクラコンポーネントを使う必要がありました.

開発経験

私は次に選びました.私のフレームワークとしての私のフレームワークは、それのパフォーマンスの最適化と簡単に構造に従うこと.
次.JSはサーバーレンダリングアプリケーションを構築するための独創的なフレームワークです.

国家管理

私は私のゲームの状態を予測することができますし、私も対処する必要があります州の数を制限したい.
このために私は使用するつもりですxState を使用する状態管理ライブラリですstate machines .
あなたが状態機械チェックアウトについてより多くを学ぶことに興味があるならば、このものすごいarticle ケントC .ドッズから.

ディレクトリ構造

私は次に使いました.JavaScriptのフレームワークは、私は私の理事会を作成するオプションがありました.

📦src
 ┣ 📂Game
 ┣ 📂Rooms
 ┣ 📂User
 ┣ 📂components
 ┣ 📂hooks
 ┣ 📂layout
 ┣ 📂lib
 ┃ ┣ 📂graphql
 ┣ 📂machines
 ┃ ┣ 📂game
 ┃ ┗ 📂player
 ┣ 📂providers
 ┣ 📂utils

根

ルートは設定ファイルとプロジェクトディレクトリから成ります.

設定ファイル

私のプロジェクトの根底には、プロジェクトを初期化するための設定ファイルがあります.

nvm.rc このプロジェクトの目的のノードバージョンに動的に切り替えます.

tsconfig.json 私のタイプスクリプト規則のために

codegen GraphSQLスキーマの型を生成するには

eslint.rc 適切なコードのスタイルとルールを実施するには

.husky 私はpre-commit 私のコードがそれを押す前に品質基準に固執することを確実とするフック.主にlints and formats すべてのコミット前に私のコード.

ディレクトリ

私はドメインに基づいてディレクトリを構造化しました.

コンポーネント

これらは、アプリケーションのさまざまな部分間で共有される一般的なUIコンポーネントです.含むButton , Inputs タイマー等

ゲーム
ゲームの特定のコンポーネントが含まれます.

室
部屋固有のコンポーネントを含みます.

フック
私は抽象的な私のGraphSQL操作を支援するためにフックを作成しました.これは私のネットワーク関連のフックの多くの一般的な構造です.
ここでどのように生gql 突然変異は以下のようになります:
export const INSERT_ROOM_MEMBER = gql突然変異InsttroOommember ($ member : RommsSumメンバーの挿入){ }
InsertError RoomsHeightメンバーシップオブジェクト( $メンバ)
ID
役割
ルーマニア
メンバー
ID
見る
創造する
電子メール
｝
｝
｝
「

`

This is how it looks like after wrapping the mutation in a hook.

`
export const useInsertRoomMember = () => {
const [insertRoomMember, { data, loading, error }] = useMutation<
InsertRoomMemberMutation,
InsertRoomMemberMutationVariables

(INSERT_ROOM_MEMBER);
return useMemo(
() => ({
memberLoading: loading,
memberError: error,
member: data?.insert_rooms_members_one,
insertRoomMember: (member: OperationVariables) => {
return insertRoomMember({ variables: { member } }).then(
({ data }) => data?.insert_rooms_members_one
);
},
}),
[loading, error, data?.insert_rooms_members_one, insertRoomMember]
);
};

`

Machines

I use this directory to define state machines.

I have created two machines to represent/manage the state of my game.

• player プレイヤーの特定のアクションを制御する
• game ゲームの流れを制御する

プロバイダ
これは私がプロジェクト全体をラップするために使用するグローバルプロバイダー向けです.私は主に2つのプロバイダを使用します.
• Theme ゲーム全体のテーマを制御する
• Game ゲームのデータを制御する

Utils
ユーティリティ機能のセットは、ゲームのコントロールを支援する.

リブ
私が私のゲームで使うつもりであるどんな第三者図書館のためにでも.
ここで私はアポロクライアントを初期化し、私の実行中のhasuraインスタンスにポイントします.
私はいくつかのテーブルを作成し、ゲームをプレイするために必要な操作のための読み取り/書き込み許可を有効にしました.

コデゲン
私もセットアップcodegen スキーマの型を生成する非常に便利なツールです.
私はcodegen 私のスクリプトpackage.json アポロCodeGenを使用して、関連する型を生成して、GraphSQLクエリと突然変異にマップするファイルです.これらの生成された型は、クエリを使用して、突然変異フックを使用して、型を状態にします.
コードをcodegenに指定するには、ファイルcodegenを生成します.JSはそれに渡されます.


ゲームロジック



• プレイヤーは40秒以内に4単語を推測する必要があります.
• アクティブな選手は、各ラウンドの結果と一緒に表示されます.
• 他の人が次のラウンドに進む間、提出する最後のプレーヤーは削除されます.
• 各ラウンドは、このように推測される単語の新しいセットを生成する新しい文字.