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

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

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import Navbar from "@/widgets/Navbar";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { Competition } from "@/shared/types";
+import { mockCompetitions, mockTasks } from "@/shared/mocks/mocks";
+
+const CompetitionPreview = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [competition, setCompetition] = useState<Competition | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCompetition = async () => {
+      try {
+        setTimeout(() => {
+          const found = mockCompetitions.find((comp) => comp.id === id);
+          setCompetition(found || null);
+          setIsLoading(false);
+        }, 500);
+      } catch (error) {
+        console.error("Error fetching competition:", error);
+        setIsLoading(false);
+      }
+    };
+
+    fetchCompetition();
+  }, [id]);
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  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 (
+    <>
+      <Navbar />
+      <div className="container mx-auto mt-16 px-4 py-8">
+        <button
+          onClick={handleBack}
+          className="font-hse-sans mb-8 flex items-center text-gray-600"
+        >
+          <ArrowLeft size={16} className="mr-2" />
+          Назад к соревнованиям
+        </button>
+
+        {isLoading ? (
+          <div className="flex h-64 items-center justify-center">
+            <p className="font-hse-sans text-gray-500">Загрузка...</p>
+          </div>
+        ) : competition ? (
+          <div className="mx-auto max-w-5xl overflow-hidden rounded-lg bg-white shadow-lg">
+            <div className="h-80 w-full overflow-hidden">
+              <img
+                src={competition.imageUrl}
+                alt={competition.name}
+                className="h-full w-full object-cover"
+              />
+            </div>
+
+            <div className="p-8">
+              <div className="mb-8 flex items-center justify-between">
+                <h1 className="font-hse-sans mr-6 flex-1 text-3xl font-semibold">
+                  {competition.name}
+                </h1>
+                <Button
+                  className="font-hse-sans min-w-[180px] bg-yellow-400 px-12 text-base text-black hover:bg-yellow-500"
+                  onClick={handleContinue}
+                >
+                  Продолжить
+                </Button>
+              </div>
+
+              <div className="font-hse-sans text-lg leading-relaxed text-gray-700">
+                <p>{competition.description}</p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="py-12 text-center">
+            <h2 className="font-hse-sans mb-2 text-2xl font-bold">
+              Соревнование не найдено
+            </h2>
+            <p className="font-hse-sans text-gray-600">
+              Запрошенное соревнование не существует или было удалено.
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CompetitionPreview;

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/pages/CompetitionSession/index.tsx

@@ -1,58 +1,47 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
-import { Task, TaskStatus } from "@/shared/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";
+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 (
@@ -65,11 +54,11 @@ const CompetitionRunnerPage = () => {
             </h1>
           </div>
 
-          <div className="scrollbar-thin scrollbar-thumb-gray-300 flex items-center gap-3 overflow-x-auto pb-4">
+          <div className="no-scrollbar flex items-center justify-center gap-2 overflow-x-auto pb-3">
             {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-4 py-2 text-sm font-medium transition-transform hover:scale-105 ${selectedTaskId === task.id ? "ring-2 ring-black" : ""}`}
+                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" : ""}`}
                 onClick={() => handleTaskClick(task.id)}
               >
                 {task.number}
@@ -79,21 +68,84 @@ const CompetitionRunnerPage = () => {
         </div>
       </div>
 
-      <div className="container mx-auto px-4 py-8">
-        <div className="rounded-lg bg-white p-6 shadow-sm">
-          {selectedTaskId ? (
-            <div className="font-hse-sans">
-              <h2 className="mb-4 text-lg font-medium">
-                Задание {tasks.find((t) => t.id === selectedTaskId)?.number}
-              </h2>
-              <p className="text-gray-700">
-                Содержание задания будет отображаться здесь.
-              </p>
+      <div className="min-h-screen bg-[#F8F8F8] pb-8">
+        <div className="mx-auto max-w-6xl px-4 py-6">
+          {currentTask ? (
+            <div className="font-hse-sans flex flex-col gap-6 md:flex-row">
+              {/* Left Container - Task Description */}
+              <div className="flex-1 rounded-lg bg-white p-6">
+                <h2 className="mb-4 text-xl font-medium">
+                  Задача {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="flex flex-col gap-4 md:w-[350px]">
+                {/* Solution Status Card */}
+                <div
+                  className={`${getTaskBgColor(currentTask.status)} relative rounded-lg p-4`}
+                >
+                  <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 right-3 bottom-2 text-xs text-gray-600">
+                    1 марта, 08:41
+                  </div>
+                </div>
+
+                {/* Answer Input */}
+                <div className="rounded-lg bg-white 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"
+                    placeholder="Введите ответ"
+                    value={answer}
+                    onChange={(e) => setAnswer(e.target.value)}
+                  />
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex justify-between gap-3">
+                  <Button
+                    variant="outline"
+                    className="font-hse-sans"
+                    onClick={handleHistoryClick}
+                  >
+                    История
+                  </Button>
+                  <Button
+                    className="font-hse-sans bg-yellow-400 text-black hover:bg-yellow-500"
+                    onClick={handleSubmit}
+                  >
+                    Отправить решение
+                  </Button>
+                </div>
+              </div>
             </div>
           ) : (
-            <p className="font-hse-sans text-gray-500">
-              Выберите задание для просмотра
-            </p>
+            <div className="flex h-40 items-center justify-center rounded-lg bg-white">
+              <p className="font-hse-sans text-gray-500">Загрузка задания...</p>
+            </div>
           )}
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-import { Competition, CompetitionStatus } from "../types";
+import { Competition, CompetitionStatus, Task } from "../types";
 
 const mockCompetitions: Competition[] = [
   {
@@ -52,16 +52,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,11 +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 {

services/frontend/src/widgets/Navbar/index.tsx

@@ -0,0 +1,24 @@
+import { ChevronDown } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <nav className="bg-white border-b border-gray-200 py-3 px-4 fixed top-0 left-0 right-0 z-10">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="flex items-center">
+          <div className="bg-black px-3 py-2 rounded font-hse-sans">
+            <span className="font-bold text-yellow-400">DATA</span>
+            <span className="font-bold text-white">RUSH</span>
+          </div>
+        </div>
+        
+        <div className="flex items-center cursor-pointer">
+          <span className="mr-2 font-semibold font-hse-sans">itqdev</span>
+          <ChevronDown size={16} />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+
+export default Navbar