Skip to content

Typing Game

TKperson edited this page Jun 16, 2022 · 2 revisions

Typing Game

Location: $DOMAIN/mvc/typing

This typing game is very similar to moneytype. Instead of making a webpage for only typing out regular words or sentences, this typing game is made also for practicing typing out code.

Backend

The backend for this program is very little. All the back has is the API. The API has 1 entry, which is a GET entry. Users can make a GET request to the path $DOMAIN/mvc/gettext to get random pre-set code.

Getting random code strings in the backend is hard coded. I'm just going to show a snippet.

@Controller
class TypingAPI {
	@GetMapping("/mvc/gettext")
	@ResponseBody
	public String getText() {
		String[] texts = {
				"public class Main {\n\tpublic static void main(String[] args) {\n\t\tSystem.out.println(\"Hello World\");\n\t}\n}",
                                // ... more code
				"String[] cars = {\"Volvo\", \"BMW\", \"Ford\", \"Mazda\"};\ncars[0] = \"Opel\";\nSystem.out.println(cars[0]);\nSystem.out.println(cars.length);" };
		int randomNumber = (int) (Math.random() * texts.length);

		return texts[randomNumber];
	}
}

Here's the normal controller

@Controller
public class typingController {

	@GetMapping("/mvc/typing")
	public String typing() {
		return "mvc/typing";
	}

}

Frontend

Most of the code are done in JavaScript.

The program starts off by fetching text from the backend using the URL shown in backend.

Since the idea is based off of monkeytype, there are a few rules that this program follows:

  1. Each character in the text is letter
  2. Some amount of letter grouped together is a word.
  3. Each word is determined by a word separator. A word separator can only be a space character or a new line.

By following these rules, the programmer(s) will be able to easily customize the words/letters on the screen.