feat: ロビーで匿名で好きなコメントを書ける機能を追加

Author: H-Hp

app/assets/stylesheets/chat.css

@@ -0,0 +1,128 @@
+/* chat-messages */
+.chat-messages {
+  flex: 1; 
+  flex-grow: 1;
+  padding: 5px;
+  padding-left: 20px;
+  overflow-y: auto;/* 縦スクロールを有効 */
+  overflow-x: hidden; /* 横スクロールは無効 */
+  /*background-color: #eef1f5;*/
+  /*display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 1px;*/
+   /* align-items: flex-end;  交差軸（縦方向）の終端に寄せる（右下隅にしたい場合） */
+  /*max-height: 300px;
+  height:100px;*/
+  max-height: calc(100% - 80px); /* フォームの高さ分を差し引く */
+}
+.chat-message {
+    margin-bottom: 0; /* gapで間隔を制御するためmarginを削除 */
+    padding: 10px;
+    border-radius: 5px;
+    max-width: 80%; /* メッセージの最大幅を制限 */
+    word-wrap: break-word; /* 長い文字列を折り返し */
+    align-self: flex-start; /* 個別に左寄せを確実にする */
+    flex-shrink: 0; /* メッセージが縮まないようにする */
+}
+/* chat-form */
+.chat-form {
+  margin: 0;
+  display: flex;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+  background-color: #ffffff;
+}
+/* chat-input */
+.chat-input {
+  flex: 1;
+  flex-grow: 1;
+  padding: 10px 12px;
+  border: 1px solid #c9c9c9;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  margin-right: 10px;
+  outline: none;
+}
+
+.chat-input::placeholder {
+  color: #a0a0a0;
+}
+
+/* chat-button */
+.chat-button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+.chat-button:hover {
+  background-color: #0056b3;
+}
+.chat-button:active {
+  background-color: #004085;
+}
+
+
+/* 非表示時のチャットコンテナのスタイル */
+.chat-container.closed {
+  transform: translateX(calc(100% - 20px)); /* 右端に隠れるように移動 (ボタンの幅に合わせて調整) */
+  /*opacity: 0.5;  半透明にする */
+  pointer-events: none; /* クリックイベントを無効にする */
+}
+/* 開閉ボタンのスタイル */
+.chat-toggle-button {
+  position: absolute;
+  left: -15px;
+  width: 32px;
+  height: 32px;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  z-index: 10; /* メッセージより上に表示 */
+  transition: background-color 0.2s;
+  /*position: fixed; 
+  bottom: 30px;   
+  right: 20px;    
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 50%; 
+  width: 40px;
+  height: 40px;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1001;*/ /* チャットコンテナ (z-index: 1000) より手前に */
+}
+/* ボタンがチャットコンテナの隣に位置する場合のスタイル調整 */
+.chat-container.closed + .chat-toggle-button {
+    right: 20px; /* チャットコンテナが閉じている時はボタンが右端に */
+}
+.chat-container:not(.closed) + .chat-toggle-button {
+    /* チャットコンテナが開いている時はボタンをチャットコンテナの左端近くに */
+    /* chat-containerの幅(20vw)からボタンの幅(40px)を引いて、右端からの位置を計算 */
+    /*right: calc(20vw + 20px);*/
+    right: calc(0vw + 20px);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in {
+  animation: fadeIn 0.8s ease-out forwards;
+}

app/assets/stylesheets/game_lobby_matching_board.css

@@ -15,7 +15,22 @@
     100% { transform: rotate(360deg); }
   }
 
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  bottom: 0px;
+  right: 0px;
+  height: 50vh;  /* ビューポートの高さの50% */
+
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-family: Arial, sans-serif;
+  background-color: #f9f9f9;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* アニメーションを追加 */
+  position: relative;
+}
 
 
 .btn {

app/assets/stylesheets/shogi.css

@@ -204,135 +204,3 @@ img#後手 {
 
 
 
-/*チャット*/
-
-/* chat-messages */
-.chat-messages {
-  flex: 1; 
-  flex-grow: 1;
-  padding: 5px;
-  padding-left: 20px;
-  overflow-y: auto;/* 縦スクロールを有効 */
-  overflow-x: hidden; /* 横スクロールは無効 */
-  /*background-color: #eef1f5;*/
-  /*display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-  gap: 1px;*/
-   /* align-items: flex-end;  交差軸（縦方向）の終端に寄せる（右下隅にしたい場合） */
-  /*max-height: 300px;
-  height:100px;*/
-  max-height: calc(100% - 80px); /* フォームの高さ分を差し引く */
-}
-.chat-message {
-    margin-bottom: 0; /* gapで間隔を制御するためmarginを削除 */
-    padding: 10px;
-    border-radius: 5px;
-    max-width: 80%; /* メッセージの最大幅を制限 */
-    word-wrap: break-word; /* 長い文字列を折り返し */
-    align-self: flex-start; /* 個別に左寄せを確実にする */
-    flex-shrink: 0; /* メッセージが縮まないようにする */
-}
-/* chat-form */
-.chat-form {
-  margin: 0;
-  display: flex;
-  padding: 10px;
-  border-top: 1px solid #ddd;
-  background-color: #ffffff;
-}
-/* chat-input */
-.chat-input {
-  flex: 1;
-  flex-grow: 1;
-  padding: 10px 12px;
-  border: 1px solid #c9c9c9;
-  border-radius: 20px;
-  font-size: 0.9rem;
-  margin-right: 10px;
-  outline: none;
-}
-
-.chat-input::placeholder {
-  color: #a0a0a0;
-}
-
-/* chat-button */
-.chat-button {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 20px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-}
-.chat-button:hover {
-  background-color: #0056b3;
-}
-.chat-button:active {
-  background-color: #004085;
-}
-
-
-/* 非表示時のチャットコンテナのスタイル */
-.chat-container.closed {
-  transform: translateX(calc(100% - 20px)); /* 右端に隠れるように移動 (ボタンの幅に合わせて調整) */
-  /*opacity: 0.5;  半透明にする */
-  pointer-events: none; /* クリックイベントを無効にする */
-}
-/* 開閉ボタンのスタイル */
-.chat-toggle-button {
-  position: absolute;
-  left: -15px;
-  width: 32px;
-  height: 32px;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  z-index: 10; /* メッセージより上に表示 */
-  transition: background-color 0.2s;
-  /*position: fixed; 
-  bottom: 30px;   
-  right: 20px;    
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 50%; 
-  width: 40px;
-  height: 40px;
-  font-size: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  z-index: 1001;*/ /* チャットコンテナ (z-index: 1000) より手前に */
-}
-/* ボタンがチャットコンテナの隣に位置する場合のスタイル調整 */
-.chat-container.closed + .chat-toggle-button {
-    right: 20px; /* チャットコンテナが閉じている時はボタンが右端に */
-}
-.chat-container:not(.closed) + .chat-toggle-button {
-    /* チャットコンテナが開いている時はボタンをチャットコンテナの左端近くに */
-    /* chat-containerの幅(20vw)からボタンの幅(40px)を引いて、右端からの位置を計算 */
-    /*right: calc(20vw + 20px);*/
-    right: calc(0vw + 20px);
-}
-
-
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.animate-fade-in {
-  animation: fadeIn 0.8s ease-out forwards;
-}

app/channels/matching_channel.rb

@@ -22,6 +22,28 @@ def unsubscribed
     Rails.logger.info "MatchingStatusChannel が解除されました。#{params[:identifier]}"
   end
 
+  def chat_save_and_broadcast(data)
+    chat_data = data['chat_data']
+    @comment = LobbyComment.new( content: chat_data )
+    if @comment.save
+      #レコードは10件まで保存でき、データが追加されると古いものから順に消す
+      comments_record_count = LobbyComment.count # 現在のレコード数を取得
+      if comments_record_count > 10 # レコード数が10件を超えた場合
+        #oldest_comments = LobbyComment.order(created_at: :asc).offset(10) # 作成日時が古いものから数えて、余分なレコードを取得・ oldest_commentsは、created_atで昇順に並べたレコードの11件目以降を取得
+        oldest_comments = LobbyComment.order(created_at: :desc).offset(10) # 作成日時が古いものから数えて、余分なレコードを取得・ oldest_commentsは、created_atで昇順に並べたレコードの11件目以降を取得
+        puts "oldest_comments: #{oldest_comments}"
+        oldest_comments.each do |comment| # 取得したレコードをすべて削除
+          puts "oldest_comment: #{comment}"
+          comment.destroy
+        end
+      end
+      updated_db_stored_data = LobbyComment.order(created_at: :desc)
+      ActionCable.server.broadcast( "matching_status",{ data_type: "chat_update", chat_data: updated_db_stored_data.to_json}) # 取得したデータをクライアントにブロードキャスト
+    else
+      Rails.logger.info "チャットセーブ失敗"
+    end
+  end
+
   #相手に一応マッチ成功の通知
   def reNotificationEnemy(data)
     game_room_data = data['game_room_data']

app/channels/shogi_game_channel.rb

@@ -50,11 +50,6 @@ def board_broadcast_and_store(data)
 
     redis_key = "shogi_game:#{@game_id}"
     routing_key = "game.#{@room_id}.board_update"
-
-    #Rails.logger.info "Redisに値をセット・new_data： #{new_board_data}"
-    #Rails.logger.info "BoardInfo： #{boardInfo}"
-    #Rails.logger.info "@room_id： #{@room_id}・@game_id： #{@game_id}・redis_key： #{redis_key}"
-
     $redis.set(redis_key, new_board_data.to_json)#Redisに値をセット
     $redis.expire(redis_key, 10) #時間経過後に自動削除
 
@@ -71,12 +66,6 @@ def chat_broadcast_and_store(data)
     redis_chat_key = "shogi_game_chat:#{game_id}"
     updated_redis_stored_data=""
     if $redis.exists?(redis_chat_key)
-      #redis_stored_data = $redis.get(redis_chat_key)
-      #Rails.logger.info "チャット・chat_data： #{redichat_datas_stored_data}"
-      #parsed_redis_stored_data = JSON.parse(redis_stored_data)#JSON文字列をRubyのハッシュにパース
-      #parsed_redis_stored_data["chatMessages"] = chat_data# 既存のハッシュにチャットデータを追加/ここでは、chatMessagesという新しいキーでチャットデータを追加します。
-      #updated_redis_stored_data = parsed_redis_stored_data.to_json#更新されたハッシュを再度JSON文字列に変換（必要に応じて）
-      #$redis.set(redis_chat_key,updated_redis_stored_data)#Redisに値をセット
       $redis.rpush(redis_chat_key, chat_data)
       $redis.expire(redis_chat_key, DELETE_TIME)#時間経過後に自動削除
       updated_redis_stored_data = $redis.lrange(redis_chat_key, 0, -1) #キーをリスト型としてデータ取得

app/controllers/matching_controller.rb

@@ -10,6 +10,12 @@ def game_lobby_matching_board
     zeitwerk_enabled = Rails.autoloaders.zeitwerk_enabled?# Zeitwerkモードが有効化されているかを取得
     Rails.logger.info "Zeitwerk enabled: #{zeitwerk_enabled}"
 
+    #@comments = LobbyComment.all.to_json
+    @comments = LobbyComment.order(created_at: :desc)
+    puts "@comments: #{@comments}"
+    #puts "@comments: #{@comments.to_json}"
+    
+
     @matching_queue_length = $redis.llen(MATCHING_QUEUE_KEY)#現在のマッチング待ち人数を確認・キューの長さを確認
     @matching_queue_data = $redis.lrange(MATCHING_QUEUE_KEY, 0, -1)# 既存のキューから全てのデータを取得
 
@@ -302,9 +308,24 @@ def contacts
     end
   end
 
+=begin
+  def lobby_comment_create
+    @comment = LobbyComment.new(lobby_comment_params)
+    if @comment.save
+      render json: @comment, status: :created
+    else
+      render json: @comment.errors, status: :unprocessable_entity
+    end
+  end
+=end
   private
 
   def contact_params
     params.require(:contact).permit(:message)
   end
+=begin
+  def lobby_comment_params
+    params.require(:lobby_comment).permit(:content)
+  end
+=end
 end

app/javascript/components/shogi/index.js

@@ -616,7 +616,6 @@ class Room extends React.Component {
       alert("チャットサーバーに接続されていません。");
     }
   }
-  
   //チャットの開閉の表示を切り替えるメソッド
   toggleChat() {
     this.setState(prevState => ({