Skip to content

Commit

Permalink
Added Overlay for jQuery Tic-Tac-Toe App in AspCoreWebAppRazorPages.
Browse files Browse the repository at this point in the history
  • Loading branch information
@JosephWee
JosephWee committed Apr 25, 2024
1 parent 12f540d commit 8718275
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 96 deletions.
37 changes: 1 addition & 36 deletions AspCoreWebAppRazorPages/Pages/TicTacToeJq.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");*@
});
</script>
177 changes: 117 additions & 60 deletions AspCoreWebAppRazorPages/wwwroot/Tic-Tac-Toe/js/tic-tac-toe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
#winningCells;
#aiPrediction;
#aiPredictionScore;
#updateTicTacToeDelegate;

constructor(elementId) {

Expand Down Expand Up @@ -128,10 +127,6 @@
' <button type="button" class="btn btn-danger changeMode">Change Mode</button>' +
' <button type="button" class="btn btn-info aiPrediction">AI Prediction</button>' +
' </div> ' +
'</div>' +
'<div id="overlay_' + $(this.#container).attr('id') + '" class="overlay text-center" style="background-color: rgba(180, 180, 180, 0.5)">' +
' <div class="overlay-text" style="background-color: rgba(180, 180, 180, 0.5)">' +
' </div>' +
'</div>'
);

Expand Down Expand Up @@ -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 = $("<div class='overlay'></div>");
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 = $("<div class='overlayText'>Thinking...<br/><br/></div>");
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]");
Expand All @@ -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;
}
}

0 comments on commit 8718275

Please sign in to comment.