UI fixes in button bar and 2020 → 2021 (#80)

* Remove AI Match option from button bar

* Change 2020 to 2021

* Remove run button from button bar

* Remove run button from react tour

* Save code before committing and submitting

* Add descriptive tooltip for submit

* Update prize info

Author: CaptainIRS

README.md

@@ -1,5 +1,5 @@
 # CodeCharacter Web
-Web App for the frontend of CodeCharacter 2020
+Web App for the frontend of CodeCharacter 2021
 
 ## Installation
 

__tests__/app/containers/__snapshots__/Editor.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Editor Container Should render Editor 1`] = `
   
   State PlayerCode::update(State state) {
   
-	  // Hello and Welcome to Code Character 2020!!
+	  // Hello and Welcome to Code Character 2021!!
   
 	  // Code Character is a strategy code writing competition, where you'll be
 	  // controlling some robots that will face off against each other

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "codecharacter-web-2020",
+  "name": "codecharacter-web-2021",
   "version": "1.0.0",
   "private": true,
   "description": "Web App for CodeCharacter",

src/app/components/PopUpMenu.tsx

@@ -45,11 +45,11 @@ export default class PopUpMenu extends React.Component<{}, ElementOwnProps> {
               Documentation
             </div>
           </a>
-          <a href="https://www.pragyan.org/20/" target="_blank">
+          <a href="https://www.pragyan.org/21/" target="_blank">
             <div className={classnames(styles['menu-item'], styles['menu-item-documentation'])}>
               <div>
                 <img
-                  src="https://www.pragyan.org/20/cms/templates/common/site/images/favicon.ico"
+                  src="https://www.pragyan.org/21/cms/templates/common/site/images/favicon.ico"
                   alt="pragyan"
                   width="25px"
                   height="22px"
@@ -60,7 +60,7 @@ export default class PopUpMenu extends React.Component<{}, ElementOwnProps> {
           </a>
 
           <a
-            href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/20"
+            href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/21"
             target="_blank"
           >
             <div className={classnames(styles['menu-item'], styles['menu-item-discourse'])}>

src/app/components/ReactTour.tsx

@@ -119,18 +119,6 @@ const tourConfig: ReactourStep[] = [
     position: 'bottom',
     selector: '[id="clear_gamelog_button"]',
   },
-  {
-    content: () => (
-      <div>
-        <h6>Run Game</h6>
-        <p className={classnames(styles['step-description'])}>
-          Click to compile code and run the game simulation
-        </p>
-      </div>
-    ),
-    position: 'bottom',
-    selector: '[id="run_button"]',
-  },
   {
     content: () => (
       <div>

src/app/components/SubmitBar/RunOptions.tsx

@@ -1,4 +1,4 @@
-import { faBrain, faRobot } from '@fortawesome/free-solid-svg-icons';
+import { faBrain } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SubmissionActions } from 'app/actions';
 import * as styles from 'app/styles/RunOptions.module.css';
@@ -62,17 +62,6 @@ export class RunOptions extends React.Component<
       },
     ];
 
-    if (aiIds) {
-      aiIds.map((aiId) => {
-        matchOptions.push({
-          aiId,
-          icon: <FontAwesomeIcon icon={faRobot} />,
-          name: `AI Match`,
-          type: SubmissionActions.Type.AI_MATCH,
-        });
-      });
-    }
-
     const mapOptions = (
       <div className={classnames(styles['dropdown-submenu'])}>
         {maps.map((mapElement) => (

src/app/components/SubmitBar/index.tsx

@@ -5,7 +5,6 @@ import {
   faCog,
   faExclamationCircle,
   faLock,
-  faPlay,
   faSave,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
@@ -143,23 +142,6 @@ export class SubmitBar extends React.Component<
             </span>
           </button>
         </Tooltip>
-        <Tooltip title="Run Code">
-          <button
-            className={classnames(styles.customBtn)}
-            id="run_button"
-            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-              this.setState({
-                isRunOptionsOpen: !isRunOptionsOpen,
-              });
-              event.stopPropagation();
-            }}
-          >
-            <span className={classnames(styles.icon)}>
-              <FontAwesomeIcon icon={faPlay} />
-            </span>
-            <span>RUN</span>
-          </button>
-        </Tooltip>
         {debugRunAvailable ? (
           <Tooltip title="Debug Code">
             <button
@@ -204,14 +186,16 @@ export class SubmitBar extends React.Component<
             <span>COMMIT</span>
           </button>
         </Tooltip>
-        <Tooltip title="Submit Code">
+        <Tooltip
+          title="Submit Code: This will submit your code as your current competitive AI. All your challenges with other
+          players in the leaderboard will be played using this code.
+          You have to submit your code before challenging an opponent."
+        >
           <button
             className={classnames(styles.customBtn)}
             title="Submit Code"
             id="submit_button"
-            onClick={(e) => {
-              this.props.lockCode();
-            }}
+            onClick={this.handleSubmit}
           >
             <span className={classnames(styles.icon)}>
               <FontAwesomeIcon icon={faLock} />
@@ -334,12 +318,19 @@ export class SubmitBar extends React.Component<
 
   private handleCommit = async () => {
     const { commitMessage } = this.state;
-    const { commit, getCommitLog } = this.props;
+    const { commit, getCommitLog, saveCode } = this.props;
+    await saveCode();
     await commit(commitMessage);
     await this.toggleCommitMessageBox(false);
     await getCommitLog();
   };
 
+  private handleSubmit = async () => {
+    const { saveCode, lockCode } = this.props;
+    await saveCode();
+    await lockCode();
+  };
+
   private startStoryModeMatch = async (mapId: number, aiId: number) => {
     const {
       toggleStoryModeModal,

src/app/components/Welcome.tsx

@@ -19,7 +19,7 @@ export class Welcome extends React.Component<
         <Modal.Header>
           <Modal.Title>
             <div style={{ margin: 0 }}>
-              <b>Welcome to Code Character 2020!</b>
+              <b>Welcome to Code Character 2021!</b>
             </div>
           </Modal.Title>
           <button
@@ -48,7 +48,7 @@ export class Welcome extends React.Component<
             <b>
               Found a bug? Want a new feature? Post in the{' '}
               <a
-                href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/20"
+                href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/21"
                 target="_blank"
               >
                 Forum

src/app/components/home/Footer.tsx

@@ -48,12 +48,12 @@ export const Footer: React.FunctionComponent = () => {
                   <a href="https://code.pragyan.org/docs">Documentation</a>
                 </li>
                 <li>
-                  <a href="https://www.pragyan.org/20/home/events/bytehoc/code_character/">
+                  <a href="https://www.pragyan.org/21/home/events/bytehoc/code_character/">
                     Pragyan - CodeCharacter
                   </a>
                 </li>
                 <li>
-                  <a href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/20">
+                  <a href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/21">
                     Forum
                   </a>
                 </li>
@@ -72,7 +72,7 @@ export const Footer: React.FunctionComponent = () => {
         )}
       >
         <div className="col text-center">
-          &copy; 2020 Made with <span style={{ color: 'red' }}>❤</span> by{' '}
+          &copy; 2021 Made with <span style={{ color: 'red' }}>❤</span> by{' '}
           <a href="https://delta.nitt.edu"> Delta Force</a>
         </div>
       </div>

src/app/components/home/LandingPage.tsx

@@ -82,31 +82,20 @@ export class LandingPage extends React.Component<LandingPageInterfaces.Props, {}
               <p>
                 In case of any queries, discuss at the{' '}
                 <a
-                  href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/20"
+                  href="https://forum.pragyan.org/t/code-character-frequently-asked-questions/21"
                   target="_blank"
                 >
                   CodeCharacter Forum
                 </a>{' '}
                 .
               </p>
               <h1>Prizes</h1>
-              <p>A total of 50K INR up for grabs for acing the leaderboard.</p>
-              <h6>College Students</h6>
+              <p>A total of 15K INR up for grabs for acing the leaderboard.</p>
               <ul>
-                <li>First Place - 10K INR</li>
-                <li>Second Place - 6K INR</li>
-                <li>Third Place - 4K INR</li>
+                <li>First Place - 7.5K INR</li>
+                <li>Second Place - 4.5K INR</li>
+                <li>Third Place - 3K INR</li>
               </ul>
-              <h6>Professionals</h6>
-              <ul>
-                <li>First Place - 15K INR</li>
-                <li>Second Place - 10K INR</li>
-                <li>Third Place - 5K INR</li>
-              </ul>
-              <p>
-                Note: College Student Winners will be requested to provide valid college proof to
-                collect prizes.
-              </p>
             </div>
             <div className={classnames(styles['codechar-video'], 'col-lg-5')}>
               <img width="auto" height="auto" src="./assets/img/bot_hi.png" />

src/app/reducers/code/Code.ts

@@ -10,7 +10,7 @@ const codeStoreInitialState: CodeInterfaces.CodeStoreState = {
   
   State PlayerCode::update(State state) {
   
-	  // Hello and Welcome to Code Character 2020!!
+	  // Hello and Welcome to Code Character 2021!!
   
 	  // Code Character is a strategy code writing competition, where you'll be
 	  // controlling some robots that will face off against each other