{"id":21714639,"url":"https://github.com/metroxe/mario-level-language","last_synced_at":"2025-07-14T15:33:17.293Z","repository":{"id":43546787,"uuid":"207655343","full_name":"Metroxe/mario-level-language","owner":"Metroxe","description":"Language for making Mario levels.","archived":false,"fork":false,"pushed_at":"2023-01-04T13:09:14.000Z","size":1642,"stargazers_count":5,"open_issues_count":35,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-12T19:14:08.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mariolevellanguage.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Metroxe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-10T20:19:55.000Z","updated_at":"2022-01-11T22:41:44.000Z","dependencies_parsed_at":"2023-02-02T13:31:23.146Z","dependency_job_id":null,"html_url":"https://github.com/Metroxe/mario-level-language","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Metroxe/mario-level-language","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Metroxe%2Fmario-level-language","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Metroxe%2Fmario-level-language/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Metroxe%2Fmario-level-language/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Metroxe%2Fmario-level-language/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Metroxe","download_url":"https://codeload.github.com/Metroxe/mario-level-language/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Metroxe%2Fmario-level-language/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265312016,"owners_count":23745177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T00:37:15.735Z","updated_at":"2025-07-14T15:33:17.265Z","avatar_url":"https://github.com/Metroxe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mario-level-language\nLanguage for making Mario levels.\n\n## Table of Contents\n1. [Goal](#goal)\n\u003cbr/\u003e 1.1 Visualization\n\u003cbr/\u003e 1.2 Analysis\n2. [Implementation and Roles](#implementation-and-roles)\n\u003cbr/\u003e 2.1 Fetching a Repository\n\u003cbr/\u003e 2.2 Static Analysis through ESLint\n\u003cbr/\u003e 2.3 Data to Visualization\n\u003cbr/\u003e 2.4 Recreative Front End\n3. [User Testing](#user-testing)\n4. [Running the Project](#running-the-project)\n\u003cbr/\u003e 4.1 Required Tools\n\u003cbr/\u003e 4.2 First Method\n\u003cbr/\u003e 4.3 Second Method\n5. [Testing the Project](#testing-the-project)\n\u003cbr/\u003e 5.1 Optional Tools\n\u003cbr/\u003e 5.2 Testing Visualization With Postman (For Backend Only)\n\u003cbr/\u003e 5.3 First Method\n\n## Goal\n### Visualization\nOur goal for this project was to create visual linting results using predefined linting rules and display it in a fun and meaningful way. We wanted to improve the monotunous task of reading endless console linting issues and instead give a general approach to identifiying the lint of a project. Instead of reading warning and errors line by line, we wanted to create a way to easily specifiy where in a project there are linting issues and to see if certain files/directories were worse than others. Therefore we decided to generate mario levels according to the linting errors output. We fetch a JavaScript project from github and output a mario level using our project from DSL.\n\n### Analysis\n**Static Analysis:** We determine the linting errors in repository following. Linting is run through node and checks\nfor predefined rules(e.g. enforce semicolons, a line being to long), so we are using static checks for each file in a project. \n\u003cbr/\u003e\n**Meta Analysis:** We use meta analysis with the project structure and sizes of the project.\n\nBoth of these methods are used as variables in determining the structure of the generated Mario Game and it's levels.\n\n## Implementation and Roles\n#### 1. Fetching a Repository\nDeveloped By: Kwangsoo Yeo\u003cbr/\u003e\nBased on a github repository, fetch the repository and grab all the relevant contents (all JavaScript Files excluding config files) and save them into the disk\nwith files and directories structured the same way as the original project. This is used later for getting\neslint results and generating levels. Delete all files once done with static checks of each file\n\n#### 2. Analysis of the Code\nDeveloped By: Tongtong Zhai and Huanxin Zhang\u003cbr/\u003e\nCreated and ran linting solution to all the JavaScript files in the repository to get the errors, file size and number of lines of code. For each file grab all the errors, the error type, number of line the error occurred and generate a output for basing the mario levels off. Organized all of the data into a readable format (JSON) to be used in the Visualization.\n\n#### 3. Data to Visualization\nDeveloped By: Christopher Powroznik\u003cbr/\u003e\nBased on the output generated in the previous step, create a mario level for each file. The level will be dynamically created\ngiven the size of the file(determines how large the map will be), and create obstacles given the errors from the the ESLint\nresults. The ESLint results can be classified and easy, medium hard level.  This determines the difficulty the obstacles are place in each map which reflects partially how bad the linting is done in a specific file. \nAfter generating a map for each file, save the img with correct path to the directory and save it to the zip file.\nThis language generator is done with our previous project, creating the mario dsl.\n\n#### 4. Recreative Front-End\nDeveloped By: Kevin Zhu\u003cbr/\u003e\nCreate a front end that would help a user test a repo based on the implementations above. A input filed for a github repo\nwould call the server to generate images for each JavaScript file. The files are compressed into a zip file and\nsent back to the user so that it can download the images and check the linting results as a mario level.\n\n## User Testing\nWe specifically ask users the answer some of the questions from this [form](https://docs.google.com/forms/d/e/1FAIpQLSd15hrHZnZCIOzTQCN85aCNxdyv25kwa7U-oivkR48-tw60kw/viewform). \n\u003cbr/\u003e\nGeneral Questions:\n- Have you played mario brothers?\n- Do you know JavaScript?\n- Do you know ESLint?\n\nVisualization Specific Questions: (Based on the image generated)\n- Do you think a specific file has linting errors?\n- How large do you think this file is?\n- Do you think the image helps you see where the linting error is located?\n\n## Running the Project\n### Required Tools\n1. [Docker](https://www.docker.com/products/docker-desktop)\n2. Node(v10) and NPM(Node Package Manager)¡\n\n### First Method\n1. Initiate Docker.\n2. On the root directory run `npm run restart-docker`.\n\n### Second Method(Easier for testing specific Front-End or Back-End implementations)\n1. On the root direcotry run `sh install-dependencies.sh`. (Once every time new dependencies are added)\n2. To run the front-end.\n\u003e1. Go to the frontend directory `cd frontend`\n\u003e2. `npm run start`\n\u003e3. frontend is hosted on [http://localhost:3000](http://localhost:3000)\n3. To run the back-end.\n\u003e1. Go to the backend directory `cd backend`\n\u003e2. `npm run build \u0026\u0026 npm run start`\n\u003e3. backend is hosted on [http://localhost:8080](http://localhost:8080)\n\n## Testing the Project\n\n### Optional Tools\n1. [Postman](https://www.getpostman.com/downloads/)\n\n### Testing Visualization With Postman(For Backend Only)\n1. Run Postman\n2. Enter a `POST` Request to the url `http://localhost:8080/makeWorld`\n\u003e **Make sure backend is running.**\n\n\u003e The body options should be `x-www-form-urlencoded` and should contain a key `repoURL` and value of any repo. (i.e. `github.com/algolia.places`)\n\u003e Image should look like: \n\u003e ![image](https://lh3.googleusercontent.com/nMfj9BUbes7T5DOXwhXAAdbinrUoIUckE1aErHF0IaguquET8sNm7hZLmSm_VJMV39aGjUD8xOoueGIHNhAWF9vlliZLLUeFXUgPvXif3amr2D3lgDApV_kGGkOGTN_IL9YjGSRveW1hhF7hxDsGnGplJfJWeryx_WIkcRSMIZ57bIeP83s6DPywazvOGvoRqryLUV26TYXxOsiG9lQORrVAlU5hnQtN2ux-08MQV3qYNodFyA29_fMsOCj9sCKjQdw-3nZN-I7idaGeS5cvy8Gvi1jjFrkd1R79QziP-n8eMa-7Y-gMKNmJ8UeA5HQtC_Nt1lhHbX6GZZP6GOqshjkTtzJOcWreNXARbniLoALlzEh5O2uK7uT9iq4eTjGhRDHV3Xal5OzUe0xOytCR7IWWC83WGUYNFxxodcIvkDFTuYNAr3SZgGDAmxNPIABmNLKzQxsao3CQyl8EHIIFDwbwsOmJAKe-mYw7vg7H8c78Hj-qhEcuWZDwJXJzOiyz1iX0McX4mjY5YVtPpgPodasVLOXCP7H5nqUtsV5Rc0yH9nxiqmiVbk3NlaDk6Jz-D6wIS2BYv-sNA1Up4k3OdCdbceKxz1xMlROK1l5bcL0gQnZ259d9z7MJ7CZO1NYvrjFn_mb-Qfpqg7ndlASSTtQ6N0uGSmA2H-XaeiI0J3xWqmEGclVFGE8=w1984-h1246-no)\n3. Click `SEND` to see you request. (Check console)\n\n### Testing with other tools\n- Requests in terminal using `curl`.\n- Manually through the frontend.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetroxe%2Fmario-level-language","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetroxe%2Fmario-level-language","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetroxe%2Fmario-level-language/lists"}