feat: continued working on competition runner page

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

@@ -36,10 +36,8 @@ const CompetitionPreview = () => {
 
   const handleContinue = () => {
     if (competition?.id) {      
-      const competitionTasks = mockTasks[competition.id];
-      
-      if (competitionTasks && competitionTasks.length > 0) {
-        const firstTaskId = competitionTasks[0].id;
+      if (mockTasks && mockTasks.length > 0) {
+        const firstTaskId = mockTasks[0].id;
         navigate(`/competition/${competition.id}/tasks/${firstTaskId}`);
       } else {
         navigate(`/competition/${competition.id}/tasks`);

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

@@ -1,69 +1,61 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
-import Navbar from "@/modules/Navbar";
-import { Task, TaskStatus } from "@/shared/types/types";
-
-
-
-const sampleTasks: Task[] = [
-  { id: "1", number: "1.1", status: "uncleared" },
-  { id: "2", number: "1.2", status: "checking" },
-  { id: "3", number: "1.3", status: "correct" },
-  { id: "4", number: "2.1", status: "partial" },
-  { id: "5", number: "2.2", status: "wrong" },
-  { id: "6", number: "2.3", status: "uncleared" },
-  { id: "7", number: "3.1", status: "checking" },
-  { id: "8", number: "3.2", status: "correct" },
-];
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Task } from "@/shared/types/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 } = useParams<{ id: string }>();
+  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
+  const navigate = useNavigate();
   const [competitionTitle, setCompetitionTitle] = useState("Олимпиада DANO 2025. Индивидуальный этап");
-  const [tasks, setTasks] = useState<Task[]>(sampleTasks);
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [tasks] = useState<Task[]>(mockTasks);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(taskId || null);
+  const [answer, setAnswer] = useState("");
 
-  const getTaskBgColor = (status: TaskStatus): string => {
-    switch (status) {
-      case "uncleared": return "bg-[var(--color-task-uncleared)]";
-      case "checking": return "bg-[var(--color-task-checking)]";
-      case "correct": return "bg-[var(--color-task-correct)]";
-      case "partial": return "bg-[var(--color-task-partial)]";
-      case "wrong": return "bg-[var(--color-task-wrong)]";
+  useEffect(() => {
+    if (taskId) {
+      setSelectedTaskId(taskId);
+    } else if (tasks.length > 0) {
+      navigate(`/competition/${id}/tasks/${tasks[0].id}`, { replace: true });
     }
-  };
-
-  const getTaskTextColor = (status: TaskStatus): string => {
-    switch (status) {
-      case "uncleared": return "text-gray-600";
-      case "checking": return "text-gray-800";
-      case "correct": return "text-green-800";
-      case "partial": return "text-green-700";
-      case "wrong": return "text-red-800";
-    }
-  };
+  }, [taskId, tasks, id, navigate]);
 
   const handleTaskClick = (taskId: string) => {
-    setSelectedTaskId(taskId);
+    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 (
     <>      
-      <Navbar />
-      
-      <div className="sticky top-16 z-10 bg-white border-b border-gray-200 shadow-sm">
-        <div className="container mx-auto px-4">
-          <div className="py-4">
-            <h1 className="text-xl font-semibold font-hse-sans">{competitionTitle}</h1>
+      <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 gap-3 pb-4 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300">
+          <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-4 py-2 font-medium text-sm font-hse-sans cursor-pointer 
-                  transition-transform hover:scale-105 flex-shrink-0
-                  ${selectedTaskId === task.id ? 'ring-2 ring-black' : ''}`}
+                  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}
@@ -73,21 +65,81 @@ const CompetitionRunnerPage = () => {
         </div>
       </div>
       
-      <div className="container mx-auto px-4 py-8">
-        <div className="bg-white rounded-lg p-6 shadow-sm">
-          {selectedTaskId ? (
-            <div className="font-hse-sans">
-              <h2 className="text-lg font-medium mb-4">
-                Задание {tasks.find(t => t.id === selectedTaskId)?.number}
-              </h2>
-              <p className="text-gray-700">
-                Содержание задания будет отображаться здесь.
-              </p>
+      <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>
           ) : (
-            <p className="font-hse-sans text-gray-500">
-              Выберите задание для просмотра
-            </p>
+            <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>

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

@@ -0,0 +1,23 @@
+import { TaskStatus } from "@/shared/types/types";
+
+const getTaskBgColor = (status: TaskStatus): string => {
+  switch (status) {
+    case "uncleared": return "bg-[var(--color-task-uncleared)]";
+    case "checking": return "bg-[var(--color-task-checking)]";
+    case "correct": return "bg-[var(--color-task-correct)]";
+    case "partial": return "bg-[var(--color-task-partial)]";
+    case "wrong": return "bg-[var(--color-task-wrong)]";
+  }
+};
+
+const getTaskTextColor = (status: TaskStatus): string => {
+  switch (status) {
+    case "uncleared": return "text-[var(--color-task-text-uncleared)]";
+    case "checking": return "text-[var(--color-task-text-checking)]";
+    case "correct": return "text-[var(--color-task-text-correct)]";
+    case "partial": return "text-[var(--color-task-text-partial)]";
+    case "wrong": return "text-[var(--color-task-text-wrong)]";
+  }
+};
+
+export {getTaskBgColor, getTaskTextColor}

services/frontend/src/shared/mocks/mocks.ts

@@ -1,4 +1,4 @@
-import { Competition, Status } from "../types/types";
+import { Competition, Status, Task } from "../types/types";
 
 const mockCompetitions: Competition[] = [
   {
@@ -47,16 +47,15 @@ const mockCompetitions: Competition[] = [
   }
 ];
 
-const mockTasks = {
-  '1': [
-    { id: "1.1", number: "1.1", status: "uncleared" },
-    { id: "1.2", number: "1.2", status: "checking" },
-    { id: "1.3", number: "1.3", status: "correct" },
-  ],
-  '2': [
-    { id: "2.1", number: "1.1", status: "uncleared" },
-    { id: "2.2", number: "1.2", status: "uncleared" },
-  ]
-};
+const mockTasks: Task[] = [
+  { id: "1", number: "1.1", status: "uncleared" },
+  { id: "2", number: "1.2", status: "checking" },
+  { id: "3", number: "1.3", status: "correct" },
+  { id: "4", number: "2.1", status: "partial" },
+  { id: "5", number: "2.2", status: "wrong" },
+  { id: "6", number: "2.3", status: "uncleared" },
+  { id: "7", number: "3.1", status: "checking" },
+  { id: "8", number: "3.2", status: "correct" },
+];
 
 export { mockCompetitions, mockTasks }

services/frontend/src/styles/globals.css

@@ -38,6 +38,18 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.87 0 0);
+
+  --yellow-standard: oklch(0.9 0.1763 97.07);
+  --task-uncleared: oklch(0.955 0 0);
+  --task-text-uncleared: oklch(0.321 0 0);
+  --task-checking: oklch(0.941 0.0983 95.95);
+  --task-text-checking: oklch(0.588 0.120264 87.3807);
+  --task-correct: oklch(0.962 0.0561 158.62);
+  --task-text-correct: oklch(0.598 0.19517 143.8056);
+  --task-partial: oklch(0.971 0.0616 131.35);
+  --task-text-partial: oklch(0.639 0.1595 124.48);
+  --task-wrong: oklch(0.906 0.0484 18.08);
+  --task-text-wrong: oklch(0.433 0.17767 29.2339);
 }
 
 @theme inline {
@@ -77,11 +89,6 @@
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 
-  --task-uncleared: oklch(0.955 0 0);
-  --task-checking: oklch(0.899 0.1763 97.07);
-  --task-correct: oklch(0.962 0.0561 158.62);
-  --task-partial: oklch(0.971 0.0616 131.35);
-  --task-wrong: oklch(0.906 0.0484 18.08);
 }
 
 @theme inline {
@@ -122,12 +129,17 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  --color-yellow-standard: var(--yellow-standard);
   --color-task-uncleared: var(--task-uncleared);
+  --color-task-text-uncleared: var(--task-text-uncleared);
   --color-task-checking: var(--task-checking);
+  --color-task-text-checking: var(--task-text-checking);
   --color-task-correct: var(--task-correct);
+  --color-task-text-correct: var(--task-text-correct);
   --color-task-partial: var(--task-partial);
+  --color-task-text-partial: var(--task-text-partial);
   --color-task-wrong: var(--task-wrong);
-  
+  --color-task-text-wrong: var(--task-text-wrong);
 }
 
 @layer base {