Imrove FE

Author: vtm9

.githooks/pre-commit

@@ -4,7 +4,8 @@ set -euo pipefail
 ROOT_DIR="$(git rev-parse --show-toplevel)"
 cd "$ROOT_DIR"
 
-TARGET_PREFIX="apps/codebattle/assets/js/"
+JS_PREFIX="apps/codebattle/assets/js/"
+SCSS_PREFIX="apps/codebattle/assets/css/"
 APP_DIR="apps/codebattle"
 APP_PREFIX="apps/codebattle/"
 ELIXIR_PATTERN='(^mix\.exs$|^\.formatter\.exs$|^config/.*\.exs$|.*\.(ex|exs)$)'
@@ -14,7 +15,15 @@ while IFS= read -r file; do
   JS_STAGED_FILES+=("$file")
 done < <(
   git diff --cached --name-only --diff-filter=ACMR |
-    grep -E "^${TARGET_PREFIX}.*\\.(js|jsx|ts|tsx)$" || true
+    grep -E "^${JS_PREFIX}.*\\.(js|jsx|ts|tsx)$" || true
+)
+
+SCSS_STAGED_FILES=()
+while IFS= read -r file; do
+  SCSS_STAGED_FILES+=("$file")
+done < <(
+  git diff --cached --name-only --diff-filter=ACMR |
+    grep -E "^${SCSS_PREFIX}.*\\.scss$" || true
 )
 
 ELIXIR_STAGED_FILES=()
@@ -25,7 +34,9 @@ done < <(
     grep -E "${ELIXIR_PATTERN}" || true
 )
 
-if [ "${#JS_STAGED_FILES[@]}" -eq 0 ] && [ "${#ELIXIR_STAGED_FILES[@]}" -eq 0 ]; then
+if [ "${#JS_STAGED_FILES[@]}" -eq 0 ] \
+  && [ "${#SCSS_STAGED_FILES[@]}" -eq 0 ] \
+  && [ "${#ELIXIR_STAGED_FILES[@]}" -eq 0 ]; then
   exit 0
 fi
 
@@ -36,12 +47,23 @@ if [ "${#ELIXIR_STAGED_FILES[@]}" -gt 0 ]; then
 fi
 
 if [ "${#JS_STAGED_FILES[@]}" -gt 0 ]; then
-  APP_FILES=()
+  JS_APP_FILES=()
   for file in "${JS_STAGED_FILES[@]}"; do
-    APP_FILES+=("${file#${APP_PREFIX}}")
+    JS_APP_FILES+=("${file#${APP_PREFIX}}")
   done
 
-  pnpm --dir "$APP_DIR" exec oxfmt --write "${APP_FILES[@]}"
+  pnpm --dir "$APP_DIR" exec oxfmt --write "${JS_APP_FILES[@]}"
+  pnpm --dir "$APP_DIR" exec oxlint --fix "${JS_APP_FILES[@]}" || true
   git add -- "${JS_STAGED_FILES[@]}"
-  pnpm --dir "$APP_DIR" exec oxlint "${APP_FILES[@]}"
+fi
+
+if [ "${#SCSS_STAGED_FILES[@]}" -gt 0 ]; then
+  SCSS_APP_FILES=()
+  for file in "${SCSS_STAGED_FILES[@]}"; do
+    SCSS_APP_FILES+=("${file#${APP_PREFIX}}")
+  done
+
+  pnpm --dir "$APP_DIR" exec prettier --write "${SCSS_APP_FILES[@]}"
+  pnpm --dir "$APP_DIR" exec stylelint --fix "${SCSS_APP_FILES[@]}" || true
+  git add -- "${SCSS_STAGED_FILES[@]}"
 fi

apps/codebattle/assets/js/widgets/pages/groupTournament/EditorPanel.jsx

@@ -14,25 +14,21 @@ function EditorPanel({ text, lang }) {
     fontSize: 14,
     editable: false,
     roomMode: "group_tournament",
-    checkResult: () => { },
-    toggleMuteSound: () => { },
+    checkResult: () => {},
+    toggleMuteSound: () => {},
     mute: false,
     userType: "spectator",
     userId: 0,
-    onChangeCursorSelection: () => { },
-    onChangeCursorPosition: () => { },
+    onChangeCursorSelection: () => {},
+    onChangeCursorPosition: () => {},
     syntax: lang || "javascript",
     gameStartTimeMs: 0,
-    onTelemetryEvent: () => { },
+    onTelemetryEvent: () => {},
     loading: false,
     canSendCursor: false,
   };
 
-  const {
-    options,
-    handleEditorWillMount,
-    handleEditorDidMount,
-  } = useEditor(editorProps);
+  const { options, handleEditorWillMount, handleEditorDidMount } = useEditor(editorProps);
 
   return (
     <div className="card border rounded max-vh-66 h-100">

apps/codebattle/assets/js/widgets/pages/groupTournament/GroupTournamentPageOld.jsx

@@ -366,7 +366,7 @@ function GroupTournamentPage() {
                     {data.groupTournament.name}
                     <span className="cb-text ml-2">{data.groupTournament.state}</span>
                     {data.groupTournament.state === "waiting_participants" &&
-                      timeline.startsInSeconds !== null
+                    timeline.startsInSeconds !== null
                       ? ` • starts in ${formatDuration(timeline.startsInSeconds)}`
                       : ""}
                   </div>

apps/codebattle/assets/js/widgets/pages/groupTournament/Header.jsx

@@ -1,11 +1,7 @@
 import React from "react";
 
 function Header({ status }) {
-  return (
-    <div className="border rounded p-3">
-      {/* Header component placeholder */}
-    </div>
-  );
+  return <div className="border rounded p-3">{/* Header component placeholder */}</div>;
 }
 
 export default Header;

apps/codebattle/assets/js/widgets/pages/groupTournament/LogPanel.jsx

@@ -12,7 +12,9 @@ function LogPanel({ logs, className }) {
           <div className="mt-2 small">
             <ul className="list-unstyled mb-0">
               {logs.slice(0, 3).map((log, idx) => (
-                <li key={idx} className="text-truncate">• {log}</li>
+                <li key={idx} className="text-truncate">
+                  • {log}
+                </li>
               ))}
               {logs.length > 3 && <li>... and {logs.length - 3} more</li>}
             </ul>

apps/codebattle/assets/js/widgets/selectors/index.js

@@ -130,9 +130,9 @@ export const editorDataSelector = (playerId, roomMachineState) => (state) => {
 
   const currentLangSlug =
     roomMachineState &&
-      roomMachineState.matches({
-        replayer: replayerMachineStates.on,
-      })
+    roomMachineState.matches({
+      replayer: replayerMachineStates.on,
+    })
       ? meta.historyCurrentLangSlug
       : meta.currentLangSlug;
 

apps/codebattle/assets/js/widgets/slices/index.js

@@ -1,7 +1,7 @@
 import chat, { actions as chatActions } from "./chat";
 import completedGames, { actions as completedGamesActions } from "./completedGames";
 import editor, { actions as editorActions } from "./editor";
-import groupTournament, { actions as groupTournamentActions } from './groupTournament';
+import groupTournament, { actions as groupTournamentActions } from "./groupTournament";
 import event, { actions as eventActions } from "./event";
 import executionOutput, { actions as executionOutputActions } from "./executionOutput";
 import game, { actions as gameActions } from "./game";