Draw offers

src/client/css/play.css

@@ -905,7 +905,7 @@ button.join-button, button.copy-button {
     height: 84px; 
     box-shadow: 0px -1px 7px 0px rgba(0, 0, 0, 0.659);
     display: flex;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.307), white, rgba(255, 255, 255, 0.84));    
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.307), white, rgba(255, 255, 255, 0.84));
     backdrop-filter: blur(8px); /* Apply a blur effect to the background */
     -webkit-backdrop-filter: blur(5px); /* Fixes blur for Safari */
 }
@@ -1224,7 +1224,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;
@@ -1258,11 +1258,96 @@ 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 */
+
+.draw_offer_ui {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 30px;
+    font-family: "Open Sans";
+    font-weight: bold;
+    padding: 15px;
+    margin-left: 14%;
+    margin-right: 14%;
+    width: 72%;
+    gap: 15px;
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    /* Make it not a popup / tsevasa's suggestion */
+    border-color: transparent;
+    background-color: rgba(0, 0, 0, 0);
+    box-shadow: none;
+}
+
+@media only screen and (max-width: 1520px) {  /* Mobile screens: make smaller in order to not obscure names */
+    .draw_offer_ui {
+        margin-left: 22%;
+        margin-right: 22%;
+        width: 56%;
+    }
+}
+
+.draw_offer_ui p.offer_title, .draw_offer_ui button {
+    font-size: min(3.5vw, 35px);
+}
+
+.draw_offer_ui p.offer_title {
+    color: black;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 100%;
+    font-size: 30px;
+    font-family: "Open Sans";
+    font-weight: bold;
+    top: 50%;
+    bottom: 50;
+}
+
+.draw_offer_ui button {
+    background-color: rgb(255, 255, 255) !important;
+    box-shadow: 0px 0px 7px 1px #727272 !important;
+    border-radius: min(0.9vw, 10px);
+    color: rgb(0, 0, 0);
+    height: 100%;
+    aspect-ratio: 1/1;
+    background: rgb(227, 227, 227);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.draw_offer_ui img {
+    position: relative;
+	height: 85%;
+	margin:1px;
+	top: 0px;
+}
+
+/* The accept draw button is naturally smaller */
+.acceptdraw > .icon {
+	height: 95%;
+}
+
+.draw_offer_ui button:hover {
+    /* background-color: rgb(255, 255, 255); */
+    background: linear-gradient(to bottom, white, rgb(219, 219, 219), white);
+}
+
+.draw_offer_ui 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 */
 

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

@@ -184,6 +184,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;
+    /** Last draw offer */
+    this.drawOfferWhite = false;
+    this.drawOfferBlack = false;
 
     this.ourPieces = organizedlines.buildStateFromKeyList(this.startSnapshot.position)
     this.startSnapshot.pieceCount = gamefileutility.getPieceCountOfGame(this)

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

@@ -197,7 +197,14 @@ const gamefileutility = (function(){
         if (requestRemovalFromActiveGames) onlinegame.requestRemovalFromPlayersInActiveGames();
         if (wincondition.isGameConclusionDecisive(gamefile.gameConclusion)) movesscript.flagLastMoveAsMate(gamefile);
         clock.stop()
-        board.darkenColor()
+        main.renderThisFrame();
+        board.darkenColor();
+        guigameinfo.gameEnd(gamefile.gameConclusion);
+        guidrawoffer.closeDrawOffer();
+        guipause.disableDrawOfferButton();
+        onlinegame.cancelMoveSound();
+        onlinegame.resetServerRestarting();
+        onlinegame.deleteCustomVariantOptions();
         guigameinfo.gameEnd(gamefile.gameConclusion)
         onlinegame.onGameConclude();
 

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

@@ -15,7 +15,7 @@ const wincondition = (function() {
 
     /**
      * List of all win conditions that happen after a move being made.
-     * This excludes conclusions such as resignation, time, aborted, and disconnect,
+     * This excludes conclusions such as resignation, time, aborted, disconnect, and agreement.
      * which can happen at any point in time.
      */
     const decisiveGameConclusions = [...validWinConditions, 'stalemate', 'repetition', 'moverule', 'insuffmat']
@@ -199,7 +199,7 @@ const wincondition = (function() {
     /**
      * Calculates if the provided game conclusion is a decisive conclusion.
      * This is any conclusion that can happen after a move is made.
-     * Excludes conclusions like resignation, time, aborted, and disconnect,
+     * Excludes conclusions like resignation, time, aborted, disconnect, and agreement.
      * which can happen at any point in time.
      * @param {string} gameConclusion - The gameConclusion
      * @returns {boolean} *true* if the gameConclusion is decisive.
@@ -299,6 +299,8 @@ const wincondition = (function() {
                 return translations.termination.aborted;
             case "disconnect": // Happens when a player leaves
                 return translations.termination.disconnect;
+            case "agreement":
+                return translations.termination.agreement
             default:
                 console.error(`Cannot return English termination for unknown condition "${condition}"!`);
                 return 'Unknown';

src/client/scripts/game/gui/guidrawoffer.js

@@ -0,0 +1,77 @@
+
+/*
+ * This script handles our Draw offer menu
+ */
+
+"use strict";
+
+const guidrawoffer = (function(){
+
+    // Variables
+    // Draw Offer UI
+    let isAcceptingDraw = false
+    const element_draw_offer_ui = document.getElementById('draw_offer_ui')
+    const element_acceptDraw = document.getElementById('acceptdraw')
+    const element_declineDraw = document.getElementById('declinedraw')
+
+    // Functions
+
+    /**
+     * Returns *true* if the user is deciding on accepting draw.
+     * @returns {boolean}
+     */
+    function areWeAcceptingDraw() { return isAcceptingDraw; }
+
+    function openDrawOffer() {
+        isAcceptingDraw = true;
+        style.revealElement(element_draw_offer_ui)
+        // style.hideElement(element_whosturn)
+        sound.playSound_drawOffer()
+        initDrawOfferListeners()
+    }
+
+    function closeDrawOffer() {
+        isAcceptingDraw = false;
+        style.hideElement(element_draw_offer_ui)
+        //style.revealElement(element_whosturn)
+        closeDrawOfferListeners()
+    }
+
+    function initDrawOfferListeners() {
+        element_acceptDraw.addEventListener('click', callback_AcceptDraw)
+        element_declineDraw.addEventListener('click', callback_DeclineDraw)
+    }
+
+    function closeDrawOfferListeners() {
+        element_acceptDraw.removeEventListener('click', callback_AcceptDraw)
+        element_declineDraw.removeEventListener('click', callback_DeclineDraw)
+    }
+
+    async function callback_AcceptDraw(event) {
+        const gamefile = game.getGamefile();
+
+        if (gamefile.gameConclusion) return // game already over
+        onlinegame.acceptDraw()
+        closeDrawOffer()
+
+        gamefile.gameConclusion = 'draw agreement';
+        clock.stop()
+        gamefileutility.concludeGame(gamefile);
+    }
+
+    async function callback_DeclineDraw(event) {
+        onlinegame.declineDraw()
+        const gamefile = game.getGamefile();
+        closeDrawOffer()
+        statustext.showStatus(`Draw declined`, false, 2)
+    }
+
+    return Object.freeze({
+        areWeAcceptingDraw,
+        openDrawOffer,
+        closeDrawOffer,
+        callback_AcceptDraw,
+        callback_DeclineDraw
+    })
+
+})();

src/client/scripts/game/gui/guigameinfo.js

@@ -69,14 +69,15 @@ const guigameinfo = (function(){
 
     // Updates the whosTurn text to say who won!
     function gameEnd(conclusion) {
-        // 'white checkmate' / 'black resignation' / 'draw stalemate'  time/resignation/stalemate/repetition/checkmate/disconnect
+        // 'white checkmate' / 'black resignation' / 'draw stalemate'  time/resignation/stalemate/repetition/checkmate/disconnect/agreement
 
         const { victor, condition } = wincondition.getVictorAndConditionFromGameConclusion(conclusion)
 
         style.hideElement(element_dot)
 
         if (onlinegame.areInOnlineGame()) {
 
+
           if (onlinegame.areWeColor(victor)) element_whosturn.textContent = condition === 'checkmate' ? translations["results"]["you_checkmate"]
                                                                                 : condition === 'time' ? translations["results"]["you_time"]
                                                                                 : condition === 'resignation' ? translations["results"]["you_resignation"]
@@ -91,6 +92,7 @@ const guigameinfo = (function(){
                                                                      : condition === 'repetition' ? translations["results"]["draw_repetition"]
                                                                      : condition === 'moverule' ? `${translations["results"]["draw_moverule"][0]}${(game.getGamefile().gameRules.moveRule / 2)}${translations["results"]["draw_moverule"][1]}`
 																	 : condition === 'insuffmat' ? translations["results"]["draw_insuffmat"]
+                                                                     : condition === 'agreement' ? translations["results"]["draw_agreement"]
                                                                      : translations["results"]["draw_generic"]
             else if (condition === 'aborted') element_whosturn.textContent = translations["results"]["aborted"]
             else /* loss */ element_whosturn.textContent = condition === 'checkmate' ? translations["results"]["opponent_checkmate"]
@@ -103,6 +105,7 @@ const guigameinfo = (function(){
                                                              : condition === 'threecheck' ? translations["results"]["opponent_threecheck"]
                                                              : condition === 'koth' ? translations["results"]["opponent_koth"]
                                                              : translations["results"]["opponent_generic"]
+
         } else { // Local game
             if (condition === 'checkmate') element_whosturn.textContent = victor === 'white' ? translations["results"]["white_checkmate"]
                                                                        : victor === 'black' ? translations["results"]["black_checkmate"]