Single threaded eventbus

* Cleaned up a lot of old files and renamed/remade interfaces to better suit the framework

* Broken commit

* Fixed online play

* Better file structure and closer to MVC

.gitignore

@@ -47,6 +47,9 @@ shelf/
 *.iml
 *.ipr
 *.iws
+misc.xml
+uiDesigner.xml
+
 
 ##############################
 ## Eclipse
@@ -75,6 +78,8 @@ dist/
 nbdist/
 nbactions.xml
 nb-configuration.xml
+misc.xml
+compiler.xml
 
 ##############################
 ## Visual Studio Code
@@ -101,4 +106,9 @@ build
 newgamesver-release-V1.jar
 server.properties
 gameserver.log.*
-gameserver.log
+gameserver.log
+
+##############################
+## JPackage
+##############################
+jpackage-input

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

.idea/compiler.xml

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CompilerConfiguration">
-    <annotationProcessing>
-      <profile name="Maven default annotation processors profile" enabled="true">
-        <sourceOutputDir name="target/generated-sources/annotations" />
-        <sourceTestOutputDir name="target/generated-test-sources/test-annotations" />
-        <outputRelativeToContentRoot value="true" />
-        <module name="pism_framework" />
-        <module name="pism_game" />
-        <module name="pism_app" />
-      </profile>
-    </annotationProcessing>
-  </component>
-  <component name="JavacSettings">
-    <option name="ADDITIONAL_OPTIONS_OVERRIDE">
-      <module name="pism_app" options="" />
-      <module name="pism_framework" options="" />
-      <module name="pism_game" options="" />
-    </option>
-  </component>
-</project>

.idea/dictionaries/project.xml

@@ -5,14 +5,17 @@
       <w>clid</w>
       <w>dcompile</w>
       <w>errorprone</w>
+      <w>español</w>
       <w>flushnl</w>
       <w>gaaf</w>
       <w>gamelist</w>
+      <w>pism</w>
       <w>playerlist</w>
       <w>tictactoe</w>
       <w>toop</w>
       <w>vmoptions</w>
       <w>xplugin</w>
+      <w>yourturn</w>
     </words>
   </dictionary>
 </component>

.idea/encodings.xml

@@ -1,12 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="Encoding">
+    <file url="file://$APPLICATION_HOME_DIR$/bin/src/main/java" charset="UTF-8" />
+    <file url="file://$APPLICATION_HOME_DIR$/bin/src/main/resources" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/app/src/main/java" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/app/src/main/resources" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/framework/src/main/java" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/framework/src/main/resources" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/game/src/main/java" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/game/src/main/resources" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/processors/src/main/java" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/processors/src/main/resources" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/src/main/java" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/src/main/resources" charset="UTF-8" />
   </component>

.idea/inspectionProfiles/Project_Default.xml

@@ -2,7 +2,8 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="AutoCloseableResource" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="METHOD_MATCHER_CONFIG" value="java.util.Formatter,format,java.io.Writer,append,com.google.common.base.Preconditions,checkNotNull,org.hibernate.Session,close,java.io.PrintWriter,printf,java.io.PrintStream,printf,java.lang.foreign.Arena,ofAuto,java.lang.foreign.Arena,global,org.toop.framework.audio.AudioPlayer,play" />
+      <option name="METHOD_MATCHER_CONFIG" value="java.util.Formatter,format,java.io.Writer,append,com.google.common.base.Preconditions,checkNotNull,org.hibernate.Session,close,java.io.PrintWriter,printf,java.io.PrintStream,printf,java.lang.foreign.Arena,ofAuto,java.lang.foreign.Arena,global,org.toop.framework.audio.AudioPlayer,play,java.util.Map,remove,java.util.concurrent.Executors,newSingleThreadScheduledExecutor" />
     </inspection_tool>
+    <inspection_tool class="WriteOnlyObject" enabled="false" level="WARNING" enabled_by_default="false" />
   </profile>
 </component>

.idea/misc.xml

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EntryPointsManager">
-    <list size="1">
-      <item index="0" class="java.lang.String" itemvalue="com.google.common.eventbus.Subscribe" />
-    </list>
-  </component>
-  <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="MavenProjectsManager">
-    <option name="originalFiles">
-      <list>
-        <option value="$PROJECT_DIR$/pom.xml" />
-      </list>
-    </option>
-  </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_25" default="true" project-jdk-name="openjdk-25" project-jdk-type="JavaSDK">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

.idea/resourceBundles.xml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ResourceBundleManager">
-    <custom-resource-bundle>
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization.properties" />
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization_de.properties" />
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization_es.properties" />
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization_fr.properties" />
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization_it.properties" />
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization_nl.properties" />
-      <file value="file://$PROJECT_DIR$/app/src/main/resources/assets/localization/Localization_zh.properties" />
-      <base-name>localization</base-name>
-    </custom-resource-bundle>
-  </component>
-</project>

app/pom.xml

@@ -1,15 +1,20 @@
 <project xmlns="http://maven.apache.org/POM/4.0.0">
 	<modelVersion>4.0.0</modelVersion>
 
-	<groupId>org.toop</groupId>
+	<parent>
-	<artifactId>pism_app</artifactId>
+		<groupId>org.toop</groupId>
+		<artifactId>pism</artifactId>
+		<version>0.1</version>
+	</parent>
+
+	<artifactId>app</artifactId>
 	<version>0.1</version>
 
 	<properties>
 		<main-class>org.toop.Main</main-class>
 		<maven.compiler.source>25</maven.compiler.source>
 		<maven.compiler.target>25</maven.compiler.target>
-
+		<maven.compiler.release>25</maven.compiler.release>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 	</properties>
 
@@ -19,25 +24,41 @@
 			<artifactId>spotless-maven-plugin</artifactId>
 			<version>2.46.1</version>
 		</dependency>
-
+        <dependency>
-		<dependency>
+            <groupId>com.google.code.gson</groupId>
-			<groupId>org.toop</groupId>
+            <artifactId>gson</artifactId>
-			<artifactId>pism_framework</artifactId>
+            <version>2.10.1</version>
-			<version>0.1</version>
+        </dependency>
-			<scope>compile</scope>
-		</dependency>
-		<dependency>
-			<groupId>org.toop</groupId>
-			<artifactId>pism_game</artifactId>
-			<version>0.1</version>
-			<scope>compile</scope>
-		</dependency>
 
 		<dependency>
 			<groupId>org.openjfx</groupId>
 			<artifactId>javafx-controls</artifactId>
 			<version>25</version>
 		</dependency>
+
+        <dependency>
+            <groupId>com.google.errorprone</groupId>
+            <artifactId>error_prone_core</artifactId>
+            <version>2.42.0</version>
+        </dependency>
+        <dependency>
+            <groupId>com.google.errorprone</groupId>
+            <artifactId>error_prone_annotations</artifactId>
+            <version>2.42.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.toop</groupId>
+            <artifactId>framework</artifactId>
+            <version>0.1</version>
+            <scope>compile</scope>
+        </dependency>
+		<dependency>
+			<groupId>org.toop</groupId>
+			<artifactId>game</artifactId>
+			<version>0.1</version>
+			<scope>compile</scope>
+		</dependency>
+
 	</dependencies>
 
 	<build>
@@ -68,6 +89,7 @@
 									<mainClass>org.toop.Main</mainClass>
 								</transformer>
 							</transformers>
+							<finalName>pism</finalName>
 						</configuration>
 					</execution>
 				</executions>
@@ -107,6 +129,56 @@
 					</java>
 				</configuration>
 			</plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>3.14.1</version>
+                <configuration>
+                    <showWarnings>true</showWarnings>
+                    <fork>true</fork>
+                    <executable>${java.home}/bin/javac</executable>
+                    <source>25</source>
+                    <target>25</target>
+                    <release>25</release>
+                    <encoding>UTF-8</encoding>
+                    <compilerArgs>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.api=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.file=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.main=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.model=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.parser=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.processing=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.tree=ALL-UNNAMED</arg>
+                        <arg>-J--add-exports=jdk.compiler/com.sun.tools.javac.util=ALL-UNNAMED</arg>
+                        <arg>-J--add-opens=jdk.compiler/com.sun.tools.javac.code=ALL-UNNAMED</arg>
+                        <arg>-J--add-opens=jdk.compiler/com.sun.tools.javac.comp=ALL-UNNAMED</arg>
+                        <arg>
+                            -Xplugin:ErrorProne \
+                        </arg>
+						<!--						TODO-->
+						<!--						-Xep:RestrictedApi:ERROR \-->
+						<!--						-XepOpt:RestrictedApi:annotation=org.toop.annotations.TestsOnly \-->
+						<!--						-XepOpt:RestrictedApi:allowlistRegex=(?s).*/src/test/java/.*|.*test\.java \-->
+						<!--						-XepOpt:RestrictedApi:message=This API is marked @TestsOnly and shouldn't be normally used.-->
+                        <arg>-XDcompilePolicy=simple</arg>
+                        <arg>--should-stop=ifError=FLOW</arg>
+                    </compilerArgs>
+                    <annotationProcessorPaths>
+                        <path>
+                            <groupId>com.google.errorprone</groupId>
+                            <artifactId>error_prone_core</artifactId>
+                            <version>2.42.0</version>
+                        </path>
+                    </annotationProcessorPaths>
+                </configuration>
+                <dependencies>
+                    <dependency>
+                        <groupId>com.google.errorprone</groupId>
+                        <artifactId>error_prone_core</artifactId>
+                        <version>2.42.0</version>
+                    </dependency>
+                </dependencies>
+            </plugin>
 		</plugins>
 	</build>
 </project>

app/src/main/java/org/toop/Main.java

@@ -1,21 +1,9 @@
 package org.toop;
 
 import org.toop.app.App;
-import org.toop.framework.asset.ResourceLoader;
-import org.toop.framework.asset.ResourceManager;
-import org.toop.framework.audio.SoundManager;
-import org.toop.framework.networking.NetworkingClientManager;
-import org.toop.framework.networking.NetworkingInitializationException;
 
 public final class Main {
-	public static void main(String[] args) {
+    static void main(String[] args) {
-		initSystems();
+        App.run(args);
-		App.run(args);
+    }
-	}
-
-	private static void initSystems() throws NetworkingInitializationException {
-		ResourceManager.loadAssets(new ResourceLoader("app/src/main/resources/assets"));
-		new Thread(NetworkingClientManager::new).start();
-		new Thread(SoundManager::new).start();
-	}
 }

app/src/main/java/org/toop/app/App.java

@@ -1,55 +1,45 @@
 package org.toop.app;
 
-import org.toop.app.menu.MainMenu;
+import javafx.application.Platform;
-import org.toop.app.menu.Menu;
+import javafx.scene.input.KeyCode;
+import javafx.scene.input.KeyEvent;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.app.widget.complex.LoadingWidget;
+import org.toop.app.widget.display.SongDisplay;
+import org.toop.app.widget.popup.EscapePopup;
+import org.toop.app.widget.popup.QuitPopup;
+import org.toop.app.widget.view.MainView;
+import org.toop.framework.audio.*;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.eventbus.GlobalEventBus;
+import org.toop.framework.networking.NetworkingClientEventListener;
+import org.toop.framework.networking.NetworkingClientManager;
+import org.toop.framework.resource.ResourceLoader;
+import org.toop.framework.resource.ResourceManager;
+import org.toop.framework.resource.events.AssetLoaderEvents;
+import org.toop.framework.resource.resources.CssAsset;
+import org.toop.framework.resource.resources.MusicAsset;
+import org.toop.framework.resource.resources.SoundEffectAsset;
+import org.toop.local.AppContext;
+import org.toop.local.AppSettings;
 
 import javafx.application.Application;
 import javafx.geometry.Pos;
 import javafx.scene.Scene;
-import javafx.scene.control.Button;
-import javafx.scene.layout.HBox;
-import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
-import javafx.scene.layout.VBox;
-import javafx.scene.text.Text;
 import javafx.stage.Stage;
-import org.toop.framework.asset.ResourceManager;
+
-import org.toop.framework.asset.resources.CssAsset;
+import java.util.Objects;
-import org.toop.framework.audio.events.AudioEvents;
-import org.toop.framework.eventbus.EventFlow;
 
 public final class App extends Application {
 	private static Stage stage;
-	private static StackPane root;
+	private static Scene scene;
 
-	private static int width;
+    private static int height;
-	private static int height;
+    private static int width;
-
-	private static boolean isQuitting;
-
-	private static class QuitMenu extends Menu {
-		public QuitMenu() {
-			final Region background = createBackground("quit_background");
-
-			final Text sure = createText("Are you sure?");
-
-			final Button yes = createButton("Yes", () -> { stage.close(); });
-			final Button no = createButton("No", () -> { pop(); isQuitting = false; });
-
-			final HBox buttons = new HBox(50, yes, no);
-			buttons.setAlignment(Pos.CENTER);
-
-			final VBox box = new VBox(35, sure, buttons);
-			box.getStyleClass().add("quit_box");
-			box.setAlignment(Pos.CENTER);
-			box.setMaxWidth(350);
-			box.setMaxHeight(200);
-
-			pane = new StackPane(background, box);
-			pane.getStylesheets().add(ResourceManager.get(CssAsset.class, "quit.css").getUrl());
-
-		}
-	}
 
 	public static void run(String[] args) {
 		launch(args);
@@ -57,58 +47,203 @@ public final class App extends Application {
 
 	@Override
 	public void start(Stage stage) throws Exception {
-		final StackPane root = new StackPane(new MainMenu().getPane());
+		// Start loading localization
+		ResourceManager.loadAssets(new ResourceLoader("app/src/main/resources/localization"));
+		ResourceManager.loadAssets(new ResourceLoader("app/src/main/resources/style"));
 
+        final StackPane root = WidgetContainer.setup();
 		final Scene scene = new Scene(root);
-		scene.getStylesheets().add(((CssAsset) ResourceManager.get("app.css")).getUrl());
 
-		stage.setTitle("pism");
+		stage.setOpacity(0.0);
-		stage.setMinWidth(1080);
-		stage.setMinHeight(720);
 
+		stage.setTitle(AppContext.getString("app-title"));
+		stage.titleProperty().bind(AppContext.bindToKey("app-title"));
+
+		stage.setWidth(0);
+		stage.setHeight(0);
+
+		scene.getRoot();
+
+        stage.setMinWidth(1080);
+        stage.setMinHeight(720);
 		stage.setOnCloseRequest(event -> {
 			event.consume();
-
+			quit();
-			if (!isQuitting) {
-				quitPopup();
-			}
 		});
 
 		stage.setScene(scene);
-		stage.setResizable(false);
+		stage.setResizable(true);
-
-		stage.show();
 
 		App.stage = stage;
-		App.root = root;
+		App.scene = scene;
 
 		App.width = (int)stage.getWidth();
 		App.height = (int)stage.getHeight();
 
-		new EventFlow().addPostEvent(new AudioEvents.StartBackgroundMusic()).asyncPostEvent();
+		AppSettings.applySettings();
-		new EventFlow().addPostEvent(new AudioEvents.ChangeVolume(0.1)).asyncPostEvent();
+
+		setKeybinds(root);
+
+        LoadingWidget loading = new LoadingWidget(Primitive.text(
+                "Loading...", false), 0, 0, Integer.MAX_VALUE, false, false // Just set a high default
+        );
+
+		WidgetContainer.setCurrentView(loading);
+
+		setOnLoadingSuccess(loading);
+
+        EventFlow loadingFlow = new EventFlow();
+
+		final boolean[] hasRun = {false};
+        loadingFlow
+                .listen(AssetLoaderEvents.LoadingProgressUpdate.class, e -> {
+					if (!hasRun[0]) {
+						hasRun[0] = true;
+						try {
+							Thread.sleep(100);
+						} catch (InterruptedException ex) {
+							throw new RuntimeException(ex);
+						}
+						Platform.runLater(() -> stage.setOpacity(1.0));
+					}
+
+					Platform.runLater(() -> loading.setMaxAmount(e.isLoadingAmount()));
+
+					Platform.runLater(() -> {
+						try {
+							loading.setAmount(e.hasLoadedAmount());
+						} catch (Exception ex) {
+							throw new RuntimeException(ex);
+						}
+					});
+
+                    if (e.hasLoadedAmount() >= e.isLoadingAmount()) {
+                        Platform.runLater(loading::triggerSuccess);
+                        loadingFlow.unsubscribe("init_loading");
+                    }
+
+                }, false, "init_loading");
+
+		// Start loading assets
+		new Thread(() -> ResourceManager.loadAssets(new ResourceLoader("app/src/main/resources/assets")))
+				.start();
+
+		stage.show();
 
-		App.isQuitting = false;
 	}
 
-	public static void quitPopup() {
+	private void setKeybinds(StackPane root) {
-		isQuitting = true;
+		root.addEventHandler(KeyEvent.KEY_PRESSED,event -> {
-		push(new QuitMenu());
+			if (event.getCode() == KeyCode.ESCAPE) {
+				escapePopup();
+			}
+		});
 	}
 
-	public static void activate(Menu menu) {
+	public void escapePopup() {
-		pop();
+
-		push(menu);
+		if (   WidgetContainer.getCurrentView() == null
+			|| WidgetContainer.getCurrentView() instanceof MainView) {
+			return;
+		}
+
+		if (!Objects.requireNonNull(
+				WidgetContainer.find(widget -> widget instanceof QuitPopup || widget instanceof EscapePopup)
+		).isEmpty()) {
+			WidgetContainer.removeFirst(QuitPopup.class);
+			WidgetContainer.removeFirst(EscapePopup.class);
+			return;
+		}
+
+		EscapePopup escPopup = new EscapePopup();
+		escPopup.show(Pos.CENTER);
 	}
 
-	public static void push(Menu menu) {
+	private void setOnLoadingSuccess(LoadingWidget loading) {
-		root.getChildren().addLast(menu.getPane());
+		loading.setOnSuccess(() -> {
+			initSystems();
+			AppSettings.applyMusicVolumeSettings();
+			new EventFlow().addPostEvent(new AudioEvents.StartBackgroundMusic()).postEvent();
+            loading.hide();
+			WidgetContainer.add(Pos.CENTER, new MainView());
+			WidgetContainer.add(Pos.BOTTOM_RIGHT, new SongDisplay());
+			stage.setOnCloseRequest(event -> {
+				event.consume();
+
+				if (WidgetContainer.getAllWidgets().stream().anyMatch(e -> e instanceof QuitPopup)) return;
+
+				QuitPopup a = new QuitPopup();
+				a.show(Pos.CENTER);
+
+			});
+		});
 	}
 
-	public static void pop() {
+	private void initSystems() { // TODO Move to better place
-		root.getChildren().removeLast();
+		new Thread(() -> new NetworkingClientEventListener(
+				GlobalEventBus.get(),
+				new NetworkingClientManager(GlobalEventBus.get()))
+		).start();
+
+		new Thread(() -> {
+			MusicManager<MusicAsset> musicManager =
+					new MusicManager<>(
+							GlobalEventBus.get(),
+							ResourceManager.getAllOfTypeAndRemoveWrapper(MusicAsset.class),
+							true
+					);
+
+			SoundEffectManager<SoundEffectAsset> soundEffectManager =
+					new SoundEffectManager<>(ResourceManager.getAllOfType(SoundEffectAsset.class));
+
+			AudioVolumeManager audioVolumeManager = new AudioVolumeManager()
+					.registerManager(VolumeControl.MASTERVOLUME, musicManager)
+					.registerManager(VolumeControl.MASTERVOLUME, soundEffectManager)
+					.registerManager(VolumeControl.FX, soundEffectManager)
+					.registerManager(VolumeControl.MUSIC, musicManager);
+
+			new AudioEventListener<>(
+					GlobalEventBus.get(),
+					musicManager,
+					soundEffectManager,
+					audioVolumeManager
+			).initListeners("medium-button-click.wav");
+
+		}).start();
+
+		// Threads must be ready, before continue, TODO use latch instead
+        try {
+            Thread.sleep(200);
+        } catch (InterruptedException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
+	public static void quit() {
+		stage.close();
+		System.exit(0); // TODO: This is like dropping a nuke
 	}
 
-	public static int getWidth() { return width; }
+	public static void setFullscreen(boolean fullscreen) {
-	public static int getHeight() { return height; }
+		stage.setFullScreen(fullscreen);
+
+		width = (int)stage.getWidth();
+		height = (int)stage.getHeight();
+	}
+
+	public static void setStyle(String theme, String layoutSize) {
+		scene.getStylesheets().clear();
+
+		scene.getStylesheets().add(ResourceManager.<CssAsset>get("general.css").getUrl());
+		scene.getStylesheets().add(ResourceManager.<CssAsset>get(theme + ".css").getUrl());
+		scene.getStylesheets().add(ResourceManager.<CssAsset>get(layoutSize + ".css").getUrl());
+	}
+
+	public static int getWidth() {
+		return width;
+	}
+
+	public static int getHeight() {
+		return height;
+	}
 }

app/src/main/java/org/toop/app/GameInformation.java

@@ -0,0 +1,54 @@
+package org.toop.app;
+
+public class GameInformation {
+	public enum Type {
+		TICTACTOE(2, 5),
+		REVERSI(2, 10);
+
+        private final int playerCount;
+        private final int maxDepth;
+
+        Type(int playerCount, int maxDepth) {
+            this.playerCount = playerCount;
+            this.maxDepth = maxDepth;
+        }
+
+        public int getPlayerCount() {
+            return playerCount;
+        }
+
+        public int getMaxDepth() {
+            return maxDepth;
+        }
+
+        public String getTypeToString() {
+            String name = this.name();
+            return switch (name) {
+                case "TICTACTOE" -> "TicTacToe";
+                case "REVERSI" -> "Reversi";
+                case "CONNECT4" -> "Connect4";
+                case "BATTLESHIP" -> "Battleship";
+                default -> name;
+            };
+        }
+	}
+
+	public static class Player {
+		public String name = "";
+		public boolean isHuman = true;
+		public int computerDifficulty = 1;
+		public int computerThinkTime = 1;
+	}
+
+	public final Type type;
+	public final Player[] players;
+
+	public GameInformation(Type type) {
+		this.type = type;
+		players = new Player[type.getPlayerCount()];
+
+		for (int i = 0; i < players.length; i++) {
+			players[i] = new Player();
+		}
+	}
+}

app/src/main/java/org/toop/app/GameType.java

@@ -1,21 +0,0 @@
-package org.toop.app;
-
-public enum GameType {
-	TICTACTOE, REVERSI;
-
-	public static String toName(GameType type) {
-		return switch (type) {
-			case TICTACTOE -> "Tic Tac Toe";
-			case REVERSI -> "Reversi";
-		};
-	}
-
-	public static GameType toType(String name) {
-		return switch (name) {
-			case "Tic Tac Toe" -> TICTACTOE;
-			case "Reversi" -> REVERSI;
-
-			default -> TICTACTOE;
-		};
-	}
-}

app/src/main/java/org/toop/app/Server.java

@@ -0,0 +1,349 @@
+package org.toop.app;
+
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import org.toop.app.gameControllers.AbstractGameController;
+import org.toop.app.gameControllers.ReversiController;
+import org.toop.app.gameControllers.TicTacToeController;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.app.widget.complex.LoadingWidget;
+import org.toop.app.widget.popup.ChallengePopup;
+import org.toop.app.widget.popup.ErrorPopup;
+import org.toop.app.widget.popup.SendChallengePopup;
+import org.toop.app.widget.view.ServerView;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.eventbus.GlobalEventBus;
+import org.toop.framework.gameFramework.model.player.Player;
+import org.toop.framework.networking.clients.TournamentNetworkingClient;
+import org.toop.framework.networking.events.NetworkEvents;
+import org.toop.framework.networking.types.NetworkingConnector;
+import org.toop.game.players.ArtificialPlayer;
+import org.toop.game.players.OnlinePlayer;
+import org.toop.game.games.reversi.ReversiAIR;
+import org.toop.game.games.reversi.ReversiR;
+import org.toop.game.games.tictactoe.TicTacToeAIR;
+import org.toop.local.AppContext;
+
+import java.util.List;
+import java.util.concurrent.CopyOnWriteArrayList;
+import java.util.concurrent.Executors;
+import java.util.concurrent.ScheduledExecutorService;
+import java.util.concurrent.TimeUnit;
+import java.util.concurrent.atomic.AtomicBoolean;
+
+public final class Server {
+	private String user = "";
+	private long clientId = -1;
+
+	private final List<String> onlinePlayers = new CopyOnWriteArrayList<>();
+	private final List<String> gameList = new CopyOnWriteArrayList<>();
+
+	private ServerView primary;
+	private boolean isPolling = true;
+
+    private AbstractGameController<?> gameController;
+
+    private final AtomicBoolean isSingleGame = new AtomicBoolean(false);
+
+	private ScheduledExecutorService scheduler;
+
+	private EventFlow connectFlow;
+
+	public static GameInformation.Type gameToType(String game) {
+		if (game.equalsIgnoreCase("tic-tac-toe")) {
+			return GameInformation.Type.TICTACTOE;
+		} else if (game.equalsIgnoreCase("reversi")) {
+			return GameInformation.Type.REVERSI;
+		}
+
+		return null;
+	}
+
+
+    // Server has to deal with ALL network related listen events. This "server" can then interact with the manager to make stuff happen.
+    // This prevents data races where events get sent to the game manager but the manager isn't ready yet.
+	public Server(String ip, String port, String user) {
+		if (ip.split("\\.").length < 4) {
+			new ErrorPopup("\"" + ip + "\" " + AppContext.getString("is-not-a-valid-ip-address"));
+			return;
+		}
+
+		int parsedPort;
+
+		try {
+			parsedPort = Integer.parseInt(port);
+		} catch (NumberFormatException _) {
+			new ErrorPopup("\"" + port + "\" " + AppContext.getString("is-not-a-valid-port"));
+			return;
+		}
+
+		if (user.isEmpty() || user.matches("^[0-9].*")) {
+			new ErrorPopup(AppContext.getString("invalid-username"));
+			return;
+		}
+
+		final int reconnectAttempts = 10;
+
+		LoadingWidget loading = new LoadingWidget(
+                Primitive.text("connecting"), 0, 0, reconnectAttempts, true, true
+        );
+
+		WidgetContainer.getCurrentView().transitionNextCustom(loading, "disconnect", this::disconnect);
+
+		var a = new EventFlow()
+			.addPostEvent(NetworkEvents.StartClient.class,
+				new TournamentNetworkingClient(GlobalEventBus.get()),
+				new NetworkingConnector(ip, parsedPort, reconnectAttempts, 1, TimeUnit.SECONDS)
+			);
+
+        loading.setOnFailure(() -> {
+            if (WidgetContainer.getCurrentView() == loading) WidgetContainer.getCurrentView().transitionPrevious();
+			a.unsubscribeAll();
+            WidgetContainer.add(
+                    Pos.CENTER,
+                    new ErrorPopup(AppContext.getString("connecting-failed") + " " + ip + ":" + port)
+            );
+        });
+
+		a.onResponse(NetworkEvents.CreatedIdForClient.class, e -> clientId = e.clientId(), true);
+
+		a.onResponse(NetworkEvents.StartClientResponse.class, e -> {
+			if (!e.successful()) {
+				return;
+			}
+
+			primary = new ServerView(user, this::sendChallenge);
+			WidgetContainer.getCurrentView().transitionNextCustom(primary, "disconnect", this::disconnect);
+
+			a.unsubscribe("connecting");
+			a.unsubscribe("startclient");
+
+			this.user = user;
+
+			new EventFlow().addPostEvent(new NetworkEvents.SendLogin(clientId, user)).postEvent();
+
+			startPopulateScheduler();
+			populateGameList();
+
+			primary.removeViewFromPreviousChain(loading);
+
+		}, false, "startclient")
+				.listen(
+						NetworkEvents.ConnectTry.class,
+						e -> {
+							if (clientId != e.clientId()) return;
+							Platform.runLater(
+									() -> {
+										try {
+											loading.setAmount(e.amount());
+											if (e.amount() >= loading.getMaxAmount()) {
+												loading.triggerFailure();
+											}
+										} catch (Exception ex) {
+											throw new RuntimeException(ex);
+										}
+									}
+							);
+						},
+						false, "connecting"
+				)
+				.postEvent();
+
+		a.listen(NetworkEvents.ChallengeResponse.class, this::handleReceivedChallenge, false, "challenge")
+                .listen(NetworkEvents.GameMatchResponse.class, this::handleMatchResponse, false, "match-response")
+                .listen(NetworkEvents.GameResultResponse.class, this::handleGameResult, false, "game-result")
+                .listen(NetworkEvents.GameMoveResponse.class, this::handleReceivedMove, false, "game-move")
+                .listen(NetworkEvents.YourTurnResponse.class, this::handleYourTurn, false, "your-turn");
+
+		connectFlow = a;
+	}
+
+	private void sendChallenge(String opponent) {
+		if (!isPolling) return;
+
+		var a = new SendChallengePopup(this, opponent, (playerInformation, gameType) -> {
+			new EventFlow().addPostEvent(new NetworkEvents.SendChallenge(clientId, opponent, gameType)).postEvent();
+            isSingleGame.set(true);
+		});
+
+		a.show(Pos.CENTER);
+	}
+
+    private void handleMatchResponse(NetworkEvents.GameMatchResponse response) {
+        // TODO: Redo all of this mess
+        if (gameController != null) {
+            gameController.stop();
+        }
+
+        gameController = null;
+
+        //if (!isPolling) return;
+
+        String gameType = extractQuotedValue(response.gameType());
+        if (response.clientId() == clientId) {
+            isPolling = false;
+            onlinePlayers.clear();
+
+            final GameInformation.Type type = gameToType(gameType);
+            if (type == null) {
+                new ErrorPopup("Unsupported game type: " + gameType);
+                return;
+            }
+
+            final int myTurn = response.playerToMove().equalsIgnoreCase(response.opponent()) ? 1 : 0;
+
+            final GameInformation information = new GameInformation(type);
+            //information.players[0] = playerInformation;
+            information.players[0].name = user;
+            information.players[0].isHuman = false;
+            information.players[0].computerDifficulty = 5;
+            information.players[0].computerThinkTime = 1;
+            information.players[1].name = response.opponent();
+
+            Player[] players = new Player[2];
+
+            players[(myTurn + 1) % 2] = new OnlinePlayer<ReversiR>(response.opponent());
+
+            switch (type){
+                case TICTACTOE ->{
+                    players[myTurn] = new ArtificialPlayer<>(new TicTacToeAIR(9), user);
+                }
+                case REVERSI ->{
+                    players[myTurn] = new ArtificialPlayer<>(new ReversiAIR(), user);
+                }
+            }
+
+            switch (type) {
+                case TICTACTOE ->{
+                        gameController = new TicTacToeController(players, false);
+                }
+                case REVERSI ->
+                        gameController = new ReversiController(players, false);
+                default -> new ErrorPopup("Unsupported game type.");
+            }
+
+            if (gameController != null){
+                gameController.start();
+            }
+        }
+    }
+
+    private void handleYourTurn(NetworkEvents.YourTurnResponse response) {
+        if (gameController == null) {
+            return;
+        }
+        gameController.onYourTurn(response);
+
+    }
+
+    private void handleGameResult(NetworkEvents.GameResultResponse response) {
+        if (gameController == null) {
+            return;
+        }
+        gameController.gameFinished(response);
+    }
+
+    private void handleReceivedMove(NetworkEvents.GameMoveResponse response) {
+        if (gameController == null) {
+            return;
+        }
+        gameController.onMoveReceived(response);
+    }
+
+	private void handleReceivedChallenge(NetworkEvents.ChallengeResponse response) {
+        if (!isPolling) return;
+
+		String challengerName = extractQuotedValue(response.challengerName());
+		String gameType = extractQuotedValue(response.gameType());
+		final String finalGameType = gameType;
+		var a = new ChallengePopup(challengerName, gameType, (playerInformation) -> {
+			final int challengeId = Integer.parseInt(response.challengeId().replaceAll("\\D", ""));
+			new EventFlow().addPostEvent(new NetworkEvents.SendAcceptChallenge(clientId, challengeId)).postEvent();
+            isSingleGame.set(true);
+		});
+
+		a.show(Pos.CENTER);
+	}
+
+	private void sendMessage(String message) {
+		new EventFlow().addPostEvent(new NetworkEvents.SendMessage(clientId, message)).postEvent();
+	}
+
+	private void disconnect() {
+		new EventFlow().addPostEvent(new NetworkEvents.CloseClient(clientId)).postEvent();
+		isPolling = false;
+		stopScheduler();
+		connectFlow.unsubscribeAll();
+
+		WidgetContainer.getCurrentView().transitionPrevious();
+	}
+
+	private void forfeitGame() {
+		new EventFlow().addPostEvent(new NetworkEvents.SendForfeit(clientId)).postEvent();
+	}
+
+	private void exitGame() {
+		forfeitGame();
+		startPopulateScheduler();
+	}
+
+    private void gameOver(){
+        startPopulateScheduler();
+    }
+
+	private void startPopulateScheduler() {
+		isPolling = true;
+        isSingleGame.set(false);
+		stopScheduler();
+
+		new EventFlow()
+			.listen(NetworkEvents.PlayerlistResponse.class, e -> {
+				if (e.clientId() == clientId) {
+					onlinePlayers.clear();
+					onlinePlayers.addAll(List.of(e.playerlist()));
+					onlinePlayers.removeIf(name -> name.equalsIgnoreCase(user));
+					primary.update(onlinePlayers);
+				}
+			}, false);
+
+		scheduler = Executors.newSingleThreadScheduledExecutor();
+		scheduler.scheduleAtFixedRate(() -> {
+			if (isPolling) {
+				new EventFlow().addPostEvent(new NetworkEvents.SendGetPlayerlist(clientId)).postEvent();
+			} else {
+				stopScheduler();
+			}
+		}, 0, 1, TimeUnit.SECONDS);
+	}
+
+	private void stopScheduler() {
+		if (scheduler != null && !scheduler.isShutdown()) {
+			scheduler.shutdownNow();
+		}
+	}
+
+	private void gamesListFromServerHandler(NetworkEvents.GamelistResponse event) {
+		gameList.clear();
+		gameList.addAll(List.of(event.gamelist()));
+	}
+
+	public void populateGameList() {
+		new EventFlow().addPostEvent(new NetworkEvents.SendGetGamelist(clientId))
+			.listen(NetworkEvents.GamelistResponse.class, this::gamesListFromServerHandler, true)
+			.postEvent();
+	}
+
+	public List<String> getGameList() {
+		return gameList;
+	}
+
+	private String extractQuotedValue(String s) {
+		int first = s.indexOf('"');
+		int last = s.lastIndexOf('"');
+		if (first >= 0 && last > first) {
+			return s.substring(first + 1, last);
+		}
+		return s;
+	}
+}

app/src/main/java/org/toop/app/canvas/Connect4Canvas.java

@@ -0,0 +1,17 @@
+package org.toop.app.canvas;
+
+import javafx.scene.paint.Color;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+
+import java.util.function.Consumer;
+
+public class Connect4Canvas extends GameCanvas {
+    public Connect4Canvas(Color color, int width, int height, Consumer<Integer> onCellClicked) {
+        super(color, Color.TRANSPARENT, width, height, 7, 6, 10, true, onCellClicked,null);
+    }
+
+    @Override
+    public void drawPlayerHover(int player, int move, AbstractGame game) {
+
+    }
+}

app/src/main/java/org/toop/app/canvas/DrawPlayerHover.java

@@ -0,0 +1,7 @@
+package org.toop.app.canvas;
+
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+
+public interface DrawPlayerHover {
+    void drawPlayerHover(int player, int move, AbstractGame game);
+}

app/src/main/java/org/toop/app/canvas/DrawPlayerMove.java

@@ -0,0 +1,5 @@
+package org.toop.app.canvas;
+
+public interface DrawPlayerMove {
+    void drawPlayerMove(int player, int move);
+}

app/src/main/java/org/toop/app/canvas/GameCanvas.java

@@ -0,0 +1,237 @@
+package org.toop.app.canvas;
+
+import javafx.animation.KeyFrame;
+import javafx.animation.Timeline;
+import javafx.scene.canvas.Canvas;
+import javafx.scene.canvas.GraphicsContext;
+import javafx.scene.input.MouseButton;
+import javafx.scene.paint.Color;
+import javafx.scene.text.Font;
+import javafx.util.Duration;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+
+import java.util.function.Consumer;
+
+public abstract class GameCanvas<T extends AbstractGame> implements DrawPlayerMove, DrawPlayerHover {
+	protected record Cell(float x, float y, float width, float height) {
+		public boolean isInside(double x, double y) {
+			return x >= this.x && x <= this.x + width &&
+				y >= this.y && y <= this.y + height;
+		}
+	}
+
+	protected final Canvas canvas;
+	protected final GraphicsContext graphics;
+
+	protected final Color color;
+	protected final Color backgroundColor;
+
+	protected final int width;
+	protected final int height;
+
+	protected final int rowSize;
+	protected final int columnSize;
+
+	protected final int gapSize;
+	protected final boolean edges;
+
+	protected final Cell[] cells;
+
+    private Consumer<Integer> onCellCLicked;
+
+    public void setOnCellClicked(Consumer<Integer> onClick) {
+        this.onCellCLicked = onClick;
+    }
+
+	protected GameCanvas(Color color, Color backgroundColor, int width, int height, int rowSize, int columnSize, int gapSize, boolean edges, Consumer<Integer> onCellClicked, Consumer<Integer> newCellEntered) {
+		canvas = new Canvas(width, height);
+		graphics = canvas.getGraphicsContext2D();
+
+        this.onCellCLicked = onCellClicked;
+
+		this.color = color;
+		this.backgroundColor = backgroundColor;
+
+		this.width = width;
+		this.height = height;
+
+		this.rowSize = rowSize;
+		this.columnSize = columnSize;
+
+		this.gapSize = gapSize;
+		this.edges = edges;
+
+		cells = new Cell[rowSize * columnSize];
+
+		final float cellWidth = ((float) width - gapSize * rowSize - gapSize) / rowSize;
+		final float cellHeight = ((float) height - gapSize * columnSize - gapSize) / columnSize;
+
+		for (int y = 0; y < columnSize; y++) {
+			final float startY = y * cellHeight + y * gapSize + gapSize;
+
+			for (int x = 0; x < rowSize; x++) {
+				final float startX = x * cellWidth + x * gapSize + gapSize;
+				cells[x + y * rowSize] = new Cell(startX, startY, cellWidth, cellHeight);
+			}
+		}
+
+		canvas.setOnMouseClicked(event -> {
+			if (event.getButton() != MouseButton.PRIMARY) {
+				return;
+			}
+
+			final int column = (int) ((event.getX() / this.width) * rowSize);
+			final int row = (int) ((event.getY() / this.height) * columnSize);
+
+			final Cell cell = cells[column + row * rowSize];
+
+			if (cell.isInside(event.getX(), event.getY())) {
+				event.consume();
+				this.onCellCLicked.accept(column + row * rowSize);
+			}
+		});
+
+
+
+
+		render();
+	}
+
+	private void render() {
+		graphics.setFill(backgroundColor);
+		graphics.fillRect(0, 0, width, height);
+
+		graphics.setFill(color);
+
+		for (int x = 0; x < rowSize - 1; x++) {
+			final float start = cells[x].x + cells[x].width;
+			graphics.fillRect(start, gapSize, gapSize, height - gapSize * 2);
+		}
+
+		for (int y = 0; y < columnSize - 1; y++) {
+			final float start = cells[y * rowSize].y + cells[y * rowSize].height;
+			graphics.fillRect(gapSize, start, width - gapSize * 2, gapSize);
+		}
+
+		if (edges) {
+			graphics.fillRect(0, 0, width, gapSize);
+			graphics.fillRect(0, 0, gapSize, height);
+
+			graphics.fillRect(width - gapSize, 0, gapSize, height);
+			graphics.fillRect(0, height - gapSize, width, gapSize);
+		}
+	}
+
+	public void fill(Color color, int cell) {
+		final float x = cells[cell].x();
+		final float y = cells[cell].y();
+
+		final float width = cells[cell].width();
+		final float height = cells[cell].height();
+
+		graphics.setFill(color);
+		graphics.fillRect(x, y, width, height);
+	}
+
+	public void clear(int cell) {
+		final float x = cells[cell].x();
+		final float y = cells[cell].y();
+
+		final float width = cells[cell].width();
+		final float height = cells[cell].height();
+
+		graphics.clearRect(x, y, width, height);
+
+		graphics.setFill(backgroundColor);
+		graphics.fillRect(x, y, width, height);
+	}
+
+	public void clearAll() {
+		for (int i = 0; i < cells.length; i++) {
+			clear(i);
+		}
+	}
+
+    @Override
+    public void drawPlayerMove(int player, int move) {
+        final float x = cells[move].x() + gapSize;
+        final float y = cells[move].y() + gapSize;
+
+        final float width = cells[move].width() - gapSize * 2;
+        final float height = cells[move].height() - gapSize * 2;
+
+        graphics.setFill(color);
+        graphics.setFont(Font.font("Arial", 40)); // TODO different font and size
+        graphics.fillText(String.valueOf(player), x + width, y + height);
+    }
+
+	public void drawDot(Color color, int cell) {
+		final float x = cells[cell].x() + gapSize;
+		final float y = cells[cell].y() + gapSize;
+
+		final float width = cells[cell].width() - gapSize * 2;
+		final float height = cells[cell].height() - gapSize * 2;
+
+		graphics.setFill(color);
+		graphics.fillOval(x, y, width, height);
+	}
+
+    public void drawInnerDot(Color color, int cell, boolean slightlyBigger) {
+        final float x = cells[cell].x() + gapSize;
+        final float y = cells[cell].y() + gapSize;
+
+        float multiplier = slightlyBigger?1.4f:1.5f;
+
+        final float width = (cells[cell].width() - gapSize * 2)/multiplier;
+        final float height = (cells[cell].height() - gapSize * 2)/multiplier;
+
+        float offset = slightlyBigger?5f:4f;
+
+        graphics.setFill(color);
+        graphics.fillOval(x + width/offset, y + height/offset, width, height);
+    }
+
+	private void drawDotScaled(Color color, int cell, double scale) {
+		final float cx = cells[cell].x() + gapSize;
+		final float cy = cells[cell].y() + gapSize;
+
+		final float fullWidth = cells[cell].width() - gapSize * 2;
+		final float height = cells[cell].height() - gapSize * 2;
+
+		final float scaledWidth = (float)(fullWidth * scale);
+		final float offsetX = (fullWidth - scaledWidth) / 2;
+
+		graphics.setFill(color);
+		graphics.fillOval(cx + offsetX, cy, scaledWidth, height);
+	}
+
+	public Timeline flipDot(Color fromColor, Color toColor, int cell) {
+		final int steps = 60;
+		final long duration = 250;
+		final double interval = duration / (double) steps;
+
+		final Timeline timeline = new Timeline();
+
+		for (int i = 0; i <= steps; i++) {
+			final double t = i / (double) steps;
+			final KeyFrame keyFrame = new KeyFrame(Duration.millis(i * interval),
+				_ -> {
+					clear(cell);
+
+					final double scale = t <= 0.5 ? 1 - 2 * t : 2 * t - 1;
+					final Color currentColor = t < 0.5 ? fromColor : toColor;
+
+					drawDotScaled(currentColor, cell, scale);
+				}
+			);
+
+			timeline.getKeyFrames().add(keyFrame);
+		}
+
+		return timeline;
+	}
+
+	public Canvas getCanvas() {
+		return canvas;
+	}
+}

app/src/main/java/org/toop/app/canvas/ReversiCanvas.java

@@ -0,0 +1,96 @@
+package org.toop.app.canvas;
+
+import javafx.scene.paint.Color;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+import org.toop.game.Move;
+import org.toop.game.games.reversi.ReversiR;
+
+import java.util.concurrent.atomic.AtomicReference;
+import java.util.function.Consumer;
+
+public final class ReversiCanvas extends GameCanvas<ReversiR> {
+    private Move[] currentlyHighlightedMoves = null;
+	public ReversiCanvas(Color color, int width, int height, Consumer<Integer> onCellClicked,  Consumer<Integer> newCellEntered) {
+		super(color, new Color(0f,0.4f,0.2f,1f), width, height, 8, 8, 5, true, onCellClicked,  newCellEntered);
+		drawStartingDots();
+
+        final AtomicReference<Cell> lastHoveredCell = new AtomicReference<>(null);
+
+        canvas.setOnMouseMoved(event -> {
+            double mouseX = event.getX();
+            double mouseY = event.getY();
+            int cellId = -1;
+
+            Cell hovered = null;
+            for (Cell cell : cells) {
+                if (cell.isInside(mouseX, mouseY)) {
+                    hovered = cell;
+                    cellId = turnCoordsIntoCellId(mouseX, mouseY);
+                    break;
+                }
+            }
+
+            Cell previous = lastHoveredCell.get();
+
+            if (hovered != previous) {
+                lastHoveredCell.set(hovered);
+                newCellEntered.accept(cellId);
+            }
+        });
+	}
+
+    public void setCurrentlyHighlightedMovesNull() {
+        currentlyHighlightedMoves = null;
+    }
+
+    public void drawHighlightDots(Move[] moves){
+        if (currentlyHighlightedMoves != null){
+            for (final Move move : currentlyHighlightedMoves){
+                Color color = move.value() == 'W'? Color.BLACK: Color.WHITE;
+                drawInnerDot(color, move.position(), true);
+            }
+        }
+        currentlyHighlightedMoves = moves;
+        if (moves != null) {
+            for (Move move : moves) {
+                Color color = move.value() == 'B' ? Color.BLACK : Color.WHITE;
+                drawInnerDot(color, move.position(), false);
+            }
+        }
+    }
+
+    private int turnCoordsIntoCellId(double x, double y) {
+        final int column = (int) ((x / this.width) * rowSize);
+        final int row = (int) ((y / this.height) * columnSize);
+        return column + row * rowSize;
+    }
+
+	public void drawStartingDots() {
+		drawDot(Color.BLACK, 28);
+		drawDot(Color.WHITE, 36);
+		drawDot(Color.BLACK, 35);
+		drawDot(Color.WHITE, 27);
+	}
+
+	public void drawLegalPosition(int cell, char player) {
+
+        Color innerColor;
+        if (player == 'B') {
+            innerColor = new Color(0.0f, 0.0f, 0.0f, 0.6f);
+        }
+        else {
+            innerColor = new Color(1.0f, 1.0f, 1.0f, 0.75f);
+        }
+        drawInnerDot(innerColor, cell,false);
+	}
+
+    @Override
+    public void drawPlayerMove(int player ,int move){
+        super.drawPlayerMove(player, move);
+    }
+
+    @Override
+    public void drawPlayerHover(int player, int move, AbstractGame game) {
+
+    }
+}

app/src/main/java/org/toop/app/canvas/TicTacToeCanvas.java

@@ -0,0 +1,54 @@
+package org.toop.app.canvas;
+
+import javafx.scene.paint.Color;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+import org.toop.game.games.tictactoe.TicTacToeR;
+
+import java.util.function.Consumer;
+
+public final class TicTacToeCanvas extends GameCanvas<TicTacToeR> {
+	public TicTacToeCanvas(Color color, int width, int height, Consumer<Integer> onCellClicked) {
+		super(color, Color.TRANSPARENT, width, height, 3, 3, 30, false, onCellClicked,null);
+	}
+
+    @Override
+    public void drawPlayerMove(int player, int move) {
+        switch (player) {
+            case 0 -> drawX(Color.RED, move);
+            case 1 -> drawO(Color.BLUE, move);
+            default -> super.drawPlayerMove(player, move);
+        }
+    }
+
+	public void drawX(Color color, int cell) {
+		graphics.setStroke(color);
+		graphics.setLineWidth(gapSize);
+
+		final float x = cells[cell].x() + gapSize;
+		final float y = cells[cell].y() + gapSize;
+
+		final float width = cells[cell].width() - gapSize * 2;
+		final float height = cells[cell].height() - gapSize * 2;
+
+		graphics.strokeLine(x, y, x + width, y + height);
+		graphics.strokeLine(x + width, y, x, y + height);
+	}
+
+	public void drawO(Color color, int cell) {
+		graphics.setStroke(color);
+		graphics.setLineWidth(gapSize);
+
+		final float x = cells[cell].x() + gapSize;
+		final float y = cells[cell].y() + gapSize;
+
+		final float width = cells[cell].width() - gapSize * 2;
+		final float height = cells[cell].height() - gapSize * 2;
+
+		graphics.strokeOval(x, y, width, height);
+	}
+
+    @Override
+    public void drawPlayerHover(int player, int move, AbstractGame game) {
+
+    }
+}

app/src/main/java/org/toop/app/gameControllers/AbstractGameController.java

@@ -0,0 +1,127 @@
+package org.toop.app.gameControllers;
+
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.toop.framework.gameFramework.controller.UpdatesGameUI;
+import org.toop.framework.gameFramework.view.GUIEvents;
+import org.toop.app.canvas.GameCanvas;
+import org.toop.framework.networking.events.NetworkEvents;
+import org.toop.framework.gameFramework.model.game.threadBehaviour.ThreadBehaviour;
+import org.toop.app.widget.view.GameView;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.game.gameThreads.OnlineThreadBehaviour;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+import org.toop.framework.gameFramework.model.game.SupportsOnlinePlay;
+import org.toop.framework.gameFramework.model.player.Player;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Consumer;
+
+public abstract class AbstractGameController<T extends AbstractGame<T>> implements UpdatesGameUI, ThreadBehaviour<T> {
+    protected final EventFlow eventFlow = new EventFlow();
+
+    protected final List<Consumer<?>> listeners = new ArrayList<>();
+
+    // Logger for logging ofcourse
+    protected final Logger logger = LogManager.getLogger(this.getClass());
+
+    // Reference to primary view
+    protected final GameView primary;
+
+    // Reference to game canvas
+    protected final GameCanvas<T> canvas;
+
+    private final Player<T>[] players;         // List of players, can't be changed.
+    protected final T game;       // Reference to game instance
+    private final ThreadBehaviour<T> gameThreadBehaviour;
+
+    // TODO: Change gameType to automatically happen with either dependency injection or something else.
+    // TODO: Make visualisation of moves a behaviour.
+    protected AbstractGameController(GameCanvas<T> canvas, Player<T>[] players, T game, ThreadBehaviour<T> gameThreadBehaviour, String gameType) {
+        logger.info("Creating AbstractGameController");
+        // Make sure player list matches expected size
+        if (players.length != game.getPlayerCount()){
+            logger.error("Player count mismatch");
+            throw new IllegalArgumentException("players and game's players must have same length");
+        }
+
+        this.canvas = canvas;
+        this.players = players;
+        this.game = game;
+        this.gameThreadBehaviour = gameThreadBehaviour;
+
+        primary = new GameView(null, null, null, gameType);
+        addListeners();
+    }
+
+    public void start(){
+        logger.info("Starting GameManager");
+        gameThreadBehaviour.start();;
+    }
+
+    public void stop(){
+        logger.info("Stopping GameManager");
+        removeListeners();
+        gameThreadBehaviour.stop();
+    }
+
+    public Player<T> getCurrentPlayer(){
+        return game.getPlayer(getCurrentPlayerIndex());
+    };
+
+    public int getCurrentPlayerIndex(){
+        return game.getCurrentTurn();
+    }
+
+    private void addListeners(){
+        eventFlow
+                .listen(GUIEvents.RefreshGameCanvas.class, this::onUpdateGameUI, false)
+                .listen(GUIEvents.GameEnded.class, this::onGameFinish, false);
+    }
+
+    private void removeListeners(){
+        eventFlow.unsubscribeAll();
+    }
+
+    private void onUpdateGameUI(GUIEvents.RefreshGameCanvas event){
+        this.updateUI();
+    }
+
+    private void onGameFinish(GUIEvents.GameEnded event){
+        logger.info("Game Finished");
+        String name = event.winner() == -1 ? null : getPlayer(event.winner()).getName();
+        primary.gameOver(event.winOrTie(), name);
+        stop();
+    }
+
+    public Player<T> getPlayer(int player){
+        if (player < 0 || player >= players.length){
+            logger.error("Invalid player index");
+            throw new IllegalArgumentException("player out of range");
+        }
+        return players[player];
+    }
+
+    private boolean isOnline(){
+        return this.gameThreadBehaviour instanceof SupportsOnlinePlay;
+    }
+
+    public void onYourTurn(NetworkEvents.YourTurnResponse event){
+        if (isOnline()){
+            ((OnlineThreadBehaviour<T>) this.gameThreadBehaviour).onYourTurn(event);
+        }
+    }
+
+    public void onMoveReceived(NetworkEvents.GameMoveResponse event){
+        if (isOnline()){
+            ((OnlineThreadBehaviour<T>) this.gameThreadBehaviour).onMoveReceived(event);
+        }
+    }
+
+    public void gameFinished(NetworkEvents.GameResultResponse event){
+        if (isOnline()){
+            ((OnlineThreadBehaviour<T>) this.gameThreadBehaviour).gameFinished(event);
+        }
+    }
+}

app/src/main/java/org/toop/app/gameControllers/ReversiController.java

@@ -0,0 +1,138 @@
+package org.toop.app.gameControllers;
+
+import javafx.animation.SequentialTransition;
+import javafx.geometry.Pos;
+import javafx.scene.paint.Color;
+import org.toop.app.App;
+import org.toop.app.canvas.ReversiCanvas;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+import org.toop.framework.gameFramework.view.GUIEvents;
+import org.toop.game.gameThreads.LocalFixedRateThreadBehaviour;
+import org.toop.game.gameThreads.OnlineThreadBehaviour;
+import org.toop.game.players.LocalPlayer;
+import org.toop.framework.gameFramework.model.player.Player;
+import org.toop.game.games.reversi.ReversiR;
+
+public class ReversiController extends AbstractGameController<ReversiR> {
+    // TODO: Refactor GUI update methods to follow designed system
+    public ReversiController(Player<ReversiR>[] players, boolean local) {
+        ReversiR ReversiR = new ReversiR(players);
+        super(
+                new ReversiCanvas(Color.GRAY, (App.getHeight() / 4) * 3, (App.getHeight() / 4) * 3,(c) -> {new EventFlow().addPostEvent(GUIEvents.PlayerAttemptedMove.class, c).postEvent();}, (c) -> {new EventFlow().addPostEvent(GUIEvents.PlayerMoveHovered.class, c).postEvent();}),
+                players,
+                ReversiR,
+                local ? new LocalFixedRateThreadBehaviour<>(ReversiR, players) : new OnlineThreadBehaviour<>(ReversiR, players), // TODO: Player order matters here, this won't work atm
+                "Reversi");
+        eventFlow.listen(GUIEvents.PlayerAttemptedMove.class, event -> {if (getCurrentPlayer() instanceof LocalPlayer lp){lp.setMove(event.move());}}, false);
+        eventFlow.listen(GUIEvents.PlayerMoveHovered.class, this::onHoverMove, false);
+        initUI();
+    }
+
+
+    private void onHoverMove(GUIEvents.PlayerMoveHovered event){
+        int cellEntered = event.move();
+        canvas.drawPlayerHover(-1, cellEntered, game);
+        /*// (information.players[game.getCurrentTurn()].isHuman) {
+            int[] legalMoves = game.getLegalMoves();
+            boolean isLegalMove = false;
+            for (int move : legalMoves) {
+                if (move == cellEntered){
+                    isLegalMove = true;
+                    break;
+                }
+            }
+
+            if (cellEntered >= 0){
+                int[] moves = null;
+                if (isLegalMove) {
+                    moves = game.getFlipsForPotentialMove(
+                            new Point(cellEntered%game.getColumnSize(),cellEntered/game.getRowSize()),
+                            game.getCurrentPlayer());
+                }
+                canvas.drawHighlightDots(moves);
+            }
+        //}*/
+    }
+
+    public ReversiController(Player<ReversiR>[] players) {
+        this(players, true);
+    }
+
+    private void updateCanvas(boolean animate) {
+        // Todo: this is very inefficient. still very fast but if the grid is bigger it might cause issues. improve.
+        canvas.clearAll();
+
+        for (int i = 0; i < game.getBoard().length; i++) {
+            if (game.getBoard()[i] == 0) {
+                canvas.drawDot(Color.WHITE, i);
+            } else if (game.getBoard()[i] == 1) {
+                canvas.drawDot(Color.BLACK, i);
+            }
+        }
+
+        final int[] flipped = game.getMostRecentlyFlippedPieces();
+
+        final SequentialTransition animation = new SequentialTransition();
+
+        final Color fromColor = getCurrentPlayerIndex() == 0? Color.WHITE : Color.BLACK;
+        final Color toColor = getCurrentPlayerIndex() == 0? Color.BLACK : Color.WHITE;
+
+        if (animate && flipped != null) {
+            for (final int flip : flipped) {
+                canvas.clear(flip);
+                canvas.drawDot(fromColor, flip);
+                animation.getChildren().addFirst(canvas.flipDot(fromColor, toColor, flip));
+            }
+        }
+
+        animation.setOnFinished(_ -> {
+
+            if (getCurrentPlayer() instanceof LocalPlayer) {
+                final int[] legalMoves = game.getLegalMoves();
+
+                for (final int legalMove : legalMoves) {
+                    drawLegalPosition(legalMove, getCurrentPlayerIndex());
+                }
+            }
+        });
+
+        animation.play();
+        primary.nextPlayer(true, getCurrentPlayer().getName(), game.getCurrentTurn() == 0 ? "X" : "O", getPlayer((game.getCurrentTurn() + 1) % 2).getName(), 'R');
+    }
+
+    @Override
+    public void updateUI() {
+        updateCanvas(false);
+    }
+
+    public void drawLegalPosition(int cell, int player) {
+        Color innerColor;
+        if (player == 1) {
+            innerColor = new Color(0.0f, 0.0f, 0.0f, 0.6f);
+        }
+        else {
+            innerColor = new Color(1.0f, 1.0f, 1.0f, 0.75f);
+        }
+        canvas.drawInnerDot(innerColor, cell,false);
+    }
+
+    private void initUI(){
+        primary.add(Pos.CENTER, canvas.getCanvas());
+        WidgetContainer.getCurrentView().transitionNext(primary, true);
+        updateCanvas(false);
+    }
+
+    private void drawMoves(){
+        int[] board = game.getBoard();
+
+        // Draw each square
+        for (int i = 0; i < board.length; i++){
+            // If square isn't empty, draw player move
+            if (board[i] != AbstractGame.EMPTY){
+                canvas.drawPlayerMove(board[i], i);
+            }
+        }
+    }
+}

app/src/main/java/org/toop/app/gameControllers/TicTacToeController.java

@@ -0,0 +1,63 @@
+package org.toop.app.gameControllers;
+
+import javafx.geometry.Pos;
+import javafx.scene.paint.Color;
+import org.toop.app.App;
+import org.toop.app.canvas.TicTacToeCanvas;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.gameFramework.model.player.Player;
+import org.toop.framework.gameFramework.view.GUIEvents;
+import org.toop.framework.gameFramework.model.game.AbstractGame;
+import org.toop.game.gameThreads.LocalThreadBehaviour;
+import org.toop.game.gameThreads.OnlineThreadBehaviour;
+import org.toop.game.players.LocalPlayer;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.game.games.tictactoe.TicTacToeR;
+
+public class TicTacToeController extends AbstractGameController<TicTacToeR> {
+
+    public TicTacToeController(Player<TicTacToeR>[] players, boolean local) {
+        TicTacToeR ticTacToeR = new TicTacToeR(players);
+        super(
+                new TicTacToeCanvas(Color.GRAY, (App.getHeight() / 4) * 3, (App.getHeight() / 4) * 3,(c) -> {new EventFlow().addPostEvent(GUIEvents.PlayerAttemptedMove.class, c).postEvent();}),
+                players,
+                ticTacToeR,
+                local ? new LocalThreadBehaviour(ticTacToeR, players) : new OnlineThreadBehaviour<>(ticTacToeR, players), // TODO: Player order matters here, this won't work atm
+                "TicTacToe");
+
+        initUI();
+        eventFlow.listen(GUIEvents.PlayerAttemptedMove.class, event -> {if (getCurrentPlayer() instanceof LocalPlayer lp){lp.setMove(event.move());}}, false);
+        //addListener(GlobalEventBus.subscribe(GUIEvents.PlayerAttemptedMove.class, event -> {if (getCurrentPlayer() instanceof LocalPlayer lp){lp.setMove(event.move());}}));
+        //new EventFlow().listen(GUIEvents.PlayerAttemptedMove.class, event -> {if (getCurrentPlayer() instanceof LocalPlayer lp){lp.setMove(event.move());}});
+    }
+
+    public TicTacToeController(Player<TicTacToeR>[] players) {
+        this(players, true);
+    }
+
+    @Override
+    public void updateUI() {
+        canvas.clearAll();
+        // TODO: wtf is even this pile of poop temp fix
+        primary.nextPlayer(true, getCurrentPlayer().getName(), game.getCurrentTurn() == 0 ? "X" : "O", getPlayer((game.getCurrentTurn() + 1) % 2).getName(), 'T');
+        drawMoves();
+    }
+
+    private void initUI(){
+        primary.add(Pos.CENTER, canvas.getCanvas());
+        WidgetContainer.getCurrentView().transitionNext(primary, true);
+        updateUI();
+    }
+
+    private void drawMoves(){
+        int[] board = game.getBoard();
+
+        // Draw each square
+        for (int i = 0; i < board.length; i++){
+            // If square isn't empty, draw player move
+            if (board[i] != AbstractGame.EMPTY){
+                canvas.drawPlayerMove(board[i], i);
+            }
+        }
+    }
+}

app/src/main/java/org/toop/app/menu/CreditsMenu.java

@@ -1,14 +0,0 @@
-package org.toop.app.menu;
-
-import org.toop.framework.asset.ResourceManager;
-import org.toop.framework.asset.resources.LocalizationAsset;
-import org.toop.local.AppContext;
-
-import java.util.Locale;
-
-public final class CreditsMenu extends Menu {
-    private Locale currentLocale = AppContext.getLocale();
-    private LocalizationAsset loc = ResourceManager.get("localization.properties");
-    public CreditsMenu() {
-	}
-}

app/src/main/java/org/toop/app/menu/GameSelectMenu.java

@@ -1,33 +0,0 @@
-package org.toop.app.menu;
-
-import javafx.scene.control.ComboBox;
-import javafx.scene.control.TextField;
-import javafx.scene.layout.HBox;
-import javafx.scene.layout.Region;
-import javafx.scene.layout.StackPane;
-import javafx.scene.layout.VBox;
-import org.toop.app.GameType;
-
-public class GameSelectMenu extends Menu {
-	public GameSelectMenu(GameType type) {
-		final Region background = createBackground();
-
-		final ComboBox<String> selectedGame = new ComboBox<>();
-		selectedGame.getItems().add(GameType.toName(GameType.TICTACTOE));
-		selectedGame.getItems().add(GameType.toName(GameType.REVERSI));
-		selectedGame.setValue(GameType.toName(type));
-
-		final ComboBox<String> selectedMode = new ComboBox<>();
-		selectedMode.getItems().add("Local");
-		selectedMode.getItems().add("Online");
-		selectedMode.setValue("Local");
-
-		final HBox selectedContainer = new HBox(10, selectedGame, selectedMode);
-
-		final TextField serverIpField = new TextField();
-		serverIpField.setPromptText("Enter here your server ip address");
-
-		VBox box = new VBox(selectedContainer, serverIpField);
-		pane = new StackPane(background, box);
-	}
-}

app/src/main/java/org/toop/app/menu/MainMenu.java

@@ -1,37 +0,0 @@
-package org.toop.app.menu;
-
-import org.toop.app.App;
-import org.toop.app.GameType;
-
-import javafx.geometry.Pos;
-import javafx.scene.control.Button;
-import javafx.scene.layout.*;
-import org.toop.app.menu.game.TicTacToeMenu;
-import org.toop.game.tictactoe.TicTacToe;
-
-public final class MainMenu extends Menu {
-	public MainMenu() {
-		final Region background = createBackground();
-
-		final Button tictactoe = createButton("Tic Tac Toe", () -> { App.activate(new TicTacToeMenu(new TicTacToe("player 1", true, "player 2", true))); });
-		final Button reversi = createButton("Reversi", () -> { App.activate(new GameSelectMenu(GameType.REVERSI)); });
-
-		final VBox gamesBox = new VBox(10, tictactoe, reversi);
-		gamesBox.setAlignment(Pos.TOP_LEFT);
-		gamesBox.setPickOnBounds(false);
-		gamesBox.setTranslateY(50);
-		gamesBox.setTranslateX(25);
-
-		final Button credits = createButton("Credits", () -> { App.push(new CreditsMenu()); });
-		final Button options = createButton("Options", () -> { App.push(new OptionsMenu()); });
-		final Button quit = createButton("Quit", () -> { App.quitPopup(); });
-
-		final VBox controlBox = new VBox(10, credits, options, quit);
-		controlBox.setAlignment(Pos.BOTTOM_LEFT);
-		controlBox.setPickOnBounds(false);
-		controlBox.setTranslateY(-50);
-		controlBox.setTranslateX(25);
-
-		pane = new StackPane(background, gamesBox, controlBox);
-	}
-}

app/src/main/java/org/toop/app/menu/Menu.java

@@ -1,47 +0,0 @@
-package org.toop.app.menu;
-
-import javafx.scene.Node;
-import javafx.scene.control.Button;
-import javafx.scene.layout.Pane;
-import javafx.scene.layout.Region;
-import javafx.scene.text.Text;
-
-public abstract class Menu {
-	protected Pane pane;
-	public Pane getPane() { return pane; }
-
-	public Region createBackground(String css) {
-		final Region background = new Region();
-		background.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);
-		background.getStyleClass().add(css);
-
-		return background;
-	}
-
-	public Region createBackground() {
-		return createBackground("background");
-	}
-
-	public Text createText(String css, String x) {
-		final Text text = new Text(x);
-		text.getStyleClass().add(css);
-
-		return text;
-	}
-
-	public Text createText(String x) {
-		return createText("text", x);
-	}
-
-	public Button createButton(String css, String x, Runnable runnable) {
-		final Button button = new Button(x);
-		button.setOnAction(_ -> runnable.run());
-		button.getStyleClass().add(css);
-
-		return button;
-	}
-
-	public Button createButton(String x, Runnable runnable) {
-		return createButton("button", x, runnable);
-	}
-}

app/src/main/java/org/toop/app/menu/OptionsMenu.java

@@ -1,14 +0,0 @@
-package org.toop.app.menu;
-
-import org.toop.framework.asset.ResourceManager;
-import org.toop.framework.asset.resources.LocalizationAsset;
-import org.toop.local.AppContext;
-
-import java.util.Locale;
-
-public final class OptionsMenu extends Menu {
-    private Locale currentLocale = AppContext.getLocale();
-    private LocalizationAsset loc = ResourceManager.get("localization.properties");
-    public OptionsMenu() {
-	}
-}

app/src/main/java/org/toop/app/menu/game/GameMenu.java

@@ -1,99 +0,0 @@
-package org.toop.app.menu.game;
-
-import javafx.geometry.Pos;
-import javafx.scene.canvas.Canvas;
-import javafx.scene.canvas.GraphicsContext;
-import javafx.scene.control.Button;
-import javafx.scene.layout.HBox;
-import javafx.scene.layout.Region;
-import javafx.scene.layout.StackPane;
-import javafx.scene.layout.VBox;
-import javafx.scene.text.Text;
-import org.toop.app.App;
-import org.toop.app.menu.MainMenu;
-import org.toop.app.menu.Menu;
-
-public abstract class GameMenu extends Menu {
-	protected final class Cell {
-		public float x;
-		public float y;
-
-		public float width;
-		public float height;
-
-		public Cell(float x, float y, float width, float height) {
-			this.x = x;
-			this.y = y;
-
-			this.width = width;
-			this.height = height;
-		}
-
-		public boolean check(float x, float y) {
-			return x >= this.x && y >= this.y && x <= this.x + width && y <= this.y + height;
-		}
-	}
-
-	protected final int size;
-
-	protected final Canvas canvas;
-	protected final GraphicsContext graphics;
-
-	protected final int rows;
-	protected final int columns;
-
-	protected final int gapSize;
-
-	protected final Cell[] cells;
-
-	protected GameMenu(int rows, int columns, int gapSize) {
-		final int size = Math.min(App.getWidth(), App.getHeight()) / 5 * 4;
-
-		final Canvas canvas = new Canvas(size, size);
-
-		final GraphicsContext graphics = canvas.getGraphicsContext2D();
-
-		this.size = size;
-
-		this.canvas = canvas;
-		this.graphics = graphics;
-
-		this.rows = rows;
-		this.columns = columns;
-
-		this.gapSize = gapSize;
-
-		cells = new Cell[rows * columns];
-
-		final float cellWidth = ((float)size - (rows - 1) * gapSize) / rows;
-		final float cellHeight = ((float)size - (columns - 1) * gapSize) / rows;
-
-		for (int y = 0; y < columns; y++) {
-			final float startY = y * cellHeight + y * gapSize;
-
-			for (int x = 0; x < rows; x++) {
-				final float startX = x * cellWidth + x * gapSize;
-				cells[y * rows + x] = new Cell(startX, startY, cellWidth, cellHeight);
-			}
-		}
-
-		final Region background = createBackground();
-
-		final Text player1 = createText("player_1", "Player 1");
-		final Text player2 = createText("player_2", "Player 2");
-
-		final HBox playersContainer = new HBox(100, player1, player2);
-		playersContainer.setAlignment(Pos.TOP_CENTER);
-		playersContainer.setPickOnBounds(false);
-		playersContainer.setTranslateY(50);
-
-		final Button hint = createButton("Hint", () -> {});
-		final Button back = createButton("Back", () -> { App.activate(new MainMenu()); });
-
-		final VBox controlContainer = new VBox(hint, back);
-		StackPane.setAlignment(controlContainer, Pos.BOTTOM_LEFT);
-		controlContainer.setPickOnBounds(false);
-
-		pane = new StackPane(background, canvas, playersContainer, controlContainer);
-	}
-}

app/src/main/java/org/toop/app/menu/game/TicTacToeMenu.java

@@ -1,133 +0,0 @@
-package org.toop.app.menu.game;
-
-import javafx.scene.paint.Color;
-import org.toop.game.Game;
-import org.toop.game.Player;
-import org.toop.game.tictactoe.TicTacToe;
-import org.toop.game.tictactoe.TicTacToeAI;
-
-import javax.management.RuntimeErrorException;
-import java.util.concurrent.*;
-
-public final class TicTacToeMenu extends GameMenu {
-	private final TicTacToe game;
-	private final TicTacToeAI ai;
-
-//	private final ExecutorService executor = Executors.newFixedThreadPool(1);
-	private final BlockingQueue<Game.Move> moveQueue = new LinkedBlockingQueue<>();
-
-	public TicTacToeMenu(TicTacToe game) {
-		super(3, 3, 10);
-
-		graphics.setFill(Color.CYAN);
-
-		for (int x = 1; x < rows; x++) {
-			graphics.fillRect(cells[x].x - gapSize, 0, gapSize, size);
-		}
-
-		for (int y = 1; y < columns; y++) {
-			graphics.fillRect(0, cells[y * rows].y - gapSize, size, gapSize);
-		}
-
-		this.game = game;
-		ai = new TicTacToeAI();
-
-		canvas.setOnMouseClicked(event -> {
-			for (int i = 0; i < cells.length; i++) {
-				if (cells[i].check((float) event.getX(), (float) event.getY())) {
-					final Game.Move move = new Game.Move(i, game.getCurrentPlayer().values()[0]);
-					play(move);
-				}
-			}
-		});
-
-		new Thread(this::gameThread).start();
-	}
-
-	private void play(Game.Move move) {
-		final Game.Move[] legalMoves = game.getLegalMoves();
-
-		boolean isLegal = false;
-
-		for (final Game.Move legalMove : legalMoves) {
-			if (legalMove.position() == move.position() && legalMove.value() == move.value()) {
-				isLegal = true;
-				break;
-			}
-		}
-
-		if (!isLegal) {
-			return;
-		}
-
-		try { moveQueue.put(move); }
-		catch (InterruptedException _) {}
-	}
-
-	private void placeX(int cell) {
-		graphics.setStroke(Color.ORANGERED);
-		graphics.setLineWidth(gapSize);
-
-		final float x = cells[cell].x + gapSize;
-		final float y = cells[cell].y + gapSize;
-
-		final float width = cells[cell].width - gapSize * 2;
-		final float height = cells[cell].height - gapSize * 2;
-
-		graphics.strokeLine(x, y, x + width, y + height);
-		graphics.strokeLine(x + width, y, x, y + height);
-	}
-
-	private void placeO(int cell) {
-		graphics.setStroke(Color.DEEPSKYBLUE);
-		graphics.setLineWidth(gapSize);
-
-		final float x = cells[cell].x + gapSize;
-		final float y = cells[cell].y + gapSize;
-
-		final float width = cells[cell].width - gapSize * 2;
-		final float height = cells[cell].height - gapSize * 2;
-
-		graphics.strokeOval(x, y, width, height);
-	}
-
-	private void gameThread() {
-		boolean running = true;
-
-		while(running) {
-			final Player currentPlayer = game.getCurrentPlayer();
-
-			try {
-				Game.Move move;
-
-				if (!currentPlayer.isAI()) {
-					try { move = moveQueue.take(); }
-					catch (InterruptedException _) { return; }
-				} else {
-					move = ai.findBestMove(game, 9);
-				}
-
-				assert move != null;
-				final Game.State state = game.play(move);
-
-				if (move.value() == 'X') {
-					placeX(move.position());
-				} else {
-					placeO(move.position());
-				}
-
-				switch (state) {
-					case NORMAL: break;
-
-					case DRAW:
-					case LOSE:
-					case WIN:
-						running = false;
-						break;
-				}
-			} catch (RuntimeException e) {
-				return;
-			}
-        }
-	}
-}

app/src/main/java/org/toop/app/widget/Primitive.java

@@ -0,0 +1,209 @@
+package org.toop.app.widget;
+
+import javafx.scene.image.ImageView;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.resource.resources.ImageAsset;
+import org.toop.local.AppContext;
+
+import java.io.File;
+import java.util.function.Consumer;
+
+import javafx.collections.FXCollections;
+import javafx.scene.Node;
+import javafx.scene.control.Button;
+import javafx.scene.control.ComboBox;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.control.Separator;
+import javafx.scene.control.Slider;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+import javafx.util.StringConverter;
+
+public final class Primitive {
+	public static Text header(String key, boolean localize) {
+		var header = new Text();
+		header.getStyleClass().add("header");
+
+		if (!key.isEmpty()) {
+			if (localize) header.setText(AppContext.getString(key)); else header.setText(key);
+			header.textProperty().bind(AppContext.bindToKey(key, localize));
+		}
+
+		return header;
+	}
+
+	public static Text header(String key) {
+		return header(key, true);
+	}
+
+	public static Text text(String key, boolean localize) {
+		var text = new Text();
+		text.getStyleClass().add("text");
+
+		if (!key.isEmpty()) {
+			if (localize) text.setText(AppContext.getString(key)); else text.setText(key);
+			text.textProperty().bind(AppContext.bindToKey(key, localize));
+		}
+
+		return text;
+	}
+
+	public static Text text(String key) {
+		return text(key, true);
+	}
+
+    public static ImageView image(ImageAsset imageAsset) {
+        ImageView imageView = new ImageView(imageAsset.getImage());
+        imageView.getStyleClass().add("image");
+        imageView.setPreserveRatio(true);
+        imageView.setFitWidth(400);
+        imageView.setFitHeight(400);
+        return imageView;
+    }
+
+	public static Button button(String key, Runnable onAction, boolean localize) {
+		var button = new Button();
+		button.getStyleClass().add("button");
+
+		if (!key.isEmpty()) {
+			if (localize) button.setText(AppContext.getString(key));  else button.setText(key);
+			button.textProperty().bind(AppContext.bindToKey(key, localize));
+		}
+
+		if (onAction != null) {
+			button.setOnAction(_ -> {
+                onAction.run();
+                playButtonSound();
+            });
+		}
+
+		return button;
+	}
+
+	public static Button button(String key, Runnable onAction) {
+		return button(key, onAction, true);
+	}
+
+	public static TextField input(String promptKey, String text, Consumer<String> onValueChanged, boolean localize) {
+		var input = new TextField();
+		input.getStyleClass().add("input");
+
+		if (!promptKey.isEmpty()) {
+			if (localize) input.setPromptText(AppContext.getString(promptKey)); else input.setPromptText(promptKey);
+			input.promptTextProperty().bind(AppContext.bindToKey(promptKey, localize));
+		}
+
+		input.setText(text);
+
+		if (onValueChanged != null) {
+			input.textProperty().addListener((_, _, newValue) ->
+				onValueChanged.accept(newValue));
+		}
+
+		return input;
+	}
+
+	public static TextField input(String promptKey, String text, Consumer<String> onValueChanged) {
+		return input(promptKey, text, onValueChanged, true);
+	}
+
+	public static Slider slider(int min, int max, int value, Consumer<Integer> onValueChanged) {
+		var slider = new Slider();
+		slider.getStyleClass().add("slider");
+
+		slider.setMin(min);
+		slider.setMax(max);
+		slider.setValue(value);
+
+        if (onValueChanged != null) {
+            slider.valueProperty().addListener((_, _, newValue) -> {
+                onValueChanged.accept(newValue.intValue());
+            });
+        }
+
+        slider.setOnMouseReleased(event -> {
+            playButtonSound();
+        });
+
+        return slider;
+	}
+
+	@SafeVarargs
+	public static <T> ComboBox<T> choice(StringConverter<T> converter, T value, Consumer<T> onValueChanged, T... items) {
+		var choice = new ComboBox<T>();
+		choice.getStyleClass().add("choice");
+
+		if (converter != null) {
+			choice.setConverter(converter);
+		}
+
+		if (value != null) {
+			choice.setValue(value);
+		}
+
+		if (onValueChanged != null) {
+            choice.valueProperty().addListener((_, _, newValue) -> {
+                onValueChanged.accept(newValue);
+                playButtonSound();
+            });
+        }
+
+		choice.setItems(FXCollections.observableArrayList(items));
+
+		return choice;
+	}
+
+	public static ScrollPane scroll(Node content) {
+		var scroll = new ScrollPane();
+		scroll.getStyleClass().add("scroll");
+		scroll.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+		scroll.setFitToWidth(true);
+
+		scroll.setContent(content);
+
+		return scroll;
+	}
+
+	public static Separator separator() {
+		var separator = new Separator();
+		separator.getStyleClass().add("separator");
+
+		return separator;
+	}
+
+	public static HBox hbox(Node... nodes) {
+		var hbox = new HBox();
+		hbox.getStyleClass().add("container");
+		hbox.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+
+		for (var node : nodes) {
+			if (node != null) {
+				hbox.getChildren().add(node);
+			}
+		}
+
+		return hbox;
+	}
+
+	public static VBox vbox(Node... nodes) {
+		var vbox = new VBox();
+		vbox.getStyleClass().add("container");
+		vbox.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+
+		for (var node : nodes) {
+			if (node != null) {
+				vbox.getChildren().add(node);
+			}
+		}
+
+		return vbox;
+	}
+
+    private static void playButtonSound() {
+        new EventFlow().addPostEvent(new AudioEvents.ClickButton()).postEvent();
+    }
+}

app/src/main/java/org/toop/app/widget/Updatable.java

@@ -0,0 +1,5 @@
+package org.toop.app.widget;
+
+public interface Updatable {
+    void update();
+}

app/src/main/java/org/toop/app/widget/Widget.java

@@ -0,0 +1,29 @@
+package org.toop.app.widget;
+
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+
+public interface Widget {
+    Logger logger = LogManager.getLogger(Widget.class);
+
+	Node getNode();
+
+    default void show(Pos position) {
+        logger.debug("Showing Widget: {} at position: {}", this.getNode(), position.toString());
+        WidgetContainer.add(position, this);
+    }
+
+    default void hide() {
+        logger.debug("Hiding Widget: {}", this.getNode());
+        WidgetContainer.remove(this);
+    }
+
+    default void replace(Pos position, Widget widget) {
+        logger.debug("Replacing Widget: {}, with widget: {}, to position: {}",
+                this.getNode(), widget.getNode(), position.toString());
+        widget.show(position);
+		hide();
+    }
+}

app/src/main/java/org/toop/app/widget/WidgetContainer.java

@@ -0,0 +1,149 @@
+package org.toop.app.widget;
+
+import javafx.collections.ObservableList;
+import javafx.scene.Node;
+import org.toop.app.widget.complex.PopupWidget;
+import org.toop.app.widget.complex.ViewWidget;
+
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import javafx.scene.layout.StackPane;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Predicate;
+
+public final class WidgetContainer {
+	private static StackPane root;
+	private static ViewWidget currentView;
+
+	public static synchronized StackPane setup() {
+		if (root != null) {
+			return root;
+		}
+
+		root = new StackPane();
+		root.getStyleClass().add("bg-view");
+
+		return root;
+	}
+
+	public static void add(Pos position, Widget widget) {
+		if (root == null || widget == null) {
+			return;
+		}
+
+		Platform.runLater(() -> {
+			if (root.getChildren().contains(widget.getNode())) {
+				return;
+			}
+
+			StackPane.setAlignment(widget.getNode(), position);
+
+			if (widget instanceof ViewWidget view) {
+				root.getChildren().addFirst(view.getNode());
+				currentView = view;
+			} else if (widget instanceof PopupWidget popup) {
+				currentView.add(Pos.CENTER, (Widget) popup);
+			} else {
+				root.getChildren().add(widget.getNode());
+			}
+		});
+	}
+
+	public static void remove(Widget widget) {
+		if (root == null || widget == null) {
+			return;
+		}
+
+		Platform.runLater(() -> {
+			if (widget instanceof PopupWidget popup) {
+				currentView.remove((Widget) popup);
+			} else {
+				root.getChildren().remove(widget.getNode());
+			}
+		});
+	}
+
+	public static void remove(Class<? extends Widget> widgetClass) {
+		if (root == null || currentView == null) return;
+
+		Platform.runLater(() ->
+				currentView.getChildren().removeIf(widget -> widget.getClass().isAssignableFrom(widgetClass))
+		);
+	}
+
+	public static void removeFirst(Class<? extends Widget> widgetClass) {
+		if (root == null || currentView == null) return;
+
+		Platform.runLater(() -> {
+			for (Node widget : currentView.getChildren()) {
+				if (widgetClass.isAssignableFrom(widget.getClass())) {
+					currentView.getChildren().remove(widget);
+					break;
+				}
+			}
+		});
+	}
+
+	public static List<Widget> find(Class<? extends Widget> widgetClass) {
+		if (root == null || currentView == null) return null;
+
+		return getAllWidgets()
+				.stream()
+				.filter(widget -> widget.getClass().isAssignableFrom(widgetClass))
+				.toList();
+    }
+
+	public static List<Widget> find(Predicate<Widget> predicate) {
+		if (root == null || currentView == null) return null;
+
+		return getAllWidgets()
+				.stream()
+				.filter(predicate)
+				.toList();
+	}
+
+	public static Widget findFirst(Class<? extends Widget> widgetClass) {
+		if (root == null || currentView == null) return null;
+
+		return getAllWidgets()
+				.stream()
+				.filter(widget -> widget.getClass().isAssignableFrom(widgetClass))
+				.findFirst().orElse(null);
+	}
+
+	public static ViewWidget getCurrentView() {
+		return currentView;
+	}
+
+    public static void setCurrentView(ViewWidget view) {
+        if (root == null || view == null) {
+            return;
+        }
+
+        Platform.runLater(() -> {
+            root.getChildren().clear();
+            root.getChildren().add(view.getNode());
+            currentView = view;
+        });
+    }
+
+	public static List<Widget> getAllWidgets() {
+		final List<Widget> children = new ArrayList<>();
+
+		for (var child : root.getChildren()) {
+			if (child instanceof Widget widget) {
+				children.add(widget);
+			}
+		}
+
+		for (var child : currentView.getNode().getChildren()) {
+			if (child instanceof Widget widget) {
+				children.add(widget);
+			}
+		}
+
+		return children;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/ConfirmWidget.java

@@ -0,0 +1,38 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Widget;
+
+import javafx.application.Platform;
+import javafx.scene.Node;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+
+public class ConfirmWidget implements Widget {
+	private final HBox buttonsContainer;
+	private final Text messageText;
+	private final VBox container;
+
+	public ConfirmWidget(String confirm) {
+		buttonsContainer = Primitive.hbox();
+		messageText = Primitive.text("");
+		container = Primitive.vbox(Primitive.header(confirm), messageText, Primitive.separator(), buttonsContainer);
+	}
+
+	public void setMessage(String message) {
+		messageText.setText(message);
+	}
+
+	public void addButton(String key, Runnable onClick) {
+		Platform.runLater(() -> {
+			var button = Primitive.button(key, onClick);
+			buttonsContainer.getChildren().add(button);
+		});
+	}
+
+	@Override
+	public Node getNode() {
+		return container;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/LabeledChoiceWidget.java

@@ -0,0 +1,42 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Widget;
+
+import java.util.function.Consumer;
+
+import javafx.scene.Node;
+import javafx.scene.control.ComboBox;
+import javafx.scene.layout.VBox;
+import javafx.util.StringConverter;
+
+public class LabeledChoiceWidget<T> implements Widget {
+	private final ComboBox<T> comboBox;
+	private final VBox container;
+
+	@SafeVarargs
+	public LabeledChoiceWidget(
+		String key,
+		StringConverter<T> converter,
+		T initialValue,
+		Consumer<T> onValueChanged,
+		T... items
+	) {
+		var label = Primitive.text(key);
+		comboBox = Primitive.choice(converter, initialValue, onValueChanged, items);
+		container = Primitive.vbox(label, comboBox);
+	}
+
+	public T getValue() {
+		return comboBox.getValue();
+	}
+
+	public void setValue(T value) {
+		comboBox.setValue(value);
+	}
+
+	@Override
+	public Node getNode() {
+		return container;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/LabeledInputWidget.java

@@ -0,0 +1,34 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Widget;
+
+import java.util.function.Consumer;
+
+import javafx.scene.Node;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.VBox;
+
+public class LabeledInputWidget implements Widget {
+	private final TextField input;
+	private final VBox container;
+
+	public LabeledInputWidget(String key, String promptKey, String initialText, Consumer<String> onValueChanged) {
+		var label = Primitive.text(key);
+		input = Primitive.input(promptKey, initialText, onValueChanged);
+		container = Primitive.vbox(label, input);
+	}
+
+	public String getValue() {
+		return input.getText();
+	}
+
+	public void setValue(String text) {
+		input.setText(text);
+	}
+
+	@Override
+	public Node getNode() {
+		return container;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/LabeledSliderWidget.java

@@ -0,0 +1,49 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Widget;
+
+import java.util.function.Consumer;
+
+import javafx.scene.Node;
+import javafx.scene.control.Slider;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+
+public class LabeledSliderWidget implements Widget {
+	private final Slider slider;
+	private final Text labelValue;
+	private final VBox container;
+
+	public LabeledSliderWidget(String key, int min, int max, int value, Consumer<Integer> onValueChanged) {
+		var label = Primitive.text(key);
+
+		labelValue = new Text(String.valueOf(value));
+		labelValue.getStyleClass().add("text");
+
+		slider = Primitive.slider(min, max, value, newValue -> {
+			labelValue.setText(String.valueOf(newValue));
+
+			if (onValueChanged != null) {
+				onValueChanged.accept(newValue);
+			}
+		});
+
+		var sliderRow = Primitive.hbox(slider, labelValue);
+		container = Primitive.vbox(label, sliderRow);
+	}
+
+	public int getValue() {
+		return (int)slider.getValue();
+	}
+
+	public void setValue(int newValue) {
+		slider.setValue(newValue);
+		labelValue.setText(String.valueOf(newValue));
+	}
+
+	@Override
+	public Node getNode() {
+		return container;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/LoadingWidget.java

@@ -0,0 +1,163 @@
+package org.toop.app.widget.complex;
+
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import javafx.scene.control.Control;
+import javafx.scene.control.ProgressBar;
+import javafx.scene.control.ProgressIndicator;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+import org.toop.app.widget.Primitive;
+
+import java.util.concurrent.Callable;
+import java.util.concurrent.atomic.AtomicBoolean;
+
+public class LoadingWidget extends ViewWidget implements Update { // TODO make of widget type
+    private final Text loadingText; // TODO Make changeable
+    private final ProgressIndicator progressBar;
+    private final AtomicBoolean successTriggered = new AtomicBoolean(false);
+    private final AtomicBoolean failureTriggered = new AtomicBoolean(false);
+
+    private Runnable success = () -> {};
+    private Runnable failure = () -> {};
+    private int maxAmount;
+    private int minAmount;
+    private int amount;
+    private Callable<Boolean> successTrigger = () -> (amount >= maxAmount);
+    private Callable<Boolean> failureTrigger = () -> (amount < minAmount);
+    private float percentage = 0.0f;
+
+    private boolean isInfinite = false;
+
+    /**
+     *
+     * Widget that shows a loading bar.
+     *
+     * @param loadingText Text above the loading bar.
+     * @param minAmount The minimum amount.
+     * @param startAmount The starting amount.
+     * @param maxAmount The max amount.
+     */
+    public LoadingWidget(Text loadingText, int minAmount, int startAmount, int maxAmount, boolean infinite, boolean circle) {
+        isInfinite = infinite;
+
+        this.maxAmount = maxAmount;
+        this.minAmount = minAmount;
+        amount = startAmount;
+
+        this.loadingText = loadingText;
+        progressBar = circle ? new ProgressIndicator() : new ProgressBar();
+
+        VBox box = Primitive.vbox(this.loadingText, progressBar);
+        progressBar.getStyleClass().add("loading-progress-bar");
+        add(Pos.CENTER, box);
+    }
+
+    public void setMaxAmount(int maxAmount) {
+        this.maxAmount = maxAmount;
+    }
+
+    public void setAmount(int amount) throws Exception {
+        this.amount = amount;
+        update();
+    }
+
+    public int getMaxAmount() {
+        return maxAmount;
+    }
+
+    public int getAmount() {
+        return amount;
+    }
+
+    public float getPercentage() {
+        return percentage;
+    }
+
+    public boolean isTriggered() {
+        return (failureTriggered.get() || successTriggered.get());
+    }
+
+    public ProgressIndicator getProgressBar() {
+        return progressBar;
+    }
+
+    /**
+     * What to do when success is triggered.
+     * @param onSuccess The lambda that gets run on success.
+     */
+    public void setOnSuccess(Runnable onSuccess) {
+        success = onSuccess;
+    }
+
+    /**
+     * What to do when failure is triggered.
+     * @param onFailure The lambda that gets run on failure.
+     */
+    public void setOnFailure(Runnable onFailure) {
+        failure = onFailure;
+    }
+
+    /**
+     * The trigger to activate onSuccess.
+     * @param trigger The lambda that triggers onSuccess.
+     */
+    public void setSuccessTrigger(Callable<Boolean> trigger) {
+        successTrigger = trigger;
+    }
+
+    /**
+     * The trigger to activate onFailure.
+     * @param trigger The lambda that triggers onFailure.
+     */
+    public void setFailureTrigger(Callable<Boolean> trigger) {
+        failureTrigger = trigger;
+    }
+
+    /**
+     * Forcefully trigger success.
+     */
+    public void triggerSuccess() {
+		if (successTriggered.compareAndSet(false, true)) {
+			Platform.runLater(() -> {
+				if (success != null) success.run();
+			});
+		}
+    }
+
+    /**
+     * Forcefully trigger failure.
+     */
+    public void triggerFailure() {
+		if (failureTriggered.compareAndSet(false, true)) {
+			Platform.runLater(() -> {
+				if (failure != null) failure.run();
+			});
+		}
+    }
+
+    @Override
+    public void update() throws Exception { // TODO Better exception
+        if (successTriggered.get() || failureTriggered.get()) { // If already triggered, throw exception.
+            throw new RuntimeException();
+        }
+
+        if (successTrigger.call()) {
+            triggerSuccess();
+            this.remove((Node) this);
+            return;
+        } else if (failureTrigger.call()) {
+            triggerFailure();
+            this.remove((Node) this);
+            return;
+        }
+
+        if (maxAmount != 0) {
+            percentage = (float) amount / maxAmount;
+        }
+        if (!isInfinite) {
+            progressBar.setProgress(percentage);
+        }
+    }
+}

app/src/main/java/org/toop/app/widget/complex/PlayerInfoWidget.java

@@ -0,0 +1,105 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.GameInformation;
+import org.toop.app.widget.Primitive;
+
+import javafx.scene.Node;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+
+public class PlayerInfoWidget {
+	private final GameInformation.Player information;
+	private final VBox container;
+    private Text playerName;
+    private boolean hasSet;
+
+	public PlayerInfoWidget(GameInformation.Player information) {
+		this.information = information;
+		container = Primitive.vbox(
+			buildToggle().getNode(),
+			buildContent()
+		);
+        this.playerName = null;
+	}
+
+	private ToggleWidget buildToggle() {
+		return new ToggleWidget(
+			"computer", "player",
+			information.isHuman,
+			isHuman -> {
+				information.isHuman = isHuman;
+				container.getChildren().setAll(
+					buildToggle().getNode(),
+					buildContent()
+				);
+			}
+		);
+	}
+
+	private Node buildContent() {
+        if (information.isHuman) {
+            var nameInput = new LabeledInputWidget(
+                    "name",
+                    "enter-your-name",
+                    information.name,
+                    newName -> information.name = newName
+            );
+
+            return nameInput.getNode();
+        } else {
+            var AIBox = Primitive.vbox(
+                    makeAIButton(0, 1, "zwartepiet"),
+                    makeAIButton(2, 1, "sinterklaas"),
+                    makeAIButton(9, 1, "santa")
+            );
+
+            this.playerName = Primitive.text("");
+            playerName.setText(information.name);
+
+            var nameDisplay = Primitive.vbox(
+                    Primitive.text("name"),
+                    playerName
+            );
+
+            if (!hasSet) {
+                doDefault();
+                hasSet = true;
+            }
+
+            return Primitive.vbox(
+                    AIBox,
+                    nameDisplay
+            );
+
+        }
+    }
+
+	public Node getNode() {
+		return container;
+	}
+
+    private Node makeAIButton(int depth, int thinktime, String name) {
+        return Primitive.button(name, () -> {
+            information.name = getName(name);
+            information.computerDifficulty = depth;
+            information.computerThinkTime = thinktime;
+            this.playerName.setText(getName(name));
+        });
+    }
+
+    private String getName(String name) {
+        return switch (name) {
+            case "sinterklaas" -> "Sint. R. Klaas";
+            case "zwartepiet" -> "Zwarte Piet";
+            case "santa" -> "Santa";
+            default -> "Default";
+        };
+    }
+
+    private void doDefault() {
+        information.name = getName("zwartepiet");
+        information.computerDifficulty = 0;
+        information.computerThinkTime = 1;
+        this.playerName.setText(getName("zwartepiet"));
+    }
+}

app/src/main/java/org/toop/app/widget/complex/PopupWidget.java

@@ -0,0 +1,21 @@
+package org.toop.app.widget.complex;
+
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+
+public abstract class PopupWidget extends StackWidget {
+	private final Button popButton;
+
+	public PopupWidget() {
+		super("bg-popup");
+
+		popButton = new Button("X");
+		popButton.setOnAction(_ -> hide());
+
+		add(Pos.TOP_RIGHT, popButton);
+	}
+
+	protected void setOnPop(Runnable onPop) {
+		popButton.setOnAction(_ -> onPop.run());
+	}
+}

app/src/main/java/org/toop/app/widget/complex/StackWidget.java

@@ -0,0 +1,44 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Widget;
+
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import javafx.scene.layout.StackPane;
+
+public abstract class StackWidget extends StackPane implements Widget {
+	public StackWidget(String cssClass) {
+		this.getStyleClass().add(cssClass);
+	}
+
+	public void add(Pos position, Node node) {
+		Platform.runLater(() -> {
+			if (this.getChildren().contains(node)) {
+				return;
+			}
+
+			StackPane.setAlignment(node, position);
+			this.getChildren().add(node);
+		});
+	}
+
+	public void add(Pos position, Widget widget) {
+		add(position, widget.getNode());
+	}
+
+	public void remove(Node node) {
+		Platform.runLater(() -> {
+			this.getChildren().remove(node);
+		});
+	}
+
+	public void remove(Widget widget) {
+		remove(widget.getNode());
+	}
+
+	@Override
+	public StackPane getNode() {
+		return this;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/ToggleWidget.java

@@ -0,0 +1,65 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Widget;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.local.AppContext;
+
+import java.util.function.Consumer;
+
+import javafx.scene.Node;
+import javafx.scene.control.Button;
+import javafx.scene.layout.VBox;
+
+public class ToggleWidget implements Widget {
+	private final Button button;
+	private final VBox container;
+
+	private final String onKey;
+	private final String offKey;
+
+	private boolean state;
+
+	public ToggleWidget(String onKey, String offKey, boolean initialState, Consumer<Boolean> onToggle) {
+		this.onKey = onKey;
+		this.offKey = offKey;
+		this.state = initialState;
+
+		button = new Button(AppContext.getString(getCurrentKey()));
+		button.setOnAction(_ -> {
+			state = !state;
+			updateText();
+			if (onToggle != null) {
+                onToggle.accept(state);
+                new EventFlow().addPostEvent(new AudioEvents.ClickButton()).postEvent(); // TODO FIX PRIMITIVES
+            }
+		});
+
+		container = Primitive.vbox(button);
+	}
+
+	private String getCurrentKey() {
+		return state? offKey : onKey;
+	}
+
+	private void updateText() {
+		button.setText(AppContext.getString(getCurrentKey()));
+	}
+
+	public boolean getState() {
+		return state;
+	}
+
+	public void setState(boolean newState) {
+		if (state != newState) {
+			state = newState;
+			updateText();
+		}
+	}
+
+	@Override
+	public Node getNode() {
+		return container;
+	}
+}

app/src/main/java/org/toop/app/widget/complex/Update.java

@@ -0,0 +1,5 @@
+package org.toop.app.widget.complex;
+
+public interface Update {
+    void update() throws Exception;
+}

app/src/main/java/org/toop/app/widget/complex/ViewWidget.java

@@ -0,0 +1,104 @@
+package org.toop.app.widget.complex;
+
+import org.toop.app.widget.Primitive;
+
+import javafx.geometry.Pos;
+
+public abstract class ViewWidget extends StackWidget {
+	private ViewWidget previous = null;
+
+    public ViewWidget() {
+        super("bg-primary");
+    }
+
+	public void transition(ViewWidget view) {
+		view.previous = this;
+		replace(Pos.CENTER, view);
+	}
+
+    public void transitionNext(ViewWidget view) {
+        transitionNext(view, false);
+    }
+
+	public void transitionNext(ViewWidget view, boolean aware) {
+        if (aware && this.getClass().equals(view.getClass())) {
+            view.previous = this.previous;
+        }
+        else{
+            view.previous = this;
+        }
+
+		replace(Pos.CENTER, view);
+
+		var backButton = Primitive.button("back", () -> {
+			view.transitionPrevious();
+		});
+
+		view.add(Pos.BOTTOM_LEFT, Primitive.vbox(backButton));
+	}
+
+	public void transitionNextCustom(ViewWidget view, String key, Runnable runnable) {
+		view.previous = this;
+
+		replace(Pos.CENTER, view);
+
+		var customButton = Primitive.button(key, () -> {
+			runnable.run();
+			view.transitionPrevious();
+		});
+
+		view.add(Pos.BOTTOM_LEFT, Primitive.vbox(customButton));
+	}
+
+	public void transitionPrevious() {
+		if (previous == null) {
+			return;
+		}
+
+		replace(Pos.CENTER, previous);
+		previous = null;
+	}
+
+	public void removeIndexFromPreviousChain(int index) {
+		ViewWidget view = this;
+
+		while (index > 0 && view != null) {
+			index--;
+
+			if (index == 0) {
+				if (view.previous != null && view.previous.previous != null) {
+					view.previous = view.previous.previous;
+				}
+			}
+
+			view = view.previous;
+		}
+	}
+
+	public void removeViewFromPreviousChain(ViewWidget view) {
+		ViewWidget prev = previous;
+		int index = 0;
+
+		while (prev != null) {
+			index++;
+
+			if (prev == view) {
+				removeIndexFromPreviousChain(index);
+				break;
+			}
+
+			prev = prev.previous;
+		}
+	}
+
+	public void reload(ViewWidget view) {
+		view.previous = previous;
+		replace(Pos.CENTER, view);
+
+		var backButton = Primitive.button("back", () -> {
+			view.transitionPrevious();
+		});
+
+		view.add(Pos.BOTTOM_LEFT, Primitive.vbox(backButton));
+	}
+}

app/src/main/java/org/toop/app/widget/display/SongDisplay.java

@@ -0,0 +1,117 @@
+package org.toop.app.widget.display;
+
+import org.toop.app.widget.Widget;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.eventbus.GlobalEventBus;
+
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import javafx.scene.control.Button;
+import javafx.scene.control.ProgressBar;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+
+public class SongDisplay extends VBox implements Widget {
+	private final Text songTitle;
+	private final ProgressBar progressBar;
+	private final Text progressText;
+
+	public SongDisplay() {
+		new EventFlow()
+				.listen(AudioEvents.PlayingMusic.class, this::updateTheSong, false);
+
+		setAlignment(Pos.CENTER);
+		setMaxHeight(Region.USE_PREF_SIZE);
+		getStyleClass().add("song-display");
+
+		// TODO ADD GOOD SONG TITLES WITH ARTISTS DISPLAYED
+		songTitle = new Text("song playing");
+		songTitle.getStyleClass().add("song-title");
+
+		progressBar = new ProgressBar(0);
+		progressBar.getStyleClass().add("loading-progress-bar");
+
+		progressText = new Text("0:00/0:00");
+		progressText.getStyleClass().add("progress-text");
+
+		// TODO ADD BETTER CSS FOR THE SKIPBUTTON WHERE ITS AT A NICER POSITION
+
+		Button skipButton = new Button(">>");
+		Button pauseButton = new Button("⏸");
+		Button previousButton = new Button("<<");
+
+		skipButton.getStyleClass().setAll("skip-button");
+		pauseButton.getStyleClass().setAll("pause-button");
+		previousButton.getStyleClass().setAll("previous-button");
+
+		skipButton.setOnAction( event -> {
+			GlobalEventBus.get().post(new AudioEvents.SkipMusic());
+		});
+
+		pauseButton.setOnAction(event -> {
+			GlobalEventBus.get().post(new AudioEvents.PauseMusic());
+			if (pauseButton.getText().equals("⏸")) {
+				pauseButton.setText("▶");
+			}
+			else if (pauseButton.getText().equals("▶")) {
+				pauseButton.setText("⏸");
+			}
+		});
+
+		previousButton.setOnAction( event -> {
+			GlobalEventBus.get().post(new AudioEvents.PreviousMusic());
+		});
+
+		HBox control = new HBox(10, previousButton, pauseButton, skipButton);
+		control.setAlignment(Pos.CENTER);
+		control.getStyleClass().add("controls");
+
+		getChildren().addAll(songTitle, progressBar, progressText, control);
+	}
+
+	private void updateTheSong(AudioEvents.PlayingMusic event) {
+		Platform.runLater(() -> {
+			String text = event.name();
+			text = text.substring(0, text.length() - 4);
+			songTitle.setText(text);
+			double currentPos = event.currentPosition();
+			double duration = event.duration();
+			if (currentPos / duration > 0.05) {
+				double progress = currentPos / duration;
+				progressBar.setProgress(progress);
+			}
+			else if (currentPos / duration < 0.05) {
+				progressBar.setProgress(0.05);
+			}
+			progressText.setText(getTimeString(event.currentPosition(), event.duration()));
+		});
+	}
+
+	private String getTimeString(long position, long duration) {
+		long positionMinutes = position / 60;
+		long durationMinutes = duration / 60;
+		long positionSeconds = position % 60;
+		long durationSeconds = duration % 60;
+		String positionSecondsStr = String.valueOf(positionSeconds);
+		String durationSecondsStr = String.valueOf(durationSeconds);
+
+		if (positionSeconds < 10) {
+			positionSecondsStr  = "0" + positionSeconds;
+		}
+		if (durationSeconds < 10) {
+			durationSecondsStr = "0" + durationSeconds;
+		}
+
+		String time = positionMinutes + ":" + positionSecondsStr + " / " + durationMinutes + ":" + durationSecondsStr;
+		return time;
+	}
+
+	@Override
+	public Node getNode() {
+		return this;
+	}
+}

app/src/main/java/org/toop/app/widget/popup/ChallengePopup.java

@@ -0,0 +1,64 @@
+package org.toop.app.widget.popup;
+
+import org.toop.app.GameInformation;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.PlayerInfoWidget;
+import org.toop.app.widget.complex.PopupWidget;
+
+import java.util.function.Consumer;
+
+import javafx.geometry.Pos;
+import org.toop.local.AppContext;
+
+public final class ChallengePopup extends PopupWidget {
+	private final GameInformation.Player playerInformation;
+	private final String challenger;
+	private final String game;
+	private final Consumer<GameInformation.Player> onAccept;
+
+	public ChallengePopup(String challenger, String game, Consumer<GameInformation.Player> onAccept) {
+		this.challenger = challenger;
+		this.game = game;
+		this.onAccept = onAccept;
+
+		this.playerInformation = new GameInformation.Player();
+
+		setupLayout();
+	}
+
+	private void setupLayout() {
+		var challengeText = Primitive.text("you-were-challenged-by");
+
+		var challengerHeader = Primitive.header(challenger, false);
+
+		var toAGameOfText = Primitive.text("to-a-game-of");
+		var gameHeader = Primitive.header(game, false);
+
+		var acceptButton = Primitive.button("accept", () -> {
+			onAccept.accept(playerInformation);
+			this.hide();
+		});
+		var denyButton = Primitive.button("deny", () -> hide());
+
+		var leftSection = Primitive.vbox(
+			challengeText,
+			challengerHeader,
+			toAGameOfText,
+			gameHeader,
+			Primitive.separator(),
+			Primitive.hbox(
+				acceptButton,
+				denyButton
+			)
+		);
+
+		var playerInfoWidget = new PlayerInfoWidget(playerInformation);
+
+		add(Pos.CENTER,
+			Primitive.hbox(
+				leftSection,
+				playerInfoWidget.getNode()
+			)
+		);
+	}
+}

app/src/main/java/org/toop/app/widget/popup/ErrorPopup.java

@@ -0,0 +1,16 @@
+package org.toop.app.widget.popup;
+
+import org.toop.app.widget.complex.ConfirmWidget;
+import org.toop.app.widget.complex.PopupWidget;
+
+import javafx.geometry.Pos;
+
+public class ErrorPopup extends PopupWidget {
+	public ErrorPopup(String error) {
+		var confirmWidget = new ConfirmWidget("error");
+		confirmWidget.setMessage(error);
+		confirmWidget.addButton("ok", this::hide);
+
+		add(Pos.CENTER, confirmWidget);
+	}
+}

app/src/main/java/org/toop/app/widget/popup/EscapePopup.java

@@ -0,0 +1,48 @@
+package org.toop.app.widget.popup;
+
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Widget;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.app.widget.complex.PopupWidget;
+import org.toop.app.widget.complex.ViewWidget;
+import org.toop.app.widget.view.GameView;
+import org.toop.app.widget.view.OptionsView;
+import org.toop.local.AppContext;
+
+import java.util.ArrayList;
+
+public class EscapePopup extends PopupWidget {
+    public EscapePopup() {
+        ViewWidget currentView = WidgetContainer.getCurrentView();
+        ArrayList<Node> nodes = new ArrayList<>();
+
+        nodes.add(Primitive.button("Continue", this::hide, false)); // TODO, localize
+
+        if (!(currentView.getClass().isAssignableFrom(OptionsView.class))) {
+            var opt = Primitive.button("options", () -> {
+                hide();
+                WidgetContainer.getCurrentView().transitionNext(new OptionsView());
+            });
+            nodes.add(opt);
+        }
+
+        if (currentView.getClass().isAssignableFrom(GameView.class)) {
+            Widget tut = AppContext.currentTutorial();
+            if (tut != null) {
+                nodes.add(Primitive.button("tutorialstring", () -> {
+                    WidgetContainer.getCurrentView().add(Pos.CENTER, tut);
+                }));
+            }
+        }
+
+        nodes.add(Primitive.button("quit", () -> {
+            hide();
+            WidgetContainer.add(Pos.CENTER, new QuitPopup());
+        }));
+
+        add(Pos.CENTER, Primitive.vbox(nodes.toArray(new Node[0])));
+
+    }
+}

app/src/main/java/org/toop/app/widget/popup/GameOverPopup.java

@@ -0,0 +1,24 @@
+package org.toop.app.widget.popup;
+
+import org.toop.app.widget.complex.ConfirmWidget;
+import org.toop.app.widget.complex.PopupWidget;
+import org.toop.local.AppContext;
+
+import javafx.geometry.Pos;
+
+public final class GameOverPopup extends PopupWidget {
+	public GameOverPopup(boolean winOrTie, String winner) {
+		var confirmWidget = new ConfirmWidget("game-over");
+
+        if (winOrTie) {
+            confirmWidget.setMessage(winner + " won the game!");
+        }
+        else{
+            confirmWidget.setMessage("It was a tie!");
+        }
+
+		confirmWidget.addButton("ok", this::hide);
+
+		add(Pos.CENTER, confirmWidget);
+	}
+}

app/src/main/java/org/toop/app/widget/popup/QuitPopup.java

@@ -0,0 +1,27 @@
+package org.toop.app.widget.popup;
+
+import org.toop.app.App;
+import org.toop.app.widget.complex.ConfirmWidget;
+import org.toop.app.widget.complex.PopupWidget;
+
+import javafx.geometry.Pos;
+
+public class QuitPopup extends PopupWidget {
+	public QuitPopup() {
+		var confirmWidget = new ConfirmWidget("are-you-sure");
+
+		confirmWidget.addButton("yes", () -> {
+			App.quit();
+		});
+
+		confirmWidget.addButton("no", () -> {
+			hide();
+		});
+
+		add(Pos.CENTER, confirmWidget);
+
+		setOnPop(() -> {
+			hide();
+		});
+	}
+}

app/src/main/java/org/toop/app/widget/popup/SendChallengePopup.java

@@ -0,0 +1,90 @@
+package org.toop.app.widget.popup;
+
+import org.toop.app.GameInformation;
+import org.toop.app.Server;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.LabeledChoiceWidget;
+import org.toop.app.widget.complex.PlayerInfoWidget;
+import org.toop.app.widget.complex.PopupWidget;
+import org.toop.local.AppContext;
+
+import java.util.function.BiConsumer;
+
+import javafx.geometry.Pos;
+import javafx.util.StringConverter;
+
+public final class SendChallengePopup extends PopupWidget {
+	private final Server server;
+	private final String opponent;
+	private final BiConsumer<GameInformation.Player, String> onSend;
+
+	private final GameInformation.Player playerInformation;
+
+	public SendChallengePopup(Server server, String opponent, BiConsumer<GameInformation.Player, String> onSend) {
+		this.server = server;
+		this.opponent = opponent;
+		this.onSend = onSend;
+
+		this.playerInformation = new GameInformation.Player();
+
+		setupLayout();
+	}
+
+	private void setupLayout() {
+		// --- Left side: challenge text and buttons ---
+		var challengeText = Primitive.text("challenge");
+
+		var opponentHeader = Primitive.header(opponent, false);
+
+		var gameText = Primitive.text("to-a-game-of");
+
+		var games = server.getGameList();
+		var gameChoice = new LabeledChoiceWidget<>(
+			"game",
+			new StringConverter<>() {
+				@Override
+				public String toString(String game) {
+					return AppContext.getString(game);
+				}
+				@Override
+				public String fromString(String s) { return null; }
+			},
+			games.getFirst(),
+			newGame -> {
+				playerInformation.computerDifficulty = Math.min(
+					playerInformation.computerDifficulty,
+					Server.gameToType(newGame).getMaxDepth()
+				);
+            },
+			games.toArray(new String[0])
+		);
+
+		var sendButton = Primitive.button(
+			"send",
+			() -> { onSend.accept(playerInformation, gameChoice.getValue()); this.hide(); }
+		);
+
+		var cancelButton = Primitive.button("cancel", () -> hide());
+
+		var leftSection = Primitive.vbox(
+			challengeText,
+			opponentHeader,
+			gameText,
+			gameChoice.getNode(),
+			Primitive.separator(),
+			Primitive.hbox(
+				sendButton,
+				cancelButton
+			)
+		);
+
+		var playerInfoWidget = new PlayerInfoWidget(playerInformation);
+
+		add(Pos.CENTER,
+			Primitive.hbox(
+				leftSection,
+				playerInfoWidget.getNode()
+			)
+		);
+	}
+}

app/src/main/java/org/toop/app/widget/tutorial/BaseTutorialWidget.java

@@ -0,0 +1,113 @@
+package org.toop.app.widget.tutorial;
+
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.image.ImageView;
+import javafx.scene.text.Text;
+import org.apache.maven.surefire.shared.lang3.tuple.ImmutablePair;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.Updatable;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.app.widget.complex.PopupWidget;
+
+import org.toop.framework.resource.resources.ImageAsset;
+import org.toop.local.AppContext;
+
+import java.util.List;
+
+/**
+ * A widget base for all the tutorial widgets.
+ *
+ * <p>Usage example:
+ *
+ * <pre>{@code
+ * public class Connect4TutorialWidget extends BaseTutorialWidget {
+ *     public Connect4TutorialWidget(Runnable nextScreen) {
+ *         super(List.of(
+ *                 new ImmutablePair<>("connect4.1", ResourceManager.get("connect41.png")),
+ *                 new ImmutablePair<>("connect4.2", ResourceManager.get("connect42.png"))
+ *         ), nextScreen);
+ *     }
+ * }</pre>
+ */
+public class BaseTutorialWidget extends PopupWidget implements Updatable {
+
+    private final Text tutorialText;
+    private final ImageView imagery;
+    private final Button previousButton;
+    private final Button nextButton;
+    private final List<ImmutablePair<String, ImageAsset>> pages;
+    private final Runnable nextScreen;
+
+    private int pageIndex = 0;
+
+    public BaseTutorialWidget(List<ImmutablePair<String, ImageAsset>> pages, Runnable nextScreen) {
+        this.tutorialText = Primitive.text(pages.getFirst().getKey());
+        this.imagery = Primitive.image(pages.getFirst().getValue());
+
+        this.pages = pages;
+        this.nextScreen = nextScreen;
+
+        previousButton = Primitive.button("goback", () -> { update(false); this.hide(); });
+        nextButton = Primitive.button(">", () -> update(true));
+
+        var w = Primitive.hbox(
+                previousButton,
+                nextButton
+        );
+
+        var x = Primitive.vbox(imagery, tutorialText);
+
+        add(Pos.CENTER, Primitive.vbox(x, w));
+    }
+
+    @Override
+    public void update() {
+        update(true);
+    }
+
+    // TODO Refactor if statements to make code easier to read.
+    public void update(boolean next) {
+        pageIndex = next ? pageIndex + 1 : pageIndex - 1;
+
+        if (pageIndex >= pages.size()) {
+            pageIndex--;
+            return;
+        } else if (pageIndex < 0) {
+            pageIndex++;
+            return;
+        }
+
+        if (pageIndex == pages.size()-1) {
+            nextButton.textProperty().unbind();
+            nextButton.setText(AppContext.getString("startgame"));
+            nextButton.setOnAction((_) ->  {
+                this.hide();
+                nextScreen.run();
+            });
+        } else {
+            nextButton.textProperty().unbind();
+            nextButton.setText(AppContext.getString(">"));
+            nextButton.setOnAction((_) -> this.update(true));
+        }
+
+        if (pageIndex == 0) {
+            previousButton.textProperty().unbind();
+            previousButton.setText(AppContext.getString("goback"));
+            previousButton.setOnAction((_) -> this.hide());
+        } else {
+            previousButton.textProperty().unbind();
+            previousButton.setText(AppContext.getString("<"));
+            previousButton.setOnAction((_) -> this.update(false));
+        }
+
+        var currentPage = pages.get(pageIndex);
+
+        var text = currentPage.getKey();
+        var image = currentPage.getValue();
+
+        tutorialText.textProperty().unbind();
+        tutorialText.setText(AppContext.getString(text));
+        imagery.setImage(Primitive.image(image).getImage());
+    }
+}

app/src/main/java/org/toop/app/widget/tutorial/Connect4TutorialWidget.java

@@ -0,0 +1,15 @@
+package org.toop.app.widget.tutorial;
+
+import org.apache.maven.surefire.shared.lang3.tuple.ImmutablePair;
+import org.toop.framework.resource.ResourceManager;
+
+import java.util.List;
+
+public class Connect4TutorialWidget extends BaseTutorialWidget {
+    public Connect4TutorialWidget(Runnable nextScreen) {
+        super(List.of(
+                new ImmutablePair<>("connect4.1", ResourceManager.get("connect41.png")),
+                new ImmutablePair<>("connect4.2", ResourceManager.get("connect42.png"))
+        ), nextScreen);
+    }
+}

app/src/main/java/org/toop/app/widget/tutorial/ReversiTutorialWidget.java

@@ -0,0 +1,17 @@
+package org.toop.app.widget.tutorial;
+
+import org.apache.maven.surefire.shared.lang3.tuple.ImmutablePair;
+import org.toop.framework.resource.ResourceManager;
+
+import java.util.List;
+
+public class ReversiTutorialWidget extends BaseTutorialWidget {
+    public ReversiTutorialWidget(Runnable nextScreen) {
+        super(List.of(
+                new ImmutablePair<>("reversi1", ResourceManager.get("reversi1.png")),
+                new ImmutablePair<>("reversi2", ResourceManager.get("reversi2.png")),
+                new ImmutablePair<>("reversi3", ResourceManager.get("cat.jpg")),
+                new ImmutablePair<>("reversi4", ResourceManager.get("cat.jpg"))
+        ), nextScreen);
+    }
+}

app/src/main/java/org/toop/app/widget/tutorial/ShowEnableTutorialWidget.java

@@ -0,0 +1,22 @@
+package org.toop.app.widget.tutorial;
+
+import javafx.geometry.Pos;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.WidgetContainer;
+import org.toop.app.widget.complex.PopupWidget;
+import org.toop.local.AppSettings;
+
+public class ShowEnableTutorialWidget extends PopupWidget {
+
+    public ShowEnableTutorialWidget(Runnable tutorial, Runnable nextScreen, Runnable appSettingsSetter) {
+        var a = Primitive.hbox(
+                Primitive.button("ok", () -> { appSettingsSetter.run(); tutorial.run(); this.hide(); }),
+                Primitive.button("no", () -> { appSettingsSetter.run(); nextScreen.run(); this.hide(); }),
+                Primitive.button("never", () -> { AppSettings.getSettings().setTutorialFlag(false); nextScreen.run(); this.hide(); })
+        );
+
+        var txt = Primitive.text("tutorial");
+        add(Pos.CENTER, Primitive.vbox(txt, a));
+        WidgetContainer.add(Pos.CENTER, this);
+    }
+}

app/src/main/java/org/toop/app/widget/tutorial/TicTacToeTutorialWidget.java

@@ -0,0 +1,16 @@
+package org.toop.app.widget.tutorial;
+
+import org.apache.maven.surefire.shared.lang3.tuple.ImmutablePair;
+import org.toop.framework.resource.ResourceManager;
+
+import java.util.List;
+
+public class TicTacToeTutorialWidget extends BaseTutorialWidget {
+    public TicTacToeTutorialWidget(Runnable nextScreen) {
+        super(List.of(
+                new ImmutablePair<>("tictactoe1", ResourceManager.get("tictactoe1.png")),
+                new ImmutablePair<>("tictactoe2", ResourceManager.get("tictactoe2.png"))
+        ), nextScreen);
+    }
+
+}

app/src/main/java/org/toop/app/widget/view/CreditsView.java

@@ -0,0 +1,81 @@
+package org.toop.app.widget.view;
+
+import org.toop.app.App;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.ViewWidget;
+
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.geometry.Pos;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Region;
+import javafx.scene.text.Text;
+import javafx.util.Duration;
+
+public class CreditsView extends ViewWidget {
+	public CreditsView() {
+		var scrumMasterCredit = newCredit("scrum-master", "Stef");
+		var productOwnerCredit = newCredit("product-owner", "Omar");
+		var mergeCommanderCredit = newCredit("merge-commander", "Bas");
+		var localizationCredit = newCredit("localization", "Ticho");
+		var aiCredit = newCredit("ai", "Michiel");
+		var developersCredit = newCredit("developers", "Michiel, Bas, Stef, Omar, Ticho");
+		var moralSupportCredit = newCredit("moral-support", "Wesley");
+		var openglCredit = newCredit("opengl", "Omar");
+
+		var topSpacer = new Region();
+		topSpacer.setPrefHeight(App.getHeight());
+
+		var bottomSpacer = new Region();
+		bottomSpacer.setPrefHeight(App.getHeight());
+
+		var creditsContainer = Primitive.vbox(
+			topSpacer,
+
+			scrumMasterCredit,
+			productOwnerCredit,
+			mergeCommanderCredit,
+			localizationCredit,
+			aiCredit,
+			developersCredit,
+			moralSupportCredit,
+			openglCredit,
+
+			bottomSpacer
+		);
+
+		var creditsScroll = Primitive.scroll(creditsContainer);
+
+		creditsScroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
+		creditsScroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
+
+		add(Pos.CENTER, creditsScroll);
+
+		animate(creditsScroll, 15);
+	}
+
+	private HBox newCredit(String key, String other) {
+		var credit = new Text(": " + other);
+		credit.getStyleClass().add("header");
+
+		var creditBox = Primitive.hbox(
+			Primitive.header(key),
+			credit
+		);
+
+		creditBox.setPrefHeight(App.getHeight() / 3.0);
+		return creditBox;
+	}
+
+	private void animate(ScrollPane scroll, int length) {
+		final Timeline timeline = new Timeline(
+			new KeyFrame(Duration.seconds(0), new KeyValue(scroll.vvalueProperty(), 0.0)),
+			new KeyFrame(Duration.seconds(length), new KeyValue(scroll.vvalueProperty(), 1.0))
+		);
+
+		timeline.setCycleCount(Timeline.INDEFINITE);
+		timeline.play();
+	}
+}

app/src/main/java/org/toop/app/widget/view/GameView.java

@@ -0,0 +1,179 @@
+package org.toop.app.widget.view;
+
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Circle;
+import javafx.scene.text.Font;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.ViewWidget;
+import org.toop.app.widget.popup.GameOverPopup;
+import java.util.function.Consumer;
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextField;
+import javafx.scene.text.Text;
+import org.toop.app.widget.tutorial.Connect4TutorialWidget;
+import org.toop.app.widget.tutorial.ReversiTutorialWidget;
+import org.toop.app.widget.tutorial.TicTacToeTutorialWidget;
+import org.toop.local.AppContext;
+
+public final class GameView extends ViewWidget {
+	private final Text playerHeader;
+	private final Text turnHeader;
+    private final Text player1Header;
+    private final Text player2Header;
+    private Circle player1Icon;
+    private Circle player2Icon;
+	private final Button forfeitButton;
+	private final Button exitButton;
+    private final TextField chatInput;
+    private final Text keyThingy;
+    private boolean hasSet = false;
+
+	public GameView(Runnable onForfeit, Runnable onExit, Consumer<String> onMessage, String gameType) {
+		playerHeader = Primitive.header("");
+		turnHeader = Primitive.header("");
+        keyThingy = Primitive.text("turnof");
+        player1Header = Primitive.header("");
+        player2Header = Primitive.header("");
+        player1Icon = new Circle();
+        player2Icon = new Circle();
+
+		if (onForfeit != null) {
+			forfeitButton = Primitive.button("forfeit", () -> onForfeit.run());
+		} else {
+			forfeitButton = null;
+		}
+
+		exitButton = Primitive.button("exit", () -> {
+			onExit.run();
+			transitionPrevious();
+		});
+
+		if (onMessage != null) {
+			chatInput = Primitive.input("enter-your-message", "", null);
+			chatInput.setOnAction(_ -> {
+				onMessage.accept(chatInput.getText());
+				chatInput.clear();
+			});
+		} else {
+			chatInput = null;
+		}
+
+        switch (gameType) {
+            case "TicTacToe":
+                AppContext.setCurrentTutorial(new TicTacToeTutorialWidget(() -> {}));
+                break;
+            case "Reversi":
+                AppContext.setCurrentTutorial(new ReversiTutorialWidget(() -> {}));
+                break;
+            case "Connect4":
+                AppContext.setCurrentTutorial(new Connect4TutorialWidget(() -> {}));
+                break;
+        }
+
+		setupLayout();
+	}
+
+	private void setupLayout() {
+        var turnInfo = Primitive.vbox(
+                turnHeader
+        );
+
+        add(Pos.TOP_CENTER, turnInfo);
+
+		var buttons = Primitive.vbox(
+			forfeitButton,
+			exitButton
+		);
+
+		add(Pos.BOTTOM_LEFT, buttons);
+
+		if (chatInput != null) {
+			add(Pos.BOTTOM_RIGHT, Primitive.vbox(chatInput));
+		}
+	}
+
+	public void nextPlayer(boolean isMe, String currentPlayer, String currentMove, String nextPlayer, char GameType) {
+		Platform.runLater(() -> {
+            if (!(hasSet)) {
+                playerHeader.setText(currentPlayer + " vs. " + nextPlayer);
+                hasSet = true;
+                setPlayerHeaders(isMe, currentPlayer, nextPlayer, GameType);
+            }
+            //TODO idk if theres any way to check this? only EN uses 's and the rest doesnt. if theres a better way to do this pls let me know
+            if (AppContext.getLocale().toLanguageTag().equals("en")) {
+                turnHeader.setText(currentPlayer + keyThingy.getText());
+            }
+		});
+	}
+
+	public void gameOver(boolean iWon, String winner) {
+		new GameOverPopup(iWon, winner).show(Pos.CENTER);
+	}
+
+    private void setPlayerHeaders(boolean isMe, String currentPlayer, String nextPlayer, char GameType) {
+        if (GameType == 'T') {
+            if (isMe) {
+                player1Header.setText("X: " + currentPlayer);
+                player2Header.setText("O: " + nextPlayer);
+            }
+            else {
+                player1Header.setText("X: " + nextPlayer);
+                player2Header.setText("O: " + currentPlayer);
+            }
+            setPlayerInfoTTT();
+        }
+        else if (GameType == 'R') {
+            if (isMe) {
+                player1Header.setText(currentPlayer);
+                player2Header.setText(nextPlayer);
+            }
+            else {
+                player1Header.setText(nextPlayer);
+                player2Header.setText(currentPlayer);
+            }
+            setPlayerInfoReversi();
+        }
+    }
+
+    private void setPlayerInfoTTT() {
+        var playerInfo = Primitive.vbox(
+                playerHeader,
+                Primitive.separator(),
+                player1Header,
+                player2Header
+        );
+
+        add(Pos.TOP_RIGHT, playerInfo);
+    }
+
+    private void setPlayerInfoReversi() {
+        var player1box = Primitive.hbox(
+                player1Icon,
+                player1Header
+        );
+
+        player1box.getStyleClass().add("hboxspacing");
+
+        var player2box = Primitive.hbox(
+                player2Icon,
+                player2Header
+        );
+
+        player2box.getStyleClass().add("hboxspacing");
+
+        var playerInfo = Primitive.vbox(
+                playerHeader,
+                Primitive.separator(),
+                player1box,
+                player2box
+        );
+
+        player1Icon.setRadius(player1Header.fontProperty().map(Font::getSize).getValue());
+        player2Icon.setRadius(player2Header.fontProperty().map(Font::getSize).getValue());
+        player1Icon.setFill(Color.BLACK);
+        player2Icon.setFill(Color.WHITE);
+        add(Pos.TOP_RIGHT, playerInfo);
+    }
+}

app/src/main/java/org/toop/app/widget/view/LocalMultiplayerView.java

@@ -0,0 +1,143 @@
+package org.toop.app.widget.view;
+
+import javafx.application.Platform;
+import org.toop.app.GameInformation;
+import org.toop.app.gameControllers.AbstractGameController;
+import org.toop.app.gameControllers.ReversiController;
+import org.toop.app.gameControllers.TicTacToeController;
+import org.toop.framework.gameFramework.model.player.Player;
+import org.toop.game.games.tictactoe.TicTacToeAIRSleep;
+import org.toop.game.players.ArtificialPlayer;
+import org.toop.game.players.LocalPlayer;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.PlayerInfoWidget;
+import org.toop.app.widget.complex.ViewWidget;
+import org.toop.app.widget.popup.ErrorPopup;
+import org.toop.game.games.reversi.ReversiAIR;
+import org.toop.game.games.tictactoe.TicTacToeAIR;
+import org.toop.app.widget.tutorial.*;
+import org.toop.local.AppContext;
+
+import javafx.geometry.Pos;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.layout.VBox;
+import org.toop.local.AppSettings;
+
+public class LocalMultiplayerView extends ViewWidget {
+	private final GameInformation information;
+
+    private AbstractGameController<?> gameController;
+
+	public LocalMultiplayerView(GameInformation.Type type) {
+		this(new GameInformation(type));
+	}
+
+	public LocalMultiplayerView(GameInformation information) {
+		this.information = information;
+		var playButton = Primitive.button("play", () -> {
+            if (gameController != null) {
+                gameController.stop();
+            }
+			for (var player : information.players) {
+				if (player.isHuman && player.name.isEmpty()) {
+					new ErrorPopup(AppContext.getString("please-enter-your-name")).show(Pos.CENTER);
+					return;
+				}
+			}
+
+            // TODO: Fix this temporary ass way of setting the players (Only works for TicTacToe)
+            Player[] players = new Player[2];
+
+			switch (information.type) {
+                case TICTACTOE:
+                    if (information.players[0].isHuman) {
+                        players[0] = new LocalPlayer<>(information.players[0].name);
+                    } else {
+                        players[0] = new ArtificialPlayer<>(new TicTacToeAIRSleep(information.players[0].computerDifficulty, information.players[1].computerThinkTime), information.players[0].name);
+                    }
+                    if (information.players[1].isHuman) {
+                        players[1] = new LocalPlayer<>(information.players[1].name);
+                    } else {
+                        players[1] = new ArtificialPlayer<>(new TicTacToeAIRSleep(information.players[1].computerDifficulty, information.players[1].computerThinkTime), information.players[1].name);
+                    }
+                    if (AppSettings.getSettings().getTutorialFlag() && AppSettings.getSettings().getFirstTTT()) {
+                        new ShowEnableTutorialWidget(
+                                () -> new TicTacToeTutorialWidget(() -> {
+                                    gameController = new TicTacToeController(players);
+                                    gameController.start();
+                                }),
+                                () -> Platform.runLater(() -> {
+                                    gameController = new TicTacToeController(players);
+                                    gameController.start();
+                                }),
+                                () -> AppSettings.getSettings().setFirstTTT(false)
+                        );
+                    } else {
+                        gameController = new TicTacToeController(players);
+                        gameController.start();
+                    }
+                    break;
+                case REVERSI:
+                    if (information.players[0].isHuman) {
+                        players[0] = new LocalPlayer<>(information.players[0].name);
+                    } else {
+                        players[0] = new ArtificialPlayer<>(new ReversiAIR(), information.players[0].name);
+                    }
+                    if (information.players[1].isHuman) {
+                        players[1] = new LocalPlayer<>(information.players[1].name);
+                    } else {
+                        players[1] = new ArtificialPlayer<>(new ReversiAIR(), information.players[1].name);
+                    }
+                    if (AppSettings.getSettings().getTutorialFlag() && AppSettings.getSettings().getFirstReversi()) {
+                        new ShowEnableTutorialWidget(
+                                () -> new ReversiTutorialWidget(() -> {
+                                    gameController = new ReversiController(players);
+                                    gameController.start();
+                                }),
+                                () -> Platform.runLater(() -> {
+                                    gameController = new ReversiController(players);
+                                    gameController.start();
+                                }),
+                                () -> AppSettings.getSettings().setFirstReversi(false)
+                        );
+                    } else {
+                        gameController = new ReversiController(players);
+                        gameController.start();
+                    }
+                    break;
+            }
+        });
+
+		var playerSection = setupPlayerSections();
+
+		add(Pos.CENTER, Primitive.vbox(
+			playerSection,
+			Primitive.separator(),
+			playButton
+		));
+	}
+
+	private ScrollPane setupPlayerSections() {
+		int playerCount = information.type.getPlayerCount();
+		VBox[] playerBoxes = new VBox[playerCount];
+
+		for (int i = 0; i < playerCount; i++) {
+			var player = information.players[i];
+
+			var playerHeader = Primitive.header("");
+			playerHeader.setText("player" + " #" + (i + 1));
+
+			var playerWidget = new PlayerInfoWidget(player);
+
+			playerBoxes[i] = Primitive.vbox(
+				playerHeader,
+				Primitive.separator(),
+				playerWidget.getNode()
+			);
+		}
+
+		return Primitive.scroll(Primitive.hbox(
+			playerBoxes
+		));
+	}
+}

app/src/main/java/org/toop/app/widget/view/LocalView.java

@@ -0,0 +1,24 @@
+package org.toop.app.widget.view;
+
+import org.toop.app.GameInformation;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.ViewWidget;
+
+import javafx.geometry.Pos;
+
+public class LocalView extends ViewWidget {
+	public LocalView() {
+		var ticTacToeButton = Primitive.button("tic-tac-toe", () -> {
+			transitionNext(new LocalMultiplayerView(GameInformation.Type.TICTACTOE));
+		});
+
+		var reversiButton = Primitive.button("reversi", () -> {
+			transitionNext(new LocalMultiplayerView(GameInformation.Type.REVERSI));
+		});
+
+		add(Pos.CENTER, Primitive.vbox(
+			ticTacToeButton,
+			reversiButton
+		));
+	}
+}

app/src/main/java/org/toop/app/widget/view/MainView.java

@@ -0,0 +1,40 @@
+package org.toop.app.widget.view;
+
+import org.toop.app.App;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.ViewWidget;
+import javafx.geometry.Pos;
+import org.toop.app.widget.popup.QuitPopup;
+
+public class MainView extends ViewWidget {
+	public MainView() {
+		var localButton = Primitive.button("local", () -> {
+			transitionNext(new LocalView());
+		});
+
+		var onlineButton = Primitive.button("online", () -> {
+			transitionNext(new OnlineView());
+		});
+
+		var creditsButton = Primitive.button("credits", () -> {
+			transitionNext(new CreditsView());
+		});
+
+		var optionsButton = Primitive.button("options", () -> {
+			transitionNext(new OptionsView());
+		});
+
+		var quitButton = Primitive.button("quit", () -> {
+			var a = new QuitPopup();
+			a.show(Pos.CENTER);
+		});
+
+		add(Pos.CENTER, Primitive.vbox(
+			localButton,
+			onlineButton,
+			creditsButton,
+			optionsButton,
+			quitButton
+		));
+	}
+}

app/src/main/java/org/toop/app/widget/view/OnlineView.java

@@ -0,0 +1,39 @@
+package org.toop.app.widget.view;
+
+import org.toop.app.Server;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.LabeledInputWidget;
+import org.toop.app.widget.complex.LoadingWidget;
+import org.toop.app.widget.complex.ViewWidget;
+
+import javafx.geometry.Pos;
+
+public class OnlineView extends ViewWidget {
+	public OnlineView() {
+		var serverInformationHeader = Primitive.header("server-information");
+
+		var serverIPInput = new LabeledInputWidget("ip-address", "enter-the-server-ip", "", _ -> {});
+		var serverPortInput = new LabeledInputWidget("port", "enter-the-server-port", "", _ -> {});
+		var playerNameInput = new LabeledInputWidget("player-name", "enter-your-name", "", _ -> {});
+
+		var connectButton = Primitive.button("connect", () -> {
+			new Server(
+				serverIPInput.getValue(),
+				serverPortInput.getValue(),
+				playerNameInput.getValue()
+			);
+		});
+
+		add(Pos.CENTER, Primitive.vbox(
+			serverInformationHeader,
+			Primitive.separator(),
+
+			serverIPInput.getNode(),
+			serverPortInput.getNode(),
+			playerNameInput.getNode(),
+			Primitive.separator(),
+
+			connectButton
+		));
+	}
+}

app/src/main/java/org/toop/app/widget/view/OptionsView.java

@@ -0,0 +1,161 @@
+package org.toop.app.widget.view;
+
+import org.toop.app.App;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.LabeledChoiceWidget;
+import org.toop.app.widget.complex.LabeledSliderWidget;
+import org.toop.app.widget.complex.ViewWidget;
+import org.toop.app.widget.complex.ToggleWidget;
+import org.toop.framework.audio.VolumeControl;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.local.AppContext;
+import org.toop.local.AppSettings;
+
+import java.util.Locale;
+
+import javafx.geometry.Pos;
+import javafx.scene.layout.VBox;
+import javafx.util.StringConverter;
+
+public class OptionsView extends ViewWidget {
+	public OptionsView() {
+		add(Pos.CENTER, Primitive.hbox(
+			generalSection(),
+			volumeSection(),
+			styleSection()
+		));
+	}
+
+	private VBox generalSection() {
+		var languageWidget = new LabeledChoiceWidget<>(
+			"language",
+			new StringConverter<>() {
+				@Override
+				public String toString(Locale locale) {
+					return AppContext.getString(locale.getDisplayName().toLowerCase());
+				}
+				@Override
+				public Locale fromString(String s) { return null; }
+			},
+			AppContext.getLocale(),
+			newLocale -> {
+				AppSettings.getSettings().setLocale(newLocale.toString());
+				AppContext.setLocale(newLocale);
+				reload(new OptionsView());
+			},
+			AppContext.getLocalization().getAvailableLocales().toArray(new Locale[0])
+		);
+
+		var fullscreenToggle = new ToggleWidget(
+			"fullscreen", "windowed",
+			AppSettings.getSettings().getFullscreen(),
+			fullscreen -> {
+				AppSettings.getSettings().setFullscreen(fullscreen);
+				App.setFullscreen(fullscreen);
+			}
+		);
+
+		return Primitive.vbox(
+			Primitive.header("general"),
+			Primitive.separator(),
+
+			languageWidget.getNode(),
+			fullscreenToggle.getNode()
+		);
+	}
+
+	private VBox volumeSection() {
+		var masterVolumeWidget = new LabeledSliderWidget(
+			"master-volume",
+			0, 100,
+			AppSettings.getSettings().getVolume(),
+			val -> {
+				AppSettings.getSettings().setVolume(val);
+				new EventFlow()
+					.addPostEvent(new AudioEvents.ChangeVolume(val, VolumeControl.MASTERVOLUME))
+					.asyncPostEvent();
+			}
+		);
+
+		var effectsVolumeWidget = new LabeledSliderWidget(
+			"effects-volume",
+			0, 100,
+			AppSettings.getSettings().getFxVolume(),
+			val -> {
+				AppSettings.getSettings().setFxVolume(val);
+				new EventFlow()
+					.addPostEvent(new AudioEvents.ChangeVolume(val, VolumeControl.FX))
+					.asyncPostEvent();
+			}
+		);
+
+		var musicVolumeWidget = new LabeledSliderWidget(
+			"music-volume",
+			0, 100,
+			AppSettings.getSettings().getMusicVolume(),
+			val -> {
+				AppSettings.getSettings().setMusicVolume(val);
+				new EventFlow()
+					.addPostEvent(new AudioEvents.ChangeVolume(val, VolumeControl.MUSIC))
+					.asyncPostEvent();
+			}
+		);
+
+		return Primitive.vbox(
+			Primitive.header("volume"),
+			Primitive.separator(),
+
+			masterVolumeWidget.getNode(),
+			effectsVolumeWidget.getNode(),
+			musicVolumeWidget.getNode()
+		);
+	}
+
+	private VBox styleSection() {
+		var themeWidget = new LabeledChoiceWidget<>(
+			"theme",
+			new StringConverter<>() {
+				@Override
+				public String toString(String theme) {
+					return AppContext.getString(theme);
+				}
+				@Override
+				public String fromString(String s) { return null; }
+			},
+			AppSettings.getSettings().getTheme(),
+			newTheme -> {
+				AppSettings.getSettings().setTheme(newTheme);
+				App.setStyle(newTheme, AppSettings.getSettings().getLayoutSize());
+			},
+			"dark", "light", "high-contrast"
+		);
+
+		var layoutWidget = new LabeledChoiceWidget<>(
+			"layout-size",
+			new StringConverter<>() {
+				@Override
+				public String toString(String layout) {
+					return AppContext.getString(layout);
+				}
+				@Override
+				public String fromString(String s) { return null; }
+			},
+			AppSettings.getSettings().getLayoutSize(),
+			newLayout -> {
+				AppSettings.getSettings().setLayoutSize(newLayout);
+				App.setStyle(AppSettings.getSettings().getTheme(), newLayout);
+			},
+			"small", "medium", "large"
+		);
+
+
+		return Primitive.vbox(
+			Primitive.header("style"),
+			Primitive.separator(),
+
+			themeWidget.getNode(),
+			layoutWidget.getNode()
+		);
+	}
+}

app/src/main/java/org/toop/app/widget/view/ServerView.java

@@ -0,0 +1,57 @@
+package org.toop.app.widget.view;
+
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.ViewWidget;
+
+import java.util.List;
+import java.util.function.Consumer;
+
+import javafx.application.Platform;
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.control.ListView;
+
+public final class ServerView extends ViewWidget {
+	private final String user;
+	private final Consumer<String> onPlayerClicked;
+
+	private final ListView<Button> listView;
+
+	public ServerView(String user, Consumer<String> onPlayerClicked) {
+		this.user = user;
+		this.onPlayerClicked = onPlayerClicked;
+
+		this.listView = new ListView<>();
+
+		setupLayout();
+	}
+
+	private void setupLayout() {
+		var playerHeader = Primitive.header(user, false);
+
+		var playerListSection = Primitive.vbox(
+			playerHeader,
+			Primitive.separator(),
+			listView
+		);
+
+		add(Pos.CENTER, playerListSection);
+
+		var disconnectButton = Primitive.button("disconnect", () -> {
+			transitionPrevious();
+		});
+
+		add(Pos.BOTTOM_LEFT, Primitive.vbox(disconnectButton));
+	}
+
+	public void update(List<String> players) {
+		Platform.runLater(() -> {
+			listView.getItems().clear();
+
+			for (String player : players) {
+				var playerButton = Primitive.button(player, () -> onPlayerClicked.accept(player), false);
+				listView.getItems().add(playerButton);
+			}
+		});
+	}
+}

app/src/main/java/org/toop/local/AppContext.java

@@ -1,14 +1,87 @@
 package org.toop.local;
 
 import java.util.Locale;
+import java.util.MissingResourceException;
+
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.toop.app.widget.tutorial.BaseTutorialWidget;
+import org.toop.framework.resource.ResourceManager;
+import org.toop.framework.resource.resources.LocalizationAsset;
+
+import java.util.Locale;
+
+import javafx.beans.binding.Bindings;
+import javafx.beans.binding.StringBinding;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleObjectProperty;
 
 public class AppContext {
-    private static Locale currentLocale = Locale.getDefault();
+    private static final Logger logger = LogManager.getLogger(AppContext.class);
 
-    public static void setCurrentLocale(Locale locale) {
+    private static final LocalizationAsset localization = ResourceManager.get("localization");
-        currentLocale = locale;
+    private static Locale locale = Locale.forLanguageTag("en");
+
+	private static final ObjectProperty<Locale> localeProperty = new SimpleObjectProperty<>(locale);
+    private static BaseTutorialWidget tutorialWidget;
+
+    public static LocalizationAsset getLocalization() {
+        return localization;
     }
+
+    public static void setLocale(Locale locale) {
+        AppContext.locale = locale;
+		localeProperty.set(locale);
+    }
+
     public static Locale getLocale() {
-        return currentLocale;
+        return locale;
     }
-}
+
+    public static String getString(String key) {
+        assert localization != null;
+
+        // TODO: Gebruik ResourceBundle.getBundle() zodat de fallback automatisch gaat.
+        //          Hiervoor zou de assetManager aangepast moeten worden.
+
+        try{ // Main return
+            return localization.getString(key, locale);
+        }
+        catch (MissingResourceException e) {
+            logger.error("Missing resource key: {}, in bundle: {}. ", key, locale, e);
+        }
+
+        try{ // Fallback return
+            return localization.getString(key, localization.getFallback());
+        }
+        catch (MissingResourceException e) {
+            logger.error("Missing resource key: {}, in default bundle!", key, e);
+        }
+        // Default return
+        return "MISSING RESOURCE";
+    }
+
+	public static StringBinding bindToKey(String key, boolean localize) {
+        if (localize) return Bindings.createStringBinding(
+                () -> localization.getString(key, locale),
+                localeProperty
+        );
+
+        return Bindings.createStringBinding(
+                () -> key
+        );
+
+	}
+
+    public static StringBinding bindToKey(String key) {
+        return bindToKey(key, true);
+    }
+
+    public static void setCurrentTutorial(BaseTutorialWidget tutorial) {
+        AppContext.tutorialWidget = tutorial;
+    }
+
+    public static BaseTutorialWidget currentTutorial() {
+        return AppContext.tutorialWidget;
+    }
+}

app/src/main/java/org/toop/local/AppSettings.java

@@ -0,0 +1,114 @@
+package org.toop.local;
+
+import org.toop.app.App;
+import org.toop.framework.audio.VolumeControl;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.framework.resource.ResourceManager;
+import org.toop.framework.resource.ResourceMeta;
+import org.toop.framework.resource.resources.SettingsAsset;
+import org.toop.framework.settings.Settings;
+
+import java.io.File;
+import java.util.Locale;
+
+public class AppSettings {
+	private static SettingsAsset settingsAsset;
+
+	public static void applySettings() {
+		settingsAsset = getPath();
+		if (!settingsAsset.isLoaded()) {
+			settingsAsset.load();
+		}
+
+        checkSettings();
+
+		Settings settingsData = settingsAsset.getContent();
+
+		AppContext.setLocale(Locale.of(settingsData.locale));
+		App.setFullscreen(settingsData.fullScreen);
+
+		App.setStyle(settingsAsset.getTheme(), settingsAsset.getLayoutSize());
+	}
+
+	public static void applyMusicVolumeSettings() {
+		Settings settingsData = settingsAsset.getContent();
+
+		new EventFlow()
+				.addPostEvent(new AudioEvents.ChangeVolume(settingsData.volume, VolumeControl.MASTERVOLUME))
+				.asyncPostEvent();
+		new EventFlow()
+				.addPostEvent(new AudioEvents.ChangeVolume(settingsData.fxVolume, VolumeControl.FX))
+				.asyncPostEvent();
+		new EventFlow()
+				.addPostEvent(new AudioEvents.ChangeVolume(settingsData.musicVolume, VolumeControl.MUSIC))
+				.asyncPostEvent();
+	}
+
+	public static SettingsAsset getPath() {
+		if (settingsAsset == null) {
+			String os = System.getProperty("os.name").toLowerCase();
+			String basePath;
+
+			if (os.contains("win")) {
+				basePath = System.getenv("APPDATA");
+				if (basePath == null) {
+					basePath = System.getProperty("user.home");
+				}
+			} else if (os.contains("mac")) {
+				basePath = System.getProperty("user.home") + "/Library/Application Support";
+			} else {
+				basePath = System.getProperty("user.home") + "/.config";
+			}
+
+			File settingsFile =
+				new File(basePath + File.separator + "ISY1" + File.separator + "settings.json");
+//            this.settingsAsset = new SettingsAsset(settingsFile);
+			ResourceManager.addAsset(new ResourceMeta<>("settings.json", new SettingsAsset(settingsFile)));
+		}
+		return ResourceManager.get("settings.json");
+	}
+
+	public static SettingsAsset getSettings() {
+		return settingsAsset;
+	}
+
+    public static void checkSettings() {
+        Settings s = settingsAsset.getContent();
+        boolean changed = false;
+
+        if (s.showTutorials == null) {
+            settingsAsset.setTutorialFlag(true);
+            changed = true;
+        }
+        if (s.firstReversi == null) {
+            settingsAsset.setFirstReversi(true);
+            changed = true;
+        }
+        if (s.firstTTT == null) {
+            settingsAsset.setFirstTTT(true);
+            changed = true;
+        }
+        if (s.firstConnect4 == null) {
+            settingsAsset.setFirstConnect4(true);
+            changed = true;
+        }
+        if (changed) {
+            getSettings().save();
+        }
+    }
+
+    public static void doDefaultSettings() {
+        settingsAsset.setFirstConnect4(true);
+        settingsAsset.setFirstTTT(true);
+        settingsAsset.setFirstReversi(true);
+        settingsAsset.setLocale("en");
+        settingsAsset.setTheme("dark");
+        settingsAsset.setFullscreen(false);
+        settingsAsset.setVolume(100);
+        settingsAsset.setFxVolume(20);
+        settingsAsset.setMusicVolume(15);
+        settingsAsset.setTutorialFlag(true);
+        settingsAsset.setLayoutSize("medium");
+    }
+}

app/src/main/resources/assets/localization/localization.properties

@@ -1,17 +0,0 @@
-# Window title
-windowTitle=ISY Games Selector
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=Tic Tac Toe
-mainMenuSelectReversi=Reversi
-mainMenuSelectSudoku=Sudoku
-mainMenuSelectBattleship=Battleship
-mainMenuSelectOther=Other
-mainMenuSelectCredits=Credits
-mainMenuSelectOptions=Options
-mainMenuSelectQuit=Quit
-
-# Quit Menu text and buttons
-quitMenuTextSure=Are you sure?
-quitMenuButtonYes=Yes
-quitMenuButtonNo=No

app/src/main/resources/assets/localization/localization_de.properties

@@ -1,17 +0,0 @@
-# Window title
-windowTitle=ISY Spiele-Auswahl
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=Tic Tac Toe
-mainMenuSelectReversi=Reversi
-mainMenuSelectSudoku=Sudoku
-mainMenuSelectBattleship=Flottenman\u00F6ver
-mainMenuSelectOther=Andere
-mainMenuSelectCredits=Credits
-mainMenuSelectOptions=Optionen
-mainMenuSelectQuit=Beenden
-
-# Quit Menu text and buttons
-quitMenuTextSure=Bist du sicher?
-quitMenuButtonYes=Ja
-quitMenuButtonNo=Nein

app/src/main/resources/assets/localization/localization_es.properties

@@ -1,17 +0,0 @@
-# Window title
-windowTitle=Selector de juegos ISY
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=Tres en raya
-mainMenuSelectReversi=Reversi
-mainMenuSelectSudoku=Sudoku
-mainMenuSelectBattleship=Batalla naval
-mainMenuSelectOther=Otros
-mainMenuSelectCredits=Cr\u00E9ditos
-mainMenuSelectOptions=Opciones
-mainMenuSelectQuit=Salir
-
-# Quit Menu text and buttons
-quitMenuTextSure=\u00BFEst\u00E1s seguro?
-quitMenuButtonYes=S\u00ED
-quitMenuButtonNo=No

app/src/main/resources/assets/localization/localization_fr.properties

@@ -1,17 +0,0 @@
-# Window title
-windowTitle=S\u00E9lecteur de jeux ISY
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=Morpion
-mainMenuSelectReversi=Reversi
-mainMenuSelectSudoku=Sudoku
-mainMenuSelectBattleship=Bataille navale
-mainMenuSelectOther=Autres
-mainMenuSelectCredits=Cr\u00E9dits
-mainMenuSelectOptions=Options
-mainMenuSelectQuit=Quitter
-
-# Quit Menu text and buttons
-quitMenuTextSure=\u00CAtes-vous s\u00FBr?
-quitMenuButtonYes=Oui
-quitMenuButtonNo=Non

app/src/main/resources/assets/localization/localization_it.properties

@@ -1,17 +0,0 @@
-# Window title
-windowTitle=Selettore giochi ISY
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=Tris
-mainMenuSelectReversi=Reversi
-mainMenuSelectSudoku=Sudoku
-mainMenuSelectBattleship=Battaglia navale
-mainMenuSelectOther=Altro
-mainMenuSelectCredits=Crediti
-mainMenuSelectOptions=Opzioni
-mainMenuSelectQuit=Esci
-
-# Quit Menu text and buttons
-quitMenuTextSure=Sei sicuro?
-quitMenuButtonYes=S\u00EC
-quitMenuButtonNo=No

app/src/main/resources/assets/localization/localization_nl.properties

@@ -1,17 +0,0 @@
-# Window title
-windowTitle=ISY Spellen Kiezer
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=Boter Kaas En Eieren
-mainMenuSelectReversi=Reversi
-mainMenuSelectSudoku=Sudoku
-mainMenuSelectBattleship=Zeeslag
-mainMenuSelectOther=Anders
-mainMenuSelectCredits=Credits
-mainMenuSelectOptions=Opties
-mainMenuSelectQuit=Afsluiten
-
-# Quit Menu text and buttons
-quitMenuTextSure=Weet je het zeker?
-quitMenuButtonYes=Ja
-quitMenuButtonNo=Nee

app/src/main/resources/assets/localization/localization_zh.properties

@@ -1,30 +0,0 @@
-# suppress inspection "LossyEncoding" for whole file
-# Window title
-windowTitle=ISY \u6E38\u620F\u9009\u62E9\u5668
-# ?????
-
-# Main Menu buttons
-mainMenuSelectTicTacToe=\u4E95\u5B57\u68CB
-# ???
-mainMenuSelectReversi=\u9ED1\u767D\u68CB
-# ???
-mainMenuSelectSudoku=\u6570\u72EC
-# ??
-mainMenuSelectBattleship=\u6D77\u6218\u68CB
-# ???
-mainMenuSelectOther=\u5176\u4ED6
-# ??
-mainMenuSelectCredits=\u5236\u4F5C\u4EBA\u5458
-# ????
-mainMenuSelectOptions=\u9009\u9879
-# ??
-mainMenuSelectQuit=\u9000\u51FA
-# ??
-
-# Quit Menu text and buttons
-quitMenuTextSure=\u4F60\u786E\u5B9A\u5417\uFF1F
-# ?????
-quitMenuButtonYes=\u662F
-# ?
-quitMenuButtonNo=\u5426
-# ?

app/src/main/resources/assets/style/app.css

@@ -1,37 +0,0 @@
-.background {
-	-fx-background-color: linear-gradient(to bottom right, #21a7b2, #8f32b9);
-}
-
-.text {
-	-fx-fill: white;
-
-	-fx-font-family: "Segoe UI", sans-serif;
-	-fx-font-weight: bold;
-	-fx-font-size: 24px;
-}
-
-.button, .text-field, .combo-box, .combo-box-popup .list-cell {
-	-fx-padding: 10 20;
-
-	-fx-background-color: transparent;
-	-fx-border-color: transparent;
-}
-
-.combo-box-popup .list-view {
-	-fx-background-color: #1d1d1d;
-}
-
-.text-field {
-	-fx-text-fill: white;
-}
-
-.button:hover, .text-field:hover, .combo-box:hover, .combo-box-popup .list-cell:hover {
-	-fx-cursor: hand;
-
-	-fx-effect: dropshadow(gaussian, #00ffff7f, 10, 0.5, 0, 0);
-	-fx-border-color: white;
-}
-
-.text-field:focused, .combo-box:focused {
-	-fx-border-color: white;
-}

app/src/main/resources/assets/style/quit.css

@@ -1,8 +0,0 @@
-.quit_background {
-	-fx-background-color: rgba(0, 0, 0, 0.6);
-}
-
-.quit_box {
-	-fx-background-color: rgba(30, 30, 30, 0.5);
-	-fx-background-radius: 15;
-}

app/src/main/resources/localization/localization_ar.properties

@@ -0,0 +1,106 @@
+accept=\u0642\u0628\u0648\u0644
+ai=\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0635\u0646\u0627\u0639\u064a
+app-title=\u0645\u062e\u062a\u0627\u0631 \u0627\u0644\u0643\u0627\u0645 \u0627\u0644\u0645\u062e\u062a\u0627\u0631
+are-you-sure=\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f?
+back=\u0627\u0644\u0631\u062c\u0648\u0639
+cancel=\u0625\u0644\u063a\u0627\u0621
+challenge=\u062a\u062d\u062f\u064a
+connect4=Connect 4
+computer-difficulty=\u0635\u0639\u0648\u0628 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631
+computer-think-time=\u0648\u0642\u062a \u062a\u0641\u0643\u064a\u0631 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631
+computer=\u0643\u0645\u0628\u064a\u0648\u062a\u0631
+connect=\u0627\u062a\u0635\u0627\u0644
+credits=\u0627\u0644\u0645\u0633\u0627\u0647\u0645\u0629
+dark=\u0638\u0644\u0627\u0645
+deny=\u0631\u0641\u0636
+developers=\u0627\u0644\u0645\u0637\u0648\u0631\u0648\u0646
+disconnect=\u0641\u0635\u0644 \u0627\u0644\u0627\u062a\u0635\u0627\u0644
+effects-volume=\u0635\u0648\u062a \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a
+enter-the-server-ip=\u0623\u062f\u062e\u0644 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0633\u064a\u0631\u0641\u0631
+enter-the-server-port=\u0623\u062f\u062e\u0644 \u0645\u0646\u0641\u0630 \u0627\u0644\u0633\u064a\u0631\u0641\u0631
+enter-your-name=\u0623\u062f\u062e\u0644 \u0627\u0633\u0645\u0643
+error=\u062e\u0637\u0623
+exit=\u062e\u0631\u0648\u062c
+forfeit=\u0627\u0633\u062a\u0643\u0644\u0627\u0644
+fullscreen=\u0643\u0627\u0645\u0644 \u0627\u0644\u0634\u0627\u0634\u0629
+game-over=\u0627\u0646\u062a\u0647\u062a \u0627\u0644\u0644\u0639\u0628\u0629
+general=\u0639\u0627\u0645
+high-contrast=\u062A\u0628\u0627\u0646\u064A\u0629 \u0639\u0627\u0644\u064A
+invalid-username=\u0627\u0633\u0645 \u063a\u064a\u0631 \u0635\u062d\u064a\u062d
+ip-address=\u0639\u0646\u0648\u0627\u0646 IP
+is-not-a-valid-ip-address=\u0644\u064a\u0633 \u0639\u0646\u0648\u0627\u0646 IP \u0635\u062d\u064a\u062d
+is-not-a-valid-port=\u0644\u064a\u0633 \u0645\u0646\u0641\u0630 \u0635\u062d\u064a\u062d
+language=\u0644\u063a\u0629
+large=\u0633\u064a\u0631
+layout-size=\u062d\u062c\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645
+light=\u0636\u0624\u0621
+local=\u0645\u062d\u0644\u064a
+localization=\u062a\u0639\u0631\u064a\u0628 \u0627\u0644\u0644\u063a\u0629
+master-volume=\u0635\u0648\u062a \u0627\u0644\u0645\u0633\u062a\u0648\u0649
+medium=\u0645\u062a\u0648\u0633\u0637
+merge-commander=Merge Commander
+moral-support=\u062f\u0639\u0645 \u0623\u0639\u0635\u0627\u0628\u064a
+music-volume=\u0635\u0648\u062a \u0627\u0644\u0645\u0648\u0633\u064a\u0642\u0649
+name=\u0627\u0633\u0645
+never=\u0644\u0627\u060c \u0644\u0627 \u0623\u0631\u064A\u062F \u0623\u0646 \u0623\u0631\u0649 \u0623\u064A \u062F\u0631\u0648\u0633 \u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0644\u0627\u0642.
+no=\u0644\u0627
+ok=\u0645\u0648\u0627\u0641\u0642
+online=\u0645\u062a\u0635\u0644
+opengl=OpenGL
+options=\u062e\u064a\u0627\u0631\u0627\u062a
+play=\u0644\u0639\u0628
+player-name=\u0627\u0633\u0645 \u0627\u0644\u0644\u0627\u0639\u0628
+player=\u0644\u0627\u0639\u0628
+please-enter-your-name=\u064a\u0631\u062c\u0649 \u0623\u062f\u062e\u0644 \u0627\u0633\u0645\u0643
+port=\u0645\u0646\u0641\u0630
+product-owner=\u0635\u0627\u062d\u0628 \u0627\u0644\u0645\u0646\u062a\u062c
+quit=\u062e\u0631\u0648\u062c
+reversi=\u0631\u064a\u0641\u0631\u0633\u064a
+scrum-master=Scrum Master
+send=\u0625\u0631\u0633\u0627\u0644
+server-information=\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0633\u064a\u0631\u0641\u0631
+small=\u0635\u063a\u064a\u0631
+style=\u0623\u0633\u0644\u0648\u0628
+the-game-ended-in-a-draw=\u0627\u0646\u062a\u0647\u062a \u0627\u0644\u0644\u0639\u0628\u0629 \u0628\u062a\u0639\u0627\u062f\u0644
+theme=\u0645\u0648\u0636\u0648\u0639
+tic-tac-toe=\u062a\u064a\u0643 \u062a\u0627\u0643 \u062a\u0648
+tictactoe1 =\u0645\u0631\u062d\u0628\u064b\u0627 \u0628\u0643 \u0641\u064a \u0644\u0639\u0628\u0629 \u0625\u0643\u0633-\u0623\u0648! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0642\u064a\u0627\u0645 \u0628\u062d\u0631\u0643\u062a\u0643 \u0628\u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u064a \u0645\u0646 \u0627\u0644\u0645\u0631\u0628\u0639\u0627\u062a \u0627\u0644\u062a\u0633\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0644\u0648\u062d\u0629. \u0627\u0644\u0645\u062b\u0627\u0644 \u0623\u0639\u0644\u0627\u0647:
+tictactoe2 =\u064a\u0641\u0648\u0632 \u0627\u0644\u0644\u0627\u0639\u0628 \u0639\u0646\u062f\u0645\u0627 \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u062b\u0644\u0627\u062b \u0642\u0637\u0639 \u0645\u062a\u062a\u0627\u0644\u064a\u0629 ? \u0623\u0641\u0642\u064a\u064b\u0627 \u0623\u0648 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0623\u0648 \u0642\u0637\u0631\u064a\u064b\u0627. \u0641\u064a \u0627\u0644\u0645\u062b\u0627\u0644 \u0623\u0639\u0644\u0627\u0647\u060c \u064a\u0641\u0648\u0632 \u0627\u0644\u0644\u0627\u0639\u0628 \u0628\u0635\u0641 \u0642\u0637\u0631\u064a \u0645\u0646 \u062b\u0644\u0627\u062b \u0642\u0637\u0639
+to-a-game-of=\u0625\u0644\u0649 \u0644\u0639\u0628\u0629 \u0645\u0646
+tutorial=\u0647\u0644 \u062a\u0631\u064a\u062f \u0645\u0634\u0627\u0647\u062f\u0629 \u062f\u0644\u064a\u0644 \u0644\u0647\u0630\u0627 \u0627\u0644\u0644\u0639\u0628\u0629\u061f
+volume=\u0635\u0648\u062a
+windowed=\u0641\u064a \u0646\u0641\u0630\u0629
+yes=\u0646\u0639\u0645
+you-lost-against=\u0623\u0646\u062a \u062e\u0633\u0631\u062a \u0636\u062f
+you-were-challenged-by=\u062a\u062d\u062f\u064a\u062a \u0645\u0646
+you-win=\u0623\u0646\u062a \u062a\u0641\u0648\u0632
+>=>
+<=<
+connect4.1=\u0645\u0631\u062d\u0628\u0627 \u0628\u0643 \u0641\u064a \u0644\u0639\u0628\u0629 Connect 4! \u064a\u0645\u0643\u0646\u0643 \u062a\u0633\u0645\u064a\u0629 \u0627\u0644\u0644\u0639\u0628 \u0645\u0646 \u0637\u0631\u0641 \u0645\u0646 \u0627\u0644\u0639\u0645\u0648\u062f\u0627\u062a. \u0633\u064a\u062a\u0645 \u0648\u0636\u0639 \u0627\u0644\u0644\u062d\u0629 \u0627\u0644\u0623\u0642\u0644 \u0641\u064a \u062a\u0644\u0643 \u0627\u0644\u0639\u0645\u0648\u062f\u0629 \u0627\u0644\u0645\u0644\u0623\u0629 \u0627\u0644\u062a\u064a \u0644\u064a\u0633\u062a\u0645\u0644\u0623 \u0627\u0644\u0645\u0644\u0623\u0629.  
+connect4.2=\u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0641\u0648\u0632 \u0628\u0647\u0632\u0645 \u0623\u0631\u062c\u0639 \u0645\u0646 \u0627\u0644\u0642\u0637\u0639 \u0627\u0644\u0641\u064a \u0627\u0644\u0623\u0641\u0642 \u0623\u0648 \u0627\u0644\u0645\u064a\u0646 \u0623\u0648 \u0623\u0641\u0642 \u0639\u0644\u0649 \u0627\u0644\u0645\u0644\u0623\u0629!  
+reversi1=\u0645\u0631\u062d\u0628\u0627 \u0628\u0643 \u0641\u064a \u0644\u0639\u0628\u0629 Reversi! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0644\u0639\u0628 \u0628\u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u064a \u0646\u0642\u0637\u0629 \u0645\u0634\u0631\u0641\u0629.  
+reversi2=\u0639\u0646\u062f\u0645\u0627 \u062a\u0646\u0642\u0631 \u0639\u0644\u0649 \u0646\u0642\u0637\u0629 \u0633\u064a\u062a\u063a\u064a\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0644\u0648\u0639\u0627\u0628 \u0628\u064a\u0646 \u0645\u0643\u0627\u0646 \u062a\u0636\u0639 \u0627\u0644\u0646\u0642\u0637\u0629 \u0648\u0646\u0642\u0637\u0629 \u0627\u0644\u0644\u0648\u0639 \u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u0645\u0648\u062c\u0648\u062f.  
+reversi3=\u0645\u0631\u062a\u0643 \u0642\u062f \u064a\u062a\u063a\u0627\u0637 \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0647\u0646\u0627\u0643 \u062d\u0631\u0643 \u0642\u0627\u0646\u0648\u0646\u064a.  
+reversi4=\u0627\u0644\u0644\u0627\u0639\u0628 \u0627\u0644\u0630\u064a \u064a\u0641\u0648\u0632 \u0641\u064a \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u0644\u0639\u0628 \u0647\u0648 \u0627\u0644\u0630\u064a \u064a\u0643\u0648\u0646 \u0644\u062f\u064a\u0647 \u0627\u0644\u0623\u0643\u062b\u0631 \u0645\u0646 \u0627\u0644\u0644\u0648\u0639\u0627\u0628 \u0639\u0644\u0649 \u0627\u0644\u0644\u0648\u062d\u0629.  
+tutorialstring=\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a
+startgame=\u0627\u0628\u062f\u0623 \u0627\u0644\u0644\u0639\u0628\u0629!
+goback=\u0627\u0631\u062c\u0639
+turnof=\u062F\u0648\u0631\u0647
+zwartepiet=\u0633\u0647\u0644: Zwarte Piet
+sinterklaas=\u0645\u062a\u0648\u0633\u0637: Sint R. Klaas
+santa=\u0635\u0639\u0628: Santa
+
+
+arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629
+chinese=\u4e2d\u6587 (\u0627\u0644\u0635\u064a\u0646\u064a\u0629)
+dutch=Nederlands (\u0627\u0644\u0647\u0648\u0644\u0646\u062f\u064a\u0629)
+english=English (\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629)
+french=Fran\u00e7ais (\u0627\u0644\u0641\u0631\u0646\u0633\u064a\u0629)
+georgian=\u10e5\u10d0\u10e0\u10d4\u10e1\u10d8 (\u0627\u0644\u062c\u0648\u0631\u062c\u064a\u0629)
+german=Deutsch (\u0627\u0644\u0623\u0644\u0645\u0627\u0646\u064a\u0629)
+hindi=\u0939\u093f\u0928\u094d\u0926\u0940 (\u0627\u0644\u0647\u0646\u062f\u064a\u0629)
+italian=Italiano (\u0627\u0644\u0625\u064a\u0637\u0627\u0644\u064a\u0629)
+japanese=\u65e5\u672c\u8a9e (\u0627\u0644\u064a\u0627\u0628\u0627\u0646\u064a\u0629)
+korean=\ud55c\uad6d\uc5b4 (\u0627\u0644\u0643\u0648\u0631\u064a\u0629)
+russian=\u0420\u0443\u0441\u0441\u043a\u0438\u0439 (\u0627\u0644\u0631\u0648\u0633\u064a\u0629)
+spanish=Espa\u00f1ol (\u0627\u0644\u0625\u0633\u0628\u0627\u0646\u064a\u0629)

app/src/main/resources/localization/localization_de.properties

@@ -0,0 +1,107 @@
+accept=Akzeptieren
+ai=K\u00fcnstliche Intelligenz
+app-title=ISY Spiele-Auswahl
+are-you-sure=Sind Sie sicher?
+back=Zur\u00fcck
+cancel=Abbrechen
+challenge=Herausforderung
+computer-difficulty=Computer Schwierigkeit
+computer-think-time=Computer Denkzeit
+computer=Computer
+connect=Verbinden
+connect4=Connect 4
+
+credits=Credits
+dark=Dunkel
+deny=Ablehnen
+developers=Entwickler
+disconnect=Trennen
+effects-volume=Effektlautst\u00e4rke
+enter-the-server-ip=Server-IP eingeben
+enter-the-server-port=Server-Port eingeben
+enter-your-name=Geben Sie Ihren Namen ein
+error=Fehler
+exit=Beenden
+forfeit=Aufgeben
+fullscreen=Vollbild
+game-over=Spiel vorbei
+general=Allgemein
+high-contrast=Hoher Kontrast
+invalid-username=Ung\u00fcltiger Benutzername
+ip-address=IP-Adresse
+is-not-a-valid-ip-address=ist keine g\u00fcltige IP-Adresse
+is-not-a-valid-port=ist kein g\u00fcltiger Port
+language=Sprache
+large=Gro\u00df
+layout-size=Layout-Gr\u00f6\u00dfe
+light=Hell
+local=Lokal
+localization=Lokalisierung
+master-volume=Gesamtlautst\u00e4rke
+medium=Mittel
+merge-commander=Merge Commander
+moral-support=Mentale Unterst\u00fctzung
+music-volume=Musiklautst\u00e4rke
+name=Name
+never=Nein, ich m\u00f6chte niemals irgendwelche Tutorials sehen.
+no=Nein
+ok=Ok
+online=Online
+opengl=OpenGL
+options=Optionen
+play=Spielen
+player-name=Spielername
+player=Spieler
+please-enter-your-name=Bitte geben Sie Ihren Namen ein
+port=Port
+product-owner=Produktverantwortlicher
+quit=Beenden
+reversi=Reversi
+scrum-master=Scrum Master
+send=Senden
+server-information=Serverinformationen
+small=Klein
+style=Stil
+the-game-ended-in-a-draw=Das Spiel endete unentschieden
+theme=Thema
+tic-tac-toe=Tic Tac Toe
+tictactoe1 =Willkommen beim Spiel Tic Tac Toe! Du kannst deinen Zug machen, indem du auf eines der 9 Felder auf dem Spielfeld klickst. Beispiel oben:
+tictactoe2 =Ein Spieler gewinnt, wenn er drei Steine in einer Reihe hat ? horizontal, vertikal oder diagonal. Im obigen Beispiel gewinnt der Spieler mit einer diagonalen Reihe von drei Steinen.
+to-a-game-of=zu einem Spiel von
+tutorial=M\u00f6chtest du ein Tutorial f\u00fcr dieses Spiel sehen?
+
+volume=Lautst\u00e4rke
+windowed=Fenstermodus
+yes=Ja
+you-lost-against=Sie haben gegen ... verloren
+you-were-challenged-by=Sie wurden herausgefordert von ...
+you-win=Sie gewinnen
+>=>
+<=<
+connect4.1=Willkommen beim Spiel Connect 4! Du kannst einen Zug machen, indem du auf eine der Spalten klickst. Der Zug wird in der niedrigsten noch freien Reihe dieser Spalte platziert.  
+connect4.2=Du kannst gewinnen, indem du 4 Spielsteine deiner Farbe horizontal, diagonal oder vertikal verbindest! Siehe das obige Beispiel.  
+reversi1=Willkommen beim Spiel Reversi! Du kannst einen Zug machen, indem du auf einen der leicht transparenten Punkte klickst.  
+reversi2=Wenn du auf einen Punkt klickst, werden alle Spielsteine dazwischen umgedreht, bis zum n<>chsten Punkt. Siehe das Beispiel oben, wo Gelb die zu drehenden Steine ist.  
+reversi3=Dein Zug kann <20>bersprungen werden, wenn es keinen legalen Zug gibt. Dein Gegner spielt dann weiter, bis du einen legalen Zug machen kannst.  
+reversi4=Der Spieler, der am Ende die meisten Steine auf dem Brett hat, gewinnt.  
+tutorialstring=Tutorial
+startgame=Spiel starten!
+goback=Zur<EFBFBD>ck
+turnof=ist dran
+zwartepiet=Leicht: Zwarte Piet
+sinterklaas=Mittel: Sint R. Klaas
+santa=Schwer: Santa
+
+arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabisch)
+chinese=\u4e2d\u6587 (Chinesisch)
+dutch=Nederlands (Niederl\u00e4ndisch)
+english=English (Englisch)
+french=Fran\u00e7ais (Franz\u00f6sisch)
+georgian=\u10e5\u10d0\u10e0\u10d4\u10e1\u10d8 (Georgisch)
+german=Deutsch
+hindi=\u0939\u093f\u0928\u094d\u0926\u0940 (Hindi)
+italian=Italiano (Italienisch)
+japanese=\u65e5\u672c\u8a9e (Japanisch)
+korean=\ud55c\uad6d\uc5b4 (Koreanisch)
+russian=\u0420\u0443\u0441\u0441\u043a\u0438\u0439 (Russisch)
+spanish=Espa\u00f1ol (Spanisch)

app/src/main/resources/localization/localization_en.properties

@@ -0,0 +1,109 @@
+accept=Accept
+ai=Artificial Intelligence
+app-title=ISY Games Selector
+are-you-sure=Are you sure?
+back=Back
+cancel=Cancel
+challenge=Challenge
+computer-difficulty=Computer difficulty
+computer-think-time=Computer think time
+computer=Computer
+connect=Connect
+connecting=Connecting to server...
+connecting-failed=Could not connect to server:
+credits=Credits
+dark=Dark
+deny=Deny
+developers=Developers
+disconnect=Disconnect
+effects-volume=Effects Volume
+enter-the-server-ip=Enter the server ip
+enter-the-server-port=Enter the server port
+enter-your-name=Enter your name
+error=Error
+exit=Exit
+forfeit=Forfeit
+fullscreen=Fullscreen
+game=REPLACE ME
+game-over=Game Over
+general=General
+high-contrast=High contrast
+invalid-username=invalid username
+ip-address=IP address
+is-not-a-valid-ip-address=is not a valid-ip address
+is-not-a-valid-port=is not a valid port
+language=Language
+large=Large
+layout-size=Layout Size
+light=Light
+local=Local
+localization=Localization
+master-volume=Master Volume
+medium=Medium
+merge-commander=Merge Commander
+moral-support=Moral Support
+music-volume=Music Volume
+name=Name
+no=No
+never=No, I never want to see any tutorials
+ok=Ok
+online=Online
+opengl=OpenGL
+options=Options
+play=Play
+player-name=Player name
+player=Player
+please-enter-your-name=Please enter your name
+port=Port
+product-owner=Product Owner
+quit=Quit
+reversi=Reversi
+scrum-master=Scrum Master
+send=Send
+server-information=Server information
+small=Small
+style=Style
+the-game-ended-in-a-draw=The game ended in a draw
+theme=Theme
+tic-tac-toe=Tic Tac Toe
+tictactoe1 =Welcome to the game of Tic Tac Toe! You can make your move by clicking on any of the 9 squares on the board. Example above:
+tictactoe2 =A player wins by getting 3 pieces in a row - horizontally, vertically or diagonally. In the example above, the player wins with a diagonal row of three pieces.
+tutorial=Do you want a tutorial for this game?
+connect4=Connect 4
+to-a-game-of=to a game of
+volume=Volume
+windowed=Windowed
+yes=Yes
+you-lost-against=You lost against
+you-were-challenged-by=You were challenged by
+you-win=You win
+>=>
+<=<
+// tutorial
+connect4.1=Welcome to the game of Connect 4! You can make a move by clicking one of the columns. The move will be placed in the lowest row of that column that is not filled yet.
+connect4.2=You can win by getting 4 pieces of your row horizontally, diagonally or vertically! For an example, see above.
+reversi1=Welcome to the game of Reversi! You can make a move by clicking on one of the slightly transparent dots.
+reversi2=Clicking on a dot will flip all the moves between where you place the dot and the next dot it finds. See the example above, where yellow is the moves to be flipped.
+reversi3=Your turn may be skipped if there is no legal move. This will let your opponent play again until you get an opportunity at a legal move.
+reversi4=The player who wins at the end of the game is the one who has the most pieces on the board.
+tutorialstring=Tutorial
+startgame=Start game!
+goback=Go back
+turnof='s turn
+zwartepiet=Easy: Zwarte Piet
+sinterklaas=Medium: Sint R. Klaas
+santa=Hard:Santa
+
+arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabic)
+chinese=\u4e2d\u6587 (Chinese)
+dutch=Nederlands (Dutch)
+english=English
+french=Fran\u00e7ais (French)
+georgian=\u10e5\u10d0\u10e0\u10d4\u10e1\u10d8 (Georgian)
+german=Deutsch (German)
+hindi=\u0939\u093f\u0928\u094d\u0926\u0940 (Hindi)
+italian=Italiano (Italian)
+japanese=\u65e5\u672c\u8a9e (Japanese)
+korean=\ud55c\uad6d\uc5b4 (Korean)
+russian=\u0420\u0443\u0441\u0441\u043a\u0438\u0439 (Russian)
+spanish=Espa\u00f1ol (Spanish)