Code Blitz is a coding game that supports two player game play. It was developed for a school assignment at Cal State San Marcos by a team of three students that are referenced in the NPM package files.
Client and server API code is contained within this single repository. The root folder is the root for the client, and the .\server subfolder is the root folder for the server code.
Node Package Manager is utilized to install dependencies. So the first step to running or modifying Code Blitz after cloning this repo is execute "npm install" from the root folder, and run again for the server folder.
In addition to Git and NPM which are essential, global installs (npm install -g) might be useful for Typescript, Nodemon, (npx is sometimes handy too), and Gulp.
The npm package files also reference some script commands as follows:
From the client, root folder:
This uses the Gulp bundling system to build the project, launch a client session in the browser, and watch for code changes. Client code recompiles will happen automatically (usually) as you edit the client code.
DO NOT rely on the running Gulp client session however, as we'll run the entire solution with the server API to avoid CORS / Proxy complexities. Note that our gulpfile.js is setup to place the bundled client code within .\server\dist which is where we will run the full solution (both the client and the API).
From the ./server folder, there are three scripts configured that may be run as follows:
This simply runs typescript to ensure that all the server code transpilation is up-to-date and saved within the .\dist "runtime" folder. You must run tsc at least once before running npm start... The "npm dev" script also has a watch flag that will recompile the server API code automatically as you make coding changes.
This runs the server API using node and nodemon. The entry point for the system is "./dist/server/lib/server.js". Nodemon is utilized to restart the server with a fresh session each time the client or server code within the .\dist run folder is updated. The default port for the full client and server solution is 3000, so you may browse to http://localhost:3000 to test the application.
To host Code Blitz (if you are not making code changes) then executing "npm start" from the .\server folder is the only command needed to run the solution, as the npm start from the root/client code is only needed when making changes to the client code...
NOTE: See below regarding the additional MongoDB requirement, with information about how to prime MongoDB with starting data. A ".env" file with the Mongo DB connection string is also required.
This just combines the execution of npm dev and npm start, described above, for command terminals that support the use of bash "&&" in this context.
This application is 100% Javascript in its transpiled, running form, and most of the code base also leverages Typescript for type definitions. The system also relies on a Mongo backend database. Express JS, Mongoose, and BcryptJS are some of the additional technologies utilized.
No front-end frameworks were used, and the hand-crafted code is very small and fast running.
Real-time, two person gameplay updates are handled on the client side using simple javascript setInterval() timers to send and poll for game status updates form the server using conventional http requests. While this has been domonstrated to be fast and sufficient for the simple communication required by this game, exploring the use of web socket IO was part of our original plan and may represent a nice upgrade.
The code was demonstrated live several times and has a sound architecture. However, minor bugs have been observed and the code base is not considered "production ready." More testing, minor areas of completion, and the addition of automated unit tests remain to be completed.
The game relies on Mongo and we used the free, online database-as-a-service provided at www.mongodb.com. No scripts were developed to autopopulate the requesite gameplay coding challenges, nor to create the required user collection, so the rest of this readme file will contain the "seed" data that must be stored within Mongo. This can be accompished through the MongoDB online portal.
Within the ./server folder, a ".env" file is required by Code Blitz for the Mongo DB connection string. The file ".env.sample" is provided as an example template.
Here are a few tips on using the online MongoDB "Atlas" interface...
- The setup process will guide you through creating a "cluster" and you may select Google Cloud Platform, Amazon Web Services, or Azure to host your free instance.
- To find the connection string that must be placed within the Code Blitz ".env" file, select "connect" form Clusters -> Atlas and then select "Connect your application". This will provide you with a connection string template within which you will insert your Mongo DB account username and password.
- Back on the Clusters page, you can setup the required Collections using the "COLLECTIONS" button.
- Next, a collection and database must be created. We recommend the database name "CodeBlitz". The "Create Database" button will also ask you for an initial collection. Take this opportunity to create the "UserInfo" collection.
- Now, within the CodeBlitz database, create the "ExerciseInfo" collection. A "+" button that appears when hovering on the CodeBlitz database will allow you to create this colleciton.
- Now, select the ExerciseInfo collection and then press the "Insert Document" button that appears in the right-side panel. In the modal dialogue, press the "{}" to switch to Object view, and the cut and past the JSON for Exercise #1 into the editor (replacing any default content) and confirm by pressing the "Insert" button. Repeat this to create a 2nd document for Exercise #2.
Congratulations, your Mongo DB instance should be ready and primed to support Code Blitz!
Clip the following JSON:
{"_id":{"$oid":"5e8a94bbf00a1050444810d5"},"title":"Print Numbers","prompt":"Write a program to print all the numbers from start to end (inclusive) in a given range","level":"1","availableBudget":{"$numberDecimal":"5.00"},"highBudget":{"$numberDecimal":"5.00"},"lowBudget":{"$numberDecimal":"1.00"},"estimatedTime":"7","solutions":[{"prologue":"var start = 7; var end = 11; var output = [];","epilogue":"console.log(output);","solutionComparison":"7,8,9,10,11"},{"prologue":"var start = 9; var end = 15; var output = [];","epilogue":"console.log(output);","solutionComparison":"9,10,11,12,13,14,15"},{"prologue":"var start = 6; var end = 12; var output = [];","epilogue":"console.log(output);","solutionComparison":"6,7,8,9,10,11,12"}],"tokens":[{"id":"001","token":"var","type":"keyword","cost":0.15},{"id":"002","token":"x","type":"identifier","cost":0.1},{"id":"003","token":"=","type":"operator","cost":0.1},{"id":"004","token":"start","type":"identifier","cost":0.1},{"id":"005","token":";","type":"symbol","cost":0.1},{"id":"006","token":"while","type":"keyword","cost":0.15},{"id":"007","token":"(","type":"symbol","cost":0.05},{"id":"008","token":"x","type":"identifier","cost":0.1},{"id":"009","token":"<=","type":"operator","cost":0.1},{"id":"010","token":"end","type":"identifier","cost":0.1},{"id":"011","token":")","type":"symbol","cost":0.1},{"id":"012","token":"{","type":"symbol","cost":0.05},{"id":"013","token":"output","type":"identifier","cost":0.1},{"id":"014","token":".","type":"symbol","cost":0.05},{"id":"015","token":"push","type":"keyword","cost":0.15},{"id":"016","token":"(","type":"symbol","cost":0.05},{"id":"017","token":"x","type":"identifier","cost":0.1},{"id":"018","token":")","type":"symbol","cost":0.05},{"id":"019","token":";","type":"symbol","cost":0.05},{"id":"020","token":"x","type":"identifier","cost":0.1},{"id":"021","token":"++","type":"operator","cost":0.1},{"id":"022","token":";","type":"symbol","cost":0.05},{"id":"023","token":"}","type":"symbol","cost":0.05},{"id":"024","token":"for","type":"keyword","cost":0.15},{"id":"025","token":">=","type":"operator","cost":0.1},{"id":"026","token":";","type":"symbol","cost":0.05},{"id":"027","token":"--","type":"operator","cost":0.1},{"id":"028","token":"end","type":"identifier","cost":0.1},{"id":"029","token":"-","type":"operator","cost":0.1},{"id":"030","token":"+","type":"operator","cost":0.1},{"id":"031","token":"start","type":"identifier","cost":0.1},{"id":"032","token":";","type":"symbol","cost":0.05},{"id":"033","token":"getNums","type":"identifier","cost":0.1},{"id":"034","token":"function","type":"keyword","cost":0.15},{"id":"035","token":",","type":"symbol","cost":0.05},{"id":"036","token":"if","type":"keyword","cost":0.15},{"id":"037","token":"start","type":"identifier","cost":0.1},{"id":"038","token":"===","type":"operator","cost":0.1},{"id":"039","token":"0","type":"literal","cost":0.1},{"id":"040","token":"{","type":"symbol","cost":0.05},{"id":"041","token":"return","type":"keyword","cost":0.15},{"id":"042","token":"[","type":"symbol","cost":0.05},{"id":"043","token":"start","type":"identifier","cost":0.1},{"id":"044","token":"]","type":"symbol","cost":0.05},{"id":"045","token":"}","type":"symbol","cost":0.05},{"id":"046","token":"else","type":"keyword","cost":0.15},{"id":"047","token":"{","type":"symbol","cost":0.1},{"id":"048","token":"var","type":"keyword","cost":0.1},{"id":"049","token":"=","type":"operator","cost":0.1},{"id":"050","token":"getNums","type":"identifier","cost":0.1},{"id":"051","token":"(","type":"symbol","cost":0.05},{"id":"052","token":"start","type":"identifier","cost":0.1},{"id":"053","token":",","type":"symbol","cost":0.05},{"id":"054","token":"end","type":"identifier","cost":0.1},{"id":"055","token":"-","type":"operator","cost":0.1},{"id":"056","token":"-","type":"operator","cost":0.1},{"id":"057","token":"1","type":"literal","cost":0.1},{"id":"058","token":")","type":"symbol","cost":0.05},{"id":"059","token":"(","type":"symbol","cost":0.05},{"id":"060","token":"end","type":"identifier","cost":0.1},{"id":"061","token":")","type":"symbol","cost":0.05},{"id":"062","token":"return","type":"keyword","cost":0.15},{"id":"063","token":";","type":"symbol","cost":0.05},{"id":"064","token":"}","type":"symbol","cost":0.05},{"id":"065","token":";","type":"symbol","cost":0.05},{"id":"066","token":"=","type":"operator","cost":0.1},{"id":"067","token":"getNums","type":"identifier","cost":0.1},{"id":"068","token":"(","type":"symbol","cost":0.05},{"id":"069","token":",","type":"symbol","cost":0.05},{"id":"070","token":"end","type":"identifier","cost":0.1},{"id":"071","token":")","type":"symbol","cost":0.05}]}
Clip the following JSON:
{"_id":{"$oid":"5eae3921337864390a3f553c"},"title":"Sort the Array","prompt":"Convert the mixed array of numbers to a sorted array","level":"2","availableBudget":{"$numberDecimal":"11.00"},"highBudget":{"$numberDecimal":"9.00"},"LowBudget":{"$numberDecimal":"1.00"},"estimatedTime":"8","solutions":[{"prologue":"var nums = [12,3,9,25,17];","epilogue":"console.log(nums);","solutionComparison":"3,9,12,17,25"},{"prologue":"var nums = [18,4,7,16,11];","epilogue":"console.log(nums);","solutionComparison":"4,7,11,16,18"},{"prologue":"var nums = [20,9,15,23,7];","epilogue":"console.log(nums);","solutionComparison":"7,9,15,20,23"}],"tokens":[{"id":"001","token":"for","type":"variable","cost":0.15},{"id":"002","token":"(","type":"symbol","cost":0.05},{"id":"003","token":"var","type":"keyword","cost":0.15},{"id":"004","token":"x","type":"identifier","cost":0.1},{"id":"005","token":"=","type":"operator","cost":0.1},{"id":"006","token":"0","type":"literal","cost":0.1},{"id":"007","token":";","type":"symbol","cost":0.05},{"id":"008","token":"x","type":"identifier","cost":0.1},{"id":"009","token":"<","type":"operator","cost":0.1},{"id ":"010","token":"nums","type ":"identifier","cost":0.1},{"id":"011","token":".","type":"symbol","cost":0.05},{"id ":"012","token":"lenght","type":"keyword","cost":0.15},{"id":"013","token":";","type":"symbol","cost":0.05},{"id":"014","token":"x","type":"identifier","cost":0.1},{"id":"015","token":"++","type":"operator","cost":0.1},{"id":"016","token":")","type":"symbol","cost":0.05},{"id":"017","token":"{","type":"symbol","cost":0.05},{"id":"018","token":"for","type":"keyword","cost":0.15},{"id":"019","token":"(","type":"symbol","cost":0.05},{"id":"020","token":"var","type":"keyword","cost":0.15},{"id":"021","token":"y","type":"identifier","cost":0.1},{"id":"022","token":"=","type":"operator","cost":0.1},{"id":"023","token":"0","type":"literal","cost":0.1},{"id":"0024","token":";","type":"symbol","cost":0.05},{"id":"025","token":"y","type":"identifier","cost":0.1},{"id":"026","token":"<","type ":"operator","cost":0.1},{"id":"027","token":"(","type":"symbol","cost":0.05},{"id":"028","token":"nums","type":"identifier","cost":0.1},{"id":"029","token":".","type":"symbol","cost":0.05},{"id":"030","token":"length","type":"keyword","cost":0.15},{"id":"031","token":"-","type":"operator","cost":0.1},{"id":"032","token":"x","type":"identifier","cost":0.1},{"id":"033","token":"-","type":"operator","cost":0.1},{"id":"034","token":"1","type ":"literal","cost":0.1},{"id":"035","token":")","type":"symbol","cost":0.05},{"id":"036","token":";","type":"symbol","cost":0.05},{"id":"037","token":"y","type":"identifier","cost":0.1},{"id":"038","token":"++","type":"operator","cost":0.1},{"id":"039","token":")","type":"symbol","cost":0.05},{"id":"040","token":"{","type":"symbol","cost":0.05},{"id":"041","token":"if","type":"keyword","cost":0.15},{"id":"042","token":"(","type":"symbol","cost":0.05},{"id":"043","token":"nums","type":"identifier","cost":0.1},{"id":"044","token":"[","type":"symbol","cost":0.05},{"id":"045","token":"y","type":"identifier","cost":0.1},{"id":"046","token":"]","type":"symbol","cost":0.05},{"id":"047","token":">","type":"operator","cost":0.1},{"id":"048","token":"nums","type":"identifier","cost":0.1},{"id":"049","token":"[","type":"symbol","cost":0.05},{"id":"050","token":"y","type":"identfier","cost":0.1},{"id":"051","token":"+","type":"operator","cost":0.1},{"id":"052","token":"1","type ":"literal","cost":0.1},{"id":"053","token":"]","type":"symbol","cost":0.05},{"id":"054","token":")","type":"symbol","cost":0.05},{"id":"055","token":"{","type":"symbol","cost":0.05},{"id":"056","token":"var","type":"keyword","cost":0.15},{"id":"057","token":"tmp","type":"identifier","cost":0.1},{"id":"058","token":"=","type ":"operator","cost":0.1},{"id":"059","token":"nums","type":"identifier","cost":0.1},{"id":"060","token":"[","type":"symbol","cost":0.05},{"id":"061","token":"y","type":"identifier","cost":0.1},{"if":"062","token":"]","type":"symbol","cost":0.05},{"id":"063","token":";","type":"symbol","cost":0.05},{"id":"064","token":"nums","type":"identifier","cost":0.1},{"id":"065","token":"[","type":"symbol","cost":0.05},{"id":"066","token":"y","type":"identifier","cost":0.1},{"id":"067","token":"]","type":"symbol","cost":0.05},{"id":"068","token":"=","type":"operator","cost":0.1},{"id":"069","token":"nums","type":"identifier","cost":0.1},{"id":"070","token":"[","type":"symbol","cost":0.05},{"id":"071","token":"y","type":"identifier","cost":0.1},{"id":"072","token":"+","type":"operator","cost":0.1},{"id":"073","token":"1","type":"literal","cost":0.1},{"id":"074","token":"]","type":"symbol","cost":0.05},{"id":"075","token":";","type":"symbol","cost":0.05},{"id":"076","token":"nums","type":"identifier","cost":0.1},{"id":"077","token":"[","type":"symbol","cost":0.05},{"id":"078","token":"y","type":"identifier","cost":0.1},{"id":"079","token":"+","type":"operator","cost":0.1},{"id":"080","token":"1","type ":"literal","cost":0.1},{"id":"081","token":"]","type":"symbol","cost":0.05},{"id":"082","token":"=","type":"operator","cost":0.1},{"id":"083","token":"tmp","type":"identifier","cost":0.1},{"id":"084","token":";","type":"symbol","cost":0.05},{"id":"085","token":"}","type":"symbol","cost":0.05},{"id":"086","token":"}","type":"symbol","cost":0.05},{"id":"087","token":"}","type":"symbol","cost":0.05},{"id":"088","token":"let","type":"keyword","cost":0.15},{"id":"089","token":"let","type":"keyword","cost":0.15},{"id":"090","token":"let","type":"keyword","cost":0.15},{"id":"091","token":"x","type":"identifier","cost":0.1},{"id":"092","token":"while","type":"keyword","cost":0.15},{"id":"093","token":">=","type":"operator","cost":0.1},{"id":"094","token":"&&","type":"operator","cost":0.1},{"id":"095","token":"tmp","type":"identifier","cost":0.1},{"id":"096","token":"--","type":"operator","cost":0.1},{"id":"097","token":"min","type":"identifier","cost":0.1},{"id":"098","token":"min","type":"identifier","cost":0.1},{"id":"099","token":"min","type":"identifier","cost":0.1},{"id":"100","token":"if","type":"keyword","cost":0.15},{"id":"101","token":"min","type":"identifier","cost":0.1},{"id":"102","token":"!=","type":"operator","cost":0.1},{"id":"103","token":"x","type":"identifier","cost":0.1},{"id":"104","token":"{","type":"symbol","cost":0.05},{"id":"105","token":"let","type":"keyword","cost":0.15},{"id":"106","token":"x","type":"identifier","cost":0.1},{"id":"107","token":"x","type":"identifier","cost":0.1},{"id":"108","token":"=","type":"operator","cost":0.1},{"id":"109","token":"min","type":"identifier","cost":0.1},{"id":"110","token":";","type":"symbol","cost":0.05},{"id":"111","token":"min","type":"identifier","cost":0.1},{"id":"112","token":"=","type":"operator","cost":0.1},{"id":"113","token":";","type":"symbol","cost":0.05},{"id":"114","token":"}","type":"symbol","cost":0.05},{"id":"115","token":"for","type":"keyword","cost":0.15},{"id":"116","token":"for","type":"keyword","cost":0.15},{"id":"117","token":"length","type":"keyword","cost":0.15},{"id":"118","token":"length","type":"keyword","cost":0.15},{"id":"118","token":"0","type":"literal","cost":0.1},{"id":"120","token":"0","type":"literal","cost":0.1},{"id":"121","token":"nums","type":"identifier","cost":0.1},{"id":"122","token":"nums","type":"identifier","cost":0.1},{"id":"123","token":">","type":"operator","cost":0.15},{"id":"124","token":"=","type":"operator","cost":0.15},{"id":"125","token":";","type":"symbol","cost":0.05},{"id":"126","token":";","type":"symbol","cost":0.05}]}
By following the two examples above...