Merge pull request #261 from 2OOP/Tutorials

merge tutorials to dev branch

.idea/dictionaries/project.xml

@@ -5,6 +5,7 @@
       <w>clid</w>
       <w>dcompile</w>
       <w>errorprone</w>
+      <w>español</w>
       <w>flushnl</w>
       <w>gaaf</w>
       <w>gamelist</w>

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

@@ -36,4 +36,5 @@ public final class Main {
 
         }).start();
     }
+
 }

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

@@ -22,6 +22,17 @@ public class GameInformation {
         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 {

app/src/main/java/org/toop/app/game/BaseGameThread.java

@@ -48,16 +48,17 @@ public abstract class BaseGameThread<TGame extends Game, TAI, TCanvas> {
 		this.game = gameSupplier.get();
 		this.ai = aiSupplier.get();
 
-		if (onForfeit == null || onExit == null) {
+        String type = information.type.getTypeToString();
-			primary = new GameView(null, () -> {
+        if (onForfeit == null || onExit == null) {
-				isRunning.set(false);
+            primary = new GameView(null, () -> {
-				WidgetContainer.getCurrentView().transitionPrevious();
+                isRunning.set(false);
-			}, null);
+                WidgetContainer.getCurrentView().transitionPrevious();
+            }, null, type);
 		} else {
 			primary = new GameView(onForfeit, () -> {
 				isRunning.set(false);
 				onExit.run();
-			}, onMessage);
+			}, onMessage, type);
 		}
 
 		this.canvas = canvasFactory.apply(this::onCellClicked);

app/src/main/java/org/toop/app/game/Connect4Game.java

@@ -5,9 +5,8 @@ import javafx.scene.paint.Color;
 import org.toop.app.App;
 import org.toop.app.GameInformation;
 import org.toop.app.canvas.Connect4Canvas;
-import org.toop.app.view.ViewStack;
+import org.toop.app.widget.view.GameView;
-import org.toop.app.view.views.GameView;
+import org.toop.app.widget.WidgetContainer;
-import org.toop.app.view.views.LocalMultiplayerView;
 import org.toop.framework.eventbus.EventFlow;
 import org.toop.framework.networking.events.NetworkEvents;
 import org.toop.game.Connect4.Connect4;
@@ -32,7 +31,7 @@ public class Connect4Game {
     private final int columnSize = 7;
     private final int rowSize = 6;
 
-    private final GameView view;
+    private final GameView primary;
     private final Connect4Canvas canvas;
 
     private final AtomicBoolean isRunning;
@@ -50,15 +49,15 @@ public class Connect4Game {
         isRunning = new AtomicBoolean(true);
 
         if (onForfeit == null || onExit == null) {
-            view = new GameView(null, () -> {
+            primary = new GameView(null, () -> {
                 isRunning.set(false);
-                ViewStack.push(new LocalMultiplayerView(information));
+                WidgetContainer.getCurrentView().transitionPrevious();
-            }, null);
+            }, null, "Connect4");
         } else {
-            view = new GameView(onForfeit, () -> {
+            primary = new GameView(onForfeit, () -> {
                 isRunning.set(false);
                 onExit.run();
-            }, onMessage);
+            }, onMessage, "Connect4");
         }
 
         canvas = new Connect4Canvas(Color.GRAY,
@@ -83,8 +82,8 @@ public class Connect4Game {
                     }
                 });
 
-        view.add(Pos.CENTER, canvas.getCanvas());
+        primary.add(Pos.CENTER, canvas.getCanvas());
-        ViewStack.push(view);
+        WidgetContainer.getCurrentView().transitionNext(primary);
 
         if (onForfeit == null || onExit == null) {
             new Thread(this::localGameThread).start();
@@ -92,8 +91,7 @@ public class Connect4Game {
         } else {
             new EventFlow()
                     .listen(NetworkEvents.GameMoveResponse.class, this::onMoveResponse)
-                    .listen(NetworkEvents.YourTurnResponse.class, this::onYourTurnResponse)
+                    .listen(NetworkEvents.YourTurnResponse.class, this::onYourTurnResponse);
-                    .listen(NetworkEvents.ReceivedMessage.class, this::onReceivedMessage);
 
             setGameLabels(myTurn == 0);
         }
@@ -109,7 +107,7 @@ public class Connect4Game {
 			final String currentValue = currentTurn == 0? "RED" : "BLUE";
 			final int nextTurn = (currentTurn + 1) % information.type.getPlayerCount();
 
-			view.nextPlayer(information.players[currentTurn].isHuman,
+			primary.nextPlayer(information.players[currentTurn].isHuman,
 				information.players[currentTurn].name,
 				currentValue,
 				information.players[nextTurn].name);
@@ -159,9 +157,9 @@ public class Connect4Game {
 */
             if (state != GameState.NORMAL) {
                 if (state == GameState.WIN) {
-                    view.gameOver(true, information.players[currentTurn].name);
+                    primary.gameOver(true, information.players[currentTurn].name);
                 } else if (state == GameState.DRAW) {
-                    view.gameOver(false, "");
+                    primary.gameOver(false, "");
                 }
 
                 isRunning.set(false);
@@ -188,14 +186,14 @@ public class Connect4Game {
         if (state != GameState.NORMAL) {
             if (state == GameState.WIN) {
                 if (response.player().equalsIgnoreCase(information.players[0].name)) {
-                    view.gameOver(true, information.players[0].name);
+                    primary.gameOver(true, information.players[0].name);
                     gameOver();
                 } else {
-                    view.gameOver(false, information.players[1].name);
+                    primary.gameOver(false, information.players[1].name);
                     gameOver();
                 }
             } else if (state == GameState.DRAW) {
-                view.gameOver(false, "");
+                primary.gameOver(false, "");
                 gameOver();
             }
         }
@@ -243,14 +241,6 @@ public class Connect4Game {
                 .postEvent();
     }
 
-    private void onReceivedMessage(NetworkEvents.ReceivedMessage msg) {
-        if (!isRunning.get()) {
-            return;
-        }
-
-        view.updateChat(msg.message());
-    }
-
     private void updateCanvas() {
         canvas.clearAll();
 
@@ -267,7 +257,7 @@ public class Connect4Game {
         final int currentTurn = game.getCurrentTurn();
         final String currentValue = currentTurn == 0? "RED" : "BLUE";
 
-        view.nextPlayer(isMe,
+        primary.nextPlayer(isMe,
                 information.players[isMe? 0 : 1].name,
                 currentValue,
                 information.players[isMe? 1 : 0].name);

app/src/main/java/org/toop/app/game/ReversiGame.java

@@ -55,12 +55,12 @@ public final class ReversiGame {
 			primary = new GameView(null, () -> {
 				isRunning.set(false);
 				WidgetContainer.getCurrentView().transitionPrevious();
-			}, null);
+			}, null, "Reversi");
 		} else {
 			primary = new GameView(onForfeit, () -> {
 				isRunning.set(false);
 				onExit.run();
-			}, onMessage);
+			}, onMessage, "Reversi");
 		}
 
 		canvas = new ReversiCanvas(Color.BLACK,

app/src/main/java/org/toop/app/game/TicTacToeGame.java

@@ -51,12 +51,12 @@ public final class TicTacToeGame {
 			primary = new GameView(null, () -> {
 				isRunning.set(false);
 				WidgetContainer.getCurrentView().transitionPrevious();
-			}, null);
+			}, null, "TicTacToe");
 		} else {
 			primary = new GameView(onForfeit, () -> {
 				isRunning.set(false);
 				onExit.run();
-			}, onMessage);
+			}, onMessage, "TicTacToe");
 		}
 
 		canvas = new TicTacToeCanvas(Color.GRAY,

app/src/main/java/org/toop/app/game/TicTacToeGameThread.java

@@ -9,9 +9,7 @@ import org.toop.game.enumerators.GameState;
 import org.toop.game.records.Move;
 import org.toop.game.tictactoe.TicTacToe;
 import org.toop.game.tictactoe.TicTacToeAI;
-
 import java.util.function.Consumer;
-
 import javafx.geometry.Pos;
 import javafx.scene.paint.Color;
 
@@ -25,8 +23,8 @@ public final class TicTacToeGameThread extends BaseGameThread<TicTacToe, TicTacT
 	}
 
 	public TicTacToeGameThread(GameInformation info) {
-		this(info, 0, null, null, null, null);
+        this(info, 0, null, null, null, null);
-	}
+    }
 
 	@Override
 	protected void addCanvasToPrimary() {

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

@@ -7,6 +7,9 @@ import org.toop.app.game.TicTacToeGameThread;
 import org.toop.app.view.View;
 import org.toop.app.view.ViewStack;
 import org.toop.app.view.displays.SongDisplay;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.tutorial.BaseTutorialWidget;
+import org.toop.app.widget.tutorial.TicTacToeTutorialWidget;
 import org.toop.local.AppContext;
 
 import javafx.geometry.Pos;
@@ -16,6 +19,7 @@ import javafx.scene.control.Slider;
 import javafx.scene.control.TextField;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
+import org.toop.local.AppSettings;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -45,8 +49,8 @@ public final class LocalMultiplayerView extends View {
 			}
 
 			switch (information.type) {
-				case TICTACTOE: new TicTacToeGameThread(information); break;
+                case TICTACTOE: new TicTacToeGameThread(information); break;
-				case REVERSI: new ReversiGame(information); break;
+                case REVERSI: new ReversiGame(information); break;
                 case CONNECT4: new Connect4Game(information); break;
                 // case BATTLESHIP: new BattleshipGame(information); break;
 			}

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

@@ -1,7 +1,11 @@
 package org.toop.app.widget;
 
+import javafx.scene.image.ImageView;
+import org.toop.framework.resource.resources.ImageAsset;
 import org.toop.local.AppContext;
 
+import java.awt.*;
+import java.io.File;
 import java.util.function.Consumer;
 
 import javafx.collections.FXCollections;
@@ -18,7 +22,7 @@ import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
 import javafx.util.StringConverter;
 
-public final class Primitive {
+public final class  Primitive {
 	public static Text header(String key) {
 		var header = new Text();
 		header.getStyleClass().add("header");
@@ -43,6 +47,16 @@ public final class Primitive {
 		return text;
 	}
 
+    public static ImageView image(File file) {
+        ImageAsset imageAsset = new ImageAsset(file);
+        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) {
 		var button = new Button();
 		button.getStyleClass().add("button");

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

@@ -62,4 +62,16 @@ public final class WidgetContainer {
 	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;
+        });
+    }
 }

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

@@ -0,0 +1,60 @@
+package org.toop.app.widget.tutorial;
+
+import javafx.geometry.Pos;
+import javafx.scene.image.ImageView;
+import javafx.scene.text.Text;
+import org.toop.app.widget.Primitive;
+import org.toop.app.widget.complex.ViewWidget;
+
+import javafx.scene.control.Button;
+import org.toop.local.AppContext;
+
+import java.io.File;
+
+public class BaseTutorialWidget extends ViewWidget {
+
+    private TState state;
+    private Text tutorialText;
+    private Button previousButton;
+    private Button nextButton;
+    private Button noButton;
+    private Button yesButton;
+    private Button neverButton;
+    private ImageView imagery;
+
+    public BaseTutorialWidget(String key, Runnable onNo, Runnable onYes, Runnable onNever) {
+        System.out.println("Trying to initialize...");
+        this.tutorialText = Primitive.text(key);
+        this.yesButton = Primitive.button("ok", () -> onYes.run());
+        this.noButton = Primitive.button("no", () -> onNo.run());
+        this.neverButton = Primitive.button("never", () -> onNever.run());
+        var a = Primitive.hbox(yesButton, noButton, neverButton);
+        add(Pos.CENTER, Primitive.vbox(tutorialText, a));
+    }
+
+    public BaseTutorialWidget(TState state, String key, Runnable onPrevious, Runnable onNext) {
+        this.state = state;
+        this.tutorialText = Primitive.text(key);
+        this.previousButton = Primitive.button("<", () -> onPrevious.run());
+        this.nextButton = Primitive.button(">", () -> onNext.run());
+        var w = Primitive.hbox(previousButton, nextButton);
+        add(Pos.CENTER, Primitive.vbox(tutorialText, w));
+    }
+
+    public BaseTutorialWidget(TState state, String key, File image,  Runnable onPrevious, Runnable onNext) {
+        this.state = state;
+        this.imagery = Primitive.image(image);
+        this.tutorialText = Primitive.text(key);
+        this.previousButton = Primitive.button("<", () -> onPrevious.run());
+        this.nextButton = Primitive.button(">", () -> onNext.run());
+        var w = Primitive.hbox(previousButton, nextButton);
+        var x =  Primitive.vbox(imagery, tutorialText);
+        add(Pos.CENTER, Primitive.vbox(x, w));
+    }
+
+    public void update(String key, File image) {
+        tutorialText.textProperty().unbind();
+        tutorialText.setText(AppContext.getString(key));
+        imagery.setImage(Primitive.image(image).getImage());
+    }
+}

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

@@ -0,0 +1,39 @@
+package org.toop.app.widget.tutorial;
+
+import javafx.geometry.Pos;
+import org.toop.app.widget.complex.ViewWidget;
+
+import java.io.File;
+
+public class Connect4TutorialWidget extends ViewWidget {
+    private TState state;
+    private String[] keys = {"connect4.1", "connect4.2"};
+    private File[] images = {new File("app/src/main/resources/assets/images/connect41.png"), new File("app/src/main/resources/assets/images/connect42.png")};
+    private BaseTutorialWidget tutorialWidget;
+
+    public Connect4TutorialWidget() {
+        this.state = new TState(keys.length);
+        tutorialWidget = new BaseTutorialWidget(
+                state,
+                keys[state.getCurrent()],
+                images[state.getCurrent()],
+                () -> {
+                    if (state.hasPrevious()) {
+                        state.previous();
+                        update();
+                    }
+                },
+                () -> {
+                    if (state.hasNext()) {
+                        state.next();
+                        update();
+                    }
+                }
+        );
+        add(Pos.CENTER, tutorialWidget);
+    }
+
+    private void update() {
+        tutorialWidget.update(keys[state.getCurrent()], images[state.getCurrent()]);
+    }
+}

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

@@ -0,0 +1,39 @@
+package org.toop.app.widget.tutorial;
+
+import javafx.geometry.Pos;
+import org.toop.app.widget.complex.ViewWidget;
+
+import java.io.File;
+
+public class ReversiTutorialWidget extends ViewWidget {
+    private TState state;
+    private String[] keys = {"reversi1", "reversi2", "reversi3", "reversi4"};
+    private File[] images = {new File("app/src/main/resources/assets/images/reversi1.png"), new File("app/src/main/resources/assets/images/reversi2.png"),  new File("app/src/main/resources/assets/images/cat.jpg"), new File("app/src/main/resources/assets/images/cat.jpg")};
+    private BaseTutorialWidget tutorialWidget;
+
+    public ReversiTutorialWidget() {
+        this.state = new TState(keys.length);
+        tutorialWidget = new BaseTutorialWidget(
+                state,
+                keys[state.getCurrent()],
+                images[state.getCurrent()],
+                () -> {
+                    if (state.hasPrevious()) {
+                        state.previous();
+                        update();
+                    }
+                },
+                () -> {
+                    if (state.hasNext()) {
+                        state.next();
+                        update();
+                    }
+                }
+        );
+        add(Pos.CENTER, tutorialWidget);
+    }
+
+    private void update() {
+        tutorialWidget.update(keys[state.getCurrent()], images[state.getCurrent()]);
+    }
+}

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

@@ -0,0 +1,44 @@
+package org.toop.app.widget.tutorial;
+
+public class TState {
+
+    private int current;
+    private int total;
+
+    public TState(int total) {
+        this.total = total;
+        this.current = 0;
+    }
+
+    public int getCurrent() {
+        return current;
+    }
+
+    public void setCurrent(int current) {
+        this.current = current;
+    }
+
+    public int getTotal() {
+        return total;
+    }
+
+    public void setTotal(int total) {
+        this.total = total;
+    }
+
+    public void next() {
+        current = current + 1;
+    }
+
+    public void previous() {
+        current = current - 1;
+    }
+
+    public boolean hasNext() {
+        return current < total - 1;
+    }
+
+    public boolean hasPrevious() {
+        return current > 0;
+    }
+}

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

@@ -0,0 +1,42 @@
+package org.toop.app.widget.tutorial;
+
+import javafx.geometry.Pos;
+import org.toop.app.widget.complex.ViewWidget;
+import java.io.File;
+
+public class TicTacToeTutorialWidget extends ViewWidget {
+
+    private TState state;
+    private String[] keys = {"tictactoe1", "tictactoe2"};
+    private File[] images = {
+            new File("app/src/main/resources/assets/images/tictactoe1.png"),
+            new File("app/src/main/resources/assets/images/tictactoe2.png")
+    };
+    private BaseTutorialWidget tutorialWidget;
+
+    public TicTacToeTutorialWidget() {
+        this.state = new TState(keys.length);
+        tutorialWidget = new BaseTutorialWidget(
+            state,
+            keys[state.getCurrent()],
+            images[state.getCurrent()],
+            () -> {
+                if (state.hasPrevious()) {
+                    state.previous();
+                    update();
+                }
+            },
+            () -> {
+                if (state.hasNext()) {
+                    state.next();
+                    update();
+                }
+            }
+        );
+        add(Pos.CENTER, tutorialWidget);
+    }
+
+    private void update() {
+        tutorialWidget.update(keys[state.getCurrent()], images[state.getCurrent()]);
+    }
+}

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

@@ -11,18 +11,21 @@ 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.BaseTutorialWidget;
+import org.toop.app.widget.tutorial.Connect4TutorialWidget;
+import org.toop.app.widget.tutorial.ReversiTutorialWidget;
+import org.toop.app.widget.tutorial.TicTacToeTutorialWidget;
 
 public final class GameView extends ViewWidget {
 	private final Text currentPlayerHeader;
 	private final Text currentMoveHeader;
 	private final Text nextPlayerHeader;
-
 	private final Button forfeitButton;
 	private final Button exitButton;
+    private final Button tutorialButton;
+    private final TextField chatInput;
 
-	private final TextField chatInput;
+	public GameView(Runnable onForfeit, Runnable onExit, Consumer<String> onMessage, String gameType) {
-
-	public GameView(Runnable onForfeit, Runnable onExit, Consumer<String> onMessage) {
 		currentPlayerHeader = Primitive.header("");
 		currentMoveHeader = Primitive.header("");
 		nextPlayerHeader = Primitive.header("");
@@ -48,6 +51,27 @@ public final class GameView extends ViewWidget {
 			chatInput = null;
 		}
 
+        switch(gameType) {
+            case "TicTacToe":
+                this.tutorialButton = Primitive.button("tutorialstring", () -> {
+                    transitionNext(new TicTacToeTutorialWidget());
+                });
+                break;
+            case "Reversi":
+                this.tutorialButton = Primitive.button("tutorialstring", () -> {
+                    transitionNext(new ReversiTutorialWidget());
+                });
+                break;
+            case "Connect4":
+                this.tutorialButton = Primitive.button("tutorialstring", () -> {
+                    transitionNext(new Connect4TutorialWidget());
+                });
+                break;
+            default:
+                this.tutorialButton = null;
+                break;
+        }
+
 		setupLayout();
 	}
 
@@ -74,6 +98,10 @@ public final class GameView extends ViewWidget {
 		if (chatInput != null) {
 			add(Pos.BOTTOM_RIGHT, Primitive.vbox(chatInput));
 		}
+
+        if (tutorialButton != null) {
+            add(Pos.TOP_LEFT, tutorialButton);
+        }
 	}
 
 	public void nextPlayer(boolean isMe, String currentPlayer, String currentMove, String nextPlayer) {

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

@@ -1,19 +1,25 @@
 package org.toop.app.widget.view;
 
+import javafx.application.Platform;
 import org.toop.app.GameInformation;
 import org.toop.app.game.Connect4Game;
 import org.toop.app.game.ReversiGame;
 import org.toop.app.game.TicTacToeGameThread;
 import org.toop.app.widget.Primitive;
+import org.toop.app.widget.WidgetContainer;
 import org.toop.app.widget.complex.PlayerInfoWidget;
 import org.toop.app.widget.complex.ViewWidget;
 import org.toop.app.widget.popup.ErrorPopup;
+import org.toop.app.widget.tutorial.BaseTutorialWidget;
+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;
 
 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;
 
@@ -32,12 +38,93 @@ public class LocalMultiplayerView extends ViewWidget {
 			}
 
 			switch (information.type) {
-				case TICTACTOE -> new TicTacToeGameThread(information);
+                case TICTACTOE:
-				case REVERSI -> new ReversiGame(information);
+                    if (AppSettings.getSettings().getTutorialFlag() && AppSettings.getSettings().getFirstTTT()) {
-				case CONNECT4 -> new Connect4Game(information);
+                         BaseTutorialWidget a = new BaseTutorialWidget(
+                                "tutorial",
+                                () -> {
+                                    AppSettings.getSettings().setFirstTTT(false);
+                                    Platform.runLater(() -> {
+                                        new TicTacToeGameThread(information);
+                                    });
+                                },
+                                () -> {
+                                        ViewWidget c = new TicTacToeTutorialWidget();
+                                        transitionNext(c);
+                                        WidgetContainer.setCurrentView(c);
+                                        AppSettings.getSettings().setFirstTTT(false);
+                                    },
+                                () -> {
+                                    AppSettings.getSettings().setTutorialFlag(false);
+                                    Platform.runLater(() -> {
+                                        new TicTacToeGameThread(information);
+                                    });
+                                }
+                        );
+                         transitionNext(a);
+                         break;
+                    }
+                    new TicTacToeGameThread(information);
+                    break;
+                case REVERSI:
+                    if (AppSettings.getSettings().getTutorialFlag() && AppSettings.getSettings().getFirstReversi()) {
+                        BaseTutorialWidget a = new BaseTutorialWidget(
+                                "tutorial",
+                                () -> { Platform.runLater(() -> {
+                                    AppSettings.getSettings().setFirstReversi(false);
+                                    new ReversiGame(information);
+                                });
+                                },
+                                () -> {
+                                    Platform.runLater(() -> {
+                                        ViewWidget c = new ReversiTutorialWidget();
+                                        transitionNext(c);
+                                        WidgetContainer.setCurrentView(c);
+                                        AppSettings.getSettings().setFirstReversi(false);
+                                    });
+                                },
+                                () -> {
+                                    Platform.runLater(() -> {
+                                        AppSettings.getSettings().setTutorialFlag(false);
+                                        new ReversiGame(information);
+                                    });
+                                });
+                        transitionNext(a);
+                        break;
+                    }
+                    new ReversiGame(information);
+                    break;
+                case CONNECT4:
+                    if (AppSettings.getSettings().getTutorialFlag() && AppSettings.getSettings().getFirstConnect4()) {
+                        BaseTutorialWidget a = new BaseTutorialWidget(
+                                "tutorial",
+                                () -> { Platform.runLater(() -> {
+                                    AppSettings.getSettings().setFirstConnect4(false);
+                                    new Connect4Game(information);
+                                });
+                                },
+                                () -> {
+                                    Platform.runLater(() -> {
+                                        ViewWidget c = new Connect4TutorialWidget();
+                                        transitionNext(c);
+                                        WidgetContainer.setCurrentView(c);
+                                        AppSettings.getSettings().setFirstConnect4(false);
+                                    });
+                                },
+                                () -> {
+                                    Platform.runLater(() -> {
+                                        AppSettings.getSettings().setTutorialFlag(false);
+                                        new Connect4Game(information);
+                                    });
+                                    });
+                        transitionNext(a);
+                        break;
+                    }
+                    new Connect4Game(information);
+                    break;
+                    }
 				// case BATTLESHIP -> new BattleshipGame(information);
-			}
+			});
-		});
 
 		var playerSection = setupPlayerSections();
 

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

@@ -3,7 +3,6 @@ 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;
 
 public class MainView extends ViewWidget {

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

@@ -21,6 +21,8 @@ public class AppSettings {
 			settingsAsset.load();
 		}
 
+        checkSettings();
+
 		Settings settingsData = settingsAsset.getContent();
 
 		AppContext.setLocale(Locale.of(settingsData.locale));
@@ -64,4 +66,43 @@ public class AppSettings {
 	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_ar.properties

@@ -5,6 +5,7 @@ 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
@@ -41,6 +42,7 @@ 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
@@ -62,13 +64,25 @@ 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
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629
 chinese=\u4e2d\u6587 (\u0627\u0644\u0635\u064a\u0646\u064a\u0629)

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

@@ -9,6 +9,8 @@ computer-difficulty=Computer Schwierigkeit
 computer-think-time=Computer Denkzeit
 computer=Computer
 connect=Verbinden
+connect4=Connect 4
+
 credits=Credits
 dark=Dunkel
 deny=Ablehnen
@@ -41,6 +43,7 @@ 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
@@ -62,13 +65,26 @@ 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
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabisch)
 chinese=\u4e2d\u6587 (Chinesisch)

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

@@ -42,6 +42,7 @@ 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
@@ -62,6 +63,9 @@ 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
@@ -70,6 +74,17 @@ 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
+
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabic)
 chinese=\u4e2d\u6587 (Chinese)

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

@@ -9,6 +9,8 @@ computer-difficulty=Dificultad del ordenador
 computer-think-time=Tiempo de pensamiento del ordenador
 computer=Ordenador
 connect=Conectar
+connect4=Connect 4
+
 credits=Cr\u00e9ditos
 dark=Oscuro
 deny=Denegar
@@ -41,6 +43,7 @@ merge-commander=Merge Commander
 moral-support=Apoyo moral
 music-volume=Volumen de m\u00fasica
 name=Nombre
+never=No, no quiero ver ning\u00fan tutorial nunca.
 no=No
 ok=OK
 online=En l\u00ednea
@@ -62,13 +65,26 @@ style=Estilo
 the-game-ended-in-a-draw=El juego termin\u00f3 en empate
 theme=Tema
 tic-tac-toe=Tres en raya
+tictactoe1 =\u00a1Bienvenido al juego del Tres en Raya! Puedes hacer tu jugada haciendo clic en cualquiera de los 9 cuadros del tablero. Ejemplo arriba:
+tictactoe2 =Un jugador gana al conseguir 3 fichas en l\u00ednea, ya sea horizontal, vertical o diagonalmente. En el ejemplo de arriba, el jugador gana con una fila diagonal de tres fichas.
 to-a-game-of=a un juego de
+tutorial=\u00bfQuieres ver un tutorial para este juego?
 volume=Volumen
 windowed=En ventana
 yes=S\u00ed
 you-lost-against=Perdiste contra
 you-were-challenged-by=Fuiste desafiado por
 you-win=Ganaste
+>=>
+<=<
+connect4.1=\u00a1Bienvenido al juego de Connect 4! Puedes hacer un movimiento haciendo clic en una de las columnas. El movimiento se colocar<61> en la fila m<>s baja de esa columna que no est<73> llena.  
+connect4.2=\u00a1Puedes ganar consiguiendo 4 fichas de tu color horizontal, diagonal o verticalmente! Mira el ejemplo de arriba.  
+reversi1=\u00a1Bienvenido al juego de Reversi! Puedes hacer un movimiento haciendo clic en uno de los puntos ligeramente transparentes.  
+reversi2=Al hacer clic en un punto, se voltear<61>n todas las fichas entre donde colocas el punto y el siguiente punto que encuentre. Mira el ejemplo de arriba, donde amarillo son las fichas a voltear.  
+reversi3=Tu turno puede ser saltado si no hay un movimiento legal. Esto permitir<69> que tu oponente juegue nuevamente hasta que tengas una oportunidad legal.  
+reversi4=El jugador que gane al final del juego es quien tenga m<>s fichas en el tablero.  
+tutorialstring=Tutorial
+
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Ar\u00e1bigo)
 chinese=\u4e2d\u6587 (Chino)

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

@@ -9,6 +9,8 @@ computer-difficulty=Difficult\u00e9 de l'ordinateur
 computer-think-time=Temps de r\u00e9flexion de l'ordinateur
 computer=Ordinateur
 connect=Connexion
+connect4=Connect 4
+
 credits=Cr\u00e9dits
 dark=Sombre
 deny=Refuser
@@ -41,6 +43,7 @@ merge-commander=Merge Commander
 moral-support=Soutien moral
 music-volume=Volume de la musique
 name=Nom
+never=Non, je ne veux jamais voir de tutoriels.
 no=Non
 ok=OK
 online=En ligne
@@ -62,13 +65,25 @@ style=Style
 the-game-ended-in-a-draw=La partie s'est termin\u00e9e par un match nul
 theme=Th\u00e8me
 tic-tac-toe=Morpion
+tictactoe1 =Bienvenue dans le jeu du Tic Tac Toe ! Vous pouvez jouer en cliquant sur l\u2019une des 9 cases du plateau. Exemple ci-dessus :
+tictactoe2 =Un joueur gagne en alignant 3 pi\u00e8ces \u2013 horizontalement, verticalement ou en diagonale. Dans l\u2019exemple ci-dessus, le joueur gagne avec une diagonale de trois pi\u00e8ces.
 to-a-game-of=\u00e0 une partie de
+tutorial=Veux-tu voir un tutoriel pour ce jeu\u00a0?
 volume=Volume
 windowed=Fen\u00eatrr\u00e9
 yes=Oui
 you-lost-against=Vous avez perdu contre
 you-were-challenged-by=Vous avez \u00e9t\u00e9 d\u00e9fi\u00e9 par
 you-win=Vous avez gagn\u00e9
+>=>
+<=<
+connect4.1=Bienvenue dans le jeu Connect 4 ! Vous pouvez effectuer un mouvement en cliquant sur l'une des colonnes. Le mouvement sera plac<61> dans la ligne la plus basse de cette colonne qui n'est pas encore remplie.  
+connect4.2=Vous pouvez gagner en alignant 4 pions de votre couleur horizontalement, diagonalement ou verticalement ! Voir l'exemple ci-dessus.  
+reversi1=Bienvenue dans le jeu Reversi ! Vous pouvez jouer en cliquant sur l'un des points l<>g<EFBFBD>rement transparents.  
+reversi2=Cliquer sur un point retournera tous les pions entre le point plac<61> et le prochain point trouv<75>. Voir l'exemple ci-dessus, o<> le jaune indique les pions <20> retourner.  
+reversi3=Votre tour peut <20>tre saut<75> s'il n'y a pas de coup l<>gal. Cela permettra <20> votre adversaire de jouer jusqu'<27> ce que vous ayez un coup l<>gal.  
+reversi4=Le joueur qui a le plus de pions <20> la fin du jeu gagne.  
+tutorialstring=Tutoriel
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabe)
 chinese=\u4e2d\u6587 (Chinois)

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

@@ -9,6 +9,8 @@ computer-difficulty=\u0915\u0902\u092a\u094d\u092f\u0942\u091f\u0930 \u0915\u094
 computer-think-time=\u0915\u0902\u092a\u094d\u092f\u0942\u091f\u0930 \u091a\u093f\u0902\u0924\u0928 \u0938\u092e\u092f
 computer=\u0915\u0902\u092a\u094d\u092f\u0942\u091f\u0930
 connect=\u091c\u094b\u095c\u0947\u0902
+connect4=Connect 4
+
 credits=\u0915\u094d\u0930\u0947\u0921\u093f\u091f\u094d\u0938
 dark=\u0917\u0939\u0930\u093e
 deny=\u0907\u0902\u0915\u093e\u0930
@@ -41,6 +43,7 @@ merge-commander=\u092e\u0930\u094d\u091c \u0915\u092e\u093e\u0902\u0921\u0930
 moral-support=\u0928\u0948\u0924\u093f\u0915 \u0938\u0939\u093e\u0930\u093e
 music-volume=\u0938\u0902\u0917\u0940\u0924 \u0935\u0949\u0932\u094d\u092f\u0942\u092e
 name=\u0928\u093e\u092e
+never=\u0928\u0939\u0940\u0902, \u092e\u0948\u0902 \u0915\u092c\u094d\u0939\u0940 \u092d\u0940 \u0915\u094b\u0908 \u091f\u094d\u092f\u0942\u091f\u094b\u0930\u093f\u092f\u0932 \u0928\u0939\u0940\u0902 \u0926\u0947\u0916\u0928\u093e \u091a\u093e\u0939\u0924\u093e/\u091a\u093e\u0939\u0924\u0940\u0964
 no=\u0928\u0939\u0940\u0902
 ok=\u0920\u0940\u0915 \u0939\u0948
 online=\u0911\u0928\u0932\u093e\u0907\u0928
@@ -62,13 +65,25 @@ style=\u0936\u0948\u0932\u0940
 the-game-ended-in-a-draw=\u0916\u0947\u0932 \u091f\u0940\u0915 \u0939\u094b \u0917\u092f\u093e
 theme=\u0925\u0940\u092e
 tic-tac-toe=\u091f\u093f\u0915-\u091f\u0948\u0915-\u091f\u094b
+tictactoe1 =\u091f\u093f\u0915-\u091f\u0948\u0915-\u091f\u094b \u0915\u0947 \u0916\u0947\u0932 \u092e\u0947\u0902 \u0906\u092a\u0915\u093e \u0938\u094d\u0935\u093e\u0917\u0924 \u0939\u0948! \u0906\u092a \u092c\u094b\u0930\u094d\u0921 \u092a\u0930 \u0915\u093f\u0938\u0940 \u092d\u0940 9 \u0916\u093e\u0928\u0947 \u092a\u0930 \u0915\u094d\u0932\u093f\u0915 \u0915\u0930\u0915\u0947 \u0905\u092a\u0928\u0940 \u091a\u093e\u0932 \u091a\u0932 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \u090a\u092a\u0930 \u0926\u093f\u092f\u093e \u0917\u092f\u093e \u0909\u0926\u093e\u0939\u0930\u0923 \u0926\u0947\u0916\u0947\u0902:
+tictactoe2 =\u0915\u094b\u0908 \u0916\u093f\u0932\u093e\u0921\u093c\u0940 \u0924\u092c \u091c\u0940\u0924\u0924\u093e \u0939\u0948 \u091c\u092c \u0935\u0939 \u092a\u0948 \u092a\u0902\u0915\u094d\u0924\u093f \u092e\u0947\u0902 \u0924\u0940\u0928 \u0928\u093f\u0936\u093e\u0928 \u090f\u0915 \u092a\u0902\u0915\u094d\u0924\u093f \u092e\u0947\u0902 \u0932\u0917\u093e \u0926\u0947\u0924\u093e \u0939\u0948 ? \u0915\u094d\u0937\u0948\u0924\u093f\u091c, \u090a\u0930\u094d\u0927\u094d\u0935\u093e\u0927\u0930 \u092f\u093e \u0924\u093f\u0930\u091b\u0947\u0964 \u090a\u092a\u0930 \u0909\u0926\u093e\u0939\u0930\u0923 \u092e\u0947\u0902, \u0916\u093f\u0932\u093e\u0921\u093c\u0940 \u0924\u093f\u0930\u091b\u0940 \u092a\u0902\u0915\u094d\u0924\u093f \u092e\u0947\u0902 \u0924\u093f\u0930\u091b\u0940 \u092a\u0902\u0915\u094d\u0924\u093f \u0938\u0947 \u091c\u0940\u0924\u0924\u093e \u0939\u0948\u0964
 to-a-game-of=\u0916\u0947\u0932 \u0915\u0940 \u090f\u0915 \u0916\u0947\u0932 \u0915\u0940 \u0913\u0930
+tutorial=\u0915\u094d\u092f\u093e \u0906\u092a \u0907\u0938 \u0917\u0947\u092e \u0915\u0947 \u0932\u093f\u090f \u0915\u094b\u0908 \u091f\u094d\u092f\u0942\u091f\u094b\u0930\u093f\u092f\u0932 \u0926\u0947\u0916\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902?
 volume=\u0935\u0949\u0932\u094d\u092f\u0942\u092e
 windowed=\u0935\u093f\u0902\u0921\u094b \u092e\u094b\u0921
 yes=\u0939\u093e\u0901
 you-lost-against=\u0906\u092a \u0939\u093e\u0930 \u0917\u090f
 you-were-challenged-by=\u0906\u092a\u0915\u094b \u091a\u0941\u0928\u094c\u0924\u0940 \u0926\u0940 \u0917\u0908
 you-win=\u0906\u092a \u091c\u0940\u0924 \u0917\u090f
+>=>
+<=<
+connect4.1=\u0915\u0928\u094d\u0928\u0947 \u0915\u0940 \u091c\u0948 \u0915\u0947 \u091c\u094c\u0915 \u0915\u0928\u0947\u0915\u094d\u091f 4 \u092e\u0947\u0902! \u0906\u092a \u0915\u0940 \u091a\u0948\u0928 \u092a\u0932\u0938 \u092a\u0928\u094d\u0928 \u0928\u093e\u092e\u094d\u092c\u0921\u093e\u0928\u0947 \u0915\u0940 \u092f\u094b\u0917\u0924\u0940 \u092e\u0947\u0902 \u0915\u0940 \u0928\u093f\u091a\u094d\u091a\u0942\u0928 \u0915\u0940 \u0924\u0939 \u091a\u093f\u0928 \u092a\u0924\u093f \u0928\u0939\u0940\u0902 \u0926\u0947 \u092c\u0924\u0940.  
+connect4.2=\u092a\u093e\u0902\u091a \u092e\u0946\u092c\u0921 \u0915\u0940 \u092a\u0930\u092a\u0930\u092f\u094d\u0928 \u092d\u093e\u0935\u0940 \u0938\u0947 4 \u092a\u093f\u0938 \u0924\u093e\u0924\u093e \u0915\u0940 \u0930\u094f\u0936\u0942 \u0938\u0940\u0926\u094d\u0927 \u092e\u0947\u0902 \u092a\u0940\u0928\u094d\u0928\u094b\u0902 \u0915\u0940 \u092e\u093e\u0928\u094d\u0926\u0930 \u0939\u0940.  
+reversi1=\u0915\u0928\u094d\u0928\u0947 \u0915\u0940 \u091c\u0948 \u0910 \u0930\u0947\u0935\u0930\u094d\u0938\u0940 \u092e\u0947\u0902 \u0926\u0948\u091a \u092c\u0922\u093e\u0928 \u0915\u0940 \u092a\u0924\u094d\u0928 \u092a\u0930 \u092a\u094d\u0932\u0947 \u0916\u0942\u0928\u0947 \u0915\u0940 \u092a\u094d\u0930\u092f\u0948\u0915\u0944 \u0915\u0930\u0948\u0902.  
+reversi2=\u0915\u093f\u0938 \u092a\u0930 \u092a\u093f\u0938 \u092a\u0948\u0918 \u0915\u0940 \u091a\u0928 \u092e\u0947\u0902 \u0938\u092e\u093e\u0930\u094e \u092a\u093f\u0938 \u092a\u0940\u0918 \u092e\u0947\u0902 \u092a\u0930\u093f\u0923\u0924 \u0915\u093e \u092a\u0930\u093f\u0928\u0942\u0924\u0940 \u0915\u0940 \u092a\u094d\u0930\u0924\u093f \u092a\u0941\u0928\u0940 \u092a\u0930\u093f\u0928\u094d\u0924 \u0915\u0940 \u092a\u0940\u0938 \u092a\u0930\u094d\u092f\u0928\u0947 \u091c\u093e\u0902\u0918\u0942.  
+reversi3=\u092f\u0939 \u092a\u0930\u094d\u092f \u0938\u0947 \u0938\u0947\u091a \u0915\u0940 \u091c\u093e\u0902\u091c \u0928\u0939\u0940\u0902 \u0939\u0948 \u0914\u0938\u0924\u0947 \u0915\u0948 \u092a\u0948\u0928 \u092a\u0930\u094d\u092f \u0939\u0948 \u0914\u092a\u0915\u0940 \u0915\u0940 \u092a\u0932\u0947 \u092d\u0942\u0924 \u0915\u0940 \u0906\u0927\u093e \u092a\u0948\u0928 \u091c\u093e\u0902\u091c \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902.  
+reversi4=\u0916\u0941\u092f \u0915\u093f \u0915\u0940 \u0928\u093f\u092e\u0940 \u092e\u0947\u0902 \u091a\u093e\u0932 \u0938\u092c\u0938\u0947 \u091a\u0942\u0928\u094d\u0928\u0947 \u0939\u0948, \u0935\u0949 \u0915\u0947 \u092e\u093e\u0924\u094d\u0930 \u091c\u0940\u0924\u0947 \u0939\u0948.  
+tutorialstring=\u0924\u0942\u091f\u0949\u0930\u093f\u092f\u0932
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0905\u0930\u092c\u0940)
 chinese=\u4e2d\u6587 (\u091a\u0940\u0928\u0940)

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

@@ -9,6 +9,7 @@ computer-difficulty=Difficolt\u00e0 del computer
 computer-think-time=Tempo di riflessione del computer
 computer=Computer
 connect=Connetti
+connect4=Connect 4
 credits=Crediti
 dark=Scuro
 deny=Nega
@@ -41,6 +42,7 @@ merge-commander=Merge Commander
 moral-support=Supporto morale
 music-volume=Volume della musica
 name=Nome
+never=No, non voglio mai vedere alcun tutorial.
 no=No
 ok=OK
 online=Online
@@ -62,13 +64,25 @@ style=Stile
 the-game-ended-in-a-draw=La partita \u00e8 terminata in parit\u00e0
 theme=Tema
 tic-tac-toe=Tris
+tictactoe1 =Benvenuto nel gioco del Tris! Puoi fare la tua mossa cliccando su uno dei 9 quadrati della griglia. Esempio sopra:
+tictactoe2 =Un giocatore vince mettendo 3 simboli in fila ? orizzontalmente, verticalmente o diagonalmente. Nell?esempio sopra, il giocatore vince con una fila diagonale di tre simboli.
 to-a-game-of=a una partita di
+tutorial=Vuoi vedere un tutorial per questo gioco?
 volume=Volume
 windowed=Finestra
 yes=S\u00ec
 you-lost-against=Hai perso contro
 you-were-challenged-by=Sei stato sfidato da
 you-win=Hai vinto
+>=>
+<=<
+connect4.1=Benvenuto nel gioco Connect 4! Puoi fare una mossa cliccando su una delle colonne. La mossa sar<61> posizionata nella riga pi<70> bassa di quella colonna che non <20> ancora piena.  
+connect4.2=Puoi vincere ottenendo 4 pedine del tuo colore in orizzontale, diagonale o verticale! Guarda l'esempio sopra.  
+reversi1=Benvenuto nel gioco Reversi! Puoi fare una mossa cliccando su uno dei punti leggermente trasparenti.  
+reversi2=Cliccando su un punto, tutti i pezzi tra dove metti il punto e il prossimo punto trovato verranno girati. Guarda l'esempio sopra, dove il giallo indica i pezzi da girare.  
+reversi3=Il tuo turno pu<70> essere saltato se non ci sono mosse legali. Questo permetter<65> al tuo avversario di giocare fino a quando non avrai un'opportunit<69> legale.  
+reversi4=Il giocatore che alla fine del gioco ha pi<70> pezzi sulla scacchiera vince.  
+tutorialstring=Tutorial
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabo)
 chinese=\u4e2d\u6587 (Cinese)

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

@@ -9,6 +9,7 @@ computer-difficulty=\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306e\u96e3\u6613\u5ea6
 computer-think-time=\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306e\u601d\u8003\u6642\u9593
 computer=\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf
 connect=\u63a5\u7d9a
+connect4=Connect 4
 credits=\u30af\u30ec\u30b8\u30c3\u30c8
 dark=\u30c0\u30fc\u30af
 deny=\u62d2\u5426
@@ -41,6 +42,7 @@ merge-commander=\u30de\u30fc\u30b8\u30b3\u30de\u30f3\u30c0\u30fc
 moral-support=\u30e1\u30f3\u30bf\u30eb\u30b5\u30dd\u30fc\u30c8
 music-volume=\u97f3\u697d\u97f3\u91cf
 name=\u540d\u524d
+never=\u3044\u3044\u3048\u3001\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u4e8c\u5ea6\u3068\u898b\u305f\u304f\u3042\u308a\u307e\u305b\u3093\u3002
 no=\u3044\u3044\u3048
 ok=OK
 online=\u30aa\u30f3\u30e9\u30a4\u30f3
@@ -62,13 +64,25 @@ style=\u30b9\u30bf\u30a4\u30eb
 the-game-ended-in-a-draw=\u30b2\u30fc\u30e0\u306f\u5f15\u304d\u5206\u3051\u306b\u7d42\u308f\u308a\u307e\u3057\u305f
 theme=\u30c6\u30fc\u30de
 tic-tac-toe=\u4e09\u76ee\u4e26\u3079
+tictactoe1 =\u4e09\u76ee\u4e26\u3079\u306e\u30b2\u30fc\u30e0\u3078\u3088\u3046\u3053\u305d\uff01\u30dc\u30fc\u30c9\u4e0a\u306e9\u3064\u306e\u30de\u30b9\u306e\u3044\u305a\u308c\u304b\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u624b\u3092\u6253\u3061\u307e\u3057\u3087\u3046\u3002\u4e0a\u306e\u4f8b\u3092\u53c2\u7167\uff1a
+tictactoe2 =\u30d7\u30ec\u30a4\u30e4\u30fc\u306f\u3001\u6a2a\u30fb\u7e26\u30fb\u65b9\u5411\u306e\u3044\u305a\u308c\u304b\u3067\u30de\u30fc\u30af\u30923\u3064\u4e26\u3079\u308b\u3068\u52dd\u3061\u3067\u3059\u3002\u4e0a\u306e\u4f8b\u3067\u306f\u3001\u30d7\u30ec\u30a4\u30e4\u30fc\u304c\u659c\u3081\u306b3\u3064\u4e26\u3079\u3066\u52dd\u3063\u3066\u3044\u307e\u3059\u3002
 to-a-game-of=\u30b2\u30fc\u30e0\u306b
+tutorial=\u3053\u306e\u30b2\u30fc\u30e0\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u898b\u305f\u3044\u3067\u3059\u304b\uff1f
 volume=\u97f3\u91cf
 windowed=\u30a6\u30a3\u30f3\u30c9\u30a6\u8868\u793a
 yes=\u306f\u3044
 you-lost-against=\u3042\u306a\u305f\u306f ... \u306b\u6557\u308c\u307e\u3057\u305f
 you-were-challenged-by=\u3042\u306a\u305f\u306f ... \u304b\u3089\u6311\u6226\u3055\u308c\u307e\u3057\u305f
 you-win=\u52dd\u5229\u3067\u3059
+>=>
+<=<
+connect4.1=\u30b3\u30cd\u30af\u30c84\u306e\u30b2\u30fc\u30e0\u3078\u3088\u3046\u3053\u305d! \u30ab\u30e9\u30e0\u306e\u4e0a\u306e\u30ab\u30e9\u30e0\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u52d5\u304b\u3057\u3092\u884c\u3048\u307e\u3059\u3002\u52d5\u304b\u3057\u306f\u3001\u3060\u307e\u308a\u306f\u307e\u3067\u5869\u3067\u306a\u3044\u884c\u306b\u8a2d\u7f6e\u3055\u308c\u307e\u3059\u3002  
+connect4.2=\u6a2a\u7dda\u3001\u65b9\u5411\u306e\u307f\u3082\u306a\u3057\u3067\u30014\u3064\u306e\u8ca0\u3051\u3092\u7d50\u5408\u3055\u305b\u308b\u3068\u52dd\u3061\u307e\u3059! \u4e0a\u306e\u4f8b\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002  
+reversi1=\u30ea\u30d0\u30fc\u30b7\u30fb\u30b2\u30fc\u30e0\u3078\u3088\u3046\u3053\u305d! \u30ab\u30e9\u30e0\u306e\u30b9\u30dd\u30c3\u30c8\u30c9\u30c3\u30c8\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u52d5\u304b\u3057\u306e\u30d7\u30ec\u30a4\u304c\u3067\u304d\u307e\u3059\u3002  
+reversi2=\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u3064\u306a\u304c\u308a\u3092\u542b\u3081\u305f\u8ca0\u3051\u304c\u307e\u3067\u306e\u8ca0\u3051\u304c\u5909\u308f\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002  
+reversi3=\u6b21\u306e\u52d5\u304b\u3057\u304c\u306a\u3044\u5834\u5408\u3001\u8a8d\u5b9a\u3055\u308c\u305f\u52d5\u304b\u3057\u306e\u6642\u9593\u306f\u62d2\u7d76\u3055\u308c\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002  
+reversi4=\u672c\u6b21\u306b\u30dc\u30fc\u30c9\u4e0a\u3067\u6700\u591a\u306e\u8ca0\u3051\u3092\u6301\u3064\u30d7\u30ec\u30a4\u30e4\u30fc\u304c\u52dd\u3061\u307e\u3059\u3002  
+tutorialstring=\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u30a2\u30e9\u30d3\u30a2\u8a9e)
 chinese=\u4e2d\u6587 (\u4e2d\u6587)

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

@@ -9,6 +9,7 @@ computer-difficulty=\uCEF4\uD4E8\uD130 \uC5B4\uB9AC\uAE30
 computer-think-time=\uCEF4\uD4E8\uD130 \uC0DD\uAC01 \uC2DC\uAC04
 computer=\uCEF4\uD4E8\uD130
 connect=\uC5F0\uACB0
+connect4=Connect 4
 credits=\uD06C\uB808\uB527
 dark=\uC5B4\uB460
 deny=\uAC70\uBD80
@@ -42,6 +43,7 @@ moral-support=\uC815\uC2E0\uC801 \uC9C0\uC6D0
 music-volume=\uC74C\uC545 \uBCFC\uB968
 name=\uC774\uB984
 no=\uC544\uB2C8\uC624
+never=\uc544\ub2c8\uc694, \uc800\ub294 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub2e4\uc2dc\ub294 \ubcf4\uace0 \uc2f6\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
 ok=\uD655\uC778
 online=\uC628\uB77C\uC778
 opengl=OpenGL
@@ -62,13 +64,25 @@ style=\uC2A4\uD0C0\uC77C
 the-game-ended-in-a-draw=\uAC8C\uC784\uC774 \uBB34\uC2B9\uBD80\uB85C \uC885\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4
 theme=\uC8FC\uC81C
 tic-tac-toe=\uD2F0\uD06C\uD0D1\uD1A0
+tictactoe1 =\ud2f1\ud0dd\ud1a0 \uac8c\uc784\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4! \ubcf4\ub4dc\uc758 9\uac1c \uce78 \uc911 \ud558\ub098\ub97c \ud074\ub9ad\ud558\uc5ec \uc6c0\uc9c1\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704\uc758 \uc608\uc2dc\ub97c \ucc38\uace0\ud558\uc138\uc694:
+tictactoe2 =\ud50c\ub808\uc774\uc5b4\ub294 \uac00\ub85c, \uc138\ub85c \ub610\ub294 \ub300\uac01\uc120\uc73c\ub85c \ub9d0 3\uac1c\ub97c \uc77c\ub82c\ub85c \ub193\uc73c\uba74 \uc2b9\ub9ac\ud569\ub2c8\ub2e4. \uc704\uc758 \uc608\uc5d0\uc11c \ud50c\ub808\uc774\uc5b4\ub294 \ub300\uac01\uc120\uc73c\ub85c \uc138 \uac1c\ub97c \uc5f0\uacb0\ud558\uc5ec \uc774\uacbc\uc2b5\ub2c8\ub2e4.
 to-a-game-of=... \uAC8C\uC784\uC5D0
+tutorial=\uc774 \uac8c\uc784\uc758 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ubcf4\uace0 \uc2f6\ub098\uc694?
 volume=\uBCFC\uB968
 windowed=\uCC3D \uBAA9\uB85D
 yes=\uB124
 you-lost-against=... \uC5D0\uAC8C \uC9C0\uC600\uC2B5\uB2C8\uB2E4
 you-were-challenged-by=... \uB85C\uBD80\uD130 \uCC38\uC5EC \uC694\uCCAD\uC744 \uBC1B\uC558\uC2B5\uB2C8\uB2E4
 you-win=\uC774\uACBC\uC2B5\uB2C8\uB2E4
+>=>
+<=<
+connect4.1=Connect 4 \uacbd\uc6b0\uc5d0 \uc81c\uc2dc\ud569\ub2c8\ub2e4! \ud648\ub825\uc744 \ub2e4\ub978 \uc0c1\uc704\ub85c \ud074\ub9ad\ud558\uc2dc\uba70 \ub2e4\uc74c \uc815\uc758 \ud648\ub825\uc744 \ub610\ub294 \uc704\ub85c \uc0ac\uc6a9\ud558\uc2dc\uba70 \ud648\ub825\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.  
+connect4.2=\uc0ac\uc6a9\uc790\uc758 \ud648\uc744 \uc54c\ub824 \ud574\uc8fc\uba70 \ud574\ub2f9 \ud648\uc758 4\uae38\uc744 \ud574\uc8fc\uba70 \ud655\uc9c0, \ub354\ub7ec \ubc29\uacfc \ub610\ub294 \uc0ac\uc6a9\uc790 \ud648\uc758 \uc5f4\ub9b0 \ucd5c\ub300 \ubc29\ud574\uc5d0 \uc5c6\uc74c\uc774\ub2e4!  
+reversi1=Reversi \uacbd\uc6b0\uc5d0 \uc81c\uc2dc\ud569\ub2c8\ub2e4! \ub2e4\ub978 \ud615\uc2dd\uc758 \ud648\uc744 \ud074\ub9ad\ud558\uc2dc\uba70 \ub2e4\uc74c \uc815\uc758 \ud648\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.  
+reversi2=\ud074\ub9ad \ud558\uba70, \ub2e4\ub978 \ud648 \uc704\ub85c \ucd5c\uc2e0 \ubc1b\ub294 \ud648\uc5d0 \ub300\ud574 \ub2e4\uc774\ubc84\ub77c\uc758 \ud648\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4.  
+reversi3=\uc0ac\uc6a9\uc790\uc758 \ud648\uc744 \ud074 \uc218 \uc5c6\uc2b5\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \ub2f5\uc5d0 \ub300\ud574 \uc811\ub2c8\ub2e4.  
+reversi4=\uacbd\uc6b0 \uc5d0\uc11c \ucd5c\ub300 \ud648\uc744 \uac00\uc838\ub294 \uc0ac\uc6a9\uc790\uc774 \uc52c\uc544\uc624\uba70 \uc0ac\uc6a9\uc790\uc758 \ud648\uc744 \uc54c\ub824\ud569\ub2c8\ub2e4.  
+tutorialstring=\ud14c\ud2b8\ub9ad
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0639\u0631\u0628\u064a\u0629)
 chinese=\u4e2d\u6587 (\u4e2d\u6587)

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

@@ -41,6 +41,7 @@ merge-commander=Merge Commander
 moral-support=Morele steun
 music-volume=Muziekvolume
 name=Naam
+never=Nee, ik wil nooit tutorials zien.
 no=Nee
 ok=Ok<EFBFBD>
 online=Online
@@ -62,14 +63,26 @@ style=Stijl
 the-game-ended-in-a-draw=Het spel eindigde in een gelijkspel
 theme=Thema
 tic-tac-toe=Boter Kaas en Eieren
+tictactoe1 =Welkom bij het spel Boter, Kaas en Eieren! Je kunt je zet doen door op een van de 9 vakjes op het bord te klikken. Voorbeeld hierboven:
+tictactoe2 =Een speler wint door 3 stukken op een rij te krijgen ? horizontaal, verticaal of diagonaal. In het voorbeeld hierboven wint de speler met een diagonale rij van drie stukken.
 connect4=Vier op een rij
 to-a-game-of=voor een spelletje
+tutorial=Wil je een tutorial voor dit spel zien?
 volume=Volume
 windowed=Venstermodus
 yes=Ja
 you-lost-against=Je hebt verloren van
 you-were-challenged-by=Je bent uitgedaagd door
 you-win=Je wint
+>=>
+<=<
+connect4.1=Welkom bij het spel Connect 4! Je kunt een zet doen door op een van de kolommen te klikken. De zet wordt geplaatst in de laagste nog lege rij van die kolom.  
+connect4.2=Je kunt winnen door 4 van je stukken horizontaal, diagonaal of verticaal op een rij te krijgen! Zie het voorbeeld hierboven.  
+reversi1=Welkom bij het spel Reversi! Je kunt een zet doen door op een van de licht transparante stippen te klikken.  
+reversi2=Door op een stip te klikken draai je alle stukken om tussen de plaats waar je de stip zet en de volgende stip die wordt gevonden. Zie het voorbeeld hierboven, waar geel de stukken zijn die omgedraaid worden.  
+reversi3=Je beurt kan worden overgeslagen als er geen legale zet is. Hierdoor kan je tegenstander doorgaan tot jij een legale zet kunt doen.  
+reversi4=De speler die aan het einde van het spel de meeste stukken op het bord heeft, wint.  
+tutorialstring=Tutorial
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabisch)
 chinese=\u4e2d\u6587 (Chinees)

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

@@ -5,6 +5,7 @@ are-you-sure=\u0412\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b?
 back=\u041d\u0430\u0437\u0430\u0434
 cancel=\u041e\u0442\u043c\u0435\u043d\u0430
 challenge=\u0412\u044b\u0437\u043e\u0432
+connect4=Connect 4
 computer-difficulty=\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430
 computer-think-time=\u0412\u0440\u0435\u043c\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430
 computer=\u041a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440
@@ -41,6 +42,7 @@ merge-commander=Merge Commander
 moral-support=\u041c\u043e\u0440\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430
 music-volume=\u0413\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c \u043c\u0443\u0437\u044b\u043a\u0438
 name=\u0418\u043c\u044f
+never=\u041d\u0435\u0442, \u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0445\u043e\u0447\u0443 \u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0438.
 no=\u041d\u0435\u0442
 ok=OK
 online=\u0412 \u0441\u0435\u0442\u0438
@@ -62,13 +64,25 @@ style=\u0421\u0442\u0438\u043b\u044c
 the-game-ended-in-a-draw=\u0418\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0438\u0447\u044c\u0435\u0439
 theme=\u0422\u0435\u043c\u0430
 tic-tac-toe=\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u043e
+tictactoe1 =\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u0438\u0433\u0440\u0443 \u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438! \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0445\u043e\u0434, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 9 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043e\u0432 \u043d\u0430 \u043f\u043e\u043b\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0448\u0435:
+tictactoe2 =\u0418\u0433\u0440\u043e\u043a \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u0441\u0442\u0430\u0432\u0438\u0442 3 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e\u0434\u0440\u044f\u0434 ? \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438\u043b\u0438 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0433\u0440\u043e\u043a \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438
 to-a-game-of=\u043a \u0438\u0433\u0440\u0435 \u0432
+tutorial=\u0425\u043e\u0447\u0435\u0448\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0443\u0447\u0435\u0431\u043d\u0438\u043a \u043f\u043e \u044d\u0442\u043e\u0439 \u0438\u0433\u0440\u0435?
 volume=\u0413\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c
 windowed=\u041e\u043a\u043d\u043e
 yes=\u0414\u0430
 you-lost-against=\u0412\u044b \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043b\u0438 \u043a\u043e\u043c\u0443
 you-were-challenged-by=\u0412\u0430\u0441 \u0432\u044b\u0437\u0432\u0430\u043b \u043d\u0430 \u0441\u043e\u0440\u0435\u0432\u043d\u0438\u043a
 you-win=\u0412\u044b \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0435
+>=>
+<=<
+connect4.1=\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u0438\u0433\u0440\u0443 Connect 4! \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0445\u043e\u0434, \u043a\u043b\u0438\u043a\u043d\u0443\u044f \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432. \u0425\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d \u0432 \u043d\u0438\u0436\u0430\u0439 \u043d\u0435\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435.  
+connect4.2=\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0432 4 \u0444\u0438\u0448\u043a\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e!  
+reversi1=\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u0438\u0433\u0440\u0443 Reversi! \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0445\u043e\u0434, \u043a\u043b\u0438\u043a\u043d\u0443\u044f \u043f043 \u043f043 \u043d043 \u043e043 \u043d043 \u043e043 \u043a043 \u0430043 \u043a043 \u0430043.  
+reversi2=\u041d043 \u043d043 \u0430043 \u043a043 \u0430043 \u043a043 \u043e043 \u043c043 \u0435043 \u0436043 \u0435043 \u0434043 \u0435043 \u043d043 \u0430043.  
+reversi3=\u0412043 \u0430043 \u0436043 \u0434043 \u0430043 \u043d043 \u0438043 \u043d043 \u0435043 \u0435043 \u0432043 \u0430043.  
+reversi4=\u0418043 \u0433043 \u0440043 \u043e043 \u043a043 \u043e043 \u0442043 \u043e043 \u0442043 \u043e043 \u0435043 \u0435043 \u0430043 \u0435043 \u043d043 \u0438043 \u0435043 \u0435043 \u043c043 \u0430043.  
+tutorialstring=\u0423\u0447\u0435\u0431\u043d\u0438\u043a
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0439)
 chinese=\u4e2d\u6587 (\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439)

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

@@ -9,6 +9,7 @@ computer-difficulty=\u8ba1\u7b97\u673a\u96be\u5ea6
 computer-think-time=\u8ba1\u7b97\u673a\u601d\u8003\u65f6\u95f4
 computer=\u8ba1\u7b97\u673a
 connect=\u8fde\u63a5
+connect4=Connect 4
 credits=\u81f4\u8c22
 dark=\u6697\u8272
 deny=\u62d2\u7edd
@@ -41,6 +42,7 @@ merge-commander=\u5408\u5e76\u6307\u6325
 moral-support=\u7cbe\u795e\u652f\u6301
 music-volume=\u97f3\u4e50\u97f3\u91cf
 name=\u540d\u5b57
+never=\u4e0d\uff0c\u6211\u5b8c\u5168\u4e0d\u60f3\u518d\u770b\u5230\u4efb\u4f55\u6559\u7a0b\u3002
 no=\u4e0d
 ok=\u786e\u5b9a
 online=\u5728\u7ebf
@@ -62,13 +64,25 @@ style=\u98ce\u683c
 the-game-ended-in-a-draw=\u6e38\u620f\u4ee5\u548c\u5c40\u7ed3\u675f
 theme=\u4e3b\u9898
 tic-tac-toe=\u4e09\u5b9a\u7ebf
+tictactoe1 =\u6b22\u8fce\u6765\u5230\u4e95\u5b57\u68cb\u6e38\u620f\uff01\u4f60\u53ef\u4ee5\u901a\u8fc7\u70b9\u51fb\u68cb\u76d8\u4e0a\u4efb\u610f\u4e00\u4e2a\u4e5d\u4e2a\u65b9\u683c\u6765\u843d\u5b50\u3002\u4e0a\u65b9\u793a\u4f8b\uff1a
+tictactoe2 =\u73a9\u5bb6\u5728\u6a2a\u3001\u7ad6\u6216\u659c\u7ebf\u4e0a\u8fde\u7eed\u653e\u7f6e\u4e09\u4e2a\u68cb\u5b50\u5373\u53ef\u83b7\u80dc\u3002\u5728\u4e0a\u65b9\u7684\u793a\u4f8b\u4e2d\uff0c\u73a9\u5bb6\u901a\u8fc7\u659c\u7ebf\u4e0a\u7684\u4e09\u4e2a\u68cb\u5b50\u83b7\u80dc\u4e86\u6bd4\u8d5b\u3002
 to-a-game-of=\u6311\u6218\u4e00\u573a
+tutorial=\u4f60\u60f3\u770b\u8fd9\u4e2a\u6e38\u620f\u7684\u6559\u7a0b\u5417\uff1f
 volume=\u97f3\u91cf
 windowed=\u7a97\u53e3\u6a21\u5f0f
 yes=\u662f
 you-lost-against=\u60a8\u8f93\u7ed9\u4e86
 you-were-challenged-by=\u60a8\u88ab\u6311\u6218\u81ea
 you-win=\u60a8\u83b7\u80dc\u4e86
+>=>
+<=<
+connect4.1=\u6b22\u8fce\u6765\u5230 Connect 4 \u6e38\u620f! \u4f60\u53ef\u4ee5\u70b9\u51fb\u4e00\u5217\u6761\u76ee\u64cd\u4f5c. \u64cd\u4f5c\u5c06\u88c5\u7f6e\u5728\u672a\u88c5\u5165\u7684\u6700\u4f4e\u884c.  
+connect4.2=\u5982\u679c\u5f97\u52304\u4e2a\u5bf9\u5e94\u7684\u4ee3\u7406\u7ec4\u6210\u6c34\u5e73\u3001\u5347\u5e26\u6216\u5782\u76f4\u5373\u53ef\u80dc. \u770b\u4e0a\u65b9\u793a\u4f8b.  
+reversi1=\u6b22\u8fce\u6765\u5230 Reversi \u6e38\u620f! \u4f60\u53ef\u4ee5\u70b9\u51fb\u4e00\u4e2a\u9ed8\u8272\u5149\u900f\u7a7a\u70b9\u64cd\u4f5c.  
+reversi2=\u70b9\u51fb\u4e00\u4e2a\u70b9\u65f6\u5c06\u5c06\u6240\u6709\u4e2d\u95f4\u7684\u4ee3\u7406\u7ffb\u8f6c\u3002 \u770b\u4e0a\u65b9\u793a\u4f8b\uff0c\u9ec4\u8272\u662f\u5bf9\u4ee3\u7406\u9700\u64ad\u7684\u4ee3\u7406.  
+reversi3=\u5982\u679c\u6ca1\u6709\u5408\u6cd5\u64cd\u4f5c\u4f60\u7684\u8fdb\u6b65\u53ef\u80fd\u88ab\u5ffd\u7565. \u8fd9\u4f1a\u8ba9\u5bf9\u624b\u518d\u6b21\u64cd\u4f5c\u5230\u4f60\u6709\u5408\u6cd5\u64cd\u4f5c\u65f6.  
+reversi4=\u672c\u6e38\u620f\u7ed3\u675f\u65f6\u8d62\u5f97\u6ee1\u8fc7\u76d8\u9762\u7684\u4ee3\u7406\u6570\u6700\u591a\u7684\u4eba\u5c31\u80dc.  
+tutorialstring=\u6559\u7a0b
 
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u963f\u62c9\u4f2f\u8bed)
 chinese=\u4e2d\u6587

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

@@ -49,3 +49,8 @@
 	-fx-font-size: 22px;
 	-fx-font-weight: normal;
 }
+
+.image {
+    -fx-max-width: 200px;
+    -fx-max-height: 200px;
+}

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

@@ -49,3 +49,8 @@
 	-fx-font-size: 16px;
 	-fx-font-weight: normal;
 }
+
+.image {
+    -fx-max-width: 200px;
+    -fx-max-height: 200px;
+}

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

@@ -49,3 +49,8 @@
 	-fx-font-size: 12px;
 	-fx-font-weight: normal;
 }
+
+.image {
+    -fx-max-width: 200px;
+    -fx-max-height: 200px;
+}

framework/src/main/java/org/toop/framework/resource/resources/JsonAsset.java

@@ -14,7 +14,7 @@ public class JsonAsset<T> extends BaseResource implements LoadableResource {
 
     private T content;
     private Class<T> type;
-    private final Gson gson = new GsonBuilder().setPrettyPrinting().create();
+    private final Gson gson = new GsonBuilder().serializeNulls().setPrettyPrinting().create();
 
     public JsonAsset(File file, Class<T> type) {
         super(file);

framework/src/main/java/org/toop/framework/resource/resources/SettingsAsset.java

@@ -38,6 +38,22 @@ public class SettingsAsset extends JsonAsset<Settings> {
         return getContent().layoutSize;
     }
 
+    public Boolean getTutorialFlag() {
+        return getContent().showTutorials;
+    }
+
+    public Boolean getFirstTTT() {
+        return getContent().firstTTT;
+    }
+
+    public Boolean getFirstConnect4() {
+        return getContent().firstConnect4;
+    }
+
+    public Boolean getFirstReversi() {
+        return getContent().firstReversi;
+    }
+
     public void setVolume(int volume) {
         getContent().volume = volume;
         save();
@@ -72,4 +88,24 @@ public class SettingsAsset extends JsonAsset<Settings> {
         getContent().layoutSize = layoutSize;
         save();
     }
+
+    public void setTutorialFlag(boolean tutorialFlag) {
+        getContent().showTutorials = tutorialFlag;
+        save();
+    }
+
+    public void setFirstTTT(boolean firstTTT) {
+        getContent().firstTTT = firstTTT;
+        save();
+    }
+
+    public void setFirstConnect4(boolean firstConnect4) {
+        getContent().firstConnect4 = firstConnect4;
+        save();
+    }
+
+    public void setFirstReversi(boolean firstReversi) {
+        getContent().firstReversi = firstReversi;
+        save();
+    }
 }

framework/src/main/java/org/toop/framework/settings/Settings.java

@@ -8,4 +8,9 @@ public class Settings {
     public int volume = 100;
     public int fxVolume = 20;
     public int musicVolume = 15;
+    public Boolean showTutorials;
+    public Boolean firstReversi;
+    public Boolean firstTTT;
+    public Boolean firstConnect4;
+
 }