mirror of
https://litchi.icu/ngc2207/judge.git
synced 2025-05-18 22:27:44 +00:00
refactor(playground): comment out PlayPage component and related code for cleanup
This commit is contained in:
parent
eeab77cca9
commit
ae396dfde1
@ -1,149 +1,153 @@
|
|||||||
"use client";
|
// "use client";
|
||||||
|
|
||||||
import {
|
// import {
|
||||||
Select,
|
// Select,
|
||||||
SelectContent,
|
// SelectContent,
|
||||||
SelectItem,
|
// SelectItem,
|
||||||
SelectTrigger,
|
// SelectTrigger,
|
||||||
SelectValue,
|
// SelectValue,
|
||||||
} from "@/components/ui/select";
|
// } from "@/components/ui/select";
|
||||||
import {
|
// import {
|
||||||
SUPPORTED_THEMES,
|
// SUPPORTED_THEMES,
|
||||||
highlightMonacoEditor,
|
// highlightMonacoEditor,
|
||||||
} from "@/constants/editor/themes";
|
// } from "@/constants/editor/themes";
|
||||||
import { Palette } from "lucide-react";
|
// import { Palette } from "lucide-react";
|
||||||
import * as monaco from "monaco-editor";
|
// import * as monaco from "monaco-editor";
|
||||||
import { Badge } from "@/components/ui/badge";
|
// import { Badge } from "@/components/ui/badge";
|
||||||
import { files } from "@/constants/editor/files";
|
// import { files } from "@/constants/editor/files";
|
||||||
import { useEffect, useRef, useState } from "react";
|
// import { useEffect, useRef, useState } from "react";
|
||||||
import { Editor, loader } from "@monaco-editor/react";
|
// import { Editor, loader } from "@monaco-editor/react";
|
||||||
import { MonacoLanguageClient } from "monaco-languageclient";
|
// import { MonacoLanguageClient } from "monaco-languageclient";
|
||||||
import { connectToLSP, LSP_SUPPORTED_LANGUAGES } from "@/lib/lsp";
|
// import { connectToLSP, LSP_SUPPORTED_LANGUAGES } from "@/lib/lsp";
|
||||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
// import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
// import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||||
import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
|
// import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
|
||||||
|
|
||||||
loader.config({ monaco });
|
// loader.config({ monaco });
|
||||||
|
|
||||||
function moveCursorToLastLine(editor: monaco.editor.IStandaloneCodeEditor) {
|
// function moveCursorToLastLine(editor: monaco.editor.IStandaloneCodeEditor) {
|
||||||
const model = editor.getModel();
|
// const model = editor.getModel();
|
||||||
if (model) {
|
// if (model) {
|
||||||
const lineCount = model.getLineCount();
|
// const lineCount = model.getLineCount();
|
||||||
const lastLineLength = model.getLineLength(lineCount);
|
// const lastLineLength = model.getLineLength(lineCount);
|
||||||
editor.setPosition({
|
// editor.setPosition({
|
||||||
lineNumber: lineCount,
|
// lineNumber: lineCount,
|
||||||
column: lastLineLength + 1,
|
// column: lastLineLength + 1,
|
||||||
});
|
// });
|
||||||
editor.focus();
|
// editor.focus();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
// export default function PlayPage() {
|
||||||
|
// const [language, setLanguage] = useState<string>("c");
|
||||||
|
// const [theme, setTheme] = useState<string>("vitesse-dark");
|
||||||
|
// const file = files[language];
|
||||||
|
// const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
|
||||||
|
// const languageClientRef = useRef<MonacoLanguageClient | null>(null);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (editorRef.current) {
|
||||||
|
// moveCursorToLastLine(editorRef.current);
|
||||||
|
// if (languageClientRef.current) {
|
||||||
|
// languageClientRef.current.stop();
|
||||||
|
// languageClientRef.current = null;
|
||||||
|
// }
|
||||||
|
// if (language in LSP_SUPPORTED_LANGUAGES) {
|
||||||
|
// connectToLSP(language).then((languageClient) => {
|
||||||
|
// languageClientRef.current = languageClient;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }, [language]);
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="h-full flex flex-col">
|
||||||
|
// <header className="flex items-center gap-x-2 m-3 mt-0">
|
||||||
|
// <Tabs defaultValue={language}>
|
||||||
|
// <ScrollArea>
|
||||||
|
// <TabsList>
|
||||||
|
// <TabsTrigger value="c" onClick={() => setLanguage("c")}>
|
||||||
|
// <COriginal
|
||||||
|
// className="-ms-0.5 me-1.5"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// C
|
||||||
|
// <Badge className="ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50">
|
||||||
|
// LSP
|
||||||
|
// </Badge>
|
||||||
|
// </TabsTrigger>
|
||||||
|
// <TabsTrigger
|
||||||
|
// value="cpp"
|
||||||
|
// className="group"
|
||||||
|
// onClick={() => setLanguage("cpp")}
|
||||||
|
// >
|
||||||
|
// <CplusplusOriginal
|
||||||
|
// className="-ms-0.5 me-1.5"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// C++
|
||||||
|
// <Badge className="ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50">
|
||||||
|
// LSP
|
||||||
|
// </Badge>
|
||||||
|
// </TabsTrigger>
|
||||||
|
// <TabsTrigger
|
||||||
|
// value="java"
|
||||||
|
// className="group"
|
||||||
|
// onClick={() => setLanguage("java")}
|
||||||
|
// >
|
||||||
|
// <JavaOriginal
|
||||||
|
// className="-ms-0.5 me-1.5"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// Java
|
||||||
|
// </TabsTrigger>
|
||||||
|
// </TabsList>
|
||||||
|
// <ScrollBar orientation="horizontal" />
|
||||||
|
// </ScrollArea>
|
||||||
|
// </Tabs>
|
||||||
|
// <Select value={theme} onValueChange={setTheme}>
|
||||||
|
// <SelectTrigger className="relative ps-9 w-40">
|
||||||
|
// <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
|
||||||
|
// <Palette size={16} strokeWidth={2} aria-hidden="true" />
|
||||||
|
// </div>
|
||||||
|
// <SelectValue placeholder="Select Theme" />
|
||||||
|
// </SelectTrigger>
|
||||||
|
// <SelectContent>
|
||||||
|
// {SUPPORTED_THEMES.map((theme) => (
|
||||||
|
// <SelectItem key={theme.key} value={theme.value}>
|
||||||
|
// <span className="truncate">{theme.label}</span>
|
||||||
|
// </SelectItem>
|
||||||
|
// ))}
|
||||||
|
// </SelectContent>
|
||||||
|
// </Select>
|
||||||
|
// </header>
|
||||||
|
// <Editor
|
||||||
|
// theme={theme}
|
||||||
|
// path={file.name}
|
||||||
|
// defaultLanguage={file.language}
|
||||||
|
// defaultValue={file.value}
|
||||||
|
// options={{ fontSize: 48, automaticLayout: true }}
|
||||||
|
// beforeMount={highlightMonacoEditor}
|
||||||
|
// onMount={(editor) => {
|
||||||
|
// editorRef.current = editor;
|
||||||
|
// moveCursorToLastLine(editor);
|
||||||
|
// if (language in LSP_SUPPORTED_LANGUAGES) {
|
||||||
|
// connectToLSP(language).then((languageClient) => {
|
||||||
|
// languageClientRef.current = languageClient;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
export default function PlayPage() {
|
export default function PlayPage() {
|
||||||
const [language, setLanguage] = useState<string>("c");
|
return null;
|
||||||
const [theme, setTheme] = useState<string>("vitesse-dark");
|
|
||||||
const file = files[language];
|
|
||||||
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
|
|
||||||
const languageClientRef = useRef<MonacoLanguageClient | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (editorRef.current) {
|
|
||||||
moveCursorToLastLine(editorRef.current);
|
|
||||||
if (languageClientRef.current) {
|
|
||||||
languageClientRef.current.stop();
|
|
||||||
languageClientRef.current = null;
|
|
||||||
}
|
|
||||||
if (language in LSP_SUPPORTED_LANGUAGES) {
|
|
||||||
connectToLSP(language).then((languageClient) => {
|
|
||||||
languageClientRef.current = languageClient;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [language]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full flex flex-col">
|
|
||||||
<header className="flex items-center gap-x-2 m-3 mt-0">
|
|
||||||
<Tabs defaultValue={language}>
|
|
||||||
<ScrollArea>
|
|
||||||
<TabsList>
|
|
||||||
<TabsTrigger value="c" onClick={() => setLanguage("c")}>
|
|
||||||
<COriginal
|
|
||||||
className="-ms-0.5 me-1.5"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
C
|
|
||||||
<Badge className="ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50">
|
|
||||||
LSP
|
|
||||||
</Badge>
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="cpp"
|
|
||||||
className="group"
|
|
||||||
onClick={() => setLanguage("cpp")}
|
|
||||||
>
|
|
||||||
<CplusplusOriginal
|
|
||||||
className="-ms-0.5 me-1.5"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
C++
|
|
||||||
<Badge className="ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50">
|
|
||||||
LSP
|
|
||||||
</Badge>
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="java"
|
|
||||||
className="group"
|
|
||||||
onClick={() => setLanguage("java")}
|
|
||||||
>
|
|
||||||
<JavaOriginal
|
|
||||||
className="-ms-0.5 me-1.5"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
Java
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
<ScrollBar orientation="horizontal" />
|
|
||||||
</ScrollArea>
|
|
||||||
</Tabs>
|
|
||||||
<Select value={theme} onValueChange={setTheme}>
|
|
||||||
<SelectTrigger className="relative ps-9 w-40">
|
|
||||||
<div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
|
|
||||||
<Palette size={16} strokeWidth={2} aria-hidden="true" />
|
|
||||||
</div>
|
|
||||||
<SelectValue placeholder="Select Theme" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{SUPPORTED_THEMES.map((theme) => (
|
|
||||||
<SelectItem key={theme.key} value={theme.value}>
|
|
||||||
<span className="truncate">{theme.label}</span>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</header>
|
|
||||||
<Editor
|
|
||||||
theme={theme}
|
|
||||||
path={file.name}
|
|
||||||
defaultLanguage={file.language}
|
|
||||||
defaultValue={file.value}
|
|
||||||
options={{ fontSize: 48, automaticLayout: true }}
|
|
||||||
beforeMount={highlightMonacoEditor}
|
|
||||||
onMount={(editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
moveCursorToLastLine(editor);
|
|
||||||
if (language in LSP_SUPPORTED_LANGUAGES) {
|
|
||||||
connectToLSP(language).then((languageClient) => {
|
|
||||||
languageClientRef.current = languageClient;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user