Add screen resolution options

Coteh · Jan 13, 2024 · bbeafdd · bbeafdd
1 parent 81a9a70
commit bbeafdd
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 [![release | v1.0.6](https://img.shields.io/badge/release-v1.0.6-00b2ff.svg)](https://github.com/Coteh/MinesweeperClone/releases/tag/v1.0.6)
 [![Play here](https://img.shields.io/badge/play-here-yellow.svg)](http://coteh.github.io/MinesweeperClone/)
 
-Simple clone of the well-known Minesweeper game. Created using Javascript, Node.js, and PixiJS.
+Simple clone of the well-known Minesweeper game. Created using JavaScript, Node.js, and PixiJS.
 
 ## Features
 - Simple and familiar Minesweeper gameplay

diff --git a/client/gui/render.js b/client/gui/render.js
@@ -19,7 +19,8 @@ var renderer = new PIXI.autoDetectRenderer(800, 600);
 var interactionManager = new PIXI.interaction.InteractionManager(renderer);
 
 //Attach renderer onto the page
-document.body.appendChild(renderer.view);
+const domContainer = document.body.querySelector('div');
+domContainer.appendChild(renderer.view);
 
 //PIXI Variable declarations
 var stage = null;
@@ -82,19 +83,26 @@ var starTex = null;
 var digitTex = new Array(10);
 
 /* Menus */
-var titleMenu = null;
+var mainMenu = null;
+var settingsMenu = null;
 var playBtn = null;
+var settingsBtn = null;
 var highlightBtn = null;
 var holdToFlagBtn = null;
 var revealBoardOnLossBtn = null;
+var canvasSizeBtn = null;
+var fullScreenBtn = null;
+var backBtn = null;
 
 /* Timers */
 var gameTimer = null;
 var gameSeconds = 0;
 
 /* Game Screens */
 var titleScreen = null;
+var mainMenuScreen = null;
 var gameScreen = null;
+var settingsScreen = null;
 
 /* Board Etc. */
 var smileyButton = null;
@@ -124,6 +132,8 @@ var initRenderElements = function () {
     //Initialize screen containers
     gameScreen = new PIXI.Container();
     titleScreen = new PIXI.Container();
+    mainMenuScreen = new PIXI.Container();
+    settingsScreen = new PIXI.Container();
 
     /* Initializing Textures */
     logoTex = PIXI.Texture.fromImage('img/Logo.png');
@@ -218,8 +228,11 @@ var initRenderElements = function () {
     resizeCallbacks.push(gameScreenPlacement);
 
     //Initializing menus
-    titleMenu = new Menu(100, 100, 'Title Menu');
-    titleScreen.addChild(titleMenu.container);
+    mainMenu = new Menu(100, 100, 'Main Menu');
+    mainMenuScreen.addChild(mainMenu.container);
+
+    settingsMenu = new Menu(100, 100, 'Settings Menu');
+    settingsScreen.addChild(settingsMenu.container);
 
     //Initializing menu buttons
     playBtn = new MenuOption('Play Game', FontPrefs.bigButtonFont);
@@ -230,29 +243,37 @@ var initRenderElements = function () {
         displayGameWin(false);
         updateBoard();
         titleScreen.visible = false;
+        mainMenuScreen.visible = false;
         gameScreen.visible = true;
         background.filters = normalBGFilters;
         resizeGame();
     });
     playBtn.setGraphic(uncheckedTex);
 
-    highlightBtn = new CheckBox('Highlight Effect?', FontPrefs.buttonFont);
+    settingsBtn = new MenuOption('Settings', FontPrefs.bigButtonFont);
+    settingsBtn.setPressAction(function () {
+        mainMenuScreen.visible = false;
+        settingsScreen.visible = true;
+    });
+    settingsBtn.setGraphic(uncheckedTex);
+
+    highlightBtn = new CheckBox('Highlight Effect', FontPrefs.buttonFont);
     highlightBtn.setCheckTextures(uncheckedTex, checkedTex);
     highlightBtn.setCheckBoxAction(function (expression) {
         gameOptions.highlightEffect = expression;
         saveGameOptions(gameOptions);
     });
     highlightBtn.setCheck(gameOptions.highlightEffect);
-    titleMenu.addMenuOption(highlightBtn.menuOption);
+    settingsMenu.addMenuOption(highlightBtn.menuOption);
 
-    holdToFlagBtn = new CheckBox('Hold left click to flag?', FontPrefs.buttonFont);
+    holdToFlagBtn = new CheckBox('Hold left click to flag', FontPrefs.buttonFont);
     holdToFlagBtn.setCheckTextures(uncheckedTex, checkedTex);
     holdToFlagBtn.setCheckBoxAction(function (expression) {
         gameOptions.holdToFlag = expression;
         saveGameOptions(gameOptions);
     });
     holdToFlagBtn.setCheck(gameOptions.holdToFlag);
-    titleMenu.addMenuOption(holdToFlagBtn.menuOption);
+    settingsMenu.addMenuOption(holdToFlagBtn.menuOption);
 
     revealBoardOnLossBtn = new CheckBox('Reveal board on loss', FontPrefs.buttonFont);
     revealBoardOnLossBtn.setCheckTextures(uncheckedTex, checkedTex);
@@ -263,9 +284,52 @@ var initRenderElements = function () {
     });
     game.setBoardRevealedOnLoss(gameOptions.revealBoardOnLoss);
     revealBoardOnLossBtn.setCheck(gameOptions.revealBoardOnLoss);
-    titleMenu.addMenuOption(revealBoardOnLossBtn.menuOption);
+    settingsMenu.addMenuOption(revealBoardOnLossBtn.menuOption);
+
+    canvasSizeBtn = new CheckBox('Small canvas size', FontPrefs.buttonFont);
+    canvasSizeBtn.setCheckTextures(uncheckedTex, checkedTex);
+    canvasSizeBtn.setCheckBoxAction(function (expression) {
+        if (expression) {
+            domContainer.classList.add('small');
+        } else {
+            domContainer.classList.remove('small');
+        }
+        gameOptions.smallCanvasSize = expression;
+        saveGameOptions(gameOptions);
+    });
+    if (gameOptions.smallCanvasSize) {
+        domContainer.classList.add('small');
+    }
+    canvasSizeBtn.setCheck(gameOptions.smallCanvasSize);
+    settingsMenu.addMenuOption(canvasSizeBtn.menuOption);
+
+    // Player will need to enable this setting manually due to browser restrictions
+    fullScreenBtn = new CheckBox('Full Screen', FontPrefs.buttonFont);
+    fullScreenBtn.setCheckTextures(uncheckedTex, checkedTex);
+    fullScreenBtn.setCheckBoxAction(function (expression) {
+        if (expression) {
+            renderer.view.requestFullscreen();
+        } else {
+            document.exitFullscreen();
+        }
+    });
+    fullScreenBtn.setCheck(false);
+    settingsMenu.addMenuOption(fullScreenBtn.menuOption);
 
-    titleMenu.addMenuOption(playBtn);
+    document.addEventListener('fullscreenchange', () => {
+        fullScreenBtn.setCheck(document.fullscreenElement != null);
+    });
+
+    backBtn = new MenuOption('Back', FontPrefs.bigButtonFont);
+    backBtn.setPressAction(function () {
+        settingsScreen.visible = false;
+        mainMenuScreen.visible = true;
+    });
+    backBtn.setGraphic(uncheckedTex);
+    settingsMenu.addMenuOption(backBtn);
+
+    mainMenu.addMenuOption(playBtn);
+    mainMenu.addMenuOption(settingsBtn);
 
     //Add Logo
     gameLogoSprite = new PIXI.Sprite(logoTex);
@@ -293,7 +357,10 @@ var initRenderElements = function () {
 
     stage.addChild(gameScreen);
     stage.addChild(titleScreen);
+    stage.addChild(mainMenuScreen);
+    stage.addChild(settingsScreen);
     gameScreen.visible = false;
+    settingsScreen.visible = false;
 
     //Title screen placement
     const titleScreenPlacement = () => {
@@ -303,6 +370,22 @@ var initRenderElements = function () {
     titleScreenPlacement();
     resizeCallbacks.push(titleScreenPlacement);
 
+    //Main Menu screen placement
+    const mainMenuScreenPlacement = () => {
+        mainMenuScreen.x = renderer.width / 3.5;
+        mainMenuScreen.y = 120;
+    };
+    mainMenuScreenPlacement();
+    resizeCallbacks.push(mainMenuScreenPlacement);
+
+    //Settings screen placement
+    const settingsScreenPlacement = () => {
+        settingsScreen.x = renderer.width / 3.5;
+        settingsScreen.y = 120;
+    };
+    settingsScreenPlacement();
+    resizeCallbacks.push(settingsScreenPlacement);
+
     const copyrightPlacement = () => {
         copyrightText.x = 280;
         copyrightText.y = renderer.height - 24 - titleScreen.y;

diff --git a/client/storage/index.js b/client/storage/index.js
@@ -4,6 +4,7 @@ let gameOptions = {
     highlightEffect: false,
     holdToFlag: true,
     revealBoardOnLoss: false,
+    smallCanvasSize: false,
 };
 
 module.exports.loadGameOptions = () => {

diff --git a/index.ejs b/index.ejs
@@ -1,10 +1,29 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>MinesweeperClone</title>
-  <meta charset="utf-8"/>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-</body>
+    <head>
+        <title>MinesweeperClone</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="style.css" />
+        <style>
+            body {
+                margin: 0;
+            }
+
+            .container.small {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100vh;
+            }
+
+            .container.small > canvas {
+                width: 70%;
+                border: 4px solid #000;
+                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+            }
+        </style>
+    </head>
+    <body>
+        <div id="content" class="container"></div>
+    </body>
 </html>