mirror of
https://litchi.icu/ngc2207/judge.git
synced 2025-05-18 23:26:33 +00:00
refactor(playground): commented out the playground page
This commit is contained in:
parent
0c91222fb1
commit
1346ba7980
@ -1,230 +1,234 @@
|
|||||||
"use client";
|
// "use client";
|
||||||
|
|
||||||
import { Send } from "lucide-react";
|
// import { Send } from "lucide-react";
|
||||||
import * as monaco from "monaco-editor";
|
// import * as monaco from "monaco-editor";
|
||||||
import { Button } from "@/components/ui/button";
|
// import { Button } from "@/components/ui/button";
|
||||||
import { runCode } from "@/actions/docker/compile";
|
// import { runCode } from "@/actions/docker/compile";
|
||||||
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 { 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";
|
||||||
import { connectToLanguageServer, LSP_SUPPORTED_LANGUAGES } from "@/lib/lsp";
|
// import { connectToLanguageServer, LSP_SUPPORTED_LANGUAGES } from "@/lib/lsp";
|
||||||
import { codeToHtml } from "shiki";
|
// import { codeToHtml } from "shiki";
|
||||||
|
|
||||||
const files: {
|
// const files: {
|
||||||
[key: string]: { name: string; language: string; value: string };
|
// [key: string]: { name: string; language: string; value: string };
|
||||||
} = {
|
// } = {
|
||||||
c: {
|
// c: {
|
||||||
name: "main.c",
|
// name: "main.c",
|
||||||
language: "c",
|
// language: "c",
|
||||||
value: `#include <stdio.h>
|
// value: `#include <stdio.h>
|
||||||
int main() {
|
// int main() {
|
||||||
printf("Hello, World!");
|
// printf("Hello, World!");
|
||||||
return 0;
|
// return 0;
|
||||||
}`,
|
// }`,
|
||||||
},
|
// },
|
||||||
cpp: {
|
// cpp: {
|
||||||
name: "main.cpp",
|
// name: "main.cpp",
|
||||||
language: "cpp",
|
// language: "cpp",
|
||||||
value: `#include <iostream>
|
// value: `#include <iostream>
|
||||||
int main() {
|
// int main() {
|
||||||
std::cout << "Hello, World!";
|
// std::cout << "Hello, World!";
|
||||||
return 0;
|
// return 0;
|
||||||
}`,
|
// }`,
|
||||||
},
|
// },
|
||||||
java: {
|
// java: {
|
||||||
name: "Main.java",
|
// name: "Main.java",
|
||||||
language: "java",
|
// language: "java",
|
||||||
value: `public class Main {
|
// value: `public class Main {
|
||||||
public static void main(String[] args) {
|
// public static void main(String[] args) {
|
||||||
System.out.println("Hello, World!");
|
// System.out.println("Hello, World!");
|
||||||
}
|
// }
|
||||||
}`,
|
// }`,
|
||||||
},
|
// },
|
||||||
};
|
// };
|
||||||
|
|
||||||
loader.config({ monaco });
|
// loader.config({ monaco });
|
||||||
|
|
||||||
|
// export default function PlaygroundPage() {
|
||||||
|
// const [language, setLanguage] = useState<string>("c");
|
||||||
|
// const [highlightedMessage, setHighlightedMessage] = useState<string>("");
|
||||||
|
// const file = files[language];
|
||||||
|
// const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
|
||||||
|
// const webSocketRef = useRef<WebSocket | null>(null);
|
||||||
|
// const languageClientRef = useRef<MonacoLanguageClient | null>(null);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// const handleLanguageChange = async () => {
|
||||||
|
// if (editorRef.current) {
|
||||||
|
// const model = editorRef.current.getModel();
|
||||||
|
// if (model) {
|
||||||
|
// const lineCount = model.getLineCount();
|
||||||
|
// const lastLineLength = model.getLineLength(lineCount);
|
||||||
|
// editorRef.current.setPosition({
|
||||||
|
// lineNumber: lineCount,
|
||||||
|
// column: lastLineLength + 1,
|
||||||
|
// });
|
||||||
|
// editorRef.current.focus();
|
||||||
|
// if (
|
||||||
|
// languageClientRef.current &&
|
||||||
|
// language in LSP_SUPPORTED_LANGUAGES
|
||||||
|
// ) {
|
||||||
|
// await languageClientRef.current.stop();
|
||||||
|
// languageClientRef.current = null;
|
||||||
|
// }
|
||||||
|
// if (
|
||||||
|
// webSocketRef.current &&
|
||||||
|
// webSocketRef.current.readyState !== WebSocket.CLOSED &&
|
||||||
|
// webSocketRef.current.readyState !== WebSocket.CLOSING &&
|
||||||
|
// language in LSP_SUPPORTED_LANGUAGES
|
||||||
|
// ) {
|
||||||
|
// webSocketRef.current.close();
|
||||||
|
// webSocketRef.current = null;
|
||||||
|
// }
|
||||||
|
// if (language in LSP_SUPPORTED_LANGUAGES) {
|
||||||
|
// try {
|
||||||
|
// const languageClient = await connectToLanguageServer(
|
||||||
|
// language,
|
||||||
|
// webSocketRef
|
||||||
|
// );
|
||||||
|
// languageClientRef.current = languageClient;
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error("Failed to connect to language server:", error);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// handleLanguageChange();
|
||||||
|
// }, [language]);
|
||||||
|
|
||||||
|
// const handleSubmit = async () => {
|
||||||
|
// const code = editorRef.current?.getValue();
|
||||||
|
// if (!code) {
|
||||||
|
// console.error("No code to compile");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const result = await runCode(code, language);
|
||||||
|
|
||||||
|
// const statusMessage = result.success
|
||||||
|
// ? "Compilation successful"
|
||||||
|
// : "Compilation failed";
|
||||||
|
// const fullMessage = `${statusMessage}\n\n${result.output}`;
|
||||||
|
|
||||||
|
// const highlighted = await codeToHtml(fullMessage, {
|
||||||
|
// lang: "log",
|
||||||
|
// theme: "one-dark-pro",
|
||||||
|
// });
|
||||||
|
|
||||||
|
// setHighlightedMessage(highlighted);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="h-full flex flex-col">
|
||||||
|
// <div className="flex items-center justify-between">
|
||||||
|
// <Tabs defaultValue={language as string}>
|
||||||
|
// <ScrollArea>
|
||||||
|
// <TabsList className="m-3">
|
||||||
|
// <TabsTrigger
|
||||||
|
// value="c"
|
||||||
|
// onClick={() => setLanguage("c")}
|
||||||
|
// disabled={language === "c"}
|
||||||
|
// >
|
||||||
|
// <COriginal
|
||||||
|
// className="-ms-0.5 me-1.5"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// C
|
||||||
|
// </TabsTrigger>
|
||||||
|
// <TabsTrigger
|
||||||
|
// value="cpp"
|
||||||
|
// className="group"
|
||||||
|
// onClick={() => setLanguage("cpp")}
|
||||||
|
// disabled={language === "cpp"}
|
||||||
|
// >
|
||||||
|
// <CplusplusOriginal
|
||||||
|
// className="-ms-0.5 me-1.5"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// C++
|
||||||
|
// </TabsTrigger>
|
||||||
|
// <TabsTrigger
|
||||||
|
// value="java"
|
||||||
|
// className="group"
|
||||||
|
// onClick={() => setLanguage("java")}
|
||||||
|
// disabled={language === "java"}
|
||||||
|
// >
|
||||||
|
// <JavaOriginal
|
||||||
|
// className="-ms-0.5 me-1.5"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// Java
|
||||||
|
// </TabsTrigger>
|
||||||
|
// </TabsList>
|
||||||
|
// <ScrollBar orientation="horizontal" />
|
||||||
|
// </ScrollArea>
|
||||||
|
// </Tabs>
|
||||||
|
// <div className="m-3">
|
||||||
|
// <Button variant="outline" onClick={handleSubmit}>
|
||||||
|
// Submit
|
||||||
|
// <Send
|
||||||
|
// className="-me-1 ms-2 opacity-60"
|
||||||
|
// size={16}
|
||||||
|
// strokeWidth={2}
|
||||||
|
// aria-hidden="true"
|
||||||
|
// />
|
||||||
|
// </Button>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div className="flex flex-1 mt-0 m-3 gap-x-1">
|
||||||
|
// <div className="w-2/3">
|
||||||
|
// <Editor
|
||||||
|
// theme="vs-dark"
|
||||||
|
// path={file.name}
|
||||||
|
// defaultLanguage={file.language}
|
||||||
|
// defaultValue={file.value}
|
||||||
|
// options={{ automaticLayout: true }}
|
||||||
|
// onMount={(editor) => {
|
||||||
|
// editorRef.current = editor;
|
||||||
|
// if (editorRef.current) {
|
||||||
|
// const model = editorRef.current.getModel();
|
||||||
|
// if (model) {
|
||||||
|
// const lineCount = model.getLineCount();
|
||||||
|
// const lastLineLength = model.getLineLength(lineCount);
|
||||||
|
// editorRef.current.setPosition({
|
||||||
|
// lineNumber: lineCount,
|
||||||
|
// column: lastLineLength + 1,
|
||||||
|
// });
|
||||||
|
// editorRef.current.focus();
|
||||||
|
// connectToLanguageServer(language, webSocketRef)
|
||||||
|
// .then((languageClient) => {
|
||||||
|
// languageClientRef.current = languageClient;
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// console.error(
|
||||||
|
// "Failed to connect to language server:",
|
||||||
|
// error
|
||||||
|
// );
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// <div className="h-full w-1/3">
|
||||||
|
// <div dangerouslySetInnerHTML={{ __html: highlightedMessage }} />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
export default function PlaygroundPage() {
|
export default function PlaygroundPage() {
|
||||||
const [language, setLanguage] = useState<string>("c");
|
return null;
|
||||||
const [highlightedMessage, setHighlightedMessage] = useState<string>("");
|
|
||||||
const file = files[language];
|
|
||||||
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
|
|
||||||
const webSocketRef = useRef<WebSocket | null>(null);
|
|
||||||
const languageClientRef = useRef<MonacoLanguageClient | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleLanguageChange = async () => {
|
|
||||||
if (editorRef.current) {
|
|
||||||
const model = editorRef.current.getModel();
|
|
||||||
if (model) {
|
|
||||||
const lineCount = model.getLineCount();
|
|
||||||
const lastLineLength = model.getLineLength(lineCount);
|
|
||||||
editorRef.current.setPosition({
|
|
||||||
lineNumber: lineCount,
|
|
||||||
column: lastLineLength + 1,
|
|
||||||
});
|
|
||||||
editorRef.current.focus();
|
|
||||||
if (
|
|
||||||
languageClientRef.current &&
|
|
||||||
language in LSP_SUPPORTED_LANGUAGES
|
|
||||||
) {
|
|
||||||
await languageClientRef.current.stop();
|
|
||||||
languageClientRef.current = null;
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
webSocketRef.current &&
|
|
||||||
webSocketRef.current.readyState !== WebSocket.CLOSED &&
|
|
||||||
webSocketRef.current.readyState !== WebSocket.CLOSING &&
|
|
||||||
language in LSP_SUPPORTED_LANGUAGES
|
|
||||||
) {
|
|
||||||
webSocketRef.current.close();
|
|
||||||
webSocketRef.current = null;
|
|
||||||
}
|
|
||||||
if (language in LSP_SUPPORTED_LANGUAGES) {
|
|
||||||
try {
|
|
||||||
const languageClient = await connectToLanguageServer(
|
|
||||||
language,
|
|
||||||
webSocketRef
|
|
||||||
);
|
|
||||||
languageClientRef.current = languageClient;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to connect to language server:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleLanguageChange();
|
|
||||||
}, [language]);
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
const code = editorRef.current?.getValue();
|
|
||||||
if (!code) {
|
|
||||||
console.error("No code to compile");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await runCode(code, language);
|
|
||||||
|
|
||||||
const statusMessage = result.success
|
|
||||||
? "Compilation successful"
|
|
||||||
: "Compilation failed";
|
|
||||||
const fullMessage = `${statusMessage}\n\n${result.output}`;
|
|
||||||
|
|
||||||
const highlighted = await codeToHtml(fullMessage, {
|
|
||||||
lang: "log",
|
|
||||||
theme: "one-dark-pro",
|
|
||||||
});
|
|
||||||
|
|
||||||
setHighlightedMessage(highlighted);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full flex flex-col">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Tabs defaultValue={language as string}>
|
|
||||||
<ScrollArea>
|
|
||||||
<TabsList className="m-3">
|
|
||||||
<TabsTrigger
|
|
||||||
value="c"
|
|
||||||
onClick={() => setLanguage("c")}
|
|
||||||
disabled={language === "c"}
|
|
||||||
>
|
|
||||||
<COriginal
|
|
||||||
className="-ms-0.5 me-1.5"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
C
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="cpp"
|
|
||||||
className="group"
|
|
||||||
onClick={() => setLanguage("cpp")}
|
|
||||||
disabled={language === "cpp"}
|
|
||||||
>
|
|
||||||
<CplusplusOriginal
|
|
||||||
className="-ms-0.5 me-1.5"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
C++
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="java"
|
|
||||||
className="group"
|
|
||||||
onClick={() => setLanguage("java")}
|
|
||||||
disabled={language === "java"}
|
|
||||||
>
|
|
||||||
<JavaOriginal
|
|
||||||
className="-ms-0.5 me-1.5"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
Java
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
<ScrollBar orientation="horizontal" />
|
|
||||||
</ScrollArea>
|
|
||||||
</Tabs>
|
|
||||||
<div className="m-3">
|
|
||||||
<Button variant="outline" onClick={handleSubmit}>
|
|
||||||
Submit
|
|
||||||
<Send
|
|
||||||
className="-me-1 ms-2 opacity-60"
|
|
||||||
size={16}
|
|
||||||
strokeWidth={2}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-1 mt-0 m-3 gap-x-1">
|
|
||||||
<div className="w-2/3">
|
|
||||||
<Editor
|
|
||||||
theme="vs-dark"
|
|
||||||
path={file.name}
|
|
||||||
defaultLanguage={file.language}
|
|
||||||
defaultValue={file.value}
|
|
||||||
options={{ automaticLayout: true }}
|
|
||||||
onMount={(editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
if (editorRef.current) {
|
|
||||||
const model = editorRef.current.getModel();
|
|
||||||
if (model) {
|
|
||||||
const lineCount = model.getLineCount();
|
|
||||||
const lastLineLength = model.getLineLength(lineCount);
|
|
||||||
editorRef.current.setPosition({
|
|
||||||
lineNumber: lineCount,
|
|
||||||
column: lastLineLength + 1,
|
|
||||||
});
|
|
||||||
editorRef.current.focus();
|
|
||||||
connectToLanguageServer(language, webSocketRef)
|
|
||||||
.then((languageClient) => {
|
|
||||||
languageClientRef.current = languageClient;
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error(
|
|
||||||
"Failed to connect to language server:",
|
|
||||||
error
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="h-full w-1/3">
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: highlightedMessage }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user