Selection menu

src/client/css/header.css

@@ -8,6 +8,8 @@
     --CBC-out: cubic-bezier(.54,0,1,.97); /* Settings dropdown OUT curve */
     --CBC-CM-in: cubic-bezier(.09,1.61,.36,1); /* Checkmark IN curve */
     --CBC-CM-out: cubic-bezier(0,1.1,1,1); /* Checkmark OUT curve */
+    --CBC-switch-slider: cubic-bezier(0,1.05,.47,1); /* Toggle switch curve */
+    --CBC-switch-color: cubic-bezier(.54,0,1,.97);
 }
 
 header {
@@ -59,7 +61,7 @@ header a {
     animation: spin 0.65s linear infinite; /* Spin animation with continuous loop */
 }
 
-.svg-language, .svg-board, .svg-legalmove, .svg-perspective,
+.svg-language, .svg-board, .svg-legalmove, .svg-perspective, .svg-selection,
 .svg-squares, .svg-mouse, .svg-camera,
 .checkmark {
     width: 19px;
@@ -273,7 +275,7 @@ nav.compact-3 #svg-logout {
     border-bottom: 1px solid grey;
 }
 
-.dropdown-title:hover, .settings-dropdown-item:hover, .language-dropdown-item:hover, .legalmove-option:hover {
+.dropdown-title:hover, .settings-dropdown-item:hover, .language-dropdown-item:hover, .legalmove-option:hover, .selection-option:hover {
     background-color: var(--header-link-hover-color);
 }
 
@@ -320,11 +322,47 @@ span.arrow-head-left {
     transform: scale(0);
 }
 
+.switch {
+    position: relative;
+    --switch-on-color: #737373; /* Default value */
+}
+
+.switch input {
+    visibility: none;
+    width: 0;
+    height: 0;
+}
+
+.switch > input + * {
+    position: absolute;
+    inset: 0;
+    border-radius: 14px;
+    background-color: #0000008c;
+    outline: 2px solid rgb(97, 97, 97);
+    transition: background-color 0.2s var(--CBC-switch-color);
+}
+
+.switch > input + ::before {
+    content: '';
+    display: inline-block;
+    border-radius: 14px;
+    background-color: #000000c4;
+    width: 50%;
+    height: 100%;
+    transition: transform 0.2s var(--CBC-switch-slider), background-color 0.2s linear;
+}
+
+.switch input:checked + ::before {
+    transform: translateX(100%);
+}
+.switch input:checked + * {
+    background-color: var(--switch-on-color);
+}
 
 
 /* Language nested dropdown */
 
-.language-dropdown-item, .legalmove-option {
+.language-dropdown-item, .legalmove-option, .selection-option {
     display:flex;
     align-items: center;
     cursor: pointer;
@@ -386,7 +424,24 @@ span.arrow-head-left {
     padding: 0 15px 0 8px;
 }
 
+/* Selection dropdown */
 
+.selection-option-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 35px;
+}
+
+.selection-option {
+    height: 43px;
+    padding: 0 8px 0 8px;
+}
+
+.selection-option .switch {
+    width: 40px;
+    height: 40%;
+}
 
 /* Perspective dropdown */
 

src/client/scripts/esm/chess/logic/movepiece.js

@@ -59,11 +59,12 @@ import game from '../../game/chess/game.js';
  * - `doGameOverChecks`: Whether to perform game-over checks, such as checkmate or other win conditions.
  * - `concludeGameIfOver`: If true, and `doGameOverChecks` is true, then if this move ends the game, we will not stop the clocks, darken the board, display who won, or play a sound effect.
  * - `animate`: Whether to animate this move.
+ * - `animateSecondary`: Animate the pieces affected by the move without the piece that made the move. Used after dragging the king to castle. Has no effect if `animate` is true.
  * - `updateData`: Whether to modify the mesh of all the pieces. Should be false for simulated moves, or if you're planning on regenerating the mesh after this.
  * - `updateProperties`: Whether to update gamefile properties that game-over algorithms rely on, such as the 50-move-rule's status, or 3-Check's check counter.
  * - `simulated`: Whether you plan on undo'ing this move. If true, the `rewindInfo` property will be added to the `move` for easy restoring of the gamefile's properties when undo'ing the move.
  */
-function makeMove(gamefile, move, { flipTurn = true, recordMove = true, pushClock = true, doGameOverChecks = true, concludeGameIfOver = true, animate = true, updateData = true, updateProperties = true, simulated = false } = {}) {                
+function makeMove(gamefile, move, { flipTurn = true, recordMove = true, pushClock = true, doGameOverChecks = true, concludeGameIfOver = true, animate = true, animateSecondary = false, updateData = true, updateProperties = true, simulated = false } = {}) {                
 	const piece = gamefileutility.getPieceAtCoords(gamefile, move.startCoords);
 	if (!piece) throw new Error(`Cannot make move because no piece exists at coords ${move.startCoords}.`);
 	move.type = piece.type;
@@ -75,7 +76,7 @@ function makeMove(gamefile, move, { flipTurn = true, recordMove = true, pushCloc
 	if (recordMove || updateProperties) deleteEnpassantAndSpecialRightsProperties(gamefile, move.startCoords, move.endCoords);
 
 	let specialMoveMade;
-	if (gamefile.specialMoves[trimmedType]) specialMoveMade = gamefile.specialMoves[trimmedType](gamefile, piece, move, { updateData, animate, updateProperties, simulated });
+	if (gamefile.specialMoves[trimmedType]) specialMoveMade = gamefile.specialMoves[trimmedType](gamefile, piece, move, { updateData, animate, animateSecondary, updateProperties, simulated });
 	if (!specialMoveMade) movePiece_NoSpecial(gamefile, piece, move, { updateData, recordMove, animate, simulated }); // Move piece regularly (no special tag)
 	const wasACapture = move.captured != null;
 

src/client/scripts/esm/chess/logic/specialmove.js

@@ -37,7 +37,7 @@ function getFunctions() {
 // Called when the piece moved is a king.
 // Tests if the move contains "castle" special move, if so it executes it!
 // RETURNS FALSE if special move was not executed!
-function kings(gamefile, piece, move, { updateData = true, animate = true, updateProperties = true, simulated = false } = {}) {
+function kings(gamefile, piece, move, { updateData = true, animate = true, animateSecondary = false, updateProperties = true, simulated = false } = {}) {
 
 	const specialTag = move.castle; // { dir: -1/1, coord }
 	if (!specialTag) return false; // No special move to execute, return false to signify we didn't move the piece.
@@ -55,8 +55,8 @@ function kings(gamefile, piece, move, { updateData = true, animate = true, updat
 	delete gamefile.specialRights[key];
 	movepiece.movePiece(gamefile, pieceToCastleWith, landSquare, { updateData }); // Make normal move
 
-	if (animate) {
-		animation.animatePiece(piece.type, piece.coords, move.endCoords); // King
+	if (animate) animation.animatePiece(piece.type, piece.coords, move.endCoords); // King
+	if (animate || animateSecondary) {
 		const resetAnimations = false;
 		animation.animatePiece(pieceToCastleWith.type, pieceToCastleWith.coords, landSquare, undefined, resetAnimations); // Castled piece
 	}

src/client/scripts/esm/components/header/dropdowns/selectiondropdown.js

@@ -0,0 +1,69 @@
+
+// This script allows us to enable or disable premoves and dragging pieces
+
+import preferences from "../preferences.js";
+import statustext from "../../../game/gui/statustext.js";
+
+// Document Elements -------------------------------------------------------------------------
+
+const settingsDropdown = document.querySelector('.settings-dropdown');
+
+const selectionDropdown = document.querySelector('.selection-dropdown');
+const selectionDropdownTitle = document.querySelector('.selection-dropdown .dropdown-title');
+
+const dragCheckbox = document.querySelector('.selection-option.drag input');
+const premoveCheckbox = document.querySelector('.selection-option.premove input');
+
+// Functions ---------------------------------------------------------------------------------
+
+(function init() {
+
+	showCheckmarkOnSelectedOptions();
+
+})();
+
+function showCheckmarkOnSelectedOptions() {
+	dragCheckbox.checked = preferences.getDragEnabled();
+	premoveCheckbox.checked = preferences.getPremoveMode();
+}
+
+function open() {
+	selectionDropdown.classList.remove('visibility-hidden');
+	initListeners();
+	settingsDropdown.classList.add('transparent');
+}
+function close() {
+	selectionDropdown.classList.add('visibility-hidden');
+	closeListeners();
+	settingsDropdown.classList.remove('transparent');
+}
+
+function initListeners() {
+	selectionDropdownTitle.addEventListener('click', close);
+	dragCheckbox.addEventListener("click", toggleDrag);
+	premoveCheckbox.addEventListener("click", togglePremove);
+}
+function closeListeners() {
+	selectionDropdownTitle.removeEventListener('click', close);
+	dragCheckbox.removeEventListener("click", toggleDrag);
+	premoveCheckbox.removeEventListener("click", togglePremove);
+}
+
+function toggleDrag() {
+	preferences.setDragEnabled(dragCheckbox.checked);
+}
+function togglePremove() {
+	statustext.showStatus(translations.planned_feature);
+	// If the checkbox is disabled it stops sending onclick events.
+	// Uncheck the box
+	premoveCheckbox.checked = false;
+
+	//preferences.setPremoveMode(premoveCheckbox.checked);
+}
+
+export default {
+	initListeners,
+	closeListeners,
+	close,
+	open,
+};

src/client/scripts/esm/components/header/preferences.js

@@ -10,11 +10,13 @@ let preferences; // { theme, legal_moves }
 
 // The legal moves shape preference
 const default_legal_moves = 'squares'; // dots/squares
+const default_drag_enabled = true;
+const default_premove_mode = false; // Change this to true when premoves are implemented.
 const default_perspective_sensitivity = 100;
 const default_perspective_fov = 90;
 
 /** Prefs that do NOT get saved on the server side */
-const clientSidePrefs = ['perspective_sensitivity', 'perspective_fov'];
+const clientSidePrefs = ['perspective_sensitivity', 'perspective_fov', 'drag_enabled', 'premove_mode'];
 
 /**
  * Whether a change was made to the preferences since the last time we sent them over to the server.
@@ -132,6 +134,25 @@ function setLegalMovesShape(legal_moves) {
 	savePreferences();
 }
 
+function getDragEnabled() {
+	return preferences.drag_enabled ?? default_drag_enabled;
+}
+function setDragEnabled(drag_enabled) {
+	if (typeof drag_enabled !== 'boolean') throw new Error('Cannot set preference drag_enabled when it is not a boolean.');
+	preferences.drag_enabled = drag_enabled;
+	onChangeMade();
+	savePreferences();
+}
+function getPremoveMode() {
+	return preferences.premove_mode ?? default_premove_mode;
+}
+function setPremoveMode(premove_mode) {
+	if (typeof premove_mode !== 'boolean') throw new Error('Cannot set preference premove_mode when it is not a string.');
+	preferences.premove_mode = premove_mode;
+	onChangeMade();
+	savePreferences();
+}
+
 function getPerspectiveSensitivity() {
 	return preferences.perspective_sensitivity || default_perspective_sensitivity;
 }
@@ -160,6 +181,10 @@ export default {
 	setTheme,
 	getLegalMovesShape,
 	setLegalMovesShape,
+	getDragEnabled,
+	setDragEnabled,
+	getPremoveMode,
+	setPremoveMode,
 	getPerspectiveSensitivity,
 	setPerspectiveSensitivity,
 	getPerspectiveFOV,

src/client/scripts/esm/components/header/settings.js

@@ -5,6 +5,7 @@ import languagedropdown from "./dropdowns/languagedropdown.js";
 import boarddropdown from "./dropdowns/boarddropdown.js";
 import legalmovedropdown from "./dropdowns/legalmovedropdown.js";
 import perspectivedropdown from "./dropdowns/perspectivedropdown.js";
+import selectiondropdown from "./dropdowns/selectiondropdown.js";
 // Only imported so its code runs
 import pingmeter from "./pingmeter.js";
 import preferences from "./preferences.js";
@@ -22,13 +23,15 @@ const languageDropdownSelection = document.getElementById('language-settings-dro
 const boardDropdownSelection = document.getElementById('board-settings-dropdown-item');
 const legalmoveDropdownSelection = document.getElementById('legalmove-settings-dropdown-item');
 const mouseDropdownSelection = document.getElementById('perspective-settings-dropdown-item');
+const selectionDropdownSelection = document.getElementById('selection-settings-dropdown-item');
 
 // All nested dropdowns
 const languageDropdown = document.querySelector('.language-dropdown');
 const boardDropdown = document.querySelector('.board-dropdown');
 const legalmoveDropdown = document.querySelector('.legalmove-dropdown');
 const perspectiveDropdown = document.querySelector('.perspective-dropdown');
-const allSettingsDropdownsExceptMainOne = [languageDropdown, boardDropdown, legalmoveDropdown, perspectiveDropdown];
+const selectionDropdown = document.querySelector('.selection-dropdown');
+const allSettingsDropdownsExceptMainOne = [languageDropdown, boardDropdown, legalmoveDropdown, perspectiveDropdown, selectionDropdown];
 
 
 // Variables ---------------------------------------------------------------------------------
@@ -80,6 +83,7 @@ function closeAllSettingsDropdownsExceptMainOne() {
 	languagedropdown.close();
 	boarddropdown.close();
 	legalmovedropdown.close();
+	selectiondropdown.close();
 	perspectivedropdown.close();
 }
 
@@ -93,6 +97,8 @@ function initSettingsListeners() {
 	legalmoveDropdownSelection.addEventListener('click', legalmovedropdown.open);
 	mouseDropdownSelection.addEventListener('click', closeAllSettingsDropdownsExceptMainOne);
 	mouseDropdownSelection.addEventListener('click', perspectivedropdown.open);
+	selectionDropdownSelection.addEventListener('click', closeAllSettingsDropdownsExceptMainOne);
+	selectionDropdownSelection.addEventListener('click', selectiondropdown.open);
 }
 function closeSettingsListeners() {
 	languageDropdownSelection.removeEventListener('click', closeAllSettingsDropdownsExceptMainOne);
@@ -103,6 +109,8 @@ function closeSettingsListeners() {
 	legalmoveDropdownSelection.removeEventListener('click', legalmovedropdown.open);
 	mouseDropdownSelection.removeEventListener('click', closeAllSettingsDropdownsExceptMainOne);
 	mouseDropdownSelection.removeEventListener('click', perspectivedropdown.open);
+	mouseDropdownSelection.addEventListener('click', closeAllSettingsDropdownsExceptMainOne);
+	mouseDropdownSelection.addEventListener('click', perspectivedropdown.open);
 }
 
 

src/client/scripts/esm/components/header/themes.js

@@ -16,6 +16,7 @@ const legalMovesHighlightColor_Opponent = "legalMovesHighlightColor_Opponent";
 const legalMovesHighlightColor_Premove = "legalMovesHighlightColor_Premove";
 const lastMoveHighlightColor = "lastMoveHighlightColor";
 const checkHighlightColor = "checkHighlightColor";
+const boxOutlineColor = "boxOutlineColor";
 
 /**
  * Fallback properties for a themes properties
@@ -24,6 +25,7 @@ const checkHighlightColor = "checkHighlightColor";
 const defaults = {
 	[lastMoveHighlightColor]: [0.72, 1, 0, 0.28],
 	[checkHighlightColor]: /* checkHighlightColor */ [1, 0, 0, 0.7],
+	[boxOutlineColor]: [0.5, 0.5, 0.5, 1],
 	// If this is false, we will render them white,
 	// utilizing the more efficient color-less shader program!
 	useColoredPieces: false,

src/client/scripts/esm/game/chess/game.js

@@ -40,6 +40,7 @@ import loadingscreen from '../gui/loadingscreen.js';
 import movepiece from '../../chess/logic/movepiece.js';
 import frametracker from '../rendering/frametracker.js';
 import area from '../rendering/area.js';
+import dragAnimation from '../rendering/draganimation.js';
 // Import End
 
 /** 
@@ -190,12 +191,14 @@ function renderEverythingInGame() {
 	});
 
 	animation.renderTransparentSquares();
+	dragAnimation.renderTransparentSquare();
 	pieces.renderPiecesInGame(gamefile);
 	animation.renderPieces();
-    
+	
 	webgl.executeWithDepthFunc_ALWAYS(() => {
 		promotionlines.render();
 		selection.renderGhostPiece(); // If not after pieces.renderPiecesInGame(), wont render on top of existing pieces
+		dragAnimation.renderPiece();
 		arrows.renderThem();
 		perspective.renderCrosshair();
 	});