bw-hspc-contest-env/extension/bwcontest/src/problemPanel.ts

import * as vscode from 'vscode';
import { getNonce } from './getNonce';
import urlJoin from 'url-join';
import { extensionSettings } from './extension';
import { runJava } from './run/java';
import { join } from 'path';
import { TeamData } from './SidebarProvider';

export type ProblemData = {
	id: number;
	name: string;
	pascalName: string;
	sampleInput: string;
	sampleOutput: string;
}[];

export type MessageType =
	| { msg: 'onRequestProblemData' }
	| { msg: 'onRun'; data: { problemId: number; input: string } }
	| { msg: 'onKill' };
export type WebviewMessageType =
	| { msg: 'onProblemData'; data: ProblemData }
	| { msg: 'onRunning' }
	| { msg: 'onRunningDone' }
	| { msg: 'onRunningOutput'; data: string };

type RunningProgram = {
	problemId: number;
	outputBuffer: string[];
	kill: () => void;
};

/**
 * Singleton class for problem panel
 */
export class BWPanel {
	public static currentPanel: BWPanel | undefined;

	private runningProgram: RunningProgram | undefined;
	private problemData: ProblemData | undefined;

	private constructor(
		private readonly context: vscode.ExtensionContext,
		private readonly panel: vscode.WebviewPanel,
		private readonly extensionUri: vscode.Uri,
		private readonly webUrl: string
	) {
		this.update();
		panel.onDidDispose(() => this.dispose());
	}

	public static show(context: vscode.ExtensionContext, webUrl: string) {
		const column = vscode.window.activeTextEditor
			? vscode.window.activeTextEditor.viewColumn
			: undefined;

		// Show panel if exists
		if (BWPanel.currentPanel !== undefined) {
			BWPanel.currentPanel.panel.reveal(column);
			return;
		}

		// Otherwise create new panel
		const panel = vscode.window.createWebviewPanel(
			'bwpanel',
			'BWContest',
			column || vscode.ViewColumn.One,
			{
				enableScripts: true,
				retainContextWhenHidden: true,
				localResourceRoots: [
					vscode.Uri.joinPath(context.extensionUri, 'media'),
					vscode.Uri.joinPath(context.extensionUri, 'out/compiled')
				]
			}
		);

		BWPanel.currentPanel = new BWPanel(context, panel, context.extensionUri, webUrl);
	}

	public static kill() {
		BWPanel.currentPanel?.dispose();
		BWPanel.currentPanel = undefined;
	}

	public dispose() {
		BWPanel.currentPanel = undefined;
	}

	private webviewPostMessage(m: WebviewMessageType) {
		this.panel.webview.postMessage(m);
	}

	private async update() {
		const webview = this.panel.webview;

		this.panel.webview.html = this._getHtmlForWebview(webview);
		webview.onDidReceiveMessage(async (m: MessageType) => {
			switch (m.msg) {
				case 'onKill': {
					if (this.runningProgram !== undefined) {
						this.runningProgram.kill();
						return;
					}
					break;
				}
				// 	this.kill();
				// }
				// case 'onSubmit': {
				// 	await vscode.workspace.saveAll();
				// 	if (!data.value) {
				// 		return;
				// 	}
				// 	const ans = await vscode.window.showInformationMessage(
				// 		`Are you sure you want to submit ${data.value.problemName}?`,
				// 		'Yes',
				// 		'No'
				// 	);
				// 	if (ans !== 'Yes') {
				// 		break;
				// 	}
				// 	try {
				// 		await submitProblem(
				// 			data.value.sessionToken,
				// 			data.value.contestId,
				// 			data.value.teamId,
				// 			data.value.problemId
				// 		);
				// 	} catch (err: any) {
				// 		vscode.window.showErrorMessage(err.message ?? 'Submission unsuccessful');
				// 		break;
				// 	}
				// 	vscode.window.showInformationMessage('Submitted!');
				// 	break;
				// }
				case 'onRun': {
					const teamData: TeamData | undefined = this.context.globalState.get('teamData');
					if (teamData === undefined) {
						return;
					}
					if (this.problemData === undefined) {
						return;
					}
					if (this.runningProgram !== undefined) {
						vscode.window.showErrorMessage('Already Running');
						return;
					}
					const problem = this.problemData.find((p) => (p.id = m.data.problemId));
					if (problem === undefined) {
						return;
					}
					await vscode.workspace.saveAll();
					const repoDir = extensionSettings().repoClonePath;
					const outputBuffer: string[] = [];
					this.webviewPostMessage({ msg: 'onRunning' });
					this.webviewPostMessage({ msg: 'onRunningOutput', data: '[Compiling...]' });

					const killFunc = await runJava(
						join(
							repoDir,
							'BWContest',
							teamData.contestId.toString(),
							teamData.teamId.toString(),
							problem.pascalName
						),
						join(
							repoDir,
							'BWContest',
							teamData.contestId.toString(),
							teamData.teamId.toString(),
							problem.pascalName,
							`${problem.pascalName}.java`
						),
						problem.pascalName,
						m.data.input,
						(data: string) => {
							outputBuffer.push(data);
							this.webviewPostMessage({ msg: 'onRunningOutput', data: outputBuffer.join('') });
						},
						() => {
							this.runningProgram = undefined;
							this.webviewPostMessage({ msg: 'onRunningDone' });
						}
					);
					if (killFunc !== undefined) {
						this.runningProgram = {
							problemId: m.data.problemId,
							outputBuffer: outputBuffer,
							kill: killFunc
						};
					} else {
						this.webviewPostMessage({ msg: 'onRunningDone' });
					}
					break;
				}
				case 'onRequestProblemData': {
					const token: string | undefined = this.context.globalState.get('token');
					if (token !== undefined) {
						const res = await fetch(urlJoin(this.webUrl, `/api/contest/${token}`));
						const data = await res.json();
						if (data.success === true) {
							this.problemData = data.problems;
							this.webviewPostMessage({
								msg: 'onProblemData',
								data: data.problems
							});
						}
					}
					break;
				}
				// case 'onInfo': {
				// 	if (!data.value) {
				// 		return;
				// 	}
				// 	vscode.window.showInformationMessage(data.value);
				// 	break;
				// }
				// case 'onError': {
				// 	if (!data.value) {
				// 		return;
				// 	}
				// 	vscode.window.showErrorMessage(data.value);
				// 	break;
				// }
			}
		});
	}

	private _getHtmlForWebview(webview: vscode.Webview) {
		const scriptUri = webview.asWebviewUri(
			vscode.Uri.joinPath(this.extensionUri, 'out/compiled', 'problemPanel.js')
		);

		const stylesResetUri = webview.asWebviewUri(
			vscode.Uri.joinPath(this.extensionUri, 'media', 'reset.css')
		);
		const stylesMainUri = webview.asWebviewUri(
			vscode.Uri.joinPath(this.extensionUri, 'media', 'vscode.css')
		);
		const cssUri = webview.asWebviewUri(
			vscode.Uri.joinPath(this.extensionUri, 'out/compiled', 'problemPanel.css')
		);

		const nonce = getNonce();

		return `<!DOCTYPE html>
			<html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <!--
                        Use a content security policy to only allow loading images from https or from our extension directory,
                        and only allow scripts that have a specific nonce.
                    -->
                    <meta http-equiv="Content-Security-Policy" content="img-src https: data:; style-src 'unsafe-inline' ${webview.cspSource}; script-src 'nonce-${nonce}';">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link href="${stylesResetUri}" rel="stylesheet">
                    <link href="${stylesMainUri}" rel="stylesheet">
                    <link href="${cssUri}" rel="stylesheet">
					<script nonce="${nonce}">
                    	const vscode = acquireVsCodeApi();
                	</script>
                </head>
                <body>
                </body>
                <script src=${scriptUri} nonce="${nonce}">
                </script>
			</html>`;
	}
}