Design
Below are our screens with descriptions for our Design Milestone: Color Scheme: 852221
This is the screen when you first open the app. It contains the name of our app and a function to move to the next screen. Once you tap the screen, you will be taken to the Main Menu.
This is our app's Main Menu screen. From here, you can access the play menu, analysis, and settings. The Play button will take you to the Play Menu, the Analysis button will take you to the analysis screen, and the Settings button will take you to the settings screen.
This is the Play Menu. On this screen, you can choose whether to play between 2D Chess or 3D Chess. The screen has two other buttons: the Back Button, which will take you to the previous screen, and the Settings Button, which will take you to the Settings Page.
This is the Difficulty Select Screen for the 2D board. Here, you can select between Easy, Medium, and Hard. The screen has two other buttons: the Back Button, which will take you to the previous screen, and the Settings Button, which will take you to the Settings Page.
This is the Difficulty Select Screen for the 3D board. Here, you can select Easy, Medium, or Hard. The screen has two other buttons: the Back Button, which will take you to the previous screen, and the Settings Button, which will take you to the Settings Page.
This screen is the analysis screen after clicking the analysis button. Once you are on this page there are two options, 2d chess and 3d chess. You may go back to the home screen if you would like by clicking the back arrow, and you can click the settings button to access settings.
This is the 2D analysis button screen. You will be able to set up the board on your own will. Pieces will be set up on the board by a drag and drop feature that populates whenever you want to make a change to the board. There will be an option to drag and drop the pieces from both sides when enabled. The app will then suggest best moves based on the color you select. Once you are ready to analyze, you click the button. If you want to open setting/options you can click the 3 bars on the top left to open up a window of options. to flip the screen for visualization purposes, you may flip the board with the button on the top right. If you want to switch colors, you simply select the other option on the bar.
This is the screen to take the photo of the chess board. You will be prompted with advice on the best angles and then can take a photo of the real board
This is the screen when you click the 3D button. You will be able to take a picture of a real life board, and it will simulate a 2d board on your screen. It will then look at each move made from that given position and decide if it was a good move or not. Once you are ready to analyze, you click the button. If you want to open setting/options you can click the 3 bars on the top left to open up a window of options. to flip the screen for visualization purposes, you may flip the board with the button on the top right. If you want to switch colors, you simply select the other option on the bar. If the camera does not pick up the correct image on the 2D board, there will be an option to unlock/edit the board and drag/move pieces to their desired positions, just like the 2D board.
This is the pause screen when you click pause during the analyze functionality. The Resume button will resume the analysis. The Settings button will take you to screen 11 which is the settings menu. The Retake Photo button will allow the user to retake a photo to get proper analysis if it was a bad photo or to take a new photo to analyze a different situation. The Main Menu button will take you to the main menu.
This is the settings screen that can be found through the gear icon on select screens and also from screen 10 by selecting the “settings” button”. Customize Board button takes the user to screen 12. The “Sound” button has a switch which enables or disables the sound in the game.
This is Screen 12 which is the customization screen. The user will have 6 presets to choose from for their board and pieces. Below that, the board preview shows the selected template the user has and will change if they select a new one. This is so the user can see what board they prefer before returing to screen 11 with the arrow in the top left of the screen.
This is the in game screen for the 2d play option. The top left contains the a button that takes you to in game options. The top middle contains the app logo for aesthetic purpose. The middle includes the board for the user to play on against AI. Above and below the board contains the words “Pieces taken:” which is a temporary placeholder until pieces are taken and the taken piece icon will be placed there (the actual app will not have the words). At the bottom of the screen is the feed for moves made.
This is the screen when the user wins the 2d game. It pops up when the game ends and includes two clickable button, the “Rematch” and “Main Menu” button. “Rematch” starts the game back over and “Main Menu” takes you to the menu of the app.
This is the screen when the user loses the 2d game. It pops up when the game ends and includes two clickable button, the “Rematch” and “Main Menu” button. “Rematch” starts the game back over and “Main Menu” takes you to the menu of the app.
This is the screen when the user draws in the 2d game. It pops up when the game ends and includes two clickable button, the “Rematch” and “Main Menu” button. “Rematch” starts the game back over and “Main Menu” takes you to the menu of the app.
This is Screen 17 which will be a pop-up pause menu during any 2d game that is happening. The pop up menu shows up with 4 buttons. The “Resume” button resumes the game. The “Settings” button will take the user back to the settings which is screen 11. The “Restart Game” will allow the user to restart the game. The “Main Menu” will take the user to the main menu.
This is the play screen for the 3d play mode. The left side is the 2d recreation of the irl board. The rop right side is the camera’s view of the board. The bottom right side is the feed of the players move. The options button gives the options of the app in the top right of the screen. The Black and white buttons indicates which side the player is on. This helps with the orientation for the player. There will be a lock button next to the 2d board that toggles on and off to allow the player to move the chess pieces according to the IRL board. This is for if the AI gets the 2d board incorrect. The update feed button is for the AI to capture an image of the 3d board to update the 2d board in the app. The execute button is to update the 2d board again based on the camera and AI capturing the 3d board.
This is the Pause screen during a 3D game. The pop up menu shows up with 4 buttons. The “Resume” button resumes the game. The “Settings” button will take the user back to the settings which is screen 11. The “Restart Game” will allow the user to restart the game. The “Main Menu” will take the user to the main menu.
A victory screen for the user when they win in the 3d play mode. Victory is decided when the player checkmates the bot. There will be an options button in the top right for the user to return to main menu and etc. The options button gives the options of the app in the top right of the screen. The Black and white buttons indicates which side the player is on. This helps with the orientation for the player. Also, if the AI gets the 2d board wrong from the 3d board, then they can press the redo button to retake the photo for the AI to get the board right. There will be a lock button next to the 2d board that toggles on and off to allow the player to move the chess pieces according to the IRL board. This is for if the AI gets the 2d board incorrect. The update feed button is for the AI to capture an image of the 3d board to update the 2d board in the app. The execute button is to update the 2d board again based on the camera and AI capturing the 3d board.
A defeat screen for the user when they lose in the 3d play mode. A defeat screen will pop up when the player gets checkmated by the bot. There will be an options button in the top right for the user to return to main menu and etc. The options button gives the options of the app in the top right of the screen. The Black and white buttons indicates which side the player is on. This helps with the orientation for the player. Also, if the AI gets the 2d board wrong from the 3d board, then they can press the redo button to retake the photo for the AI to get the board right. There will be a lock button next to the 2d board that toggles on and off to allow the player to move the chess pieces according to the IRL board. This is for if the AI gets the 2d board incorrect. The update feed button is for the AI to capture an image of the 3d board to update the 2d board in the app. The execute button is to update the 2d board again based on the camera and AI capturing the 3d board.
A draw screen for the user when they draw in the 3d play mode. A draw will be decided when a stalemate happens between the two players or there is insufficient material. There will be an options button in the top right for the user to return to main menu and etc. The options button gives the options of the app in the top right of the screen. The Black and white buttons indicates which side the player is on. This helps with the orientation for the player. Also, if the AI gets the 2d board wrong from the 3d board, then they can press the redo button to retake the photo for the AI to get the board right. There will be a lock button next to the 2d board that toggles on and off to allow the player to move the chess pieces according to the IRL board. This is for if the AI gets the 2d board incorrect. The update feed button is for the AI to capture an image of the 3d board to update the 2d board in the app. The execute button is to update the 2d board again based on the camera and AI capturing the 3d board.
This is the same screen as #9, but allows you to retake a photo if needed, and edit the board based on the lock feature.
This is the same screen as #7, but allows you to drag pieces on the board based on lock and unlock settings
This is the same screen as #18, but allows you to drag pieces on the board based on lock and unlock settings