From 8718275c92e2baa1aedd226502eac5d0d8d0dbfa Mon Sep 17 00:00:00 2001
From: JosephWee <86550414+JosephWee@users.noreply.github.com>
Date: Thu, 25 Apr 2024 17:42:24 +0800
Subject: [PATCH] Added Overlay for jQuery Tic-Tac-Toe App in
AspCoreWebAppRazorPages.
---
.../Pages/TicTacToeJq.cshtml | 37 +---
.../wwwroot/Tic-Tac-Toe/js/tic-tac-toe.js | 177 ++++++++++++------
2 files changed, 118 insertions(+), 96 deletions(-)
diff --git a/AspCoreWebAppRazorPages/Pages/TicTacToeJq.cshtml b/AspCoreWebAppRazorPages/Pages/TicTacToeJq.cshtml
index e3e2b8c..cb351e9 100644
--- a/AspCoreWebAppRazorPages/Pages/TicTacToeJq.cshtml
+++ b/AspCoreWebAppRazorPages/Pages/TicTacToeJq.cshtml
@@ -29,43 +29,8 @@
jQuery(document).ready(function () {
- function OnPostUpdateTicTacToe(requestArgs) {
-
- //if (console && console.log)
- // console.log('OnPostUpdateTicTacToe');
-
- //if (console && console.log)
- // console.log(requestArgs);
-
- let requestData = JSON.stringify(requestArgs);
- var fd = new FormData();
- fd.append('requestData', requestData);
-
- //let thepromise = DotNet.invokeMethodAsync('AspCoreWebAppRazorPages', 'jsUpdateTicTacToe', requestData);
-
- const RequestVerificationToken = $("input[name='__RequestVerificationToken']").val();
-
- let thepromise = $.ajax({
- type: "POST",
- url: "/TicTacToeJq?handler=UpdateTicTacToe",
- data: fd,
- processData: false,
- contentType: false,
- headers: {
- 'RequestVerificationToken': RequestVerificationToken
- }
- });
-
- //if (console && console.log)
- // console.log(thepromise);
-
- return thepromise;
- }
-
var app1 = new TicTacToeJq("tictactoejq1");
- app1.OnUpdate(OnPostUpdateTicTacToe);
- @*var app2 = new TicTacToeJq("tictactoejq2");
- app2.OnUpdate(OnPostUpdateTicTacToe);*@
+ @*var app2 = new TicTacToeJq("tictactoejq2");*@
});
\ No newline at end of file
diff --git a/AspCoreWebAppRazorPages/wwwroot/Tic-Tac-Toe/js/tic-tac-toe.js b/AspCoreWebAppRazorPages/wwwroot/Tic-Tac-Toe/js/tic-tac-toe.js
index 18cb6d0..f073b07 100644
--- a/AspCoreWebAppRazorPages/wwwroot/Tic-Tac-Toe/js/tic-tac-toe.js
+++ b/AspCoreWebAppRazorPages/wwwroot/Tic-Tac-Toe/js/tic-tac-toe.js
@@ -12,7 +12,6 @@
#winningCells;
#aiPrediction;
#aiPredictionScore;
- #updateTicTacToeDelegate;
constructor(elementId) {
@@ -128,10 +127,6 @@
' ' +
' ' +
' ' +
- '' +
- ''
);
@@ -421,6 +416,59 @@
//}
}
+ showOverlay(overlayTarget) {
+ //debugger;
+
+ // Overlay
+ // position: fixed; /* Sit on top of the page content */
+ // display: none; /* Hidden by default */
+ // width: 100 %; /* Full width (cover the whole page) */
+ // height: 100 %; /* Full height (cover the whole page) */
+ // top: 0;
+ // left: 0;
+ // right: 0;
+ // bottom: 0;
+ // background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+ // z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+
+ // Text
+ // position: absolute;
+ // top: 50 %;
+ // left: 50 %;
+ // font-size: 50px;
+ // color: white;
+ // transform: translate(-50%, -50%);
+ // -ms-transform: translate(-50%, -50%);
+
+ let overlay = $("");
+ overlayTarget.append(overlay);
+ overlay.css("position", "absolute");
+ overlay.css("top", "0px");
+ overlay.css("left", "0px");
+ overlay.css("width", "100%");
+ overlay.css("height", "100%");
+ overlay.css("background-color", "rgba(0, 0, 0, 0.5)");
+ overlay.css("z-index", "2");
+
+ let overlayText = $("Thinking...
");
+ overlayTarget.append(overlayText);
+ overlayText.css("position", "absolute");
+ overlayText.css("top", "50%");
+ overlayText.css("left", "50%");
+ overlayText.css("font-size", "50px");
+ overlayText.css("color", "white");
+ overlayText.css("transform", "translate(-50%, -50%)");
+ overlayText.css("-ms-transform", "translate(-50%, -50%)");
+ overlayText.css("z-index", "3");
+ }
+
+ hideOverlay(overlayTarget) {
+ //debugger;
+
+ overlayTarget.children(".overlayText").remove();
+ overlayTarget.children(".overlay").remove();
+ }
+
checkResult() {
let unusedCells = this.#cells.filter("[data-state=0]");
@@ -447,67 +495,76 @@
//app.log("checkResult()");
//app.log(requestData);
- let loaderId = 'overlay_' + $(this.#container).attr('id');
-
- if (typeof loaderShow === 'function' && typeof loaderHide === 'function')
- loaderShow(loaderId);
-
- let thepromise = this.#updateTicTacToeDelegate(requestData);
-
- //app.log("checkResult()");
- //app.log(thepromise);
-
- thepromise.then(responseData => {
-
- let resp = JSON.parse(responseData);
-
- app.log(resp);
- app.#state = resp.Status;
- app.#winningCells = [];
- app.#aiPrediction = 0;
- app.#aiPredictionScore = 0;
-
- //debugger;
- if (resp.WinningCells && Array.isArray(resp.WinningCells)) {
- app.#winningCells = resp.WinningCells;
- }
-
- if (app.#gameMode == 1) {
- //debugger;
- let computerMove = parseInt(resp.ComputerMove);
- if (isNaN(computerMove) === false && computerMove >= 0 && computerMove < app.#cells.length) {
- let cellToChange = $(app.#cells[computerMove]);
- if (cellToChange && cellToChange.length > 0)
- if (cellToChange.attr("data-state") == "0")
- cellToChange.attr("data-state", 2);
- }
+ let overlayTarget = $(this.#container).children('div.tic-tac-toe-grid');
+
+ let requestDataJson = JSON.stringify(requestData);
+ var fd = new FormData();
+ fd.append('requestData', requestDataJson);
+
+ const RequestVerificationToken = $("input[name='__RequestVerificationToken']").val();
+
+ $.ajax({
+ type: "POST",
+ url: "/TicTacToeJq?handler=UpdateTicTacToe",
+ data: fd,
+ processData: false,
+ contentType: false,
+ headers: {
+ 'RequestVerificationToken': RequestVerificationToken
+ },
+ beforeSend:
+ function () {
+ app.showOverlay(overlayTarget);
+ },
+ success:
+ function (responseData) {
+
+ //debugger;
+
+ let resp = JSON.parse(responseData);
+
+ app.log(resp);
+ app.#state = resp.Status;
+ app.#winningCells = [];
+ app.#aiPrediction = 0;
+ app.#aiPredictionScore = 0;
+
+ //debugger;
+ if (resp.WinningCells && Array.isArray(resp.WinningCells)) {
+ app.#winningCells = resp.WinningCells;
+ }
- let prediction = parseInt(resp.Prediction);
- let predictionScore = resp.PredictionScore;
+ if (app.#gameMode == 1) {
+ //debugger;
+ let computerMove = parseInt(resp.ComputerMove);
+ if (isNaN(computerMove) === false && computerMove >= 0 && computerMove < app.#cells.length) {
+ let cellToChange = $(app.#cells[computerMove]);
+ if (cellToChange && cellToChange.length > 0)
+ if (cellToChange.attr("data-state") == "0")
+ cellToChange.attr("data-state", 2);
+ }
- if (!isNaN(prediction) && Array.isArray(predictionScore)) {
- let tempArray = [];
- for (var i = 0; i < predictionScore.length; i++) {
- let tempFloat = parseFloat(predictionScore[i]);
- if (!isNaN(tempFloat)) {
- tempArray.push(tempFloat);
+ let prediction = parseInt(resp.Prediction);
+ let predictionScore = resp.PredictionScore;
+
+ if (!isNaN(prediction) && Array.isArray(predictionScore)) {
+ let tempArray = [];
+ for (var i = 0; i < predictionScore.length; i++) {
+ let tempFloat = parseFloat(predictionScore[i]);
+ if (!isNaN(tempFloat)) {
+ tempArray.push(tempFloat);
+ }
+ }
+ let maxScore = Math.max(...tempArray);
+ app.#aiPrediction = prediction;
+ app.#aiPredictionScore = maxScore;
}
}
- let maxScore = Math.max(...tempArray);
- app.#aiPrediction = prediction;
- app.#aiPredictionScore = maxScore;
- }
- }
- if (typeof loaderShow === 'function' && typeof loaderHide === 'function')
- loaderHide(loaderId);
+ app.refreshUI();
- app.refreshUI();
+ app.hideOverlay(overlayTarget);
+ }
});
-
- }
-
- OnUpdate(funcdelegate) {
- this.#updateTicTacToeDelegate = funcdelegate;
}
}
\ No newline at end of file