+ {/* Content */}
+
{/* Header */}
- {/* Stats */}
-
diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index 1992627..02cb1ce 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -16,7 +16,6 @@ export default function Problems() {
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
- const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
const difficulties = ["All", "Easy", "Medium", "Hard"];
return (
@@ -40,28 +39,24 @@ export default function Problems() {
{/* Category Filter */}
@@ -66,25 +67,30 @@ const ProblemCard = ({ ))}
- {bestTime && (
-
+ {/* Spacer */}
+
- {/* Quick run button - appears on hover */}
-
-
- )}
-
-
-
-
+ {/* Stats + Action */}
+
+
+ {bestTime && (
+
+
+ {/* Quick run button */}
+
+
+ )}
+
+
+
+
+
- {categories.map((cat, i) => (
-
- {cat}
-
- ))}
+
+ {["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
+
+ {f}
+
+ ))}
+
{/* Difficulty Filter */}
-
- {difficulties.map((diff, i) => (
-
- ))}
+ ();
+ const [moves] = useAction(getLiveRunMoves);
+
+ useEffect(() => {
+ if (!editorView || !moves) return;
+
+ let cancelled = false;
+
+ const executeMove = async (move: Move) => {
+ return new Promise((resolve) => {
+ const timeout = setTimeout(() => {
+ if (!editorView || cancelled) return resolve();
+
+ editorView.dispatch({
+ selection: { anchor: move.cursor },
+ scrollIntoView: true,
+ changes: move.changes,
+ });
+
+ resolve();
+ }, move.latency);
+
+ return () => clearTimeout(timeout);
+ });
+ };
+
+ (async () => {
+ if (!moves) return;
+ for (const move of moves) {
+ if (cancelled) break;
+ await executeMove(move);
+ }
+ })();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [editorView, moves]);
+
+ return (
+ {
+ if (tr.selection && tr.isUserEvent("select")) {
+ return [];
+ }
+ return tr;
+ }),
+ ]}
+ theme={devRun}
+ onCreateEditor={(view) => {
+ view.focus();
+ setEditorView(view);
+ }}
+ />
+ );
+}
diff --git a/src/app/run/components/RunTimer.tsx b/src/app/run/components/RunTimer.tsx
index 8a5c5d1..693256f 100644
--- a/src/app/run/components/RunTimer.tsx
+++ b/src/app/run/components/RunTimer.tsx
@@ -1,23 +1,27 @@
import { Card, CardContent } from "@/components/ui/card";
+import formatTime from "@/lib/time-format";
+import { LiveRun } from "@/modules/live-run/types";
+import { useEffect, useState } from "react";
-export type RunInfo = {
- category: "any%" | "100%";
- problems: number;
- currentAttempt: number;
- pbTime: string;
- worldRecord: string;
-};
+export default function RunTimer({ runInfo }: { runInfo: LiveRun }) {
+ const [time, setTime] = useState("00:00:00");
+
+ useEffect(() => {
+ // Update function calculates elapsed time
+ const updateTime = () => setTime(formatTime(Date.now() - runInfo.start));
+
+ // Update immediately and then every second
+ updateTime();
+ const interval = setInterval(updateTime, 50);
+
+ return () => clearInterval(interval); // cleanup on unmount
+ }, [runInfo.start]);
-export default function RunTimer({ runInfo }: { runInfo: RunInfo }) {
return (
-
+
-
-
+
);
diff --git a/src/app/run/components/theme.ts b/src/app/run/components/theme.ts
new file mode 100644
index 0000000..745b9d4
--- /dev/null
+++ b/src/app/run/components/theme.ts
@@ -0,0 +1,119 @@
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+
+/**
+ * devRun — direct CodeMirror 6 theme
+ * Based on thememirror (dracula), app-integrated
+ */
+export const devRun = [
+ EditorView.theme(
+ {
+ "&": {
+ backgroundColor: "var(--card)",
+ color: "#e6e6eb",
+ },
+
+ ".cm-content": {
+ caretColor: "var(--primary)",
+ },
+
+ ".cm-cursor, .cm-dropCursor": {
+ borderLeftColor: "var(--primary)",
+ },
+
+ "&.cm-focused .cm-selectionBackground, .cm-content ::selection": {
+ backgroundColor: "rgba(120, 120, 150, 0.25)",
+ },
+
+ ".cm-activeLine": {
+ backgroundColor: "rgba(255, 255, 255, 0.03)",
+ },
+
+ ".cm-gutters": {
+ backgroundColor: "var(--card)",
+ color: "rgb(120, 122, 128)",
+ border: "none",
+ },
+
+ ".cm-activeLineGutter": {
+ backgroundColor: "rgba(255, 255, 255, 0.03)",
+ },
+
+ // - Scrollbar -
+ ".cm-scroller": {
+ scrollbarWidth: "thin",
+ scrollbarColor: "rgba(201, 133, 255, 0.3) transparent",
+ },
+ },
+ { dark: true },
+ ),
+
+ syntaxHighlighting(
+ HighlightStyle.define([
+ // Comments — low priority, low contrast
+ {
+ tag: t.comment,
+ color: "#5f6a8a",
+ fontStyle: "italic",
+ },
+
+ // Strings & literals — data, not logic
+ {
+ tag: [t.string, t.special(t.brace)],
+ color: "#f4e58c",
+ },
+
+ // Numbers / booleans — benchmarks & truth
+ {
+ tag: [t.number, t.bool, t.null],
+ color: "#c792ea",
+ fontWeight: "500",
+ },
+
+ // Keywords & operators — decisions & flow
+ {
+ tag: [t.keyword, t.operator],
+ color: "#ff5fa2",
+ fontWeight: "600",
+ },
+
+ // Types & definitions — structure
+ {
+ tag: [t.definitionKeyword, t.typeName],
+ color: "#6be6ff",
+ },
+
+ // Type definitions — neutral, readable
+ {
+ tag: t.definition(t.typeName),
+ color: "#e6e6eb",
+ },
+
+ // Functions, classes, props — execution paths
+ {
+ tag: [
+ t.className,
+ t.definition(t.propertyName),
+ t.function(t.variableName),
+ t.attributeName,
+ ],
+ color: "#4dff9f",
+ fontWeight: "500",
+ },
+
+ // Variables — slightly muted, context-aware
+ {
+ tag: t.variableName,
+ color: "#cfd3dc",
+ },
+
+ // Invalid / errors — instant attention
+ {
+ tag: t.invalid,
+ color: "#ff5555",
+ fontWeight: "700",
+ },
+ ]),
+ ),
+];
diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index 2e86e67..ee44840 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -1,23 +1,18 @@
"use client";
-import CodeMirror, { EditorState } from "@uiw/react-codemirror";
-import { vscodeDark } from "@uiw/codemirror-theme-vscode";
-
import { Card, CardContent } from "@/components/ui/card";
-import RunTimer, { RunInfo } from "./components/RunTimer";
+import RunTimer from "./components/RunTimer";
import RunChat, { ChatMessage } from "./components/RunChat";
-import { useState } from "react";
import { FileTree } from "./components/FileTree";
import { File } from "lucide-react";
+import Editor from "./components/Editor";
+import useAction from "@/hook/use-action";
+import { getLiveRun } from "@/modules/live-run/actions";
+import ProblemCard from "../problems/components/ProblemCard";
+import ProfileCard from "@/components/app/ProfileCard";
export default function Run() {
- const runInfo: RunInfo = {
- category: "any%",
- problems: 5,
- pbTime: "4:35",
- worldRecord: "3:58",
- currentAttempt: 47,
- };
+ const [runInfo] = useAction(getLiveRun);
const chatMessages: ChatMessage[] = [
{ user: "Alice", message: "Nice split!", time: "1:53" },
@@ -27,63 +22,57 @@ export default function Run() {
return (
+
+ {["Easy", "Medium", "Hard"].map((f) => (
+
+ {f}
+
+ ))}
+
{/* View Toggle */}
diff --git a/src/app/run/components/Editor.tsx b/src/app/run/components/Editor.tsx
new file mode 100644
index 0000000..7b28440
--- /dev/null
+++ b/src/app/run/components/Editor.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import CodeMirror, { EditorState, EditorView } from "@uiw/react-codemirror";
+import { devRun } from "./theme";
+import { javascript } from "@codemirror/lang-javascript";
+import { rust } from "@codemirror/lang-rust";
+import { go } from "@codemirror/lang-go";
+import { json } from "@codemirror/lang-json";
+import { python } from "@codemirror/lang-python";
+import { java } from "@codemirror/lang-java";
+import { useEffect, useState } from "react";
+import useAction from "@/hook/use-action";
+import { getLiveRunMoves } from "@/modules/live-run/actions";
+
+type Language =
+ | "javascript"
+ | "typescript"
+ | "rust"
+ | "go"
+ | "python"
+ | "java"
+ | "json";
+
+function getLanguageExtension(lang: Language) {
+ switch (lang) {
+ case "javascript":
+ return javascript();
+ case "rust":
+ return rust();
+ case "go":
+ return go();
+ case "python":
+ return python();
+ case "java":
+ return java();
+ case "json":
+ return json();
+ default:
+ return javascript();
+ }
+}
+
+type Move = {
+ latency: number;
+ cursor: number;
+ changes: {
+ from: number;
+ to: number;
+ insert: string;
+ };
+};
+
+export default function Editor() {
+ const [editorView, setEditorView] = useState1:52.34
-- PB: {runInfo.pbTime} | Diff:{" "} - +0:12 -
+{time}
- {/* Editor */}
-
-
- {/* File tree */}
-
-
+
- {isTop ? `🔥 ${username}` : username}
+ {isTop ? `🔥 ${run.username}` : run.username}
@@ -45,18 +45,18 @@ export default function LiveRunRow({
- {time}
+ {formatTime(now - run.start, false)}
- {pace}
+ 0
diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 35a1c37..9ceebb6 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -18,16 +18,13 @@ import LiveRunRow from "./components/LiveRunNow";
import StatCard from "@/components/app/StatCard";
import useAction from "@/hook/use-action";
import { getLiveRuns } from "@/modules/live-run/actions";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
export default function LiveRuns() {
const [liveRuns, liveRunsLoaded, liveRunsError] = useAction(getLiveRuns);
// Sort top runners (status === 'pb') to the top
- const sortedRuns = [...(liveRuns || [])].sort((a, b) => {
- if (a.status === "pb" && b.status !== "pb") return -1;
- if (a.status !== "pb" && b.status === "pb") return 1;
- return 0;
- });
+ const sortedRuns = [...(liveRuns || [])];
return (
+
{/* Timer & Chat */}
-
+
- {/* Code */}
-
-
-
+
+
+ {/* File tree */}
+
-
-
+
+ {/* Code */}
+
+ {runInfo &&
-
- {
- if (tr.selection && tr.isUserEvent("select")) {
- return [];
- }
- return tr;
- }),
- ]}
- theme={vscodeDark}
- onCreateEditor={(view) => {
- view.focus();
- view.dispatch({
- selection: { anchor: 1 },
- scrollIntoView: true,
- });
+
+
+ {/* Editor */}
+
+
+
+
-
+
+
+
+
+
+
+
+
-
diff --git a/src/app/runs/components/LiveRunNow.tsx b/src/app/runs/components/LiveRunNow.tsx
index 13e9919..6790689 100644
--- a/src/app/runs/components/LiveRunNow.tsx
+++ b/src/app/runs/components/LiveRunNow.tsx
@@ -5,18 +5,18 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { TableRow, TableCell } from "@/components/ui/table";
import { cn } from "@/lib/utils";
+import { LiveRun } from "@/modules/live-run/types";
+import formatTime from "@/lib/time-format";
export default function LiveRunRow({
index,
- username,
- problem,
- category,
- time,
- pace,
- status,
-}: any) {
- const pacePositive = pace.startsWith("+");
- const isTop = status === "pb";
+ run,
+}: {
+ index: number;
+ run: LiveRun;
+}) {
+ const now = new Date().getTime() + 1000;
+ const isTop = false;
return (
- {problem}
+ {run.problem}
- {category}
+ {run.category}
@@ -55,13 +52,14 @@ export default function LiveRuns() {
{/* Filters */}
{sortedRuns.map((run, index) => (
-
diff --git a/src/components/app/ProfileCard.tsx b/src/components/app/ProfileCard.tsx
new file mode 100644
index 0000000..b6e878a
--- /dev/null
+++ b/src/components/app/ProfileCard.tsx
@@ -0,0 +1,37 @@
+import { Badge } from "../ui/badge";
+import { Card, CardContent } from "../ui/card";
+
+export default function ProfileCard({
+ user,
+}: {
+ user: { username: string; rank: number };
+}) {
+ return (
+
+
+
+
+ {/* Avatar */}
+
+
+ );
+}
diff --git a/src/lib/time-format.ts b/src/lib/time-format.ts
new file mode 100644
index 0000000..a437040
--- /dev/null
+++ b/src/lib/time-format.ts
@@ -0,0 +1,15 @@
+export default function formatTime(elapsedMs: number, formatMs = true) {
+ const totalSeconds = formatMs
+ ? elapsedMs / 1000
+ : Math.floor(elapsedMs / 1000);
+ const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, "0");
+ const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(
+ 2,
+ "0",
+ );
+ const seconds = formatMs
+ ? (totalSeconds % 60).toFixed(2).padStart(2, "0")
+ : (totalSeconds % 60).toString().padStart(2, "0");
+
+ return `${totalSeconds / 3600 >= 1 ? hours + ":" : ""}${minutes}:${seconds}`;
+}
diff --git a/src/modules/leaderboard/actions.ts b/src/modules/leaderboard/actions.ts
index 34f7f0a..c62bab4 100644
--- a/src/modules/leaderboard/actions.ts
+++ b/src/modules/leaderboard/actions.ts
@@ -1,154 +1,194 @@
"use server";
import * as Core from "./core";
-import { Leaderboard } from "./types";
+import { LeaderboardRank } from "./types"; // updated interface
-export async function getGlobalLeaderboard(): Promise {
+export async function getGlobalLeaderboard(): Promise {
return [
{
rank: 1,
username: "speedmaster_x",
pb: "2:34.21",
runsCount: 2341,
- category: "Any%",
+ problem: "Fix broken login flow",
+ category: "any%",
+ assisted: false,
},
{
rank: 2,
username: "algo_ninja",
pb: "2:38.54",
runsCount: 1876,
- category: "Any%",
+ problem: "Refactor legacy API endpoints",
+ category: "any%",
+ assisted: false,
},
{
rank: 3,
username: "clockwork",
pb: "2:41.02",
runsCount: 3102,
- category: "Any%",
+ problem: "Optimize image upload pipeline",
+ category: "any%",
+ assisted: false,
},
{
rank: 4,
username: "fastfingers99",
pb: "2:45.33",
runsCount: 987,
- category: "Any%",
+ problem: "Build a mini chat server",
+ category: "any%",
+ assisted: false,
},
{
rank: 5,
username: "recursion_queen",
pb: "2:47.89",
runsCount: 1543,
- category: "Any%",
+ problem: "Fix CSS layout bug in dashboard",
+ category: "any%",
+ assisted: false,
},
{
rank: 6,
username: "bitshifter",
pb: "2:52.11",
runsCount: 2109,
- category: "Any%",
+ problem: "Implement JWT authentication",
+ category: "any%",
+ assisted: false,
},
{
rank: 7,
username: "nullpointer",
pb: "2:54.67",
runsCount: 876,
- category: "Any%",
+ problem: "Create REST endpoint for user data",
+ category: "any%",
+ assisted: false,
},
{
rank: 8,
username: "stackattack",
pb: "2:58.23",
runsCount: 1234,
- category: "Any%",
+ problem: "Fix off-by-one bug in sorting function",
+ category: "any%",
+ assisted: false,
},
{
rank: 9,
username: "looplegend",
pb: "3:01.45",
runsCount: 654,
- category: "Any%",
+ problem: "Optimize SQL query for reports",
+ category: "any%",
+ assisted: false,
},
{
rank: 10,
username: "coderunner",
pb: "3:05.78",
runsCount: 1098,
- category: "Any%",
+ problem: "Add file upload validation",
+ category: "any%",
+ assisted: false,
},
];
}
-export async function getWeeklyLeaderboard(): Promise {
+export async function getWeeklyLeaderboard(): Promise {
return [
{
rank: 1,
username: "weekly_warrior",
pb: "2:51.33",
runsCount: 156,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 2,
username: "speedmaster_x",
pb: "2:53.12",
runsCount: 89,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 3,
username: "newbie_grinder",
pb: "2:58.67",
runsCount: 234,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 4,
username: "algo_ninja",
pb: "3:02.45",
runsCount: 67,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 5,
username: "fresh_runner",
pb: "3:05.89",
runsCount: 45,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 6,
username: "practice_makes",
pb: "3:08.12",
runsCount: 112,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 7,
username: "splitmaster",
pb: "3:12.34",
runsCount: 78,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 8,
username: "grindtime",
pb: "3:15.56",
runsCount: 92,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 9,
username: "pb_hunter",
pb: "3:18.90",
runsCount: 56,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
{
rank: 10,
username: "reset_king",
pb: "3:22.11",
runsCount: 187,
- category: "Any%",
+ problem: "Build notifications API",
+ category: "any%",
+ assisted: false,
},
];
}
diff --git a/src/modules/leaderboard/types.ts b/src/modules/leaderboard/types.ts
index 4f25bf1..0f1cc51 100644
--- a/src/modules/leaderboard/types.ts
+++ b/src/modules/leaderboard/types.ts
@@ -5,5 +5,7 @@ export interface LeaderboardRank {
username: string;
pb: string;
runsCount: number;
- category: string;
+ problem: string;
+ category: "any%" | "100%";
+ assisted: boolean;
}
diff --git a/src/modules/live-run/actions.ts b/src/modules/live-run/actions.ts
index daf80a1..9b4ebd2 100644
--- a/src/modules/live-run/actions.ts
+++ b/src/modules/live-run/actions.ts
@@ -3,50 +3,92 @@
import { createClient } from "@/lib/supabase/server";
import { getSession, getSessionRedirect } from "../account/core";
import * as Core from "./core";
-import { Run } from "./types";
-import { redirect } from "next/navigation";
+import { LiveRun } from "./types";
-export async function getLiveRuns(): Promise {
+export async function getLiveRuns(): Promise {
const supabase = await createClient();
const _ = await getSession(supabase);
return [
{
- id: 1,
+ id: "1",
username: "speedmaster_x",
problem: "Two Sum Dash",
- category: "Any%",
- time: "1:52.34",
- pace: "-0:03",
- status: "pb",
+ category: "any%",
+ runsCount: 1,
+ start: new Date().getTime(),
},
{
- id: 2,
+ id: "2",
username: "algo_ninja",
problem: "Binary Sprint",
- category: "Any%",
- time: "2:04.11",
- pace: "+0:05",
- status: "normal",
+ category: "any%",
+ runsCount: 1,
+ start: new Date().getTime(),
},
{
- id: 3,
+ id: "3",
username: "stackattack",
problem: "String Scramble",
- category: "Easy",
- time: "0:48.92",
- pace: "-0:01",
- status: "pb",
+ category: "any%",
+ runsCount: 1,
+ start: new Date().getTime(),
},
{
- id: 4,
+ id: "4",
username: "reset_king",
problem: "Linked List Rush",
- category: "Any%",
- time: "1:31.77",
- pace: "+0:12",
- status: "danger",
+ category: "any%",
+ runsCount: 1,
+ start: new Date().getTime(),
},
];
}
+
+export async function getLiveRun(): Promise {
+ return {
+ id: "0",
+ username: "selimaj",
+ start: new Date().getTime(),
+ problem: "solve",
+ category: "any%",
+ runsCount: 0,
+ };
+}
+
+export async function getLiveRunMoves() {
+ const code = `// Import the necessary React library features
+import { createRoot } from 'react-dom/client';
+
+// Define a functional component named "App"
+// Component names must start with a capital letter
+function App() {
+ // Components return JSX markup
+ return (
+
- {["Any%", "100%", "Easy", "Hard"].map((cat) => (
-
- {cat}
-
- ))}
-
- 🔥 PB Pace
+
+
+ any%
+
+
+ 100%
+
+
{/* Table */}
@@ -80,7 +78,7 @@ export default function LiveRuns() {
+ 
+
+
+
+ {/* User Info */}
+
+
+
+ #{user.rank}
+
+
+ World Record Holder
+
+