From 514bf0f243e8047e7124c32a65a984188e8f49e5 Mon Sep 17 00:00:00 2001 From: Om Prakash Kumar Date: Fri, 1 Feb 2019 15:05:19 +0530 Subject: [PATCH 1/3] TIC TAC TOE --- OmPrakash025/tictactoe.html | 82 +++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 OmPrakash025/tictactoe.html diff --git a/OmPrakash025/tictactoe.html b/OmPrakash025/tictactoe.html new file mode 100644 index 0000000..d971696 --- /dev/null +++ b/OmPrakash025/tictactoe.html @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ + + + \ No newline at end of file From 93359957c12824d605038aff35612f59e6db8a1f Mon Sep 17 00:00:00 2001 From: Om Prakash Kumar Date: Mon, 11 Feb 2019 19:20:00 +0530 Subject: [PATCH 2/3] Updated TICTACTOE with create and fetch API --- OmPrakash025/index.html | 485 ++++++++++++++++++++++++++++++++++++ OmPrakash025/ticTac.css | 62 +++++ OmPrakash025/ticTac.js | 129 ++++++++++ OmPrakash025/tictactoe.html | 82 ------ 4 files changed, 676 insertions(+), 82 deletions(-) create mode 100644 OmPrakash025/index.html create mode 100644 OmPrakash025/ticTac.css create mode 100644 OmPrakash025/ticTac.js delete mode 100644 OmPrakash025/tictactoe.html diff --git a/OmPrakash025/index.html b/OmPrakash025/index.html new file mode 100644 index 0000000..9d1785b --- /dev/null +++ b/OmPrakash025/index.html @@ -0,0 +1,485 @@ + +z + + + + + + +Tic Tac Toe - HTML and Javascript + + + + + + + + +
+

Tic Tac Toe

+ + + + + +
+

Choose your name and color to play with

+

+ Player-1 + + +

+

+ Player-2 + + +

+

+ +

+

+ + +

+

+ Add New : + +

+
+ +
+

Game Records

+
+ +
+ Tic Tac Toe - HTML and Javascript | Cyber Group +
+ + + + + \ No newline at end of file diff --git a/OmPrakash025/ticTac.css b/OmPrakash025/ticTac.css new file mode 100644 index 0000000..c12f50f --- /dev/null +++ b/OmPrakash025/ticTac.css @@ -0,0 +1,62 @@ +*{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +select { + padding:3px; + margin: 10; + -webkit-border-radius:0px; + -moz-border-radius:4px; + border-radius:4px; + -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; + -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; + box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; + background: #f8f8f8; + color:#888; + border:none; + outline:none; + display: inline-block; + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + cursor:pointer; + width:100px; +} + + +.minContainer { + padding: 100px; + padding-right: 30px; + position: static; +} + +table { + border-collapse:collapse; + table-layout: fixed; + border-spacing: 0; +} +.td { + border: 2px solid #000000; + font-size:20px; + /** font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; **/ + color:#000000; + line-height: 1.428571429; + width: 30px; + height: 32px; + min-width: 80px; + max-width: 80px; + min-height: 80px; + max-height: 80px; + text-align: center; +} + +.X{ + background-color: #f5ae70; +} + +.O{ + background-color: #66ff66; +} + \ No newline at end of file diff --git a/OmPrakash025/ticTac.js b/OmPrakash025/ticTac.js new file mode 100644 index 0000000..1911dfc --- /dev/null +++ b/OmPrakash025/ticTac.js @@ -0,0 +1,129 @@ +var turn = 'X'; + +var score = { + 'X': 0, + 'O': 0 +}; + +var gridValue = 0; + +function fnLoad() { + var select = document.getElementById("grid"); + if(i=3){ + var option = document.createElement('option'); + select.options[select.options.length] = new Option(i + ' X ' + i, i); + } + + addEvent(document.getElementById("game"), "click", fnChoose); + + fnNewGame(); +} + + + +function addEvent(element, eventName, callback) { + + if (element.addEventListener) { + element.addEventListener(eventName, callback, false); + } else if (element.attachEvent) { + element.attachEvent("on" + eventName, callback); + } +} + +function fnChoose(e) { + if (e.target && e.target.nodeName == "TD") { + var targetElement = document.getElementById(e.target.id); + var prevTurn; + if ((targetElement.className).indexOf("disabled") == -1) { + targetElement.innerHTML = turn; + targetElement.classList.add('disabled'); + targetElement.classList.add(turn); + score[turn] += 1; + prevTurn = turn; + turn = turn === "X" ? "O" : "X"; + if (fndecide(targetElement, prevTurn)) { + alert(prevTurn + ' has won the game'); + fnNewGame(); + } else if ((score['X'] + score['O']) == (gridValue * gridValue)) { + alert('Draw!'); + fnNewGame(); + } + } + } +} + +function fndecide(targetElement, prevTurn) { + var UL = document.getElementById('game'); + var elements, i, j, cnt; + if (score[prevTurn] >= gridValue) { + var classes = targetElement.className.split(/\s+/); + for (i = 0; i < classes.length; i += 1) { + cnt = 0; + if (classes[i].indexOf('row') !== -1 || classes[i].indexOf('col') !== -1 || classes[i].indexOf('dia') !== -1) { + elements = UL.getElementsByClassName(classes[i]); + for (j = 0; j < elements.length; j += 1) { + if (elements[j].innerHTML == prevTurn) { + cnt += 1; + } + } + if (cnt == gridValue) { + return true; + } + } + } + } + return false; +} + +function fnNewGame() { + var gameUL = document.getElementById("game"); + if (gameUL.innerHTML !== '') { + gameUL.innerHTML = null; + score = { + 'X': 0, + 'O': 0 + }; + turn = 'X'; + gridValue = 0; + } + var select = document.getElementById("grid"); + gridValue = select.options[select.selectedIndex].value; + var i, j, li, k = 0, + classLists; + var gridAdd = +gridValue + 1; + + for (i = 1; i <= gridValue; i += 1) { + tr = document.createElement('tr'); + for (j = 1; j <= gridValue; j += 1) { + k += 1; + li = document.createElement('td'); + li.setAttribute("id", 'li' + k); + + classLists = 'td row' + i + ' col' + j; + + if (i === j) { + classLists = 'td row' + i + ' col' + j + ' dia0'; + } + + if ((i + j) === gridAdd) { + classLists = 'td row' + i + ' col' + j + ' dia1'; + } + + if (!isEven(gridValue) && (Math.round(gridValue / 2) === i && Math.round(gridValue / 2) === j)) + classLists = 'td row' + i + ' col' + j + ' dia0 dia1'; + + li.className = classLists; + tr.appendChild(li); + + } + gameUL.appendChild(tr); + } +} + + +function isEven(value) { + if (value % 2 == 0) + return true; + else + return false; +} diff --git a/OmPrakash025/tictactoe.html b/OmPrakash025/tictactoe.html deleted file mode 100644 index d971696..0000000 --- a/OmPrakash025/tictactoe.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
- - - - \ No newline at end of file From ae93bc51358a2c967e95fb4f16760399fd786be4 Mon Sep 17 00:00:00 2001 From: Om Prakash Kumar Date: Wed, 13 Feb 2019 01:34:02 +0530 Subject: [PATCH 3/3] Updating TICTACTOE with put to database code --- OmPrakash025/index.html | 122 ++++++++++++++++++++++++++----------- OmPrakash025/ticTac.js | 129 ---------------------------------------- 2 files changed, 87 insertions(+), 164 deletions(-) delete mode 100644 OmPrakash025/ticTac.js diff --git a/OmPrakash025/index.html b/OmPrakash025/index.html index 9d1785b..4fe1511 100644 --- a/OmPrakash025/index.html +++ b/OmPrakash025/index.html @@ -30,7 +30,7 @@ // put all the javascript code within same block ( for variable scope - see details online ) { // declare variables before using them ( pColor1 = Color for player1 | pColor2 = Color for player2 ...) - var pColor1, pColor2, pName1, pName2, turn; + var pColor1, pColor2, pName1, pName2, turn, score1=0, score2=0; // we have 9 boxes: ... ... // each box has id="box"+number attribute, starting from 1, ending in 9 @@ -89,9 +89,80 @@ dgi('p2Color').style.backgroundColor = pColor2; } + + function loadScore(pname1,pname2){ + $.ajax({ + url: 'http://localhost:61628/api/Scorings/'+pname1, + type: 'GET', + dataType: 'json', + success: function(res){ + dgi('p1Score').innerHTML = res.Score; + } + }); + $.ajax({ + url: 'http://localhost:61628/api/Scorings/'+pname2, + type: 'GET', + dataType: 'json', + success: function(res){ + dgi('p2Score').innerHTML = res.Score; + } + }); + } + + function addNew(){ + $.ajax({ + url: 'http://localhost:61628/api/Scorings/'+$('#newName').val(), + type: 'GET', + dataType: 'json', + success: function(res){ + alert("Player exists cannot add!!!"); + }, + error:function(){ + regData = { + "Name": $('#newName').val(), + "score": 0 + }; + $.ajax({ + type : "POST", + url : "http://localhost:61628/api/Scorings/", + dataType : "json", + data : regData, + success : function (msg) { + alert("Player added!!!"); + window.location="index.html"; + } + }); + } + }); + + } + + function updateScore(pname,score){ + var sc=Number(score); + $.ajax({ + url: 'http://localhost:61628/api/Scorings/'+pname, + type: 'GET', + dataType: 'json', + success: function(res){ + sc=res.Score+sc; + $.ajax({ + url: 'http://localhost:61628/api/Scorings/'+pname, + type: 'PUT', + dataType: 'json', + data:{ + "Name": res.Name, + "score": sc + }, + success: function(res){ + console.log(sc); + } + }); + } + }); + } // works exactly as the setPlayerColor() function function setPlayerName( player, nameID ){ - var name = nameID.options[nameID.selectedIndex].text + var name = nameID.options[nameID.selectedIndex].text; dgi('errBox').innerHTML = ''; dgi('startButton').disabled = false; switch(player){ @@ -117,7 +188,6 @@ dgi('p1Name').innerHTML = name; dgi('p2Name').innerHTML = name; } - // the main logic of the game... takes the input checkbox that was clicked // and then checks whose turn it was... updates the information being showed // and then checks if any one of the user has won the game or not... @@ -186,9 +256,15 @@ if( turn == 1){ pName = pName1; + updateScore(pName1,10); + updateScore(pName2,-5); + loadScore(pName1,pName2); } else if( turn == 2){ pName = pName2; + updateScore(pName1,-5); + updateScore(pName2,10); + loadScore(pName1,pName2); } // save game report to the 'Game Records' section @@ -217,17 +293,17 @@ function loadData(){ $.ajax({ - url: 'http://localhost:57163/api/Scorings/', + url: 'http://localhost:61628/api/Scorings/', type: 'GET', dataType: 'json', success: function(res){ $.each(res, function(key, value) { $('#p1NameInput') - .append($('