forked from Arnab-Afk/monaco
925 lines
31 KiB
JavaScript
925 lines
31 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import Editor from "@monaco-editor/react";
|
|
import { Play, Send } from 'lucide-react';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
const CodeChallenge = () => {
|
|
const [test, setTest] = useState(null);
|
|
const [questions, setQuestions] = useState([]);
|
|
const [activeQuestion, setActiveQuestion] = useState("Q.1");
|
|
const [language, setLanguage] = useState("JavaScript");
|
|
const [code, setCode] = useState("");
|
|
const [isRunning, setIsRunning] = useState(false);
|
|
const [terminalOutput, setTerminalOutput] = useState([]);
|
|
const [autoSelected, setAutoSelected] = useState(true);
|
|
const [activeSocket, setActiveSocket] = useState(null);
|
|
const [submissionId, setSubmissionId] = useState(null);
|
|
const [timeRemaining, setTimeRemaining] = useState(null);
|
|
const socketRef = useRef(null);
|
|
const { token } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
// Load test data from localStorage
|
|
useEffect(() => {
|
|
const testData = localStorage.getItem('currentTest');
|
|
if (testData) {
|
|
try {
|
|
const parsedData = JSON.parse(testData);
|
|
setTest(parsedData);
|
|
if (parsedData.questions && parsedData.questions.length > 0) {
|
|
setQuestions(parsedData.questions);
|
|
// Set initial code from first question
|
|
const firstQuestion = parsedData.questions[0];
|
|
setLanguage(firstQuestion.programming_language || 'JavaScript');
|
|
setCode(firstQuestion.code_template || getDefaultTemplate(firstQuestion.programming_language || 'JavaScript'));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading test data:', error);
|
|
}
|
|
} else {
|
|
// No test data, redirect back to tests
|
|
navigate('/tests');
|
|
}
|
|
}, [navigate]);
|
|
|
|
// Timer countdown
|
|
useEffect(() => {
|
|
if (!test || !test.end_time) return;
|
|
|
|
const updateTimer = () => {
|
|
const now = new Date();
|
|
const endTime = new Date(test.end_time);
|
|
const diff = endTime - now;
|
|
|
|
if (diff <= 0) {
|
|
setTimeRemaining('Time Up!');
|
|
// Optionally auto-submit or redirect
|
|
return;
|
|
}
|
|
|
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
|
|
setTimeRemaining(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
|
|
};
|
|
|
|
updateTimer(); // Initial call
|
|
const timerId = setInterval(updateTimer, 1000);
|
|
|
|
return () => clearInterval(timerId);
|
|
}, [test]);
|
|
|
|
// Get default code template for a language
|
|
const getDefaultTemplate = (lang) => {
|
|
const templates = {
|
|
'JavaScript': '// Write your code here\n',
|
|
'Python': '# Write your code here\n',
|
|
'Java': 'public class Solution {\n public static void main(String[] args) {\n // Write your code here\n }\n}',
|
|
'C++': '#include <iostream>\nusing namespace std;\n\nint main() {\n // Write your code here\n return 0;\n}',
|
|
'C': '#include <stdio.h>\n\nint main() {\n // Write your code here\n return 0;\n}'
|
|
};
|
|
return templates[lang] || '// Write your code here\n';
|
|
};
|
|
|
|
// Map question index to Q.1, Q.2, Q.3 format
|
|
const getQuestionIndex = (questionKey) => {
|
|
const index = parseInt(questionKey.replace('Q.', '')) - 1;
|
|
return index;
|
|
};
|
|
|
|
// Get current question based on activeQuestion
|
|
const getCurrentQuestion = () => {
|
|
const index = getQuestionIndex(activeQuestion);
|
|
return questions[index] || null;
|
|
};
|
|
|
|
// Map frontend language names to backend language identifiers
|
|
const getLanguageIdentifier = (uiLanguage) => {
|
|
const languageMap = {
|
|
'javascript': 'javascript',
|
|
'python': 'python',
|
|
'java': 'java',
|
|
'c++': 'cpp',
|
|
'c': 'c'
|
|
};
|
|
// Important: make sure we convert to lowercase to match the backend's expected format
|
|
return languageMap[uiLanguage.toLowerCase()] || uiLanguage.toLowerCase();
|
|
};
|
|
|
|
// Reset execution state to allow rerunning
|
|
const resetExecutionState = () => {
|
|
setIsRunning(false);
|
|
|
|
// Properly close the socket if it exists and is open
|
|
if (socketRef.current) {
|
|
if (socketRef.current.readyState === WebSocket.OPEN) {
|
|
socketRef.current.close();
|
|
}
|
|
socketRef.current = null;
|
|
}
|
|
|
|
// Ensure activeSocket is also nullified
|
|
setActiveSocket(null);
|
|
|
|
console.log('Execution state reset, buttons should be enabled');
|
|
};
|
|
|
|
// Example problem data
|
|
const problems = {
|
|
"Q.1": {
|
|
id: "two-sum",
|
|
title: "Two Sum",
|
|
description: "Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.",
|
|
constraints: "You may assume that each input would have exactly one solution, and you may not use the same element twice.",
|
|
examples: [
|
|
{
|
|
input: "nums = [2,7,11,15], target = 9",
|
|
output: "[0,1]",
|
|
explanation: "Because nums[0] + nums[1] == 9, we return [0, 1]."
|
|
},
|
|
{
|
|
input: "nums = [3,2,4], target = 6",
|
|
output: "[1,2]"
|
|
},
|
|
{
|
|
input: "nums = [3,3], target = 6",
|
|
output: "[0,1]"
|
|
}
|
|
],
|
|
starterCode: `/**
|
|
* @param {number[]} nums
|
|
* @param {number} target
|
|
* @return {number[]}
|
|
*/
|
|
var twoSum = function(nums, target) {
|
|
// Write your solution here
|
|
|
|
};`
|
|
},
|
|
"Q.2": {
|
|
id: "palindrome-number",
|
|
title: "Palindrome Number",
|
|
description: "Given an integer x, return true if x is a palindrome, and false otherwise.",
|
|
examples: [
|
|
{
|
|
input: "x = 121",
|
|
output: "true"
|
|
},
|
|
{
|
|
input: "x = -121",
|
|
output: "false",
|
|
explanation: "From left to right, it reads -121. From right to left, it reads 121-. Therefore it is not a palindrome."
|
|
}
|
|
],
|
|
starterCode: `/**
|
|
* @param {number} x
|
|
* @return {boolean}
|
|
*/
|
|
var isPalindrome = function(x) {
|
|
// Write your solution here
|
|
|
|
};`
|
|
},
|
|
"Q.3": {
|
|
id: "valid-parentheses",
|
|
title: "Valid Parentheses",
|
|
description: "Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.",
|
|
constraints: "An input string is valid if: Open brackets must be closed by the same type of brackets. Open brackets must be closed in the correct order.",
|
|
examples: [
|
|
{
|
|
input: 's = "()"',
|
|
output: "true"
|
|
},
|
|
{
|
|
input: 's = "()[]{}"',
|
|
output: "true"
|
|
},
|
|
{
|
|
input: 's = "(]"',
|
|
output: "false"
|
|
}
|
|
],
|
|
starterCode: `/**
|
|
* @param {string} s
|
|
* @return {boolean}
|
|
*/
|
|
var isValid = function(s) {
|
|
// Write your solution here
|
|
|
|
};`
|
|
}
|
|
};
|
|
|
|
// Get appropriate starter code based on language
|
|
const getStarterCode = (problem, lang) => {
|
|
// Language-specific starter code templates
|
|
const templates = {
|
|
'JavaScript': problem.starterCode,
|
|
'C': `#include <stdio.h>
|
|
#include <stdlib.h>
|
|
#include <stdbool.h>
|
|
|
|
// ${problem.title} solution
|
|
|
|
int main() {
|
|
// Write your solution here
|
|
|
|
return 0;
|
|
}`,
|
|
'Python': `# ${problem.title}
|
|
def solution():
|
|
# Write your solution here
|
|
# Use input() for user input in Python
|
|
# Example: name = input("Enter your name: ")
|
|
pass
|
|
|
|
if __name__ == "__main__":
|
|
solution()`,
|
|
'Java': `public class Solution {
|
|
// ${problem.title}
|
|
public static void main(String[] args) {
|
|
// Write your solution here
|
|
|
|
}
|
|
}`,
|
|
'C++': `#include <iostream>
|
|
#include <vector>
|
|
using namespace std;
|
|
|
|
// ${problem.title} solution
|
|
int main() {
|
|
// Write your solution here
|
|
|
|
return 0;
|
|
}`
|
|
};
|
|
|
|
return templates[lang] || problem.starterCode;
|
|
};
|
|
|
|
// Set initial code based on active problem
|
|
useEffect(() => {
|
|
const currentQuestion = getCurrentQuestion();
|
|
if (currentQuestion) {
|
|
// Check if there's a saved submission for this question
|
|
const savedSubmission = localStorage.getItem(`submission_${test?.id}_${currentQuestion.id}`);
|
|
if (savedSubmission) {
|
|
try {
|
|
const submission = JSON.parse(savedSubmission);
|
|
setCode(submission.code);
|
|
setLanguage(currentQuestion.programming_language || 'JavaScript');
|
|
setTerminalOutput([
|
|
{ type: 'system', content: `Loaded your previous submission from ${new Date(submission.timestamp).toLocaleString()}` }
|
|
]);
|
|
} catch (error) {
|
|
console.error('Error loading saved submission:', error);
|
|
setLanguage(currentQuestion.programming_language || 'JavaScript');
|
|
setCode(currentQuestion.code_template || getDefaultTemplate(currentQuestion.programming_language || 'JavaScript'));
|
|
}
|
|
} else {
|
|
setLanguage(currentQuestion.programming_language || 'JavaScript');
|
|
setCode(currentQuestion.code_template || getDefaultTemplate(currentQuestion.programming_language || 'JavaScript'));
|
|
setTerminalOutput([]);
|
|
}
|
|
} else if (problems[activeQuestion]) {
|
|
// Fallback to example problems if no real test data
|
|
setCode(getStarterCode(problems[activeQuestion], language));
|
|
setTerminalOutput([]);
|
|
}
|
|
}, [activeQuestion]);
|
|
|
|
// Cleanup WebSocket connection on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (socketRef.current) {
|
|
socketRef.current.close();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Set a safety timeout to ensure buttons are re-enabled if execution hangs
|
|
useEffect(() => {
|
|
let safetyTimer = null;
|
|
|
|
if (isRunning) {
|
|
// If execution is running for more than 30 seconds, reset state
|
|
safetyTimer = setTimeout(() => {
|
|
console.log('Safety timeout reached, re-enabling buttons');
|
|
resetExecutionState();
|
|
}, 30000);
|
|
}
|
|
|
|
return () => {
|
|
if (safetyTimer) clearTimeout(safetyTimer);
|
|
};
|
|
}, [isRunning]);
|
|
|
|
// Connect to WebSocket
|
|
const connectToWebSocket = (id) => {
|
|
console.log('Connecting to WebSocket with ID:', id);
|
|
|
|
// Force close any existing connections
|
|
if (socketRef.current) {
|
|
console.log('Closing existing socket, state:', socketRef.current.readyState);
|
|
socketRef.current.onclose = null; // Remove existing handler to avoid conflicts
|
|
socketRef.current.onerror = null;
|
|
socketRef.current.onmessage = null;
|
|
|
|
if (socketRef.current.readyState !== WebSocket.CLOSED) {
|
|
socketRef.current.close();
|
|
}
|
|
socketRef.current = null;
|
|
}
|
|
|
|
if (activeSocket) {
|
|
console.log('Clearing active socket reference');
|
|
setActiveSocket(null);
|
|
}
|
|
|
|
console.log('Creating new WebSocket connection');
|
|
const wsUrl = `ws://localhost:8080/api/ws/terminal/${id}`;
|
|
const socket = new WebSocket(wsUrl);
|
|
|
|
socket.onopen = () => {
|
|
console.log('WebSocket connection established');
|
|
setActiveSocket(socket);
|
|
};
|
|
|
|
socket.onmessage = (event) => {
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
console.log('WebSocket message received:', message, 'Current isRunning state:', isRunning);
|
|
|
|
switch (message.type) {
|
|
case 'output':
|
|
// Handle output message based on the format seen in the screenshot
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{
|
|
type: message.content.isError ? 'error' : 'output',
|
|
content: message.content.text
|
|
}
|
|
]);
|
|
break;
|
|
|
|
case 'input_prompt':
|
|
// Handle input prompt message (e.g., "Enter your name:")
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'output', content: message.content }
|
|
]);
|
|
break;
|
|
|
|
case 'status':
|
|
let statusText = '';
|
|
let statusValue = '';
|
|
|
|
if (typeof message.content === 'object') {
|
|
statusText = `Status: ${message.content.status}`;
|
|
statusValue = message.content.status;
|
|
} else {
|
|
statusText = `Status: ${message.content}`;
|
|
statusValue = message.content;
|
|
}
|
|
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'system', content: statusText }
|
|
]);
|
|
|
|
// If status contains "completed" or "failed", stop running
|
|
if (statusValue.includes('completed') || statusValue.includes('failed')) {
|
|
console.log('Execution completed or failed, stopping');
|
|
setTimeout(() => {
|
|
setIsRunning(false);
|
|
}, 500); // Small delay to ensure UI updates properly
|
|
}
|
|
break;
|
|
|
|
case 'error':
|
|
let errorContent = '';
|
|
if (typeof message.content === 'object' && message.content.message) {
|
|
errorContent = message.content.message;
|
|
} else {
|
|
errorContent = String(message.content);
|
|
}
|
|
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: errorContent }
|
|
]);
|
|
|
|
console.log('Error received, enabling buttons');
|
|
setTimeout(() => {
|
|
setIsRunning(false);
|
|
}, 500); // Small delay to ensure UI updates properly
|
|
break;
|
|
|
|
case 'system':
|
|
const systemContent = String(message.content);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'system', content: systemContent }
|
|
]);
|
|
|
|
// Check for connection closing message which indicates execution is complete
|
|
if (systemContent.includes('Connection will close') ||
|
|
systemContent.includes('completed successfully') ||
|
|
systemContent.includes('Execution completed')) {
|
|
console.log('System message indicates completion, enabling buttons');
|
|
setTimeout(() => {
|
|
setIsRunning(false);
|
|
}, 500);
|
|
}
|
|
break;
|
|
|
|
default:
|
|
// Handle any other message types or direct string content
|
|
console.log('Unknown message type:', message);
|
|
if (typeof message === 'object') {
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'output', content: JSON.stringify(message) }
|
|
]);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error parsing WebSocket message:', error);
|
|
}
|
|
};
|
|
|
|
socket.onerror = (error) => {
|
|
console.error('WebSocket error:', error);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: 'WebSocket connection error' }
|
|
]);
|
|
|
|
console.log('WebSocket error, enabling buttons');
|
|
setTimeout(() => {
|
|
setIsRunning(false);
|
|
}, 500); // Small delay to ensure UI updates properly
|
|
};
|
|
|
|
socket.onclose = () => {
|
|
console.log('WebSocket connection closed');
|
|
setActiveSocket(null);
|
|
|
|
// Ensure buttons are re-enabled when the connection closes
|
|
setTimeout(() => {
|
|
resetExecutionState();
|
|
}, 100);
|
|
};
|
|
|
|
// Set the socket reference early to ensure we can clean it up if needed
|
|
socketRef.current = socket;
|
|
return socket;
|
|
};
|
|
|
|
// Handle code execution
|
|
const runCode = async () => {
|
|
console.log('Run button clicked, current state:', {
|
|
isRunning,
|
|
socketState: activeSocket ? activeSocket.readyState : 'no socket',
|
|
socketRefState: socketRef.current ? socketRef.current.readyState : 'no socket ref'
|
|
});
|
|
|
|
// First make sure previous connections are fully closed
|
|
resetExecutionState();
|
|
|
|
// Increase the delay to ensure clean state before starting new execution
|
|
setTimeout(async () => {
|
|
// Double-check socket state before proceeding
|
|
if (activeSocket || socketRef.current) {
|
|
console.warn('Socket still exists after reset, forcing cleanup');
|
|
if (activeSocket && activeSocket.readyState !== WebSocket.CLOSED) {
|
|
activeSocket.close();
|
|
}
|
|
if (socketRef.current && socketRef.current.readyState !== WebSocket.CLOSED) {
|
|
socketRef.current.close();
|
|
}
|
|
socketRef.current = null;
|
|
setActiveSocket(null);
|
|
|
|
// Extra delay to ensure socket is fully closed
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
}
|
|
|
|
setIsRunning(true);
|
|
const currentQuestion = getCurrentQuestion();
|
|
setTerminalOutput([
|
|
{ type: 'system', content: `Running ${currentQuestion?.title || problems[activeQuestion]?.id || 'code'}...` }
|
|
]);
|
|
|
|
try {
|
|
// Submit code to the backend
|
|
const response = await fetch('http://localhost:8080/api/submit', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
code: code,
|
|
language: getLanguageIdentifier(language),
|
|
input: '',
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
setSubmissionId(data.id);
|
|
|
|
// Connect to WebSocket for real-time updates
|
|
connectToWebSocket(data.id);
|
|
|
|
} catch (error) {
|
|
console.error('Error submitting code:', error);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: `Error: ${error.message}` }
|
|
]);
|
|
|
|
resetExecutionState();
|
|
}
|
|
}, 200); // Increased delay to ensure clean state
|
|
};
|
|
|
|
// Handle code submission
|
|
const submitCode = async () => {
|
|
setIsRunning(true);
|
|
const currentQuestion = getCurrentQuestion();
|
|
setTerminalOutput([
|
|
{ type: 'system', content: `Submitting solution for ${currentQuestion?.title || problems[activeQuestion]?.id || 'problem'}...` }
|
|
]);
|
|
|
|
try {
|
|
// If we have real test data, submit to faculty backend
|
|
if (currentQuestion && test) {
|
|
const apiUrl = import.meta.env.VITE_FACULTY_API_URL || 'http://localhost:5000/api';
|
|
const response = await fetch(`${apiUrl}/students/submissions`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
testId: test.id,
|
|
answers: [{
|
|
questionId: currentQuestion.id,
|
|
submittedAnswer: code
|
|
}]
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'system', content: '✓ Submission successful!' },
|
|
{ type: 'output', content: `Your answer has been submitted for Question ${getQuestionIndex(activeQuestion) + 1}` },
|
|
{ type: 'output', content: `Test: ${test.title}` },
|
|
{ type: 'system', content: 'You can modify and resubmit your answer anytime before the test ends.' }
|
|
]);
|
|
|
|
// Store submission locally
|
|
localStorage.setItem(`submission_${test.id}_${currentQuestion.id}`, JSON.stringify({
|
|
code,
|
|
timestamp: new Date().toISOString()
|
|
}));
|
|
} else {
|
|
throw new Error(data.message || 'Submission failed');
|
|
}
|
|
|
|
setIsRunning(false);
|
|
return;
|
|
}
|
|
|
|
// If no test data, show error
|
|
throw new Error('No test data available. Please start a test from the test list.');
|
|
|
|
} catch (error) {
|
|
console.error('Error submitting solution:', error);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: `Error: ${error.message}` }
|
|
]);
|
|
setIsRunning(false);
|
|
}
|
|
};
|
|
|
|
// Render the current problem
|
|
const renderProblem = () => {
|
|
const currentQuestion = getCurrentQuestion();
|
|
|
|
// If we have real test question, use it
|
|
if (currentQuestion) {
|
|
return (
|
|
<div className="problem-container">
|
|
<h1>{currentQuestion.title || `Question ${getQuestionIndex(activeQuestion) + 1}`}</h1>
|
|
|
|
<div className="problem-description">
|
|
<p>{currentQuestion.question_text || currentQuestion.description}</p>
|
|
{currentQuestion.constraints && <p><strong>Constraints:</strong> {currentQuestion.constraints}</p>}
|
|
{currentQuestion.marks && <p><strong>Points:</strong> {currentQuestion.marks}</p>}
|
|
</div>
|
|
|
|
{currentQuestion.test_cases && currentQuestion.test_cases.length > 0 && (
|
|
<div className="test-cases">
|
|
<h3>Example Test Cases:</h3>
|
|
{currentQuestion.test_cases.slice(0, 2).map((testCase, idx) => (
|
|
<div key={idx} className="test-case">
|
|
<p><strong>Input:</strong> {testCase.input}</p>
|
|
<p><strong>Expected Output:</strong> {testCase.expected_output}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Fallback to example problems
|
|
const problem = problems[activeQuestion];
|
|
if (!problem) return null;
|
|
|
|
return (
|
|
<div className="problem-container">
|
|
<h1>{problem.title}</h1>
|
|
|
|
<div className="problem-description">
|
|
<p>{problem.description}</p>
|
|
{problem.constraints && <p>{problem.constraints}</p>}
|
|
</div>
|
|
|
|
{/* Test cases section removed */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Add this useEffect to monitor socket state
|
|
useEffect(() => {
|
|
// If we have an active socket but aren't running, we should clean up
|
|
if (activeSocket && !isRunning) {
|
|
console.log('Cleaning up inactive socket');
|
|
if (activeSocket.readyState === WebSocket.OPEN) {
|
|
activeSocket.close();
|
|
}
|
|
setActiveSocket(null);
|
|
}
|
|
}, [activeSocket, isRunning]);
|
|
|
|
return (
|
|
<div className="code-challenge-container">
|
|
<header className="code-challenge-header">
|
|
<h1>{test?.title || 'OnScreen Test'}</h1>
|
|
{timeRemaining && (
|
|
<div className="timer-display" style={{
|
|
fontSize: '1.2rem',
|
|
fontWeight: 'bold',
|
|
color: timeRemaining === 'Time Up!' ? '#ef4444' : '#10b981',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem'
|
|
}}>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
{timeRemaining}
|
|
</div>
|
|
)}
|
|
</header>
|
|
|
|
{/* <div className="code-challenge-problem-nav">
|
|
<h3 className="problem-number">1. {problems["Q.1"].title}</h3>
|
|
</div> */}
|
|
|
|
<div className="code-challenge-main">
|
|
<div className="problem-tabs">
|
|
{(questions.length > 0 ? questions : [1, 2, 3]).map((q, idx) => {
|
|
const questionKey = `Q.${idx + 1}`;
|
|
return (
|
|
<button
|
|
key={questionKey}
|
|
className={activeQuestion === questionKey ? "tab-active" : ""}
|
|
onClick={() => setActiveQuestion(questionKey)}
|
|
disabled={questions.length > 0 && idx >= questions.length}
|
|
>
|
|
{questionKey}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="problem-content">
|
|
{renderProblem()}
|
|
</div>
|
|
|
|
<div className="editor-section">
|
|
<div className="editor-header">
|
|
<div className="editor-controls">
|
|
<select
|
|
value={language}
|
|
onChange={(e) => setLanguage(e.target.value)}
|
|
className="language-selector"
|
|
>
|
|
<option value="JavaScript">JavaScript</option>
|
|
<option value="Python">Python</option>
|
|
<option value="Java">Java</option>
|
|
<option value="C++">C++</option>
|
|
<option value="C">C</option>
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
<div className="editor-actions">
|
|
<button
|
|
className="run-btn"
|
|
onClick={runCode}
|
|
disabled={isRunning}
|
|
title={isRunning ? "Code execution in progress..." : "Run code"}
|
|
>
|
|
{isRunning ? (
|
|
<>
|
|
<span className="loading-spinner"></span> Running...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play size={16} /> Run
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
className="submit-btn"
|
|
onClick={submitCode}
|
|
disabled={isRunning}
|
|
title={isRunning ? "Code execution in progress..." : "Submit solution"}
|
|
>
|
|
{isRunning ? (
|
|
<>
|
|
<span className="loading-spinner"></span> Submitting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Send size={16} /> Submit
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="editor-container">
|
|
<Editor
|
|
height="100%"
|
|
defaultLanguage="python"
|
|
language={language.toLowerCase() === 'c++' ? 'cpp' : language.toLowerCase()}
|
|
value={code}
|
|
onChange={(value) => setCode(value)}
|
|
theme="hc-black"
|
|
options={{
|
|
fontSize: 14,
|
|
minimap: { enabled: false },
|
|
scrollBeyondLastLine: false,
|
|
automaticLayout: true,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="terminal-section">
|
|
<div className="terminal-header">
|
|
<span>Terminal</span>
|
|
{/* <div className="terminal-controls">
|
|
<button className="terminal-btn">⊞</button>
|
|
<button className="terminal-btn">□</button>
|
|
<button className="terminal-btn">✕</button>
|
|
</div> */}
|
|
</div>
|
|
<div className="terminal-content">
|
|
{terminalOutput.map((line, index) => (
|
|
<div
|
|
key={index}
|
|
className={`terminal-line ${line.type}`}
|
|
>
|
|
{line.content}
|
|
</div>
|
|
))}
|
|
<div className="terminal-prompt">
|
|
<span className="prompt-symbol">$</span>
|
|
<input
|
|
type="text"
|
|
className="terminal-input"
|
|
placeholder="Type here..."
|
|
disabled={!isRunning}
|
|
// Update the ref callback
|
|
ref={(inputEl) => {
|
|
// Auto-focus input when isRunning changes to true
|
|
if (inputEl && isRunning) {
|
|
inputEl.focus();
|
|
// Clear any previous input
|
|
inputEl.value = '';
|
|
}
|
|
}}
|
|
onKeyDown={(e) => { // Change from onKeyPress to onKeyDown for better cross-browser support
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Prevent default to avoid form submissions
|
|
const input = e.target.value.trim();
|
|
|
|
if (!input) return; // Skip empty input
|
|
|
|
if (activeSocket && activeSocket.readyState === WebSocket.OPEN) {
|
|
try {
|
|
// Send input to server
|
|
activeSocket.send(JSON.stringify({
|
|
"type": "input",
|
|
"content": input
|
|
}));
|
|
|
|
// Add input to terminal output
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'system', content: `$ ${input}` }
|
|
]);
|
|
|
|
// Clear the input field
|
|
e.target.value = '';
|
|
} catch (error) {
|
|
console.error("Error sending input:", error);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: `Failed to send input: ${error.message}` }
|
|
]);
|
|
}
|
|
} else {
|
|
// Better error message with socket state information
|
|
const socketState = activeSocket ?
|
|
['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'][activeSocket.readyState] :
|
|
'NO_SOCKET';
|
|
|
|
console.log(`Cannot send input: Socket state is ${socketState}`);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: `Cannot send input: connection not available (${socketState})` }
|
|
]);
|
|
}
|
|
}
|
|
}}
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter' && activeSocket && activeSocket.readyState === WebSocket.OPEN) {
|
|
const input = e.target.value;
|
|
// Send input to WebSocket with the correct format
|
|
try {
|
|
activeSocket.send(JSON.stringify({
|
|
"type": "input",
|
|
"content": input
|
|
}));
|
|
|
|
// Add input to terminal output
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'system', content: `$ ${input}` }
|
|
]);
|
|
|
|
// Clear the input field
|
|
e.target.value = '';
|
|
} catch (error) {
|
|
console.error("Error sending input:", error);
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: `Failed to send input: ${error.message}` }
|
|
]);
|
|
}
|
|
} else if (e.key === 'Enter') {
|
|
// Inform user if socket isn't available
|
|
if (!activeSocket || activeSocket.readyState !== WebSocket.OPEN) {
|
|
setTerminalOutput(prev => [
|
|
...prev,
|
|
{ type: 'error', content: `Cannot send input: connection closed` }
|
|
]);
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CodeChallenge;
|