Draw offers

game/TypeDefinitions.js

@@ -124,6 +124,13 @@ function Game() {
      * AFK if they are currently AFK. */
     this.autoAFKResignTime = undefined;
 
+    /** Last move a draw was offered */
+    this.drawOfferMove = undefined
+
+    /** Information about players offering a draw */
+    this.whiteDrawOffer = undefined
+    this.blackDrawOffer = undefined
+
     /** Contains information about which sides are
      * about to lose by disconnection. */
     this.disconnect = {

game/gamemanager.js

@@ -74,6 +74,8 @@ const gamemanager = (function() {
             blackSocket: undefined,
             timeNextPlayerLosesAt: undefined,
             autoTimeLossTimeoutID: undefined,
+            whiteDrawOffer: undefined,
+            blackDrawOffer: undefined,
             disconnect: {
                 startTimer: {
                     white: undefined,
@@ -792,6 +794,106 @@ const gamemanager = (function() {
         sendGameUpdateToColor(game, opponentColor);
     }
 
+
+    /** 
+     * Called when client wants to offer a draw
+     * Sends confirmation to opponents
+     * @param {Socket} ws - The socket
+     */
+    function offerDraw(ws) {
+        console.log("Client offers a draw.")
+
+        const game = getGameBySocket(ws);
+        if (!game) return console.error("Client offered a draw when they don't belong in a game.")
+        const color = doesSocketBelongToGame_ReturnColor(game, ws);
+
+        if (isGameOver(game)) return console.error("Client offered a draw when the game is already over. Ignoring.");
+
+        if (hasGameDrawOffer(game)) return console.error("Client offered a draw when the game has a draw offer");
+
+        if (game.moves.length > game.drawOfferMove) return console.error("Client trying to offer a draw twice on the same move")
+
+        // Update the status of game
+        if (color === 'white') {
+            game.whiteDrawOffer = 'offered'
+            game.blackDrawOffer = 'unconfirmed'
+        } else if (color === 'black') {
+            game.blackDrawOffer = 'offered'
+            game.whiteDrawOffer = 'unconfirmed'
+        }
+
+        // Alert their opponent
+        const opponentColor = math1.getOppositeColor(color);
+        const value = { offererColor: color }
+        sendMessageToSocketOfColor(game, opponentColor, 'game', 'drawoffer', value)
+    }
+
+    /** 
+     * Called when client accepts a draw
+     * Ends the game
+     * @param {Socket} ws - The socket
+     */
+    function acceptDraw(ws) {
+        console.log("Client accepts a draw.")
+
+        const game = getGameBySocket(ws);
+        if (!game) return console.error("Client accepted a draw when they don't belong in a game.")
+        const color = doesSocketBelongToGame_ReturnColor(game, ws);
+        const opponentColor = math1.getOppositeColor(color);
+
+        if (isGameOver(game)) return console.error("Client accepted a draw when the game is already over. Ignoring.");
+
+        // Update the status of game
+        if (color === 'white') {
+            if (!hasGameDrawOffer(game)) return console.error("Client accepted a draw when there wasn't a draw offer")
+            game.whiteDrawOffer = 'confirmed'
+        } else if (color === 'black') {
+            if (!hasGameDrawOffer(game)) return console.error("Client accepted a draw when there wasn't a draw offer")
+            game.blackDrawOffer = 'confirmed'
+        }
+        setGameConclusion(game, "draw agreement")
+
+        // End the game
+        onRequestRemovalFromPlayersInActiveGames(ws);
+        unsubClientFromGame(ws, { sendMessage: false });
+        sendGameUpdateToColor(game, opponentColor);
+
+        const opponentWs = opponentColor === 'black' ? game.blackSocket : game.whiteSocket
+        onRequestRemovalFromPlayersInActiveGames(opponentWs);
+        unsubClientFromGame(opponentWs, { sendMessage: false });
+        sendGameUpdateToColor(game, color); // wasteful to send update here, but im lazy to figure out how to set client to show it drawed
+    }
+
+    /** 
+     * Called when client declines a draw
+     * Alerts opponent
+     * @param {Socket} ws - The socket
+     */
+    function declineDraw(ws) {
+        console.log("Client declines a draw.")
+
+        const game = getGameBySocket(ws);
+        if (!game) return console.error("Client declined a draw when they don't belong in a game.")
+        const color = doesSocketBelongToGame_ReturnColor(game, ws);
+        const opponentColor = math1.getOppositeColor(color);
+
+        if (isGameOver(game)) return console.error("Client declined a draw when the game is already over. Ignoring.");
+
+        // Update the status of game
+        if (color === 'white') {
+            if (!hasGameDrawOffer(game)) return console.error("Client declined a draw when there wasn't a draw offer")
+            game.whiteDrawOffer = 'declined'
+            game.blackDrawOffer = undefined
+        } else if (color === 'black') {
+            if (!hasGameDrawOffer(game)) return console.error("Client declined a draw when there wasn't a draw offer")
+            game.blackDrawOffer = 'declined'
+            game.whiteDrawOffer = undefined
+        }
+
+        // Alert their opponent
+        sendMessageToSocketOfColor(game, opponentColor, 'game', 'declinedraw')
+    }
+
     /**
      * Called when a client alerts us they have gone AFK.
      * Alerts their opponent, and starts a timer to auto-resign.
@@ -1071,6 +1173,19 @@ const gamemanager = (function() {
     function isGameOver(game) { return game.gameConclusion !== false; }
 
     /**
+
+     * Returns *true* if the provided game has a draw offer.
+     * Games that have a draw offer can't make moves, until draw is accepted or declined.
+     * @param {Game} game - The game
+     * @returns {boolean}
+     */
+    function hasGameDrawOffer(game) {
+        const isOffering = (game.blackDrawOffer === 'offered' || game.whiteDrawOffer === 'offered')
+        return isOffering
+    }
+
+    /**
+
      * Handles all incoming websocket messages related to active games.
      * Possible actions: submitmove/offerdraw/abort/resign/joingame/resync
      * @param {Socket} ws - The socket
@@ -1097,7 +1212,13 @@ const gamemanager = (function() {
                 resignGame(ws)
                 break;
             case 'offerdraw':
-                console.error("Don't know how to offer draw yet.")
+                offerDraw(ws);
+                break;
+            case 'acceptdraw':
+                acceptDraw(ws);
+                break;
+            case 'declinedraw':
+                declineDraw(ws);
                 break;
             case 'AFK':
                 onAFK(ws);

protected-owner/css/dev.css

@@ -1213,7 +1213,7 @@ button.join-button, button.copy-button {
     background-color: rgba(0, 0, 0, 0.849);
     padding-bottom: 15vh;
     display: grid;
-    grid-template: repeat(5, min(8vw, 86px)) / repeat(2, min(30vw, 320px));
+    grid-template: repeat(6, min(8vw, 86px)) / repeat(2, min(30vw, 320px));
     gap: min(3vw, 32px);
     justify-content: center;
     align-content: center;
@@ -1247,11 +1247,60 @@ button.join-button, button.copy-button {
     background: linear-gradient(to bottom, white, rgb(230, 230, 230), white);
 }
 
-.pauseUI p.paused, button.paused, button.resume, button.mainmenu {
+.pauseUI p.paused, button.paused, button.resume, button.mainmenu, button.offerdraw {
     grid-column: 1 / 3;
 }
 
 
+/* Draw Offer UI */
+
+.drawOfferUI {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.849);
+    padding: 15vh;
+    padding-left: 35vh;
+    padding-right: 35vh;
+    display: flex;
+    flex-direction: column;
+    gap: min(3vw, 32px);
+    justify-content: center;
+    align-content: center;
+}
+
+.drawOfferUI p.offertitle, .drawOfferUI button {
+    font-size: min(2.5vw, 27px);
+}
+
+.drawOfferUI p.offertitle {
+    color: white;
+    text-align: center;
+    /*align-self: center;*/
+}
+
+.drawOfferUI button {
+    background-color: rgb(228, 228, 228);
+    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.27);
+    border-radius: min(0.9vw, 10px);
+    color: rgb(0, 0, 0);
+    height: 10%;
+    background: linear-gradient(to bottom, white, rgb(199, 199, 199), white);
+}
+
+.drawOfferUI button:hover {
+    /* background-color: rgb(255, 255, 255); */
+    background: linear-gradient(to bottom, white, rgb(219, 219, 219), white);
+}
+
+.drawOfferUI button:active {
+    /* box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.51); */
+    background: linear-gradient(to bottom, white, rgb(230, 230, 230), white);
+}
+
+
 
 /* Status text showing alerts and errors */
 

protected-owner/scripts/game/gamefile.js

@@ -181,6 +181,9 @@ function gamefile(metadata, { moves = [], variantOptions, gameConclusion } = {})
     this.attackers = undefined;
     /** If 3-Check is enabled, this is a running count of checks given: `{ white: 0, black: 0 }` */
     this.checksGiven = undefined;
+    /** The last move when a draw offer was given
+     * Used for disabling the button */
+    this.LastDrawOfferMove = undefined;
 
     this.ourPieces = organizedlines.buildStateFromKeyList(this.startSnapshot.position)
     this.startSnapshot.pieceCount = gamefileutility.getPieceCountOfGame(this)

protected-owner/scripts/game/gui/guipause.js

@@ -17,7 +17,14 @@ const guipause = (function(){
     const element_copygame = document.getElementById('copygame')
     const element_pastegame = document.getElementById('pastegame')
     const element_mainmenu = document.getElementById('mainmenu')
+    const element_offerDraw = document.getElementById('offerdraw')
     const element_perspective = document.getElementById('toggleperspective')
+
+    // Draw Offer UI
+    let isAcceptingDraw = false
+    const element_drawOfferUI = document.getElementById('drawOfferUI')
+    const element_acceptDraw = document.getElementById('acceptdraw')
+    const element_declineDraw = document.getElementById('declinedraw')
 
     // Functions
 
@@ -27,6 +34,12 @@ const guipause = (function(){
      */
     function areWePaused() { return isPaused; }
 
+    /**
+     * Returns *true* if the user is deciding on accepting draw.
+     * @returns {boolean}
+     */
+    function areWeAcceptingDraw() { return isAcceptingDraw; }
+
     function gelement_perspective() {
         return element_perspective;
     }
@@ -35,10 +48,18 @@ const guipause = (function(){
         isPaused = true;
         changeTextOfMainMenuButton()
         updatePasteButtonTransparency()
+        updateDrawOfferButtonTransparency()
         style.revealElement(element_pauseUI)
         initListeners()
     }
 
+    function openDrawOffer() {
+        isAcceptingDraw = true;
+        style.revealElement(element_drawOfferUI)
+        sound.playSound_drawOffer()
+        initListeners()
+    }
+
     function toggle() {
         if (!isPaused) open();
         else callback_Resume()
@@ -50,7 +71,18 @@ const guipause = (function(){
         const legalInPrivateMatch = onlinegame.getIsPrivate() && (movesLength === 0 || moves[0].length === 1 && moves[0][0] == null);
 
         if (onlinegame.areInOnlineGame() && !legalInPrivateMatch) element_pastegame.classList.add('opacity-0_5')
-        else                                                  element_pastegame.classList.remove('opacity-0_5')
+        else                                                      element_pastegame.classList.remove('opacity-0_5')
+    }
+
+    function updateDrawOfferButtonTransparency() {
+        const gamefile = game.getGamefile()
+        const moves = gamefile.moves;
+        const movesLength = moves.length;
+
+        const RecentDrawOffers = movesLength > gamefile.LastDrawOfferMove ? false : true
+
+        if (!onlinegame.areInOnlineGame() || RecentDrawOffers) element_pastegame.classList.add('opacity-0_5')
+        else                                                   element_pastegame.classList.remove('opacity-0_5')
     }
 
     function changeTextOfMainMenuButton() {
@@ -69,7 +101,11 @@ const guipause = (function(){
         element_copygame.addEventListener('click', copypastegame.callbackCopy)
         element_pastegame.addEventListener('click', copypastegame.callbackPaste)
         element_mainmenu.addEventListener('click', callback_MainMenu)
+        element_offerDraw.addEventListener('click', callback_OfferDraw)
         element_perspective.addEventListener('click', callback_Perspective)
+
+        element_acceptDraw.addEventListener('click', callback_AcceptDraw)
+        element_declineDraw.addEventListener('click', callback_DeclineDraw)
     }
 
     function closeListeners() {
@@ -78,14 +114,20 @@ const guipause = (function(){
         element_copygame.removeEventListener('click', copypastegame.callbackCopy)
         element_pastegame.removeEventListener('click', copypastegame.callbackPaste)
         element_mainmenu.removeEventListener('click', callback_MainMenu)
+        element_offerDraw.removeEventListener('click', callback_OfferDraw)
         element_perspective.removeEventListener('click', callback_Perspective)
+
+        element_acceptDraw.removeEventListener('click', callback_AcceptDraw)
+        element_declineDraw.removeEventListener('click', callback_DeclineDraw)
     }
 
     function callback_Resume(event) {
-        if (!isPaused) return;
+        if (!isPaused && !isAcceptingDraw) return;
         event = event || window.event;
         isPaused = false;
+        isAcceptingDraw = false;
         style.hideElement(element_pauseUI)
+        style.hideElement(element_drawOfferUI)
         closeListeners()
         main.renderThisFrame();
     }
@@ -101,6 +143,30 @@ const guipause = (function(){
         guititle.open()
     }
 
+    async function callback_OfferDraw(event) {
+        onlinegame.offerDraw()
+        callback_Resume()
+        statustext.showStatus(`Waiting for opponent to accept draw...`, false, 3)
+    }
+
+    async function callback_AcceptDraw(event) {
+        onlinegame.acceptDraw()
+        // gamefile.gameConclusion = 'draw agreement'
+        // gamefileutility.concludeGame(gamefile)
+        callback_Resume()
+
+        const gamefile = game.getGamefile();
+        gamefile.gameConclusion = 'draw agreement';
+        clock.stop()
+        if (gamefile.gameConclusion) gamefileutility.concludeGame(gamefile);
+    }
+
+    async function callback_DeclineDraw(event) {
+        onlinegame.declineDraw()
+        callback_Resume()
+        statustext.showStatus(`Draw declined`, false, 2)
+    }
+
     function callback_TogglePointers (event) {
         event = event || window.event;
         main.renderThisFrame();
@@ -122,12 +188,17 @@ const guipause = (function(){
 
     return Object.freeze({
         areWePaused,
+        areWeAcceptingDraw,
         gelement_perspective,
         open,
         toggle,
         changeTextOfMainMenuButton,
         callback_Resume,
         callback_TogglePointers,
+        callback_OfferDraw,
+        callback_AcceptDraw,
+        callback_DeclineDraw,
+        openDrawOffer
     })
 
 })();