Staging Num Problems

frontend/src/api/Game.ts

@@ -8,10 +8,8 @@ import { Color } from './Color';
 
 export type Player = {
   user: User,
-  code: string,
-  language: string,
   submissions: Submission[],
-  solved: boolean,
+  solved: boolean[],
   color: Color,
 };
 
@@ -41,12 +39,14 @@ export type RunSolutionParams = {
   initiator: User,
   input: string,
   code: string,
+  problemIndex: number,
   language: string,
 };
 
 export type SubmitSolutionParams = {
   initiator: User,
   code: string,
+  problemIndex: number,
   language: string,
 };
 
@@ -68,6 +68,7 @@ export enum SubmissionType {
 
 export type Submission = {
   code: string,
+  problemIndex: number,
   language: string,
   results: SubmissionResult[],
   numCorrect: number,

frontend/src/api/Room.ts

@@ -34,6 +34,7 @@ export type UpdateSettingsParams = {
   duration?: number,
   problems?: ProblemIdParam[],
   size?: number,
+  numProblems?: number,
 };
 
 export type ChangeHostParams = {

frontend/src/components/card/LeaderboardCard.tsx

@@ -4,7 +4,7 @@ import { Player } from '../../api/Game';
 import { LowMarginText, SmallText } from '../core/Text';
 import PlayerIcon from './PlayerIcon';
 import { Color } from '../../api/Color';
-import { useBestSubmission } from '../../util/Hook';
+import { useGetScore, useGetSubmissionTime } from '../../util/Hook';
 
 type ContentStyleType = {
   isCurrentPlayer: boolean,
@@ -67,37 +67,39 @@ type LeaderboardCardProps = {
   isCurrentPlayer: boolean,
   place: number,
   color: Color,
+  numProblems: number,
 };
 
 function LeaderboardCard(props: LeaderboardCardProps) {
   const {
-    place, player, isCurrentPlayer, color,
+    place, player, isCurrentPlayer, color, numProblems,
   } = props;
 
   const [showHover, setShowHover] = useState(false);
-  const bestSubmission = useBestSubmission(player);
+  const score = useGetScore(player);
+  const time = useGetSubmissionTime(player);
 
   const getScoreDisplay = () => {
-    if (!bestSubmission) {
-      return '0';
+    if (!score) {
+      return 0;
     }
-    return `${bestSubmission.numCorrect}/${bestSubmission.numTestCases}`;
+    return score;
   };
 
   const getScorePercentage = () => {
-    if (!bestSubmission) {
+    if (!score) {
       return '';
     }
-    return ` ${Math.round((bestSubmission.numCorrect / bestSubmission.numTestCases) * 100)}%`;
+    return ` ${Math.round((score / numProblems) * 100)}%`;
   };
 
   const getSubmissionTime = () => {
-    if (!bestSubmission) {
+    if (!time) {
       return 'Never';
     }
 
     const currentTime = new Date().getTime();
-    const diffMilliseconds = currentTime - new Date(bestSubmission.startTime).getTime();
+    const diffMilliseconds = currentTime - new Date(time).getTime();
     const diffMinutes = Math.floor(diffMilliseconds / (60 * 1000));
     return `${diffMinutes}m ago`;
   };
@@ -113,7 +115,7 @@ function LeaderboardCard(props: LeaderboardCardProps) {
         nickname={player.user.nickname}
         active={Boolean(player.user.sessionId)}
       />
-      <LowMarginText bold={player.solved}>{`${place}.${getScorePercentage()}`}</LowMarginText>
+      <LowMarginText bold={player.solved.filter((element) => !element).length === 0}>{`${place}.${getScorePercentage()}`}</LowMarginText>
 
       {showHover ? (
         <HoverBar>

frontend/src/components/game/Console.tsx

@@ -130,7 +130,7 @@ function Console(props: ConsoleProps) {
       // Default values
       setTitle('Console');
       setSubtitle('');
-      setInput(testCases[0].input);
+      setInput(testCases ? testCases[0].input : '');
       setOutput('');
       setConsoleOutput('');
     }

frontend/src/components/game/Editor.tsx

@@ -5,12 +5,21 @@ import styled, { ThemeContext } from 'styled-components';
 import Language, { fromString, languageToEditorLanguage } from '../../api/Language';
 import { DefaultCodeType } from '../../api/Problem';
 
+/**
+ * onLanguageChange - a callback, called when the currentLanguage changes
+ * onCodeChange - a callback, called when the code changes
+ * getCurrentLanguage - a function passed in, which can be called to get the current language
+ * defaultCodeMap - a map of all the default code for each problem and language
+ * currentProblem - the problem which is current being worked on
+ * liveCode - a string used for spectator view
+ */
 type EditorProps = {
   onLanguageChange: ((language: Language) => void) | null,
   onCodeChange: ((code: string) => void) | null,
-  codeMap: DefaultCodeType | null,
-  defaultLanguage: Language,
+  getCurrentLanguage: (() => Language) | null,
+  defaultCodeMap: DefaultCodeType[] | null,
   defaultCode: string | null,
+  currentProblem: number,
   liveCode: string | null,
 };
 
@@ -89,17 +98,19 @@ const monacoEditorOptions: EditorConstructionOptions = {
 // This function refreshes the width of Monaco editor upon change in container size
 function ResizableMonacoEditor(props: EditorProps) {
   const {
-    onLanguageChange, onCodeChange, codeMap, defaultLanguage,
-    defaultCode, liveCode,
+    onLanguageChange, onCodeChange, getCurrentLanguage,
+    defaultCodeMap, defaultCode, currentProblem, liveCode,
   } = props;
 
   const theme = useContext(ThemeContext);
-  const [currentLanguage, setCurrentLanguage] = useState<Language>(defaultLanguage);
   const [codeEditor, setCodeEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [codeMap, setCodeMap] = useState<DefaultCodeType[] | null>(defaultCodeMap);
+  const [previousProblem, setPreviousProblem] = useState<number>(0);
+  const [currentLanguage, setCurrentLanguage] = useState<Language>(Language.Java);
 
   useEffect(() => {
-    setCurrentLanguage(defaultLanguage);
-  }, [defaultLanguage]);
+    setCodeMap(defaultCodeMap);
+  }, [defaultCodeMap]);
 
   const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
     setCodeEditor(editor);
@@ -126,22 +137,45 @@ function ResizableMonacoEditor(props: EditorProps) {
   const handleLanguageChange = (language: Language) => {
     // Save the code for this language
     if (codeMap != null && codeEditor != null) {
-      codeMap[currentLanguage] = codeEditor.getValue();
-      codeEditor.setValue(codeMap[language]);
+      const codeMapTemp = codeMap;
+      codeMapTemp[currentProblem][currentLanguage] = codeEditor.getValue();
+      setCodeMap(codeMapTemp);
+      codeEditor.setValue(codeMap[currentProblem][language]);
     }
 
-    // Change the language and initial code for the editor
-    setCurrentLanguage(language);
+    // Call onLanguageChange
     if (onLanguageChange) {
       onLanguageChange(language);
     }
   };
 
+  // This hook will be called if the user switches the problem he or she is working on
   useEffect(() => {
     if (codeMap != null && codeEditor != null) {
-      codeEditor.setValue(codeMap[currentLanguage]);
+      if (codeMap[currentProblem] != null) {
+        const codeMapTemp = codeMap;
+
+        // If the value of the editor is not "Loading...", save it in the codeMap
+        if (codeEditor.getValue() !== 'Loading...') {
+          codeMapTemp[previousProblem][currentLanguage] = codeEditor.getValue();
+        }
+
+        setCodeMap(codeMapTemp);
+        setPreviousProblem(currentProblem);
+
+        // If getCurrentLanguage is defined, set currentLanguage to the returned value,
+        // which is the language that was last used for the new problem,
+        // and set the CodeEditor to be the code for the problem and language
+        if (getCurrentLanguage) {
+          setCurrentLanguage(getCurrentLanguage());
+          codeEditor.setValue(codeMap[currentProblem][getCurrentLanguage()]);
+        } else {
+          codeEditor.setValue(codeMap[currentProblem][currentLanguage]);
+        }
+      }
     }
-  }, [currentLanguage, codeMap, codeEditor, setCodeEditor]);
+  }, [currentLanguage, codeMap, codeEditor, setCodeEditor, getCurrentLanguage,
+    currentProblem, previousProblem]);
 
   return (
     <Content>