Add tournament sound

vtm9 · vtm9 · commit 5b46376f7318 · 2026-01-19T20:17:15.000+01:00
diff --git a/services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx
@@ -26,6 +26,7 @@ const preloadedState = {
       soundSettings: {
         type: 'standard',
         level: 6,
+        tournamentLevel: 4,
       },
       id: 11,
       name: 'Diman',
@@ -104,6 +105,7 @@ describe('UserSettings test cases', () => {
           style_lang: '',
           sound_settings: {
             level: 6,
+            tournament_level: 4,
             type: 'standard',
           },
         },
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/tournamentSounds.js b/services/app/apps/codebattle/assets/js/widgets/config/tournamentSounds.js
@@ -0,0 +1,8 @@
+const tournamentSounds = {
+  started: '/assets/audio/tournament/tournament_start.wav',
+  roundStarted: '/assets/audio/tournament/round_start.wav',
+  roundFinished: '/assets/audio/tournament/round_finish.wav',
+  finished: '/assets/audio/tournament/tournament_finish.wav',
+};
+
+export default tournamentSounds;
diff --git a/services/app/apps/codebattle/assets/js/widgets/lib/sound.js b/services/app/apps/codebattle/assets/js/widgets/lib/sound.js
@@ -23,13 +23,28 @@ const audioConfigs = {
 const soundSettings = Gon.getAsset('current_user').sound_settings;
 const soundType = soundSettings.type;
 const defaultSoundLevel = soundSettings.level * 0.1;
+const tournamentSoundLevel = isUndefined(soundSettings.tournament_level)
+  ? defaultSoundLevel
+  : soundSettings.tournament_level * 0.1;
 
 const audio = (type = soundType, volume = defaultSoundLevel) => new Howl({
   src: audioPaths[type],
   sprite: audioConfigs[type]?.sprite,
   volume,
 });
 
+const assetPlayers = {};
+const getAssetPlayer = (path) => {
+  if (!assetPlayers[path]) {
+    assetPlayers[path] = new Howl({
+      src: path,
+      volume: defaultSoundLevel,
+    });
+  }
+
+  return assetPlayers[path];
+};
+
 const sound = {
   play: (type, soundLevel) => {
     const isMute = JSON.parse(localStorage.getItem('ui_mute_sound') || false);
@@ -38,6 +53,20 @@ const sound = {
     Howler.volume(isUndefined(soundLevel) ? defaultSoundLevel : soundLevel);
     soundEffect.play(type);
   },
+  playAsset: (path, soundLevel) => {
+    const isMute = JSON.parse(localStorage.getItem('ui_mute_sound') || false);
+    if (soundType === 'silent' || isMute) return;
+    Howler.volume(isUndefined(soundLevel) ? defaultSoundLevel : soundLevel);
+    getAssetPlayer(path).play();
+  },
+  playTournamentAsset: (path) => {
+    const isMute = JSON.parse(localStorage.getItem('ui_mute_sound') || false);
+    if (soundType === 'silent' || isMute) return;
+    Howler.volume(tournamentSoundLevel);
+    const player = getAssetPlayer(path);
+    player.volume(1);
+    player.play();
+  },
   stop: () => Howler.stop(),
   toggle: (volume = defaultSoundLevel) => {
     Howler.volume(volume);
diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/game.js b/services/app/apps/codebattle/assets/js/widgets/machines/game.js
@@ -4,6 +4,7 @@ import { channelTopics } from '../../socket';
 import GameStateCodes from '../config/gameStateCodes';
 import speedModes from '../config/speedModes';
 import subscriptionTypes from '../config/subscriptionTypes';
+import tournamentSounds from '../config/tournamentSounds';
 import sound from '../lib/sound';
 
 const { send } = actions;
@@ -380,8 +381,12 @@ export const config = {
     soundTimeIsOver: () => {
       sound.play('time_is_over');
     },
-    soundTournamentRoundCreated: () => {
-      sound.play('round_created');
+    soundTournamentRoundCreated: (_ctx, { payload }) => {
+      if (payload?.tournament?.currentRoundPosition === 0) {
+        sound.playTournamentAsset(tournamentSounds.started);
+      } else {
+        sound.playTournamentAsset(tournamentSounds.roundStarted);
+      }
     },
     soundRematchUpdateStatus: () => { },
     blockGameRoomAfterCheck: () => { },
diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/spectator.js b/services/app/apps/codebattle/assets/js/widgets/machines/spectator.js
@@ -1,6 +1,7 @@
 import { assign, actions } from 'xstate';
 
 import GameStateCodes from '../config/gameStateCodes';
+import tournamentSounds from '../config/tournamentSounds';
 import sound from '../lib/sound';
 
 import editor, { config as editorConfig } from './editor';
@@ -195,8 +196,12 @@ export const config = {
     soundTimeIsOver: () => {
       sound.play('time_is_over');
     },
-    soundTournamentRoundCreated: () => {
-      sound.play('round_created');
+    soundTournamentRoundCreated: (_ctx, { payload }) => {
+      if (payload?.tournament?.currentRoundPosition === 0) {
+        sound.playTournamentAsset(tournamentSounds.started);
+      } else {
+        sound.playTournamentAsset(tournamentSounds.roundStarted);
+      }
     },
     soundRematchUpdateStatus: () => { },
     blockGameRoomAfterCheck: () => { },
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js
@@ -6,7 +6,10 @@ import groupBy from 'lodash/groupBy';
 
 import { PanelModeCodes } from '@/pages/tournament/ControlPanel';
 
+import TournamentStates from '../config/tournament';
+import tournamentSounds from '../config/tournamentSounds';
 import TournamentTypes from '../config/tournamentTypes';
+import sound from '../lib/sound';
 import { actions } from '../slices';
 
 import Channel from './Channel';
@@ -64,6 +67,7 @@ const initTournamentChannel = (currentChannel) => (dispatch) => {
 export const connectToTournament = (newTournamentId) => (dispatch) => {
     setTournamentChannel(newTournamentId);
     initTournamentChannel(channel)(dispatch);
+    let lastRoundPosition = 0;
 
     const handleUpdate = (response) => {
       dispatch(actions.updateTournamentData(response.tournament));
@@ -87,21 +91,33 @@ export const connectToTournament = (newTournamentId) => (dispatch) => {
     };
 
     const handleTournamentRoundCreated = (response) => {
+      const currentRoundPosition = response.tournament?.currentRoundPosition || lastRoundPosition;
+      const isFirstRound = currentRoundPosition === 0;
+      lastRoundPosition = currentRoundPosition;
+
+      if (isFirstRound) {
+        sound.playTournamentAsset(tournamentSounds.started);
+      } else {
+        sound.playTournamentAsset(tournamentSounds.roundStarted);
+      }
       dispatch(actions.updateTournamentData(response.tournament));
     };
 
     const handleRoundFinished = (response) => {
+      if (response.tournament?.state !== TournamentStates.finished) {
+        sound.playTournamentAsset(tournamentSounds.roundFinished);
+      }
       dispatch(
         actions.updateTournamentData({
           ...response.tournament,
-          topPlayerIds: response.topPlayerIds,
+          topPlayerIds: response.topPlayerIds || [],
           playersPageNumber: 1,
           playersPageSize: 20,
         }),
       );
 
-      dispatch(actions.updateTournamentPlayers(compact(response.players)));
-      dispatch(actions.updateTopPlayers(compact(response.players)));
+      dispatch(actions.updateTournamentPlayers(compact(response.players || [])));
+      dispatch(actions.updateTopPlayers(compact(response.players || [])));
     };
 
     const handleTournamentRestarted = (response) => {
@@ -133,6 +149,7 @@ export const connectToTournament = (newTournamentId) => (dispatch) => {
     };
 
     const handleTournamentFinished = (response) => {
+      sound.playTournamentAsset(tournamentSounds.finished);
       dispatch(actions.updateTournamentData(response.tournament));
     };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/TournamentAdmin.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/TournamentAdmin.js
@@ -3,6 +3,9 @@ import Gon from 'gon';
 import { camelizeKeys } from 'humps';
 import compact from 'lodash/compact';
 
+import TournamentStates from '../config/tournament';
+import tournamentSounds from '../config/tournamentSounds';
+import sound from '../lib/sound';
 import { actions } from '../slices';
 
 import Channel from './Channel';
@@ -36,6 +39,7 @@ const initTournamentChannel = (dispatch, isAdminWidged = false) => {
           ranking: response.ranking || { entries: [] },
           players: {},
           playersPageSize: 20,
+          channel: { online: true },
         }),
       );
     }
@@ -59,6 +63,7 @@ const initTournamentChannel = (dispatch, isAdminWidged = false) => {
 export const connectToTournament = (newTournamentId, isAdminWidged = false) => (dispatch) => {
     setTournamentChannel(newTournamentId);
     initTournamentChannel(dispatch, isAdminWidged);
+    let lastRoundPosition = 0;
 
     const handleUpdate = (response) => {
       dispatch(actions.updateTournamentData(response.tournament));
@@ -93,21 +98,33 @@ export const connectToTournament = (newTournamentId, isAdminWidged = false) => (
     };
 
     const handleTournamentRoundCreated = (response) => {
+      const currentRoundPosition = response.tournament?.currentRoundPosition || lastRoundPosition;
+      const isFirstRound = currentRoundPosition === 0;
+      lastRoundPosition = currentRoundPosition;
+
+      if (isFirstRound) {
+        sound.playTournamentAsset(tournamentSounds.started);
+      } else {
+        sound.playTournamentAsset(tournamentSounds.roundStarted);
+      }
       dispatch(actions.updateTournamentData(response.tournament));
     };
 
     const handleRoundFinished = (response) => {
+      if (response.tournament?.state !== TournamentStates.finished) {
+        sound.playTournamentAsset(tournamentSounds.roundFinished);
+      }
       dispatch(
         actions.updateTournamentData({
           ...response.tournament,
-          topPlayerIds: response.topPlayerIds,
+          topPlayerIds: response.topPlayerIds || [],
           playersPageNumber: 1,
           playersPageSize: 20,
         }),
       );
 
-      dispatch(actions.updateTournamentPlayers(compact(response.players)));
-      dispatch(actions.updateTopPlayers(compact(response.players)));
+      dispatch(actions.updateTournamentPlayers(compact(response.players || [])));
+      dispatch(actions.updateTopPlayers(compact(response.players || [])));
     };
 
     const handleTournamentRestarted = (response) => {
@@ -139,6 +156,7 @@ export const connectToTournament = (newTournamentId, isAdminWidged = false) => (
     };
 
     const handleTournamentFinished = (response) => {
+      sound.playTournamentAsset(tournamentSounds.finished);
       dispatch(actions.updateTournamentData(response.tournament));
     };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx
@@ -119,6 +119,7 @@ function UserSettingsForm({ onSubmit, settings }) {
       soundSettings: {
         type: settings.soundSettings.type,
         level: settings.soundSettings.level,
+        tournamentLevel: settings.soundSettings.tournamentLevel ?? settings.soundSettings.level,
       },
       clan: settings.clan || '',
       langView: views.code,
@@ -293,6 +294,25 @@ function UserSettingsForm({ onSubmit, settings }) {
             <Icon.Volume2 />
           </div>
 
+          <div className="h6 ml-2">Select tournament sound level</div>
+          <div className="ml-2 mb-3 d-flex align-items-center">
+            <Icon.VolumeX />
+            <Field
+              component={Slider}
+              type="range"
+              min={0}
+              max={10}
+              name="soundSettings.tournamentLevel"
+              disabled={values.soundSettings.type === 'silent'}
+              onInput={(e) => {
+                handleChange(e);
+                playSound(values.soundSettings.type, e.target.value * 0.1);
+              }}
+              className="ml-3 mr-3 form-control"
+            />
+            <Icon.Volume2 />
+          </div>
+
           <div className="d-flex justify-content-center">
             <button
               disabled={!dirty || !isValid}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Tournament.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Tournament.jsx
@@ -154,11 +154,11 @@ function Tournament() {
   ]);
 
   useEffect(() => {
-    const tournamentChannel = connectToTournament(tournament?.id)(dispatch);
+    const tournamentChannel = dispatch(connectToTournament(tournament?.id));
 
     if (canModerate) {
-      const tournamentAdminChannel = connectToTournamentAdmin(tournament?.id)(
-        dispatch,
+      const tournamentAdminChannel = dispatch(
+        connectToTournamentAdmin(tournament?.id, true),
       );
 
       return () => {
@@ -299,7 +299,7 @@ function Tournament() {
             breakState={tournament.breakState}
             currentUserId={currentUserId}
             isLive={tournament.isLive}
-            isOnline={tournament.channel.online}
+            isOnline={tournament.channel?.online ?? false}
             isOver={isOver}
             canModerate={canModerate}
             lastRoundEndedAt={tournament.lastRoundEndedAt}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournamentPlayer/TournamentPlayer.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournamentPlayer/TournamentPlayer.jsx
@@ -236,7 +236,7 @@ function TournamentPlayer({ spectatorMachine }) {
 
   useEffect(() => {
     if (tournament.id) {
-      const channel = connectToTournament(tournament.id)(dispatch);
+      const channel = dispatch(connectToTournament(tournament.id));
 
       return () => {
         channel.leave();
diff --git a/services/app/apps/codebattle/assets/static/audio/tournament/round_finish.wav b/services/app/apps/codebattle/assets/static/audio/tournament/round_finish.wav
diff --git a/services/app/apps/codebattle/assets/static/audio/tournament/round_start.wav b/services/app/apps/codebattle/assets/static/audio/tournament/round_start.wav
diff --git a/services/app/apps/codebattle/assets/static/audio/tournament/tournament_finish.wav b/services/app/apps/codebattle/assets/static/audio/tournament/tournament_finish.wav
diff --git a/services/app/apps/codebattle/assets/static/audio/tournament/tournament_start.wav b/services/app/apps/codebattle/assets/static/audio/tournament/tournament_start.wav
diff --git a/services/app/apps/codebattle/lib/codebattle/user/sound_settings.ex b/services/app/apps/codebattle/lib/codebattle/user/sound_settings.ex
@@ -8,17 +8,19 @@ defmodule Codebattle.User.SoundSettings do
 
   @types ~w(cs dendy standard silent)
 
-  @derive {Jason.Encoder, only: [:level, :type]}
+  @derive {Jason.Encoder, only: [:level, :tournament_level, :type]}
 
   embedded_schema do
     field(:level, :integer, default: 7)
+    field(:tournament_level, :integer, default: 7)
     field(:type, :string, default: "dendy")
   end
 
   def changeset(struct, params) do
     struct
-    |> cast(params, [:level, :type])
+    |> cast(params, [:level, :tournament_level, :type])
     |> validate_number(:level, greater_than_or_equal_to: 0, less_than_or_equal_to: 10)
+    |> validate_number(:tournament_level, greater_than_or_equal_to: 0, less_than_or_equal_to: 10)
     |> validate_inclusion(:type, @types)
   end
 end
diff --git a/services/app/apps/codebattle/lib/codebattle_web/controllers/ext_api/user_controller.ex b/services/app/apps/codebattle/lib/codebattle_web/controllers/ext_api/user_controller.ex
@@ -10,7 +10,7 @@ defmodule CodebattleWeb.ExtApi.UserController do
   plug(CodebattleWeb.Plugs.TokenAuth)
 
   @default_settings %{
-    sound_settings: %{level: 0, type: "silent"},
+    sound_settings: %{level: 0, tournament_level: 7, type: "silent"},
     subscription_type: "premium"
   }
 
diff --git a/services/app/apps/codebattle/test/codebattle_web/controllers/api/v1/settings_controller_test.exs b/services/app/apps/codebattle/test/codebattle_web/controllers/api/v1/settings_controller_test.exs
@@ -28,7 +28,7 @@ defmodule CodebattleWeb.Api.V1.SettingsControllerTest do
                "lang" => "dart",
                "locale" => "en",
                "clan" => "abc",
-               "sound_settings" => %{"level" => 7, "type" => "dendy"},
+               "sound_settings" => %{"level" => 7, "tournament_level" => 7, "type" => "dendy"},
                "db_type" => "mongodb",
                "style_lang" => "less",
                "github_id" => 1,
@@ -45,7 +45,7 @@ defmodule CodebattleWeb.Api.V1.SettingsControllerTest do
         "name" => "evgen",
         "clan" => "  Bca  ",
         "locale" => "ru",
-        "sound_settings" => %{"level" => 3, "type" => "cs"},
+        "sound_settings" => %{"level" => 3, "tournament_level" => 8, "type" => "cs"},
         "db_type" => "postgresql",
         "style_lang" => "css",
         "lang" => "ruby"
@@ -63,6 +63,7 @@ defmodule CodebattleWeb.Api.V1.SettingsControllerTest do
       updated = Repo.get!(Codebattle.User, user.id)
 
       assert updated.sound_settings.level == 3
+      assert updated.sound_settings.tournament_level == 8
       assert updated.sound_settings.type == "cs"
       assert updated.clan == "Bca"
       assert updated.clan_id == clan.id
diff --git a/services/app/apps/codebattle/test/codebattle_web/controllers/ext_api/user_controller_test.exs b/services/app/apps/codebattle/test/codebattle_web/controllers/ext_api/user_controller_test.exs
@@ -32,7 +32,13 @@ defmodule CodebattleWeb.ExtApi.UserControllerTest do
       assert "asdf" == user.external_oauth_id
       assert 1 == clan.creator_id
       assert user.clan_id == clan.id
-      assert user.sound_settings == %User.SoundSettings{level: 0, type: "silent"}
+
+      assert user.sound_settings == %User.SoundSettings{
+               level: 0,
+               tournament_level: 7,
+               type: "silent"
+             }
+
       assert user.subscription_type == :premium
     end
 
