11. week

Task 8 - Creating a web user interface for the game II

Objectives

  1. Implement the web user interface.
  2. Implement interesting improvements to the game and increase the quality of the solution.

Motivation

Now comes the fun part - styling and graphics :) The goal of this exercise is to finalize your game component, implement interesting game extensions, and prepare for project submission at the end of the semester. Styling the game in the KPI theme can also be a nice enhancement.

Instructions

Step 1

Task 1.1

Implement your game’s user interface so that it is understandable for the user and also visually interesting.

You can style the interface in the theme of our department. You may take inspiration from the department website, for example by using the basic KPI colors. You can also use KPI logos, which you may crop as you wish, but to preserve their meaning do not change the aspect ratio of the used image.

For creating matching color schemes you can use various online generators, for example hexcolor.co, coolors.co, [cssgradient.io/], and others.

You can also use freely available image and icon sets, or create your own using graphic editors (e.g. Inkscape, Gimp, ...).

Task 1.2

Integrate the service components for score, comments, and rating into the graphical user interface.

Comment

The way to create forms using the Thymeleaf template and some further guidance were presented in the lecture. You can therefore draw inspiration from the lecture recordings available through Moodle.

Step 2

Since 1/7 of the best assignments may receive an exceptional bonus evaluation, it is worth implementing interesting game extensions :)

Task 2.1

Implement support for registration and login in the game.

You can use the procedures shown in the lectures, which are available through Moodle.

Task 2.2

Improve the quality of your source code through refactoring and by using suitable design patterns.

Useful information can be found for example on RefactoringGuru and SourceMaking.

Task 2.3

Use your creativity, think about extensions for your game, and implement them.

For inspiration:

  • the ability to save and load a game in progress (save & load game),
  • recording and replaying moves (record & replay),
  • different game difficulties (beginner, medium, hard, ...),
  • the option to choose a graphical theme for the game tiles,
  • game settings that are stored in the player's profile and loaded upon login,
  • different game modes (timed, limited number of moves, ...),
  • generating game levels,
  • and other ideas.

Resources