Merge branch 'master' of gitlab.prodcontest.ru:team-15/project

services/frontend/src/App.tsx

@@ -1,19 +1,19 @@
 import { Routes, Route } from "react-router";
 import "./styles/globals.css";
-import CompetitionsPage from "./pages/Competitions";
+import Competitions from "./pages/Competitions";
-import CompetitionPage from "./pages/Competition";
+import CompetitionPreview from './pages/CompetitionPreview'
-import CompetitionRunnerPage from "./pages/CompetitionSession";
+import CompetitionSession from "./pages/CompetitionSession";
 import { NavbarLayout } from "./widgets/navbar-layout";
 
 const App = () => {
   return (
     <Routes>
       <Route element={<NavbarLayout />}>
-        <Route path="/" element={<CompetitionsPage />} />
+        <Route path="/" element={<Competitions />} />
-        <Route path="/competitions/:id" element={<CompetitionPage />} />
+        <Route path="/competition/:id" element={<CompetitionPreview />} />
         <Route
-          path="/competitions/:id/tasks/:taskId"
+          path="/competition/:id/tasks/:taskId"
-          element={<CompetitionRunnerPage />}
+          element={<CompetitionSession />}
         />
       </Route>
     </Routes>

services/frontend/src/pages/CompetitionPreview/index.tsx

@@ -1,16 +1,29 @@
+
 import { useState } from "react";
-import { useParams, Link } from "react-router-dom";
+import { useParams, Link, useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { Competition } from "@/shared/types";
-import { mockCompetitions } from "@/shared/mocks/mocks";
+import { mockCompetitions, mockTasks } from "@/shared/mocks/mocks";
 
 const CompetitionPage = () => {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const [competition] = useState<Competition>(
     mockCompetitions.find((comp) => comp.id === id)!,
   );
 
+  const handleContinue = () => {
+    if (competition?.id) {      
+      if (mockTasks && mockTasks.length > 0) {
+        const firstTaskId = mockTasks[0].id;
+        navigate(`/competition/${competition.id}/tasks/${firstTaskId}`);
+      } else {
+        navigate(`/competition/${competition.id}/tasks`);
+      }
+    }
+  };
+
   return (
     <div className="flex flex-col gap-4">
       <Link
@@ -42,7 +55,7 @@ const CompetitionPage = () => {
             </div>
           </div>
           <div className="w-96 *:w-full">
-            <Button>Продолжить</Button>
+            <Button onClick={handleContinue}>Продолжить</Button>
           </div>
         </div>
       </div>

services/frontend/src/pages/CompetitionRunnerPage/index.tsx

@@ -1,150 +0,0 @@
-import { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { Task } from "@/shared/types";
-import { getTaskBgColor, getTaskTextColor } from "./utils/utils";
-import { mockTasks } from "@/shared/mocks/mocks";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "lucide-react";
-
-const CompetitionRunnerPage = () => {
-  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
-  const navigate = useNavigate();
-  const [competitionTitle, setCompetitionTitle] = useState("Олимпиада DANO 2025. Индивидуальный этап");
-  const [tasks] = useState<Task[]>(mockTasks);
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(taskId || null);
-  const [answer, setAnswer] = useState("");
-
-  useEffect(() => {
-    if (taskId) {
-      setSelectedTaskId(taskId);
-    } else if (tasks.length > 0) {
-      navigate(`/competition/${id}/tasks/${tasks[0].id}`, { replace: true });
-    }
-  }, [taskId, tasks, id, navigate]);
-
-  const handleTaskClick = (taskId: string) => {
-    if (selectedTaskId !== taskId) {
-      setSelectedTaskId(taskId);
-      navigate(`/competition/${id}/tasks/${taskId}`);
-    }
-  };
-
-  const currentTask = tasks.find(t => t.id === selectedTaskId);
-  
-  const handleSubmit = () => {
-    console.log("Submitting answer:", answer);
-    // Submit logic here
-  };
-  
-  const handleHistoryClick = () => {
-    console.log("View history");
-  };
-
-  return (
-    <>      
-      <div className="sticky top-0 z-10 bg-white">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="py-3 text-center">
-            <h1 className="text-lg font-semibold font-hse-sans">{competitionTitle}</h1>
-          </div>
-          
-          <div className="flex items-center justify-center gap-2 pb-3 overflow-x-auto no-scrollbar">
-            {tasks.map((task) => (
-              <div 
-                key={task.id}
-                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} 
-                  rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
-                  transition-all hover:brightness-95 flex-shrink-0
-                  ${selectedTaskId === task.id ? 'shadow-md transform scale-105' : ''}`}
-                onClick={() => handleTaskClick(task.id)}
-              >
-                {task.number}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      
-      <div className="bg-[#F8F8F8] min-h-screen pb-8">
-        <div className="max-w-6xl mx-auto px-4 py-6">
-          {currentTask ? (
-            <div className="flex flex-col md:flex-row gap-6 font-hse-sans">
-              {/* Left Container - Task Description */}
-              <div className="flex-1 bg-white rounded-lg p-6">
-                <h2 className="text-xl font-medium mb-4">
-                  Задача {currentTask.number}
-                </h2>
-                
-                <div className="prose max-w-none text-gray-700">
-                  <p>
-                    Рассмотрим последовательность чисел 2, 3, 5, 9, 17, 33, 65, 129, ... 
-                    Каждый член этой последовательности, начиная с третьего, равен сумме двух предыдущих членов.
-                  </p>
-                  <p className="mt-4">
-                    Найдите сумму первых 15 членов этой последовательности.
-                  </p>
-                  <p className="mt-4">
-                    В ответе укажите целое число.
-                  </p>
-                </div>
-              </div>
-              
-              {/* Right Container - Solution Area */}
-              <div className="md:w-[350px] flex flex-col gap-4">
-                {/* Solution Status Card */}
-                <div className={`${getTaskBgColor(currentTask.status)} rounded-lg p-4 relative`}>
-                  <div className="flex flex-col">
-                    <span className={`${getTaskTextColor(currentTask.status)} font-medium`}>
-                      Решение 12345
-                    </span>
-                    <span className={`${getTaskTextColor(currentTask.status)} mt-1`}>
-                      Зачтено 5/10 баллов
-                    </span>
-                  </div>
-                  <div className="absolute bottom-2 right-3 text-xs text-gray-600">
-                    1 марта, 08:41
-                  </div>
-                </div>
-                
-                {/* Answer Input */}
-                <div className="bg-white rounded-lg p-4">
-                  <textarea 
-                    className="w-full h-32 border border-gray-300 rounded-md p-3 font-hse-sans text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    placeholder="Введите ответ"
-                    value={answer}
-                    onChange={(e) => setAnswer(e.target.value)}
-                  />
-                </div>
-                
-                {/* Action Buttons */}
-                <div className="flex gap-3 justify-between">
-                  <Button 
-                    variant="outline" 
-                    className="font-hse-sans"
-                    onClick={handleHistoryClick}
-                  >
-                    История
-                  </Button>
-                  <Button 
-                    className="bg-yellow-400 hover:bg-yellow-500 text-black font-hse-sans"
-                    onClick={handleSubmit}
-                  >
-                    Отправить решение
-                  </Button>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="flex justify-center items-center h-40 bg-white rounded-lg">
-              <p className="font-hse-sans text-gray-500">
-                Загрузка задания...
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default CompetitionRunnerPage;

services/frontend/src/pages/CompetitionSession/index.tsx

@@ -4,18 +4,13 @@ import { Task } from "@/shared/types";
 import { getTaskBgColor, getTaskTextColor } from "./utils/utils";
 import { mockTasks } from "@/shared/mocks/mocks";
 import { Button } from "@/components/ui/button";
-import { Calendar } from "lucide-react";
 
-const CompetitionRunnerPage = () => {
+const CompetitionSessionPage = () => {
   const { id, taskId } = useParams<{ id: string; taskId?: string }>();
   const navigate = useNavigate();
-  const [competitionTitle, setCompetitionTitle] = useState(
+  const [competitionTitle, setCompetitionTitle] = useState("Олимпиада DANO 2025. Индивидуальный этап");
-    "Олимпиада DANO 2025. Индивидуальный этап",
-  );
   const [tasks] = useState<Task[]>(mockTasks);
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(taskId || null);
-    taskId || null,
-  );
   const [answer, setAnswer] = useState("");
 
   useEffect(() => {
@@ -33,7 +28,7 @@ const CompetitionRunnerPage = () => {
     }
   };
 
-  const currentTask = tasks.find((t) => t.id === selectedTaskId);
+  const currentTask = tasks.find(t => t.id === selectedTaskId);
   
   const handleSubmit = () => {
     console.log("Submitting answer:", answer);
@@ -54,11 +49,14 @@ const CompetitionRunnerPage = () => {
             </h1>
           </div>
           
-          <div className="no-scrollbar flex items-center justify-center gap-2 overflow-x-auto pb-3">
+          <div className="flex items-center justify-center gap-2 pb-3 overflow-x-auto no-scrollbar">
             {tasks.map((task) => (
               <div
                 key={task.id}
-                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} font-hse-sans flex-shrink-0 cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-all hover:brightness-95 ${selectedTaskId === task.id ? "scale-105 transform shadow-md" : ""}`}
+                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} 
+                  rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
+                  transition-all hover:brightness-95 flex-shrink-0
+                  ${selectedTaskId === task.id ? 'shadow-md transform scale-105' : ''}`}
                 onClick={() => handleTaskClick(task.id)}
               >
                 {task.number}
@@ -68,56 +66,51 @@ const CompetitionRunnerPage = () => {
         </div>
       </div>
       
-      <div className="min-h-screen bg-[#F8F8F8] pb-8">
+      <div className="bg-[#F8F8F8] min-h-screen pb-8">
-        <div className="mx-auto max-w-6xl px-4 py-6">
+        <div className="max-w-6xl mx-auto px-4 py-6">
           {currentTask ? (
-            <div className="font-hse-sans flex flex-col gap-6 md:flex-row">
+            <div className="flex flex-col md:flex-row gap-6 font-hse-sans">
               {/* Left Container - Task Description */}
-              <div className="flex-1 rounded-lg bg-white p-6">
+              <div className="flex-1 bg-white rounded-lg p-6">
-                <h2 className="mb-4 text-xl font-medium">
+                <h2 className="text-xl font-medium mb-4">
                   Задача {currentTask.number}
                 </h2>
                 
                 <div className="prose max-w-none text-gray-700">
                   <p>
-                    Рассмотрим последовательность чисел 2, 3, 5, 9, 17, 33, 65,
+                    Рассмотрим последовательность чисел 2, 3, 5, 9, 17, 33, 65, 129, ... 
-                    129, ... Каждый член этой последовательности, начиная с
+                    Каждый член этой последовательности, начиная с третьего, равен сумме двух предыдущих членов.
-                    третьего, равен сумме двух предыдущих членов.
                   </p>
                   <p className="mt-4">
                     Найдите сумму первых 15 членов этой последовательности.
                   </p>
-                  <p className="mt-4">В ответе укажите целое число.</p>
+                  <p className="mt-4">
+                    В ответе укажите целое число.
+                  </p>
                 </div>
               </div>
               
               {/* Right Container - Solution Area */}
-              <div className="flex flex-col gap-4 md:w-[350px]">
+              <div className="md:w-[350px] flex flex-col gap-4">
                 {/* Solution Status Card */}
-                <div
+                <div className={`${getTaskBgColor(currentTask.status)} rounded-lg p-4 relative`}>
-                  className={`${getTaskBgColor(currentTask.status)} relative rounded-lg p-4`}
-                >
                   <div className="flex flex-col">
-                    <span
+                    <span className={`${getTaskTextColor(currentTask.status)} font-medium`}>
-                      className={`${getTaskTextColor(currentTask.status)} font-medium`}
-                    >
                       Решение 12345
                     </span>
-                    <span
+                    <span className={`${getTaskTextColor(currentTask.status)} mt-1`}>
-                      className={`${getTaskTextColor(currentTask.status)} mt-1`}
-                    >
                       Зачтено 5/10 баллов
                     </span>
                   </div>
-                  <div className="absolute right-3 bottom-2 text-xs text-gray-600">
+                  <div className="absolute bottom-2 right-3 text-xs text-gray-600">
                     1 марта, 08:41
                   </div>
                 </div>
                 
                 {/* Answer Input */}
-                <div className="rounded-lg bg-white p-4">
+                <div className="bg-white rounded-lg p-4">
                   <textarea 
-                    className="font-hse-sans h-32 w-full rounded-md border border-gray-300 p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className="w-full h-32 border border-gray-300 rounded-md p-3 font-hse-sans text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="Введите ответ"
                     value={answer}
                     onChange={(e) => setAnswer(e.target.value)}
@@ -125,7 +118,7 @@ const CompetitionRunnerPage = () => {
                 </div>
                 
                 {/* Action Buttons */}
-                <div className="flex justify-between gap-3">
+                <div className="flex gap-3 justify-between">
                   <Button 
                     variant="outline" 
                     className="font-hse-sans"
@@ -134,7 +127,7 @@ const CompetitionRunnerPage = () => {
                     История
                   </Button>
                   <Button 
-                    className="font-hse-sans bg-yellow-400 text-black hover:bg-yellow-500"
+                    className="bg-yellow-400 hover:bg-yellow-500 text-black font-hse-sans"
                     onClick={handleSubmit}
                   >
                     Отправить решение
@@ -143,8 +136,10 @@ const CompetitionRunnerPage = () => {
               </div>
             </div>
           ) : (
-            <div className="flex h-40 items-center justify-center rounded-lg bg-white">
+            <div className="flex justify-center items-center h-40 bg-white rounded-lg">
-              <p className="font-hse-sans text-gray-500">Загрузка задания...</p>
+              <p className="font-hse-sans text-gray-500">
+                Загрузка задания...
+              </p>
             </div>
           )}
         </div>
@@ -153,4 +148,4 @@ const CompetitionRunnerPage = () => {
   );
 };
 
-export default CompetitionRunnerPage;
+export default CompetitionSessionPage;

services/frontend/src/pages/CompetitionSession/utils/utils.ts

@@ -1,5 +1,4 @@
-import { TaskStatus } from "@/shared/types/types";
+import { TaskStatus } from "@/shared/types";
-
 const getTaskBgColor = (status: TaskStatus): string => {
   switch (status) {
     case "uncleared": return "bg-[var(--color-task-uncleared)]";

services/frontend/src/pages/Competitions/components/CompetitionCard/index.tsx

@@ -1,7 +1,6 @@
 import { Competition, CompetitionStatus } from "@/shared/types";
 import { cn } from "@/shared/lib/utils";
 import { Card, CardContent } from "@/components/ui/card";
-import { useNavigate } from "react-router";
 
 interface CompetitionCardProps {
   competition: Competition;
@@ -12,11 +11,6 @@ export function CompetitionCard({
   competition,
   className,
 }: CompetitionCardProps) {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate(`/competition/${competition.id}`);
-  };
 
   return (
     <Card
@@ -24,7 +18,6 @@ export function CompetitionCard({
         "aspect-square h-full max-h-80 w-auto overflow-hidden",
         className,
       )}
-      onClick={handleClick}
     >
       <div className="relative h-full overflow-hidden">
         <img

services/frontend/src/pages/Competitions/modules/CompetitionGrid/index.tsx

@@ -10,7 +10,7 @@ export function CompetitionGrid({ competitions }: CompetitionGridProps) {
   return (
     <div className="grid grid-cols-3 gap-9">
       {competitions.map((competition) => (
-        <Link key={competition.id} to={`/competitions/${competition.id}`}>
+        <Link key={competition.id} to={`/competition/${competition.id}`}>
           <CompetitionCard competition={competition} />
         </Link>
       ))}