Skip to content

Commit 153dd63

Browse files
H-HpH-Hp
committed
feat: 将棋ページでコメントを誰が打ってるか名前表示
1 parent cf2fe88 commit 153dd63

6 files changed

Lines changed: 64 additions & 23 deletions

File tree

‎app/channels/shogi_game_channel.rb‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,21 +60,27 @@ def board_broadcast_and_store(data)
6060
end
6161

6262
def chat_broadcast_and_store(data)
63-
chat_data = data['chat_data']
63+
chat_text = data['chat_data']
64+
yourUsername = data['yourUsername']
6465
room_id = data['room_id']
6566
game_id = data['game_id']
6667
redis_chat_key = "shogi_game_chat:#{game_id}"
68+
chat_data = {
69+
username: yourUsername,
70+
chat_text: chat_text
71+
}
6772
updated_redis_stored_data=""
6873
if $redis.exists?(redis_chat_key)
69-
$redis.rpush(redis_chat_key, chat_data)
74+
$redis.rpush(redis_chat_key, chat_data.to_json)
7075
$redis.expire(redis_chat_key, DELETE_TIME)#時間経過後に自動削除
7176
updated_redis_stored_data = $redis.lrange(redis_chat_key, 0, -1) #キーをリスト型としてデータ取得
7277
else
73-
$redis.rpush(redis_chat_key, chat_data)
78+
$redis.rpush(redis_chat_key, chat_data.to_json)
7479
$redis.expire(redis_chat_key, DELETE_TIME)#時間経過後に自動削除
7580
updated_redis_stored_data=chat_data
7681
end
7782
# 取得したデータをクライアントにブロードキャスト
83+
puts "updated_redis_stored_data: #{updated_redis_stored_data}"
7884
ActionCable.server.broadcast( "shogi_game_room_#{room_id}",{ data_type: "chat_update", chat_data: updated_redis_stored_data})
7985
end
8086

‎app/controllers/shogi_controller.rb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ def index
2424

2525
battleType = @game_room_data_json["battleType"]
2626
#Rails.logger.info "バトルタイプ: #{battleType}"
27+
@your_user_name = @game_room_data_json["sente_user_name"]
2728

2829
# セッションIDがsenteかgoteかで分岐
2930
if current_session_id == @game_room_data_json["sente_identifier"]

‎app/javascript/components/shogi/index.js‎

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ class Room extends React.Component {
129129
const gamebackPath = element.dataset.gamebackPath;
130130
const loadingimgPath = element.dataset.loadingimgPath;
131131
const audienceUser = element.dataset.audienceUser;
132+
const yourUsername = element.dataset.yourUsername;
132133
//console.log("audienceUser: "+audienceUser)
133134

134135
this.state = {
@@ -140,6 +141,7 @@ class Room extends React.Component {
140141
gameInfo: {},
141142
gameRoomData: gameRoomData,
142143
moveHistory: [],
144+
yourUsername: yourUsername,
143145
nowTurn: '先手',
144146
isConnected: false,
145147
gameId: gameId,
@@ -366,6 +368,7 @@ class Room extends React.Component {
366368
//console.log(`data.chat_data:`, data.chat_data);
367369
if (Array.isArray(data.chat_data)) {//配列かどうかチェック
368370
//最初はdata.chat_dataが"aaa"みたいに配列になっていないので配列に変換してchatMessageに入れる
371+
console.log("data.chat_data: ",data.chat_data)
369372
this.setState({ chatMessages: data.chat_data }, () => {
370373
//console.log("state 更新後:", this.state.chatMessages);
371374
});
@@ -439,6 +442,7 @@ class Room extends React.Component {
439442
//console.log(`sendChatMessageメソッド・chat_data:${chat_data}`);
440443
this.subscription.perform('chat_broadcast_and_store', {
441444
chat_data: chat_data,
445+
yourUsername: this.state.yourUsername,
442446
room_id: this.state.roomId,
443447
game_id: this.state.gameId
444448
});
@@ -963,18 +967,57 @@ class Room extends React.Component {
963967
{(() => {
964968
// もしchatMessagesが文字列の場合、配列に変換
965969
let messages = chatMessages;
966-
if (typeof chatMessages === 'string') {
970+
console.log("messages:",messages)
971+
console.log("typeof chatMessages:",typeof chatMessages)
972+
/*if (typeof chatMessages === 'string') {
967973
messages = chatMessages.split(',').map(msg => msg.trim());// カンマ区切りで文字列を分割
974+
return Array.isArray(messages) ? (
975+
messages.map((message, index) => (
976+
<div key={index} className="chat-message p-2 mb-2 rounded">
977+
<strong>{JSON.parse(message).username}</strong>: {JSON.parse(message).chat_text}
978+
</div>
979+
))
980+
) : (
981+
<p className="text-red-500">メッセージがありません</p>
982+
);
983+
}else if (typeof messages === "object" && messages !== null) {
984+
console.log("messagesgg:"+messages)
985+
// 単一オブジェクトの場合
986+
return (
987+
<div className="chat-message p-2 mb-2 rounded bg-gray-100">
988+
<strong>{messages.username}</strong>: {messages.chat_text}
989+
</div>
990+
);
991+
}*/
992+
let parsedMessages = [];
993+
if (typeof messages === "string") {
994+
try {
995+
parsedMessages = JSON.parse(messages); // 文字列ならパース
996+
} catch (e) {
997+
console.error("JSONパース失敗:", e);
998+
return null;
999+
}
1000+
} else if (Array.isArray(messages)) {
1001+
parsedMessages = messages; // すでに配列ならそのまま
1002+
} else {
1003+
parsedMessages = [messages]; // 単一オブジェクトなら配列に変換
9681004
}
969-
return Array.isArray(messages) ? (
970-
messages.map((message, index) => (
971-
<div key={index} className="chat-message p-2 mb-2 rounded">
972-
{message}
973-
</div>
974-
))
975-
) : (
976-
<p className="text-red-500">メッセージがありません</p>
1005+
console.log("parsedMessages:",parsedMessages)
1006+
1007+
return (
1008+
<>
1009+
{parsedMessages.map((msg, index) => {
1010+
// msgが文字列ならパース、オブジェクトならそのまま使う
1011+
const data = typeof msg === "string" ? JSON.parse(msg) : msg;
1012+
return (
1013+
<div key={index} className="chat-message p-2 mb-2 rounded bg-gray-100">
1014+
<strong>{data.username}</strong>: {data.chat_text}
1015+
</div>
1016+
);
1017+
})}
1018+
</>
9771019
);
1020+
9781021
})()}
9791022
</div>
9801023
<form id="chat-form" className="chat-form" onSubmit={this.handleChatSubmit}>

‎app/javascript/matching.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1043,7 +1043,7 @@ class Matching extends React.Component {
10431043

10441044
return (
10451045
<div>
1046-
<h3 className="text-white">Version4</h3>
1046+
<h3 className="text-white">Version6</h3>
10471047
<h1 className="text-white">
10481048
現在のマッチング人数: {matchingQueueLength}人
10491049
</h1>

‎app/views/matching/game_lobby_matching_board.html.erb‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
<script src="https://cdn.tailwindcss.com"></script>
22
<script src="https://cdn.jsdelivr.net/npm/draggable@4.2.0/dist/draggable.min.js"></script>
3-
4-
<ul>
5-
<% @comments.each do |comment| %>
6-
<li>
7-
<%= comment.content %>
8-
<small>(<%= comment.created_at.strftime("%Y-%m-%d %H:%M:%S") %>)</small>
9-
</li>
10-
<% end %>
11-
</ul>
12-
133
<div id="lobby-container"
144
data-session-id="<%= session.id.to_s %>"
155
data-all-gameroomdatas="<%= @game_room_datas %>"

‎app/views/shogi/index.html.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
data-your-role="<%= @your_role %>"
1616
data-enemy-role="<%= @enemy_role %>"
1717
data-audience-user="<%= @audienceUser %>"
18+
data-your-username="<%= @your_user_name %>"
1819

1920
data-king-path="<%= image_path('shogi/king.png') %>"
2021
data-gyoku-path="<%= image_path('shogi/king2.png') %>"

0 commit comments

Comments
 (0)