Klesti Selimaj
Generated
+148
-4
@@ -8,6 +8,13 @@
|
||||
"name": "dev-run",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@codemirror/lang-go": "^6.0.1",
|
||||
"@codemirror/lang-java": "^6.0.2",
|
||||
"@codemirror/lang-javascript": "^6.2.4",
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lang-python": "^6.2.1",
|
||||
"@codemirror/lang-rust": "^6.0.2",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.14",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.7",
|
||||
@@ -56,7 +63,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20.19.30",
|
||||
"@types/node": "^20.19.32",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"tailwindcss": "^4",
|
||||
@@ -110,6 +117,77 @@
|
||||
"@lezer/common": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-go": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-go/-/lang-go-6.0.1.tgz",
|
||||
"integrity": "sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.6.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/go": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-java": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.2.tgz",
|
||||
"integrity": "sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/java": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-javascript": {
|
||||
"version": "6.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
|
||||
"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.6.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-json": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
|
||||
"integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/json": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-python": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
|
||||
"integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.3.2",
|
||||
"@codemirror/language": "^6.8.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.2.1",
|
||||
"@lezer/python": "^1.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-rust": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.2.tgz",
|
||||
"integrity": "sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/rust": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz",
|
||||
@@ -755,6 +833,17 @@
|
||||
"integrity": "sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@lezer/go": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.1.tgz",
|
||||
"integrity": "sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/highlight": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
|
||||
@@ -764,6 +853,39 @@
|
||||
"@lezer/common": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/java": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
|
||||
"integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/javascript": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
|
||||
"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.1.3",
|
||||
"@lezer/lr": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/json": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
|
||||
"integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
|
||||
@@ -773,6 +895,28 @@
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/python": {
|
||||
"version": "1.1.18",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz",
|
||||
"integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/rust": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
|
||||
"integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@marijn/find-cluster-break": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
|
||||
@@ -3182,9 +3326,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.19.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
|
||||
"integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
|
||||
"version": "20.19.32",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.32.tgz",
|
||||
"integrity": "sha512-Ez8QE4DMfhjjTsES9K2dwfV258qBui7qxUsoaixZDiTzbde4U12e1pXGNu/ECsUIOi5/zoCxAQxIhQnaUQ2VvA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
|
||||
+8
-1
@@ -8,6 +8,13 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-go": "^6.0.1",
|
||||
"@codemirror/lang-java": "^6.0.2",
|
||||
"@codemirror/lang-javascript": "^6.2.4",
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lang-python": "^6.2.1",
|
||||
"@codemirror/lang-rust": "^6.0.2",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.14",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.7",
|
||||
@@ -56,7 +63,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20.19.30",
|
||||
"@types/node": "^20.19.32",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"tailwindcss": "^4",
|
||||
|
||||
+2
-2
@@ -314,5 +314,5 @@
|
||||
}
|
||||
|
||||
.cm-editor {
|
||||
height: 100%;;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,71 +1,88 @@
|
||||
import { Trophy } from "lucide-react";
|
||||
import { LeaderboardRank } from "@/modules/leaderboard/types";
|
||||
import { LinkIcon, Trophy } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface LeaderboardRowProps {
|
||||
rank: number;
|
||||
username: string;
|
||||
pb: string;
|
||||
runsCount: number;
|
||||
category: string;
|
||||
const LeaderboardRow = ({
|
||||
index = 0,
|
||||
run,
|
||||
}: {
|
||||
index?: number;
|
||||
}
|
||||
|
||||
const LeaderboardRow = ({ rank, username, pb, runsCount, category, index = 0 }: LeaderboardRowProps) => {
|
||||
run: LeaderboardRank;
|
||||
}) => {
|
||||
const getRankStyle = (rank: number) => {
|
||||
if (rank === 1) return "rank-gold";
|
||||
if (rank === 2) return "rank-silver";
|
||||
if (rank === 3) return "rank-bronze";
|
||||
if (run.rank === 1) return "rank-gold";
|
||||
if (run.rank === 2) return "rank-silver";
|
||||
if (run.rank === 3) return "rank-bronze";
|
||||
return "bg-secondary text-muted-foreground";
|
||||
};
|
||||
|
||||
const getRankGlow = (rank: number) => {
|
||||
if (rank === 1) return "glow-gold";
|
||||
if (rank === 2) return "glow-silver";
|
||||
if (rank === 3) return "glow-bronze";
|
||||
if (run.rank === 1) return "glow-gold";
|
||||
if (run.rank === 2) return "glow-silver";
|
||||
if (run.rank === 3) return "glow-bronze";
|
||||
return "";
|
||||
};
|
||||
|
||||
const isTopThree = rank <= 3;
|
||||
const isTopThree = run.rank <= 3;
|
||||
|
||||
return (
|
||||
<tr
|
||||
className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? 'bg-secondary/30' : ''}`}
|
||||
style={{ animationDelay: `${index * 0.05}s`, animationFillMode: 'forwards' }}
|
||||
<tr
|
||||
className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? "bg-secondary/30" : ""}`}
|
||||
style={{
|
||||
animationDelay: `${index * 0.05}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
{/* Rank */}
|
||||
<td className="py-4 px-4">
|
||||
<div className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(rank)} ${getRankGlow(rank)}`}>
|
||||
{rank <= 3 ? <Trophy className="h-4 w-4" /> : rank}
|
||||
<td className="py-4 px-5 w-16">
|
||||
<div
|
||||
className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(run.rank)} ${getRankGlow(run.rank)}`}
|
||||
>
|
||||
{isTopThree ? <Trophy className="h-4 w-4" /> : run.rank}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Username */}
|
||||
<td className="py-4 px-4">
|
||||
<td>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-linear-to-br from-primary/50 to-primary/20 flex items-center justify-center text-xs font-bold text-primary">
|
||||
{username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span className={`font-medium ${isTopThree ? 'text-foreground' : 'text-secondary-foreground'} group-hover:text-primary transition-colors`}>
|
||||
{username}
|
||||
<span
|
||||
className={`font-medium ${isTopThree ? "text-foreground" : "text-secondary-foreground"} group-hover:text-primary transition-colors`}
|
||||
>
|
||||
{run.username}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* PB */}
|
||||
<td className="py-4 px-4">
|
||||
<span className="font-mono text-primary font-semibold">{pb}</span>
|
||||
</td>
|
||||
|
||||
{/* Runs */}
|
||||
<td className="py-4 px-4 text-muted-foreground">
|
||||
{runsCount}
|
||||
{/* Time */}
|
||||
<td>
|
||||
<span className="font-mono text-primary font-semibold flex justify-center">
|
||||
{run.pb}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Category */}
|
||||
<td className="py-4 px-4">
|
||||
<span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
|
||||
{category}
|
||||
{run.category}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Assisted */}
|
||||
<td className="py-4 px-4">
|
||||
<span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
|
||||
{run.assisted ? "Assisted" : "Unassisted"}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Runs */}
|
||||
<td className="py-4 px-4 w-16 text-muted-foreground">{run.runsCount}</td>
|
||||
|
||||
{/* Problem */}
|
||||
<td className="py-4 px-4">
|
||||
<Link href="/" className="hover:text-primary flex items-center gap-1">
|
||||
<LinkIcon className="w-3 h-3" /> {run.problem}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,13 +30,13 @@ import {
|
||||
getGlobalLeaderboard,
|
||||
getWeeklyLeaderboard,
|
||||
} from "@/modules/leaderboard/actions";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
|
||||
export default function Leaderboards() {
|
||||
const [global, globalLoaded, globalError] = useAction(getGlobalLeaderboard);
|
||||
const [weekly, weeklyLoaded, weeklyError] = useAction(getWeeklyLeaderboard);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
|
||||
const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
|
||||
const data = (activeTab === "global" ? global : weekly) || [];
|
||||
|
||||
return (
|
||||
@@ -86,26 +86,34 @@ export default function Leaderboards() {
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="global">
|
||||
<Globe className="mr-2 h-4 w-4" />
|
||||
<Globe className="h-4 w-4" />
|
||||
Global
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="weekly">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Weekly
|
||||
<Calendar className="h-4 w-4" />
|
||||
This week
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat, i) => (
|
||||
<Badge
|
||||
key={cat}
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
<ToggleGroup variant="outline" type="single" defaultValue="any">
|
||||
<ToggleGroupItem value="any" aria-label="any%">
|
||||
any%
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="100" aria-label="100%">
|
||||
100%
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
<ToggleGroup variant="outline" type="single">
|
||||
<ToggleGroupItem value="true" aria-label="Assisted">
|
||||
Assisted
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="false" aria-label="Unassisted">
|
||||
Unassisted
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -114,16 +122,28 @@ export default function Leaderboards() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="pl-5">Rank</TableHead>
|
||||
<TableHead>Runner</TableHead>
|
||||
<TableHead>PB</TableHead>
|
||||
<TableHead>Runs</TableHead>
|
||||
<TableHead className="pr-5">Category</TableHead>
|
||||
<TableHead className="w-16">
|
||||
<p className="flex justify-center">Rank</p>
|
||||
</TableHead>
|
||||
<TableHead className="w-52">
|
||||
<p className="flex justify-center">Runner</p>
|
||||
</TableHead>
|
||||
<TableHead className="w-24">
|
||||
<p className="flex justify-center">Time</p>
|
||||
</TableHead>
|
||||
<TableHead className="w-16">
|
||||
<p className="flex justify-center">Category</p>
|
||||
</TableHead>
|
||||
<TableHead className="w-24">
|
||||
<p className="flex justify-center">Assisted</p>
|
||||
</TableHead>
|
||||
<TableHead className="w-16">Runs</TableHead>
|
||||
<TableHead>Problem</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((entry, i) => (
|
||||
<LeaderboardRow key={entry.username} {...entry} index={i} />
|
||||
<LeaderboardRow key={entry.username} index={i} run={entry} />
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
@@ -32,16 +32,17 @@ const ProblemCard = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
|
||||
className="group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0 h-full flex flex-col justify-between"
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
{/* Glow effect on hover */}
|
||||
<div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
<div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
|
||||
|
||||
<div className="relative">
|
||||
{/* Content */}
|
||||
<div className="relative flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
|
||||
@@ -66,25 +67,30 @@ const ProblemCard = ({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
{bestTime && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Clock className="h-4 w-4 text-primary" />
|
||||
<span className="font-mono">{bestTime}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{attempts} runs</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Quick run button - appears on hover */}
|
||||
<div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
|
||||
<Button size="p2">
|
||||
<Zap className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* Stats + Action */}
|
||||
<div className="flex items-center justify-between mt-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-4">
|
||||
{bestTime && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Clock className="h-4 w-4 text-primary" />
|
||||
<span className="font-mono">{bestTime}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{attempts} runs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick run button */}
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<Button size="p2">
|
||||
<Zap className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+15
-20
@@ -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 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat, i) => (
|
||||
<Badge
|
||||
key={cat}
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
<ToggleGroup variant="outline" type="multiple">
|
||||
{["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
|
||||
<ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
|
||||
{f}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
{/* Difficulty Filter */}
|
||||
<div className="flex gap-2">
|
||||
{difficulties.map((diff, i) => (
|
||||
<Button
|
||||
key={diff}
|
||||
variant={i === 0 ? "outline" : "ghost"}
|
||||
size="sm"
|
||||
>
|
||||
{diff}
|
||||
</Button>
|
||||
))}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<ToggleGroup variant="outline" type="multiple">
|
||||
{["Easy", "Medium", "Hard"].map((f) => (
|
||||
<ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
|
||||
{f}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
{/* View Toggle */}
|
||||
|
||||
@@ -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] = useState<EditorView>();
|
||||
const [moves] = useAction<Move[]>(getLiveRunMoves);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editorView || !moves) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
const executeMove = async (move: Move) => {
|
||||
return new Promise<void>((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 (
|
||||
<CodeMirror
|
||||
readOnly
|
||||
className="h-full w-full"
|
||||
value={``}
|
||||
extensions={[
|
||||
getLanguageExtension("javascript"),
|
||||
EditorState.transactionFilter.of((tr) => {
|
||||
if (tr.selection && tr.isUserEvent("select")) {
|
||||
return [];
|
||||
}
|
||||
return tr;
|
||||
}),
|
||||
]}
|
||||
theme={devRun}
|
||||
onCreateEditor={(view) => {
|
||||
view.focus();
|
||||
setEditorView(view);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<Card className="relative text-center overflow-hidden">
|
||||
<Card className="relative text-center overflow-hidden h-full">
|
||||
<div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
|
||||
<CardContent className="relative">
|
||||
<p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
|
||||
<p className="mt-2 font-mono text-sm text-muted-foreground">
|
||||
PB: {runInfo.pbTime} | Diff:{" "}
|
||||
<span className="text-red-400">+0:12</span>
|
||||
</p>
|
||||
<CardContent className="relative flex justify-center items-center h-full">
|
||||
<p className="timer-display text-primary text-4xl font-bold">{time}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
]),
|
||||
),
|
||||
];
|
||||
+50
-61
@@ -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 (
|
||||
<div className="h-svh px-20 pt-24 pb-12 flex gap-8">
|
||||
{/* Editor */}
|
||||
<Card className="flex-1 overflow-hidden">
|
||||
<CardContent className="flex h-full">
|
||||
{/* File tree */}
|
||||
<div className="w-2xs border-r border-border">
|
||||
<FileTree
|
||||
tree={{
|
||||
type: "directory",
|
||||
uri: "my-app",
|
||||
children: [
|
||||
{ type: "file", uri: "myfile.js" },
|
||||
{
|
||||
type: "directory",
|
||||
uri: "my-app",
|
||||
children: [{ type: "file", uri: "myfile.js" }],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
<div className="h-full w-full flex flex-col gap-4">
|
||||
<div className="w-full flex gap-5">
|
||||
<div className="flex-1 animate-fade-in opacity-0 duration-1000">
|
||||
<ProfileCard user={{ username: "selimaj", rank: 1 }} />
|
||||
</div>
|
||||
|
||||
{/* Code */}
|
||||
<div className="flex-1 pl-5 flex flex-col">
|
||||
<header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||
<File size={16} /> myfile.js
|
||||
</header>
|
||||
<div className="flex-1 animate-fade-in opacity-0 duration-1000">
|
||||
{runInfo && <RunTimer runInfo={runInfo} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pt-3 pb-5">
|
||||
<CodeMirror
|
||||
readOnly
|
||||
className="h-full w-full"
|
||||
value="yo"
|
||||
extensions={[
|
||||
EditorState.transactionFilter.of((tr) => {
|
||||
if (tr.selection && tr.isUserEvent("select")) {
|
||||
return [];
|
||||
}
|
||||
return tr;
|
||||
}),
|
||||
]}
|
||||
theme={vscodeDark}
|
||||
onCreateEditor={(view) => {
|
||||
view.focus();
|
||||
view.dispatch({
|
||||
selection: { anchor: 1 },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
<div className="flex-1">
|
||||
<ProblemCard name="Idk" difficulty="hard" tags={[]} attempts={0} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor */}
|
||||
<Card className="flex-1 overflow-hidden">
|
||||
<CardContent className="flex h-full">
|
||||
{/* File tree */}
|
||||
<div className="w-2xs border-r border-border">
|
||||
<FileTree
|
||||
tree={{
|
||||
type: "directory",
|
||||
uri: "my-app",
|
||||
children: [
|
||||
{ type: "file", uri: "myfile.js" },
|
||||
{
|
||||
type: "directory",
|
||||
uri: "my-app",
|
||||
children: [{ type: "file", uri: "myfile.js" }],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Code */}
|
||||
<div className="flex-1 pl-5 flex flex-col">
|
||||
<header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||
<File size={16} /> myfile.js
|
||||
</header>
|
||||
<div className="flex-1 pt-3 pb-5 h-full">
|
||||
<Editor />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Timer & Chat */}
|
||||
<div className="flex flex-col gap-6 h-full w-sm">
|
||||
<RunTimer runInfo={runInfo} />
|
||||
<div className="h-full w-lg flex">
|
||||
<RunChat chatMessages={chatMessages} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 (
|
||||
<TableRow
|
||||
@@ -30,14 +30,14 @@ export default function LiveRunRow({
|
||||
}}
|
||||
>
|
||||
<TableCell className="font-medium pl-5">
|
||||
{isTop ? `🔥 ${username}` : username}
|
||||
{isTop ? `🔥 ${run.username}` : run.username}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{problem}</span>
|
||||
<span>{run.problem}</span>
|
||||
<Badge variant="outline" className="w-fit text-xs">
|
||||
{category}
|
||||
{run.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -45,18 +45,18 @@ export default function LiveRunRow({
|
||||
<TableCell
|
||||
className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
|
||||
>
|
||||
{time}
|
||||
{formatTime(now - run.start, false)}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Badge
|
||||
className={
|
||||
pacePositive
|
||||
false
|
||||
? "bg-red-500/10 text-red-400"
|
||||
: "bg-green-500/10 text-green-400"
|
||||
}
|
||||
>
|
||||
{pace}
|
||||
0
|
||||
</Badge>
|
||||
</TableCell>
|
||||
|
||||
|
||||
+11
-13
@@ -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 (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
@@ -55,13 +52,14 @@ export default function LiveRuns() {
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Any%", "100%", "Easy", "Hard"].map((cat) => (
|
||||
<Badge key={cat} variant="outline" className="cursor-pointer">
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
|
||||
<Badge className="bg-primary/10 text-primary">🔥 PB Pace</Badge>
|
||||
<ToggleGroup variant="outline" type="single" defaultValue="any">
|
||||
<ToggleGroupItem value="any" aria-label="any%">
|
||||
any%
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="100" aria-label="100%">
|
||||
100%
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
@@ -80,7 +78,7 @@ export default function LiveRuns() {
|
||||
|
||||
<TableBody>
|
||||
{sortedRuns.map((run, index) => (
|
||||
<LiveRunRow key={run.id} {...run} index={index} />
|
||||
<LiveRunRow key={run.id} index={index} run={run} />
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
@@ -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 (
|
||||
<Card className="relative w-full h-full overflow-hidden">
|
||||
<div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
|
||||
|
||||
<CardContent className="relative flex flex-col md:flex-row gap-6 w-full h-full">
|
||||
{/* Avatar */}
|
||||
<div className="relative shrink-0 w-full md:w-1/4 h-1/3 md:h-full flex items-center justify-center">
|
||||
<img
|
||||
src="http://github.com/selimaj-dev.png"
|
||||
alt="Img"
|
||||
className="rounded-2xl aspect-square max-h-full w-auto object-contain"
|
||||
/>
|
||||
|
||||
<div className="absolute -bottom-2 -right-2 w-12 h-12 md:w-8 md:h-8 rounded-lg rank-gold flex items-center justify-center text-sm md:text-xs font-bold glow-gold">
|
||||
#{user.rank}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
<div className="flex-1 flex flex-col justify-center w-full">
|
||||
<h1 className="text-4xl md:text-3xl font-bold mb-2">
|
||||
{user.username}
|
||||
</h1>
|
||||
<Badge>World Record Holder</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -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}`;
|
||||
}
|
||||
@@ -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<Leaderboard> {
|
||||
export async function getGlobalLeaderboard(): Promise<LeaderboardRank[]> {
|
||||
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<Leaderboard> {
|
||||
export async function getWeeklyLeaderboard(): Promise<LeaderboardRank[]> {
|
||||
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,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -5,5 +5,7 @@ export interface LeaderboardRank {
|
||||
username: string;
|
||||
pb: string;
|
||||
runsCount: number;
|
||||
category: string;
|
||||
problem: string;
|
||||
category: "any%" | "100%";
|
||||
assisted: boolean;
|
||||
}
|
||||
|
||||
@@ -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<Run[]> {
|
||||
export async function getLiveRuns(): Promise<LiveRun[]> {
|
||||
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<LiveRun> {
|
||||
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 (
|
||||
<h1>Hello, world!</h1>
|
||||
);
|
||||
}
|
||||
|
||||
// Target a DOM element in your HTML (e.g., <div id="root"></div>)
|
||||
const domNode = document.getElementById('root');
|
||||
|
||||
// Create a root and render your component into the DOM
|
||||
const root = createRoot(domNode);
|
||||
root.render(<App />);`.repeat(3);
|
||||
|
||||
const chunks = [];
|
||||
for (let i = 0; i < code.length; i += 4) {
|
||||
chunks.push(code.slice(i, i + 4));
|
||||
}
|
||||
|
||||
return chunks.map((chunk, index) => ({
|
||||
latency: 120, // 100ms per chunk
|
||||
cursor: index * 4, // approximate cursor position
|
||||
changes: {
|
||||
from: index * 4,
|
||||
to: index * 4,
|
||||
insert: chunk,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
export interface Run {
|
||||
id: number;
|
||||
export interface LiveRun {
|
||||
id: string;
|
||||
username: string;
|
||||
start: number;
|
||||
runsCount: number;
|
||||
problem: string;
|
||||
category: string;
|
||||
time: string;
|
||||
pace: string;
|
||||
status: string;
|
||||
category: "any%" | "100%";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user