Open In App

Project Idea | CodePal

Improve
Improve
Like Article
Like
Save
Share
Report

Description: “A Visual Studio Code Extension to help Codeforces Users Code with Convenience”

CodePal is a Visual Studio Code Extension to help Codeforces Users Code with Convenience. This extension is especially for people who want to save time in a live Codeforces contest and up-solve problems comfortably. This extension responds quickly to users. It can swiftly filter through the problem list by specifying tags and ratings, create folders for contests and problems containing sample tests of each problem in them and compile and run tests automatically. For added convenience, we’ve created buttons to directly open problem statements and submission pages on the default browser.

Brief Overview of Technologies Used:

NodeJS

  • Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets us use JavaScript to write command-line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser. In our case to the VSCode editor.
  • It is only with NodeJS we can perform API calls to Codeforces to get all the features of our extensions. We also use NodeJS to web scrape data from the internet.

 

Codeforces API

  • The Codeforces API is extremely useful and the bulk of our features perform API calls to Codeforces to get useful information.
  • But it does not provide everything. Our extension uses a small amount of web scraping of the Codeforces website to get the data the API does not provide for example test cases for a problem.
  • The documentation of the Codeforces API is small but clear.

TypeScript

  • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.
  • TypeScript code is transformed into JavaScript code via the TypeScript compiler or Babel. This JavaScript is clean, simple code which runs anywhere JavaScript runs: In a browser, on Node.JS, or in apps. In our case, the final JavaScript file will run on Node.JS.
  • Since there is a compilation, Typescript makes it much easier to debug your code compared to JavaScript.

VS Code API

  • This is the main reason why VS Code is popular. The VS Code API has a plethora of useful features that not only give us a lot of control over the environment but also make it quite easy for us to understand and code.
  • The organized tree-view, context menus, key-bindings, input boxes, etc. are some of the API features that have been used in this extension.
  • It cannot be stressed enough how important and useful VS Code API Typescript documentation is. It is concise, clean, and extremely informative. It was heavily referred to this project.

Demo: Enter Handle in settings and view problems, contests, and profile, with submission status on each problem.

Create Problem/Contest Folders inclusive of all sample tests, compile and run automatically, get comprehensive verdicts, and view problem statement and submission webpages.

 

Filter Through Problems:

Stress Testing your Code:

Features of the Extension and Their Implementation Details

View Complete Problem Set List along with their associated tags and ratings: The list of problems along with their details are available through the Codeforces API. A problem class is maintained which is initialized by fetching details of all problems from this API end point. The fetched list of problems is displayed in a tree view in the activity bar on the left-hand side of the window.

Swiftly Filter through the ProblemSet by specifying Ratings, Tags, and Submission Status: The list of problems that are rendered in the tree view are filtered internally based on the problem tags, problem rating range, and submission status and re-rendered on the screen. The input for the filters is taken through the VS Code API.

View Currently Running, Upcoming and all Past Contests and also view the precise start date, time, and duration of upcoming contests: The list of contests along with their details are available through the Codeforces API. A contest class is maintained by us which is initialized by fetching details of all contests from this API end point. The list of contests is also displayed in a tree view on the activity bar on the left-hand side of the window.

Fast Folder Creation on a single click for Contests from the Codeforces contest list and Problems from the Codeforces problem list: When a user wishes to create a folder for a problem on Codeforces, a folder with the name of the problem is created and test cases of the particular problem are web scraped from the problem’s web page and are included in the same folder.  

When a user wishes to create a contest folder, a folder with the name of the contest is created, and a folder for each problem in the contest is iteratively created.

Folder for a problem consists of all its sample test cases and a program file loaded with a template whose path may be specified in the settings: What is also included in a problem folder is a file named as “Problem_name.{extension}” which loads any starter template that you like if you specify the template path in the settings of the extension.

Add additional tests to any problem: 2 Additional files called “input_{test_number}.txt” and “output_{test_number}.txt” are created where the user may enter the input he wants and the expected output respectively.

Compile and run any program file against the test cases and get comprehensive results: The *child_process* library is used to run compilation and running commands on the host’s system. We make sure to terminate a running program process in case it exceeds 6 seconds of execution. We measure the time by using races of promises in JavaScript. We set a timeout of 6 seconds and also run the program and whichever promise accepts or rejects first ends the wait and then the running program is terminated. This is very crucial to indicate “Time Limit Exceeded” to users.

The code is run on each of the sample test cases that are already present in the problem folder, and for each test a file is created having the output produced by the code, which is compared with the expected output file to give the verdict. A file called “result.txt” is created, having all details of each of the tests, including the input, expected output, obtained output and standard error, along with the final verdict on the test. In case of a compilation error or a run-time error, the error is logged into a file called “error.txt”.

Open problem statement or submission page on your default browser, with a single click in VS Code: A file is saved called “.problem.json” in the same directory as the problem file. This json file contains the problem index and the ID of the contest it was part of, details sufficient to construct the problem URL. So when a user clicks the “open problem statement” button, we construct the URL with the help of the json file and open it in your default browser. Similarly, the problem submission page can also be opened.

Compiler may be selected and compilation flags can be set through the codepal settings: Commands are run to compile and run the programs written by the user on his/her own system. They are compiled and run based on the language that has been selected from the CodePal settings. We also allow for additional compilation flags that a user may want to add. We add these flags to the command for compiling. Example: “-std=c++14”

Perform Stress Testing to find a counter test case for your code: We create 2 more files for the user

  • A generator file: This file is supposed to be filled by the user to generate random test cases in the input format specified by the problem.
  • A program file: A user may write the correct solution or a brute force solution that he may want to compare his own solution with.

Now, we run the generator file and create test cases, and iteratively run both, the user’s code and the program file that he entered, against the generated test cases as many times as the user wants. They may specify the number of times he wants this to continue in the settings. This shall either stop as soon output given by the user’s code and the program file differ.

Get a personalized experience of viewing details of your Codeforces profile and the status of problem submissions made, by entering your Codeforces handle in the codepal settings: Given the handle of a user, the codeforces API can return basic information about the user. We present that in the user profile section. The codeforces API also returns the set of all submissions made by a given user. We sort submissions as per problem id, and then run a pointer each across the user’s submissions and problems (which are already sorted as per problem id) and determine the submission status of a problem (Passed, Failed, Unattempted).

Languages Supported:

  • C++ (compiler : g++)
  • C (compiler : gcc)
  • Java (compiler : javac)
  • Python

Note: You may add additional compilation flags through the codepal settings (example: -std=c++14) and also choose between python, python2, or python3 depending upon the python command you use on your system to run.

Operating Systems Supported:

  • Windows
  • Linux
  • MAC

Keyboard Shortcuts:

  • Ctrl + Alt + A (*Cmd + Alt + A* for Mac) : Add Manual Test Cases
  • Ctrl + Alt + R (*Cmd + Alt + R* for Mac): Run Test Cases on Solution File
  • Ctrl + Alt + O (*Cmd + Alt + O* for Mac) : Open Problem Statement on Codeforces
  • Ctrl + Alt + S (*Cmd + Alt + S* for Mac) : Open Problem Submission Page on Codeforces
  • Ctrl + Alt + Z (*Cmd + Alt + Z* for Mac) : Start Stress Testing
  • Ctrl + Shift + Z (*Cmd + Shift + Z* for Mac) : Force Stop Stress Testing

Conclusion: Building a VS Code extension is a great way to understand how such a popular code editor like VS Code works. Also, this extension helps the community of competitive programming.

  • This idea has been implemented as an open-source project. We currently have over 1200 downloads and over 550 active installations.
  • You can install our extension here.
  • To know more about CodePal and its codebase, you may visit its public repository here.
  • A detailed usage guide can be found here.

Team Members

  • Janmansh Agarwal
  • Niranjan Yadiyala
  • Aditya Chirania
  • Praveen Reddy


Last Updated : 15 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads