{"id":241,"date":"2024-07-10T19:03:33","date_gmt":"2024-07-10T19:03:33","guid":{"rendered":"https:\/\/projects.emat.kent.edu\/24sp-emat\/?page_id=241"},"modified":"2024-07-10T19:03:33","modified_gmt":"2024-07-10T19:03:33","slug":"tic-tac-toe-2","status":"publish","type":"page","link":"https:\/\/projects.emat.kent.edu\/24sp-emat\/tic-tac-toe-2\/","title":{"rendered":"Tic Tac Toe"},"content":{"rendered":"\n<html lang=\"en\">\n\t<head>\n\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n    <meta charset=\"UTF-8\">\n    <title>Tic Tac Toe<\/title>\n<\/head>\n\t<!-- select box -->\n<div class=\"wrapper\">\n  <div class=\"select-box\">\n    <header>Tic Tac Toe<\/header>\n    <div class=\"content\">\n      <div class=\"title\">Select X or O to begin<\/div>\n      <div class=\"options\">\n        <button class=\"playerX\">Player (X)<\/button>\n        <button class=\"playerO\">Player (O)<\/button>\n      <\/div>\n<\/div>\n  <\/div> \n\n  <!-- playboard section -->\n  <div class=\"play-board\">\n    <div class=\"details\">\n      <div class=\"players\">\n        <span class=\"Xturn\">X&#8217;s Turn<\/span>\n        <span class=\"Oturn\">O&#8217;s Turn<\/span>\n        <div class=\"slider\"><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"play-area\">\n      <section>\n        <span class=\"box1\"><\/span>\n        <span class=\"box2\"><\/span>\n        <span class=\"box3\"><\/span>\n      <\/section>\n      <section>\n        <span class=\"box4\"><\/span>\n        <span class=\"box5\"><\/span>\n        <span class=\"box6\"><\/span>\n      <\/section>\n      <section>\n        <span class=\"box7\"><\/span>\n        <span class=\"box8\"><\/span>\n        <span class=\"box9\"><\/span>\n      <\/section>\n    <\/div>\n  <\/div>\n\n  <!-- result box -->\n  <div class=\"result-box\">\n    <div class=\"won-text\"><\/div>\n    <div class=\"btn\"><button>Replay<\/button><\/div>\n  <\/div>\n<\/div>\n\t\n<script>\n\tconst selectBox = document.querySelector(\".select-box\"),\n      selectBtnX = selectBox.querySelector(\".options .playerX\"),\n      selectBtnO = selectBox.querySelector(\".options .playerO\"),\n      playBoard = document.querySelector(\".play-board\"),\n      players = document.querySelector(\".players\"),\n      allBox = document.querySelectorAll(\"section span\"),\n      resultBox = document.querySelector(\".result-box\"),\n      wonText = resultBox.querySelector(\".won-text\"),\n      replayBtn = resultBox.querySelector(\"button\");\n\nwindow.onload = () => {\n    for (let i = 0; i < allBox.length; i++) {\n        allBox[i].addEventListener(\"click\", clickedBox);\n    }\n};\n\nselectBtnX.onclick = () => {\n    selectBox.classList.add(\"hide\");\n    playBoard.classList.add(\"show\");\n\tplayers.classList.add(\"activeX\")\n};\n\nselectBtnO.onclick = () => {\n    selectBox.classList.add(\"hide\");\n    playBoard.classList.add(\"show\");\n    players.setAttribute(\"class\", \"players active player\");\n\tplayers.classList.add(\"activeO\")\n};\n\nlet playerXIcon = \"fas fa-times\",\n    playerOIcon = \"far fa-circle\",\n\tplayerSign;\n\nfunction clickedBox(event) {\n    let element = event.target;\n    if (element.childElementCount === 0) {\n        if (players.classList.contains(\"activeO\")) {\n            playerSign = \"O\"; \n            element.innerHTML = `<i class=\"${playerOIcon}\"><\/i>`;\n            players.classList.remove(\"activeO\");\n\t\t    players.classList.add(\"activeX\");\n        } else {\n            playerSign = \"X\";\n            element.innerHTML = `<i class=\"${playerXIcon}\"><\/i>`;\n            players.classList.remove(\"activeX\");\n\t\t    players.classList.add(\"activeO\");\n        }\n        element.setAttribute(\"id\", playerSign);\n        selectWinner();\n    }\n}\n\nfunction getIdVal(classname) {\n    return document.querySelector(\".box\" + classname).id;\n}\n\nfunction checkIdSign(val1, val2, val3, sign) {\n    return getIdVal(val1) === sign && getIdVal(val2) === sign && getIdVal(val3) === sign;\n}\n\nfunction selectWinner() {\n    if (checkIdSign(1, 2, 3, playerSign) || checkIdSign(4, 5, 6, playerSign) || checkIdSign(7, 8, 9, playerSign) || checkIdSign(1, 4, 7, playerSign) || checkIdSign(2, 5, 8, playerSign) || checkIdSign(3, 6, 9, playerSign) || checkIdSign(1, 5, 9, playerSign) || checkIdSign(3, 5, 7, playerSign)) {\n        setTimeout(() => {\n            resultBox.classList.add(\"show\");\n            playBoard.classList.remove(\"show\");\n        }, 700);\n        wonText.innerHTML = `Player <p>${playerSign}<\/p> won the game!`;\n    } else {\n        let count = 0;\n        for (let i = 0; i < allBox.length; i++) {\n            if (allBox[i].childElementCount > 0) {\n                count++;\n            }\n        }\n        if (count === 9) {\n            setTimeout(() => {\n                resultBox.classList.add(\"show\");\n                playBoard.classList.remove(\"show\");\n            }, 700);\n            wonText.textContent = \"Match has been drawn!\";\n        }\n    }\n}\n\n\nreplayBtn.onclick = () => {\n    window.location.reload();\n};\n\t<\/script>\n\t\n\t<style>\n\t\t@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: sans-serif;\n}\n::selection{\n  color: #FFB054;\n  background:#004AAD;\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background:#002C66;\n  position: relative; \/* Added relative positioning *\/\n}\n.wrapper{\n margin: 25px;\n width: 600px;\n height: 475px;\n padding: 30px;\n  border-radius: 10px;\n  background: #002C66;\n  box-shadow: 0 10px 30px cmyk(0,0,0,10%);\n\n.select-box{\n  background: #FFB054;\n  padding: 20px 25px 25px;\n  border-radius: 5px;\n  max-width: 400px;\n  width: 100%;\n}\n.select-box.hide{\n  opacity: 0;\n  pointer-events: none;\n}\n.select-box header{\n  font-size: 30px;\n  font-weight: 600;\n  padding-bottom: 10px;\n  border-bottom: 1px solid lightgrey;\n}\n.select-box .title{\n  font-size: 22px;\n  font-weight: 500;\n  margin: 20px 0;\n}\n.select-box .options{\n  display: flex;\n  width: 100%;\n}\n.options button{\n  width: 100%;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 10px 0;\n  border: none;\n  background: #FFE14D;\n  border-radius: 5px;\n  color: #FFB054;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n.options button:hover,\n.btn button:hover{\n  transform: scale(0.96);\n}\n.options button.playerX{\n  margin-right: 5px;\n}\n.options button.playerO{\n  margin-left: 5px;\n}\n\n.select-box, .play-board, .result-box{\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: all 0.3s ease;\n}\n\n.select-box .credit{\n  text-align: center;\n  margin-top: 20px;\n  font-size: 18px;\n  font-weight: 500;\n}\n.select-box .credit a{\n  color: #004AAD;\n  text-decoration: none;\n}\n.select-box .credit a:hover{\n  text-decoration: underline;\n}\n\n.play-board{\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, -50%) scale(0.9);\n}\n.play-board.show{\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(-50%, -50%) scale(1);\n}\n.play-board .details{\n  padding: 7px;\n  border-radius: 5px;\n  background: #FFB054;\n}\n.play-board .players{\n  width: 100%;\n  display: flex;\n  position: relative;\n  justify-content: space-between;\n}\n.players span{\n  position: relative;\n  z-index: 2;\n  color: #004AAD;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 10px 0;\n  width: 100%;\n  text-align: center;\n  cursor: default;\n  user-select: none;\n  transition: all 0.3 ease;\n}\n.players.activeO span:first-child{\n  color: #FFB054;\n}\n.players.activeO span:last-child{\n  color: #004AAD;\n}\n.players span:first-child{\n  color: #FFB054;\n}\n.players .slider{\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 50%;\n  height: 100%;\n  background: #004AAD;\n  border-radius: 5px;\n  transition: all 0.3s ease;\n}\n.players.activeO .slider{\n  left: 50%;\n}\n.players.activeO span:first-child{\n  color: #004AAD;\n}\n.players.activeO span:nth-child(2){\n  color: #FFB054;\n}\n.players.activeO .slider{\n  left: 50%;\n}\n.play-area{\n  margin-top: 20px;\n}\n.play-area section{\n  display: flex;\n  margin-bottom: 1px;\n}\n.play-area section span{\n  display: block;\n  height: 90px;\n  width: 90px;\n  margin: 2px;\n  color: #004AAD;\n  font-size: 40px;\n  line-height: 80px;\n  text-align: center;\n  border-radius: 5px;\n  background: #fff;\n}\n\n.result-box{\n  padding: 25px 20px;\n  border-radius: 5px;\n  max-width: 400px;\n  width: 100%;\n  opacity: 0;\n  text-align: center;\n  background: #FFB054;\n  pointer-events: none;\n  transform: translate(-50%, -50%) scale(0.9);\n}\n.result-box.show{\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(-50%, -50%) scale(1);\n}\n.result-box .won-text{\n  font-size: 30px;\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n}\n.result-box .won-text p{\n  font-weight: 600;\n  margin: 0 5px;\n}\n.result-box .btn{\n  width: 100%;\n  margin-top: 25px;\n  display: flex;\n  justify-content: center;\n}\n.btn button{\n  font-size: 18px;\n  font-weight: 500;\n  padding: 8px 20px;\n  border: none;\n  background: #004AAD;\n  border-radius: 5px;\n  color: #FFB054;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\t<\/style>\n<\/html>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/\">home<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/word-scramble-2\/\">word scramble<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/memory-card-2\/\">memory card<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/hangman-7\/\">hangman<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tic Tac Toe Tic Tac Toe Select X or O to begin Player (X) Player (O) X&#8217;s Turn O&#8217;s Turn Replay<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-241","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":0,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/241\/revisions"}],"wp:attachment":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/media?parent=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}