-
Notifications
You must be signed in to change notification settings - Fork 41
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.
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";
}
}
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:
- Each character in the text is
letter
- Some amount of
letter
grouped together is aword
. - 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.