+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/JavaScript Tic Tac Toe/script.js b/JavaScript Tic Tac Toe/script.js
new file mode 100644
index 0000000..92fcca4
--- /dev/null
+++ b/JavaScript Tic Tac Toe/script.js
@@ -0,0 +1,478 @@
+// btns class, flex posistion, improve switch function
+
+var drawboard = document.getElementById('tictactoe'),
+ winnerset = document.getElementById('winnerset').children,
+ gameBoard = document.getElementById('board'),
+ play = document.getElementById('play'),
+ winner = document.getElementById('winner'),
+ res = document.getElementById('reset'),
+ tiles = document.getElementsByClassName('tile'),
+ signs = document.getElementsByClassName('sign'),
+ opponent = document.getElementById("opponent"),
+ settings = document.getElementById("settings"),
+ humvscomp = document.getElementById("humvscomp"),
+ xvso = document.getElementById("xvso"),
+ options = document.getElementsByClassName("options"),
+ btns = document.getElementsByClassName('btn'),
+ sets = document.getElementsByClassName('sets'),
+ welcome = document.getElementsByClassName('welcome'),
+ chooses = document.getElementsByClassName('chooses'),
+ destiny = document.getElementsByClassName('destiny'),
+ options = document.getElementsByClassName('options'),
+ human,
+ computer,
+ humVal,
+ comVal,
+ palyer1,
+ player2,
+ player1val,
+ player2val,
+ game,
+ board = [0,0,0,0,0,0,0,0,0],
+ round = 0,
+ winningBoard = [
+ [0, 1, 2],
+ [3,4,5],
+ [0,3,6],
+ [6,7,8],
+ [1,4,7],
+ [2,5,8],
+ [0,4,8],
+ [2,4,6]
+];
+
+
+//drawingWithDelay(winnerset[1], 0.5, 0.5);
+
+
+HTMLElement.prototype.addClass = function(el) {
+ this.classList.add(el);
+}
+HTMLElement.prototype.removeClass = function(el) {
+ this.classList.remove(el);
+}
+
+// drawing svg elemts
+// if var element contains more then one html element, do delay between each animation to // achieve hand drawing effect
+// if element has childs,
+// check for the elemts nodes
+// Loop through an array of elements, if element's childs
+//nodeType = 1 ad some style: animation to it with delay beetwen each node
+function drawingWithDelay(element, newTime, newDelay) {
+var time = newTime;
+if (element.hasChildNodes()) {
+ var delay = 0,
+ child = element.childNodes;
+ for(var d=0; d
0) {
+ elementsToShow[j].addClass('fadeIn');
+ }
+ elementsToShow[j].removeClass('disable');
+ }
+ }
+ //for (var i = 0; i< elementsToShow.length; i++) {
+
+switchClass (sets, welcome);
+
+ for (var i =0; i< btns.length ; i++){
+ btns[i].addEventListener('click', function () {
+ var elemnt = this.id;
+ console.log(elemnt);
+ choose(elemnt);
+ });
+ }
+
+function choose(id) {
+ // first we choose our opponent, if human is true we play against other human player if computer is true we play with ai
+ if (id == 'play') {
+ switchClass (sets, chooses);
+ }
+
+ else if (id == 'reset') {
+ reset();
+ }
+
+else if (id == 'human') {
+ human = true;
+ computer = false;
+ switchClass (sets, destiny);
+ }
+ else if (id == 'computer') {
+ human = false;
+ computer = true;
+ switchClass (sets, destiny);
+ }
+ // when we know our opponent we can chooseour sign. When computer condition is true we choose sign for human player
+ else if (computer) {
+ if (id == 'o' || id == 'x') {
+ if (id == 'x') {
+ humVal = 'x'
+ comVal = 'o'
+ }
+ else {
+ humVal = 'o'
+ comVal = 'x'
+ }
+ game = true;
+ startGame();
+ }
+ }
+ // If human condition is true we choose sign for player 1 with our first choice
+ else if (human){
+ if (id == 'o' || id == 'x') {
+ if (id == 'x') {
+ player1val = 'x';
+ player2val = 'o';
+ } else {
+ player2val = 'x';
+ player1val = 'o';
+ }
+ }
+ game = true;
+ startGame();
+}
+ console.log ('human :'+human+ " " + "computer :" + computer);
+ console.log ('player1val: ' + player1val);
+ console.log ('player2val: ' + player2val);
+ console.log ('humVal: ' + humVal);
+ console.log ('comVal: ' + comVal)
+ console.log ('game: ' + game)
+}
+
+
+function startGame() {
+ settings.addClass('disable');
+ gameBoard.removeClass('disable');
+ drawingWithDelay(drawboard, 0.5, 0.5);
+ player1 = true;
+}
+
+// reset the game
+function reset() {
+ window.location = window.location;
+ round = 0;
+ for(var x= 0; x<9 ;x++) {
+ board[x] = 0;
+ }
+ game = false;
+}
+
+
+function ai() {
+ if (game) {
+ console.log('computer move');
+ var obj = minimax(board, 0 , computer);
+ console.log('outside ' +board + 'obj '+obj);
+
+ }
+}
+
+function minimax(actualBoard, depth, player) {
+ // check if there is a winner, if yes return points
+ if(checkWin(actualBoard, computer)) {
+ // console.log('computer win :' +(10 - depth));
+ return 10 - depth ;
+ }
+ else if(checkWin(actualBoard, human)) {
+ //console.log('human win :' + (-10 + depth));
+ return -10 + depth ;
+ }
+ else if (checkBoard(actualBoard)) {
+ // console.log('tie :' + 0);
+ return 0;
+ }
+
+ // set the first of maximum values for each players
+ var max;
+ if (player) {
+ max = -Infinity
+ }
+ else{
+ max = Infinity
+ }
+ // index of the move
+var index = 0;
+
+ //console.log('max :'+max) ;
+
+
+ for (var i =0; i max) {
+ // console.log('is minimaxScore'+minmaxScore+ " > "+"max"+max)
+ max = minmaxScore;
+ index = i;
+ //console.log(max);
+ }
+ }
+ else {
+ if(minmaxScore < max) {
+ //console.log('is minimaxScore'+minmaxScore+ " < "+"max"+max)
+ max = minmaxScore;
+ index = i;
+ // console.log(max);
+ }
+ }
+
+ }
+ }
+
+// when finally function reach back its depth 0 level, it can make a move according to index - movie where best max value was achieved.
+if (depth == 0) {
+// console.log('teraz depth 0')
+
+ set(index, computer);
+ //console.log(player +" "+ max);
+}
+ //console.log(player +" "+ max)
+ //console.log('the end, max: '+ max+', minmaxScore :'+minmaxScore +' player '+ player+' index '+ index+', depth :'+depth );
+
+ // return max value to the previus level depth
+ return max;
+}
+
+play.addEventListener
\ No newline at end of file
diff --git a/JavaScript Tic Tac Toe/style.css b/JavaScript Tic Tac Toe/style.css
new file mode 100644
index 0000000..0eba15c
--- /dev/null
+++ b/JavaScript Tic Tac Toe/style.css
@@ -0,0 +1,210 @@
+@import url("https://fonts.googleapis.com/css?family=Amatic+SC|Dawning+of+a+New+Day|League+Script|Loved+by+the+King|Waiting+for+the+Sunrise");
+body, html {
+ height: 100%;
+}
+
+body {
+ display: flex;
+ flex-flow: column no-wrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+}
+
+.paper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 700px;
+ height: 500px;
+ background-image: -webkit-repeating-linear-gradient(left, #3a2493, 1px, transparent 1px, transparent 20px), -webkit-repeating-linear-gradient(bottom, #3a2493, 1px, #3a2493 1px, #3a2493 20px);
+ background-image: repeating-linear-gradient(90deg, #3a2493, 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, #316b6a, 1px, #3a2493 1px, #3a2493 20px);
+ background-size: 20px 20px;
+ background-origin: content-box;
+ padding: 1em auto;
+ position: relative;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 0, 0, 0.1) inset;
+}
+
+.rotated {
+ transform: rotate(0deg);
+}
+
+.paper:after, .paper:before {
+ z-index: -1;
+ position: absolute;
+ content: "";
+ left: auto;
+ max-width: 300px;
+ background: white;
+ transform: rotate(0deg);
+}
+
+.paper:after {
+ bottom: 10px;
+ right: 7px;
+ width: 80%;
+ top: 90%;
+ box-shadow: 3px 15px 12px #777;
+ transform: rotate(0deg);
+}
+
+.paper:before {
+ bottom: 10px;
+ left: 7px;
+ width: 70%;
+ top: 80%;
+ box-shadow: -3px 15px 12px #777;
+ transform: rotate(0deg);
+}
+
+#board {
+ position: relative;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+ align-items: center;
+ width: 50%;
+ height: 300px;
+ margin: 50px auto;
+}
+
+#logo {
+ width: 35%;
+ height: auto;
+ margin: 30px;
+}
+#logo svg {
+ fill: #ffffff;
+}
+
+#gameboard {
+ position: absolute;
+ top: 5px;
+ left: 20px;
+ width: 100%;
+ height: auto;
+ stroke-dasharray: 250;
+ stroke-dashoffset: 250;
+ stroke: #ffffff;
+ stroke-width: 1.25px;
+ stroke-miterlimit: 10;
+ fill: none;
+}
+#gameboard .st4 {
+ stroke-width: 2;
+ stroke-miterlimit: 10;
+}
+
+draw {
+ animation: dash 0.5s ease-in-out forwards;
+}
+
+@keyframes dash {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+.tile {
+ margin: 5%;
+ width: 22%;
+ height: 22%;
+ border-radius: 5px;
+ cursor: pointer;
+ z-index: 2;
+}
+
+#winner {
+ width: 600px;
+ height: max-content;
+ margin: auto;
+ margin-top: 60px;
+ position: absolute;
+ align-self: flex-start;
+ text-align: center;
+ transform: rotate(5deg);
+}
+
+#reset {
+ margin: 0.5vh;
+ padding: 0;
+ width: 50%;
+ height: 30px;
+ vertical-align: middle;
+ text-align: center;
+ border-radius: 20px;
+ cursor: pointer;
+ float: left;
+}
+
+h1, h2 {
+ font-family: "Waiting for the Sunrise", cursive;
+ margin: 0;
+ font-size: 40px;
+ color: #ffffff;
+}
+
+#settings, .container, .options {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+#settings {
+ height: 70%;
+ align-items: center;
+ align-content: center;
+}
+#settings .container {
+ height: 30%;
+ align-items: center;
+}
+#settings .container .options {
+ flex-direction: row;
+ width: 60%;
+}
+
+.btn {
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+}
+.btn:hover {
+ transform: rotate(3deg) scale(1.3);
+}
+
+.disable {
+ display: none !important;
+}
+
+.fadeBounceIn {
+ animation: fadeBounceIn 1s ease-in-out forwards;
+}
+
+.fadeIn {
+ animation: fadeIn 2s ease-in-out forwards;
+}
+
+@keyframes fadeBounceIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.4);
+ }
+ 80% {
+ transform: scale(1.4);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
\ No newline at end of file