wevox value card

TechTrainのmissionです．

アトラエの組織改善プラットフォーム「wevox」(ウィボックス)から発売している
「wevox values card」をオンラインでプレイできるように開発していただきます。

React + Rails

TechTrainについて:https://techbowl.co.jp/techtrain
ミッションページ:https://techbowl.co.jp/techtrain/missions/8
wevox values card:https://wevox.io/valuescard

ミッション完了しました!

アプリのデプロイ先

https://wevox.herokuapp.com/

Readme更新日

2021/1/24

課題

・ゲームでの順番が入室順となっており，ユーザ側で決められない
・ゲーム画面で他のユーザの操作が見られていない．（カードゲームではあまりこういう例はないように感じる)
・[本番環境]reloadするとアクセスできなくなる

アプリの動作

リポジトリについて

api_webox

RailsAPIサーバーのファイル．

[Action Cable:CHANNEL]
・ShareChannel: 部屋選択画面で用いる
・TeamsChannel: 部屋待機画面で用いる
・GameChannel: ゲーム画面で用いる

[Model]の依存関係
room.rb

class Room < ApplicationRecord
    belongs_to :user1, class_name: 'User', optional: true
    belongs_to :user2, class_name: 'User', optional: true
    belongs_to :user3, class_name: 'User', optional: true
    belongs_to :user4, class_name: 'User', optional: true
end

user.rb

class User < ApplicationRecord
    has_one :room
    has_many :user_card
    has_many :card, through: :user_card
end

card.rb

class Card < ApplicationRecord
    has_many :user_card
    has_many :user, through: :user_card
end

user_card.rb: 中間テーブル

class UserCard < ApplicationRecord
    belongs_to :user, optional: true
    belongs_to :card, optional: true
end

webox_gameapp

Reactのフロントアプリ．
React コンポーネントで ActionCable チャンネルを購読できるようにするパッケージを使用
https://github.com/cpunion/react-actioncable-provider

画面遷移とページコンポーネント

DB設計(Rails Model)

Room

id	name	created_at	updated_at	user1_id	user2_id	user3_id	user4_id
1	部屋A	.	.	1	2	NULL	NULL
...	...	...	...	...	...	...	...

Card

id	title	created_at	updated_at
1	ロジック・論理	2020-09-26 16:39:24	2020-09-26 16:39:24
2	エモーション・感情	2020-09-26 16:39:24	2020-09-26 16:39:24
3	グローバル	2020-09-26 16:39:24	2020-09-26 16:39:24
...	...	...	...
58	責任感	2020-09-26 16:39:24	2020-09-26 16:39:24
59	最先端	2020-09-26 16:39:24	2020-09-26 16:39:24
60	経験	2020-09-26 16:39:24	2020-09-26 16:39:24

User (Room user*_idと依存関係)

id	name	created_at	updated_at
1	tarou	.	.
2	次郎	.	.
...	...	...	...

UserCard (Card，Userと依存関係)

id	user_id	card_id	created_at	updated_at
1	1	2	.	.
2	1	3	.	.
3	2	17	.	.
4	4	29	.	.
...	...	...	...	...

画面設計

コンポーネント設計

Atomic Designに基づく

開発での考案

User,Roomのテーブルを繋ぐ中間テーブルが必要？

メリット：ゲームの人数に制限がない
Userモデル：　User情報
Roomモデル： 4人以下が所属するRoom
Entryモデル：　どのUserがどのRoomに所属しているか

room.rb

class Room < ApplicationRecord
  has_many :entries, dependent: :destroy
  has_many :room, through: :entries
end

user.rb

class User < ApplicationRecord
  has_many :entries, dependent: :destroy
  has_many :user, through: :entries
end

中間テーブル:entry.rb

class Entry < ApplicationRecord
  belongs_to :user
  belongs_to :room
end