Tic Tac Toe

HTML

              
                <div class="rotated">
  <div class="paper">   
    <div id="settings">
      <div class='container'>
         <h1 class="sets welcome">THIS IS Tic tac Toe !</h1>
         <h1 class="sets chooses disable" id="opponent">CHOOSE YOUR OPPONENT</h1>
         <h1 class="sets destiny disable" id="destiny">Choose your destiny</h1>       
      </div>  
    
      <div id="logo"> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.9 179.6"><path d="M59.5 0c0 0-0.1 2.9-0.3 7.9 -0.1 2.5-0.2 5.5-0.3 9 -0.1 3.5-0.2 7.4-0.3 11.7 -0.1 4.3-0.2 8.9-0.2 13.8 -0.1 4.9 0 10.1-0.1 15.4 0 5.4 0 10.9 0.1 16.5 0.1 5.6 0.2 11.3 0.4 17 0.2 5.7 0.3 11.4 0.6 17 0.2 5.6 0.5 11.1 0.8 16.5 0.4 5.3 0.6 10.5 1 15.4 0.3 4.9 0.7 9.5 1 13.8 0.4 4.3 0.7 8.2 1 11.7 0.3 3.5 0.6 6.5 0.8 9 0.5 5 0.8 7.8 0.8 7.8s-0.4-2.8-1-7.8c-0.3-2.5-0.7-5.5-1.1-9 -0.2-1.7-0.4-3.6-0.6-5.5 -0.2-1.9-0.4-4-0.6-6.1 -0.4-4.3-0.8-8.9-1.3-13.8 -0.4-4.9-0.8-10.1-1.2-15.4 -0.3-5.4-0.7-10.9-0.9-16.5 -0.3-5.6-0.5-11.3-0.7-17 -0.1-5.7-0.3-11.4-0.3-17.1 -0.1-5.6-0.1-11.2-0.1-16.5 0.1-5.4 0.1-10.5 0.3-15.5 0.1-4.9 0.3-9.6 0.4-13.8 0.1-2.1 0.2-4.2 0.2-6.1 0.1-2 0.2-3.8 0.3-5.5 0.2-3.5 0.4-6.5 0.5-9C59.3 2.9 59.5 0 59.5 0z"/><path d="M131.9 1.3c0 0 0.2 0.6 0.6 1.8 0.2 0.6 0.4 1.3 0.7 2.2 0.3 0.9 0.5 1.9 0.8 3 0.3 1.1 0.6 2.4 0.9 3.7 0.2 0.7 0.3 1.4 0.5 2.1 0.1 0.7 0.3 1.5 0.4 2.3 0.6 3.2 1.1 6.8 1.6 10.8 0.4 4 0.7 8.3 0.8 12.9 0.1 4.6 0.2 9.4 0 14.4 -0.3 10-0.9 20.6-1.4 31.2 -0.6 10.6-1.2 21.2-1.7 31.2 -0.6 9.9-1.2 19.2-1.6 27.2 -0.5 8-1 14.6-1.3 19.2 -0.3 4.6-0.5 7.3-0.5 7.3s0.1-2.7 0.3-7.3c0.2-4.6 0.4-11.3 0.8-19.3 0.4-8 0.8-17.3 1.2-27.2 0.5-10 1-20.6 1.6-31.2 0.6-10.6 1.3-21.2 1.6-31.2 0.1-5 0.2-9.8 0.2-14.3 0-4.6-0.3-8.9-0.6-12.8 -0.2-2-0.3-3.9-0.6-5.7 -0.1-0.9-0.2-1.8-0.3-2.6 -0.1-0.8-0.3-1.7-0.4-2.5 -0.1-0.8-0.3-1.6-0.4-2.3 -0.1-0.7-0.3-1.5-0.4-2.1 -0.3-1.4-0.5-2.6-0.8-3.8 -0.3-1.1-0.5-2.1-0.7-3 -0.2-0.9-0.5-1.6-0.6-2.2C132 1.9 131.9 1.3 131.9 1.3z"/><path d="M0 75.6c0 0 3.5-0.6 9.7-1.7 3.1-0.5 6.8-1.2 11.1-2 4.3-0.8 9.2-1.6 14.5-2.4 10.6-1.7 23-3.7 36.3-5.7 13.3-2 27.5-4 41.7-5.9 14.2-1.8 28.4-3.6 41.8-5.2 13.3-1.5 25.8-2.8 36.5-3.9 5.3-0.6 10.2-1 14.6-1.4 4.3-0.4 8.1-0.7 11.3-1 6.2-0.5 9.8-0.9 9.8-0.9s-3.6 0.4-9.8 1.1c-6.2 0.7-15.1 1.7-25.8 2.9 -5.3 0.6-11.1 1.3-17.2 2 -6.1 0.7-12.6 1.5-19.2 2.3 -13.3 1.6-27.5 3.4-41.7 5.3C99.2 61 85 62.9 71.7 64.9c-6.6 1-13.1 1.9-19.2 2.8 -6.1 0.9-11.8 1.8-17.2 2.6 -10.6 1.6-19.5 3-25.7 3.9C3.5 75.1 0 75.6 0 75.6z"/><path d="M-0.8 128.8c0 0 3.7-0.1 10-0.2 3.2-0.1 7.1-0.2 11.5-0.3 4.4-0.1 9.5-0.3 14.9-0.5 5.5-0.2 11.4-0.4 17.7-0.7 6.3-0.3 12.9-0.7 19.7-1 6.8-0.4 13.9-0.8 21.1-1.3 7.2-0.5 14.4-1 21.7-1.6 7.3-0.6 14.6-1.2 21.7-1.8 7.2-0.6 14.2-1.4 21-2 6.8-0.8 13.4-1.4 19.6-2.1 6.2-0.7 12.1-1.4 17.6-2.1 5.4-0.7 10.4-1.3 14.8-1.9 4.4-0.6 8.3-1.1 11.4-1.5 6.3-0.9 9.9-1.4 9.9-1.4s-3.6 0.6-9.9 1.6c-3.2 0.5-7 1.1-11.4 1.7 -2.2 0.3-4.5 0.7-7 1 -2.5 0.3-5.1 0.7-7.8 1.1 -5.4 0.8-11.3 1.5-17.5 2.3 -6.2 0.8-12.8 1.5-19.6 2.3 -6.8 0.7-13.8 1.5-21 2.1 -7.2 0.7-14.4 1.3-21.7 1.9 -7.3 0.5-14.6 1.1-21.7 1.5 -7.2 0.5-14.2 0.8-21.1 1.2 -6.8 0.3-13.5 0.6-19.7 0.8 -6.3 0.2-12.2 0.4-17.7 0.5 -2.7 0.1-5.4 0.1-7.9 0.2 -2.5 0-4.9 0-7.1 0.1 -4.5 0-8.3 0.1-11.5 0.1C2.8 128.8-0.8 128.8-0.8 128.8z"/><path d="M183.1 4.6c0 0-0.1 0.5-0.4 1.4 -0.3 0.9-0.6 2.1-1.1 3.6 -0.5 1.5-1 3.2-1.7 5 -0.7 1.8-1.4 3.8-2.2 5.7 -1.6 3.9-3.3 7.6-4.7 10.4 -0.7 1.4-1.3 2.5-1.8 3.3 -0.4 0.8-0.7 1.2-0.7 1.2s0.2-0.5 0.5-1.3c0.3-0.9 0.8-2.1 1.3-3.5 0.6-1.4 1.2-3.1 1.9-4.9 0.7-1.8 1.5-3.7 2.3-5.6 0.8-1.9 1.6-3.8 2.3-5.6 0.8-1.8 1.5-3.5 2.1-4.9 0.6-1.4 1.1-2.6 1.5-3.5C182.9 5.1 183.1 4.6 183.1 4.6z"/><path d="M159.6 6.8c0 0 1.5 1.7 3.6 4.3 0.6 0.6 1.1 1.3 1.8 2.1 0.6 0.7 1.3 1.5 2 2.3 1.4 1.6 2.9 3.2 4.5 4.8 1.6 1.6 3.1 3.2 4.6 4.7 0.8 0.7 1.5 1.4 2.2 2.1 0.7 0.7 1.4 1.3 2 1.9 2.5 2.3 4.1 3.8 4.1 3.8s-0.5-0.3-1.3-0.9c-0.8-0.6-2-1.4-3.3-2.4 -1.4-1-2.9-2.3-4.5-3.7 -0.8-0.7-1.6-1.4-2.4-2.2 -0.8-0.8-1.6-1.6-2.4-2.4 -0.8-0.8-1.6-1.6-2.3-2.5 -0.8-0.8-1.4-1.7-2.1-2.5 -1.3-1.6-2.6-3.2-3.5-4.6 -1-1.4-1.7-2.6-2.3-3.4C159.9 7.3 159.6 6.8 159.6 6.8z"/><path d="M101.8 141.7c0 0-0.2 0.3-0.6 0.8 -0.2 0.2-0.4 0.6-0.6 0.9 -0.1 0.2-0.2 0.4-0.3 0.6 -0.1 0.2-0.2 0.4-0.3 0.7 -0.2 0.5-0.4 1-0.6 1.5 -0.2 0.6-0.4 1.2-0.5 1.8 -0.3 1.2-0.6 2.6-0.9 4 -0.2 0.7-0.3 1.4-0.5 2.1 -0.1 0.7-0.4 1.3-0.5 2 -0.2 0.6-0.4 1.3-0.7 1.8 -0.2 0.6-0.5 1.1-0.8 1.6 -0.1 0.2-0.3 0.5-0.4 0.7 -0.1 0.2-0.3 0.4-0.4 0.6 -0.3 0.4-0.5 0.6-0.7 0.9 -0.4 0.4-0.7 0.7-0.7 0.7s0.2-0.3 0.5-0.8c0.2-0.2 0.3-0.6 0.5-1 0.1-0.2 0.2-0.4 0.3-0.6 0.1-0.2 0.2-0.5 0.3-0.7 0.2-0.5 0.4-1 0.5-1.6 0.2-0.6 0.3-1.2 0.5-1.8 0.3-1.3 0.6-2.6 0.8-4 0.2-0.7 0.3-1.4 0.5-2.1 0.2-0.7 0.4-1.3 0.6-2 0.2-0.6 0.5-1.2 0.7-1.8 0.3-0.6 0.5-1.1 0.9-1.5 0.2-0.2 0.3-0.4 0.4-0.6 0.2-0.2 0.3-0.4 0.5-0.5 0.3-0.3 0.6-0.6 0.8-0.8C101.5 141.9 101.8 141.7 101.8 141.7z"/><path d="M86.6 143.9c0 0 1.3 0.8 3.2 2.1 1.9 1.3 4.4 3.2 6.8 5.1 2.4 1.9 4.7 3.9 6.5 5.5 1.7 1.6 2.8 2.7 2.8 2.7s-1.3-0.8-3.2-2.1c-1.9-1.3-4.4-3.2-6.8-5.1 -2.4-1.9-4.7-3.9-6.5-5.5C87.6 145 86.6 143.9 86.6 143.9z"/><path d="M35.7 87.8c0 0-1.2 1.3-3 3.3 -0.4 0.5-0.9 1-1.4 1.6 -0.5 0.6-1 1.2-1.6 1.8 -1.1 1.3-2.2 2.6-3.4 4 -1.1 1.4-2.2 2.8-3.2 4.1 -0.5 0.7-1 1.3-1.4 1.9 -0.4 0.6-0.9 1.2-1.3 1.7 -1.6 2.2-2.6 3.6-2.6 3.6s0.2-0.4 0.5-1.1c0.3-0.7 0.8-1.7 1.5-2.9 0.6-1.2 1.5-2.5 2.4-3.9 0.5-0.7 1-1.4 1.5-2.1 0.5-0.7 1.1-1.4 1.6-2.1 0.6-0.7 1.2-1.4 1.7-2 0.6-0.7 1.2-1.3 1.8-1.9 1.2-1.2 2.3-2.3 3.3-3.2 1-0.9 1.9-1.6 2.5-2.1C35.3 88.1 35.7 87.8 35.7 87.8z"/><path d="M14 89.2c0 0 0.9 0.7 2.1 1.9 1.2 1.2 2.8 2.8 4.3 4.4 1.5 1.7 2.9 3.4 3.9 4.8 1 1.4 1.6 2.3 1.6 2.3s-0.9-0.7-2.1-1.9c-1.2-1.2-2.8-2.8-4.3-4.4 -1.5-1.7-2.9-3.4-3.9-4.8C14.6 90.2 14 89.2 14 89.2z"/><path d="M40.3 149.1c0 0-0.3 0.3-0.7 0.9 -0.5 0.6-1.1 1.4-1.9 2.3 -1.6 1.9-3.8 4.4-5.9 6.9 -2.2 2.5-4.3 5-5.9 6.9 -0.8 0.9-1.5 1.7-2 2.3 -0.5 0.5-0.8 0.8-0.8 0.8s0.2-0.4 0.6-1c0.4-0.6 0.9-1.5 1.6-2.5 0.7-1 1.5-2.2 2.5-3.5 0.9-1.2 2-2.5 3.1-3.8 1.1-1.3 2.2-2.5 3.3-3.6 1.1-1.1 2.1-2.1 3-3 0.9-0.9 1.7-1.5 2.3-2C40 149.4 40.3 149.1 40.3 149.1z"/><path d="M22.4 148.1c0 0 0.3 0.4 0.9 1 0.5 0.6 1.3 1.6 2.2 2.7 0.9 1.1 1.9 2.5 3 4 1.1 1.5 2.1 3.1 3.2 4.7 1 1.6 2.1 3.3 3 4.8 0.9 1.6 1.7 3 2.4 4.3 0.7 1.3 1.2 2.4 1.6 3.1 0.4 0.8 0.6 1.2 0.6 1.2s-0.3-0.4-0.8-1.1c-0.5-0.7-1.2-1.7-2-2.9 -0.8-1.2-1.7-2.6-2.7-4.1 -1-1.5-2-3.1-3.1-4.7 -1-1.6-2.1-3.2-3.1-4.8 -1-1.5-1.9-2.9-2.7-4.2 -0.8-1.2-1.4-2.3-1.9-3C22.6 148.5 22.4 148.1 22.4 148.1z"/><path d="M98.5 17.2c0 0-0.1 0-0.3 0.1 -0.2 0-0.5 0.1-0.9 0.1 -0.8 0-1.9-0.3-3.2-0.9 -1.3-0.6-2.8-1.6-4.8-1.8 -1.9-0.3-4.2 0.2-6.4 1.2 -2.2 1.1-4.2 2.8-5.9 5 -1.7 2.2-3.1 4.8-3.9 7.8 -0.4 1.4-0.7 3-0.8 4.5 -0.1 1.5 0 3.1 0.3 4.6 0.4 1.5 0.9 3 1.8 4.3 0.9 1.3 1.9 2.5 3.3 3.2 1.3 0.7 2.9 0.7 4.3 0.2 1.5-0.5 2.8-1.4 4.1-2.4 2.6-1.9 5.1-4 7.3-6.1 2.3-2.1 4.3-4.2 6.2-6.4 1.8-2.1 3.6-4.2 4.9-6.2 0.6-1 1-2.1 1-3.2 0-1.1-0.4-2.1-0.9-2.9 -1-1.7-2.6-2.7-3.8-3.3 -1.3-0.6-2.4-1-3.1-1.2 -0.7-0.2-1.1-0.4-1.1-0.4s0.4 0.1 1.1 0.3c0.7 0.2 1.9 0.5 3.2 1.1 1.3 0.6 2.9 1.5 4.1 3.3 0.6 0.9 1 1.9 1.1 3.1 0.1 1.2-0.3 2.5-1 3.6 -1.4 2.1-3 4.2-4.9 6.5 -1.8 2.2-3.9 4.4-6.2 6.6 -2.3 2.1-4.7 4.2-7.4 6.2 -1.3 1-2.7 2-4.4 2.6 -0.8 0.3-1.7 0.5-2.7 0.5 -0.9 0-1.8-0.3-2.6-0.7 -3.2-1.8-4.9-5.1-5.6-8.4 -0.4-1.7-0.4-3.3-0.3-5 0.1-1.6 0.4-3.2 0.9-4.8 0.9-3 2.5-5.8 4.3-8 1.9-2.2 4-4 6.3-5.1 2.3-1.1 4.7-1.5 6.8-1.1 1 0.2 1.9 0.5 2.7 0.9 0.8 0.4 1.5 0.8 2.1 1.1 1.3 0.7 2.4 1 3.1 1.1 0.4 0 0.7 0 0.9 0C98.4 17.3 98.5 17.2 98.5 17.2z"/><path d="M180.2 72.9c0 0-0.3-0.2-0.7-0.5 -0.2-0.2-0.6-0.3-0.9-0.5 -0.4-0.2-0.8-0.4-1.3-0.6 -1-0.4-2.3-0.6-3.8-0.6 -1.5 0-3.1 0.3-4.8 1.1 -0.8 0.4-1.6 0.9-2.3 1.5 -0.2 0.2-0.4 0.3-0.5 0.5l-0.5 0.6c-0.3 0.4-0.6 0.7-0.9 1.2 -1.1 1.7-1.8 3.8-2 6 -0.2 2.2 0.2 4.6 1.2 6.6 1 2 2.8 3.9 5 4.1 1.1 0.1 2.2-0.2 3.2-0.8 1.1-0.5 2.1-1.2 3.1-1.8 2-1.3 3.8-2.8 5.5-4.4 1.6-1.6 3.1-3.2 4.1-5 0.5-0.9 0.9-1.8 1-2.8 0.2-0.9 0.1-1.9 0-2.7 -0.3-1.7-1.3-3.2-2.2-4.3 -1-1.1-2-2-2.8-2.6 -0.9-0.6-1.6-1.1-2.1-1.4 -0.5-0.3-0.8-0.4-0.8-0.4s0.3 0.1 0.8 0.4c0.5 0.3 1.3 0.6 2.2 1.2 0.9 0.6 2 1.4 3 2.5 1 1.1 2.1 2.6 2.5 4.5 0.2 1 0.3 2 0.1 3 -0.2 1-0.5 2.1-1 3 -1 2-2.5 3.7-4.2 5.4 -1.7 1.7-3.5 3.2-5.6 4.6 -1 0.7-2.1 1.3-3.2 1.9 -1.1 0.6-2.5 1-3.9 0.9 -1.4-0.1-2.7-0.8-3.6-1.7 -1-0.9-1.7-2-2.3-3.1 -1.1-2.3-1.5-4.9-1.3-7.2 0.2-2.4 1-4.7 2.3-6.4 1.3-1.8 3-3.1 4.8-3.8 1.8-0.8 3.5-1 5.1-0.9 1.5 0.1 2.8 0.4 3.9 0.8 0.5 0.2 0.9 0.5 1.3 0.6 0.3 0.2 0.7 0.4 0.9 0.6C180 72.7 180.2 72.9 180.2 72.9z"/><path d="M183.5 138.2c0 0-0.2-0.3-0.6-0.7 -0.4-0.5-1-1.1-1.8-1.8 -0.8-0.7-2-1.4-3.4-1.9 -1.4-0.4-3.2-0.5-4.9 0.1 -1.7 0.7-3.2 2-4.6 3.7 -1.4 1.6-2.7 3.5-3.3 5.7 -0.3 1.1-0.5 2.2-0.3 3.3 0 0.3 0.1 0.6 0.2 0.8 0.1 0.3 0.2 0.6 0.3 0.9 0.2 0.5 0.5 1 0.8 1.5 1.4 1.9 3.6 3.2 5.9 4 1.2 0.4 2.3 0.8 3.5 1.1 1.2 0.3 2.4 0.4 3.4 0.1 0.3-0.1 0.5-0.2 0.8-0.3 0.2-0.1 0.4-0.3 0.6-0.5 0.4-0.4 0.8-0.8 1.1-1.3 0.6-1 1.1-2.1 1.6-3.2 1-2.2 1.9-4.2 2.5-6.3 0.6-2 1-4 1-5.9 0-1.8-0.4-3.5-0.9-5 -0.5-1.4-1.3-2.5-2-3.4 -0.7-0.8-1.4-1.3-1.9-1.7 -0.5-0.3-0.8-0.5-0.8-0.5s0.3 0.1 0.8 0.4c0.5 0.3 1.3 0.8 2.1 1.6 0.8 0.8 1.6 1.9 2.3 3.4 0.6 1.4 1.1 3.2 1.2 5.1 0.1 1.9-0.2 4-0.8 6.2 -0.6 2.1-1.4 4.3-2.4 6.5 -0.5 1.1-0.9 2.2-1.6 3.3 -0.3 0.5-0.8 1.1-1.3 1.5 -0.3 0.2-0.5 0.4-0.9 0.6 -0.3 0.2-0.6 0.3-1 0.4 -1.4 0.4-2.8 0.2-4-0.1 -1.3-0.3-2.5-0.6-3.7-1.1 -2.4-0.9-4.8-2.3-6.4-4.5 -0.4-0.5-0.7-1.1-1-1.8 -0.1-0.3-0.2-0.6-0.3-0.9 -0.1-0.4-0.1-0.7-0.2-1 -0.1-1.3 0-2.6 0.4-3.8 0.8-2.4 2.2-4.3 3.7-6 1.5-1.6 3.2-3 5-3.7 1.9-0.7 3.8-0.5 5.3 0.1 1.5 0.6 2.6 1.4 3.4 2.1 0.8 0.7 1.4 1.4 1.7 1.9C183.3 137.9 183.5 138.2 183.5 138.2z"/><path d="M95.9 83.3c0 0-0.9 0.4-2.4 1.1 -1.5 0.8-3.7 1.9-5.8 3.9 -1 1-2 2.2-2.7 3.7 -0.7 1.5-1.1 3.1-0.9 4.8 0 0.4 0.1 0.8 0.2 1.3 0.1 0.4 0.3 0.8 0.5 1.2 0.4 0.8 0.9 1.5 1.5 2.1 1.3 1.3 3 2.1 4.8 2.2 1.8 0.1 3.6-0.5 5-1.5 1.5-1 2.5-2.5 2.9-4.2 0.5-1.7 0.6-3.4 0.7-5.1 0.1-1.7 0.2-3.2 0-4.6 -0.2-1.4-0.6-2.6-1.3-3.6 -0.6-1-1.4-1.6-2.2-2 -0.7-0.4-1.4-0.7-1.8-0.8 -0.2 0-0.4-0.2-0.5-0.2 -0.1 0-0.2 0-0.2 0s0.1 0.2 0.2 0.1c0.1 0 0.3 0 0.5 0.1 0.5 0 1.1 0.1 1.9 0.5 0.8 0.4 1.7 1 2.4 2 0.8 1 1.3 2.3 1.6 3.8 0.3 1.5 0.3 3.1 0.2 4.8 -0.1 1.7-0.1 3.5-0.5 5.3 -0.4 1.9-1.6 3.7-3.3 4.9 -1.6 1.2-3.7 1.9-5.8 1.8 -2.1-0.2-4.1-1.2-5.5-2.6 -0.7-0.7-1.3-1.6-1.7-2.5 -0.2-0.5-0.4-0.9-0.5-1.4 -0.1-0.4-0.2-1-0.2-1.4 -0.2-1.9 0.4-3.8 1.2-5.3 0.8-1.5 1.9-2.8 3-3.8 1.1-1 2.3-1.7 3.3-2.3 1.1-0.6 2-1 2.8-1.3 0.8-0.3 1.4-0.5 1.9-0.7C95.6 83.4 95.9 83.3 95.9 83.3z"/><path d="M26.3 35.6c0 0-0.2-0.1-0.7-0.3 -0.4-0.2-1.1-0.4-2-0.4 -0.9-0.1-1.9 0-3.1 0.3 -1.2 0.3-2.4 1-3.5 1.9 -0.6 0.5-1.1 1-1.6 1.7 -0.2 0.3-0.4 0.7-0.6 1 -0.2 0.4-0.4 0.8-0.5 1.1 -0.6 1.5-0.8 3.3-0.7 5.2 0.1 1.8 0.6 3.7 1.5 5.4 0.8 1.7 2 3.3 3.6 4.5 1.5 1.2 3.4 1.8 5.2 1.4 1.8-0.4 3.2-1.8 4.1-3.3 0.9-1.6 1.5-3.3 2-5 0.4-1.7 0.9-3.3 0.7-4.7 -0.2-1.4-1.2-2.4-2.2-3 -1.1-0.6-2.1-0.8-3-0.9 -0.9-0.1-1.6-0.2-2-0.2 -0.5 0-0.7 0-0.7 0s0.3 0 0.7 0c0.5 0 1.2 0 2.1 0 0.9 0.1 2 0.2 3.2 0.7 0.6 0.3 1.2 0.6 1.7 1.2 0.3 0.3 0.5 0.6 0.7 1 0.1 0.3 0.3 0.7 0.4 1.1 0.2 0.8 0.1 1.7 0 2.5 -0.1 0.8-0.3 1.7-0.5 2.5 -0.4 1.7-0.9 3.5-1.9 5.3 -0.5 0.9-1.1 1.7-1.9 2.4 -0.4 0.3-0.8 0.7-1.3 0.9 -0.5 0.3-1.1 0.5-1.5 0.6 -2.2 0.6-4.5-0.2-6.2-1.5 -1.7-1.3-3-3.1-3.9-5 -0.9-1.9-1.4-3.9-1.5-5.9 -0.1-2 0.2-3.9 1-5.6 0.2-0.4 0.4-0.8 0.6-1.2 0.3-0.4 0.5-0.8 0.8-1.1 0.5-0.7 1.1-1.2 1.8-1.7 1.3-1 2.6-1.5 3.9-1.8 1.2-0.3 2.4-0.3 3.3-0.1 0.9 0.1 1.6 0.4 2 0.6C26.1 35.5 26.3 35.6 26.3 35.6z"/></svg>
</div>

    <div class='container'>  
        <h1 class="sets btn welcome" id="play">Let's play !</h1>
        <div class="sets  options chooses disable" id="humvscomp">
          <h2 class="btn"  id="human">human</h2>  
          <h1 class="vs">vs</h1>
          <h2 class="btn"  id="computer">computer</h2>   
        </div>     
        <div class="sets  options destiny disable" id="xvso">
          <h2 class="btn" id="x">X</h2> 
          <h1 class="vs">vs</h1>
          <h2 class="btn" id="o">O</h2>     
        </div>    
       </div>   
      
    </div>
    
   <div id="winner"></div> 
   <div id="board" class="disable">
    
    <svg version="1.1" id="gameboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 231.9 179.6" style="enable-background:new 0 0 231.9 179.6;" xml:space="preserve">

<g id="tictactoe">
	<path id="left" class="drawboard" d="M59.5,0c-3.6,60.8-1.8,122,5.3,182.5"/>
	<path id="right" class="drawboard" d="M131.9,1.3c7.5,22.9,6.3,47.5,5,71.5c-1.7,32.6-3.5,65.2-5.2,97.8"/>
	<path id="top" class="drawboard" d="M0,75.6c75.3-12.8,151.1-22.8,227.2-30.1"/>
	<path id="bottom" class="drawboard" d="M-0.8,128.8c77.9-0.5,155.7-6.6,232.7-18.4"/>
</g>
<g id="x">
	<g id="x2">
		<path id="_x32__7_" class="st0" d="M183.1,4.6c-3.7,10.4-7.8,20.7-12.5,30.7"/>
		<path id="_x31__7_" class="st0" d="M159.6,6.8c6.9,9.8,15.4,18.5,24.9,25.8"/>
	</g>
	<g id="x7">
		<path id="_x32__6_" class="st0" d="M101.8,141.7c-5.6,4.9-3.4,14.9-8.5,20.4"/>
		<path id="_x31__6_" class="st0" d="M86.6,143.9c6.4,5.1,12.8,10.3,19.3,15.4"/>
	</g>
	<g id="x3">
		<path id="_x32__5_" class="st1" d="M36.2,88.9c-7.3,6.4-13.6,14-18.3,22.5"/>
		<path id="_x31__5_" class="st1" d="M14,90.3c4.1,4.6,8.1,9.1,12.2,13.7"/>
	</g>
	<g id="x6">
		<path id="_x32__4_" class="st0" d="M40.3,149.1c-6.3,6.2-12,13-17.3,20.1"/>
		<path id="_x31__4_" class="st0" d="M22.4,148.1c6.1,8.3,11.8,16.9,16.8,25.9"/>
	</g>
	<g id="x0">
		<path id="XMLID_133_" class="st2" d="M14.7,24.1C20.9,32.8,27,41.5,33,50.4"/>
		<path id="XMLID_134_" class="st2" d="M15.4,49.1c1.2-1.6,1.5-3.6,1.9-5.5c1-5.2,2.5-10.3,4.4-15.2c0.8-2.1,1.9-4.3,3.9-5.1"/>
	</g>
	<g id="x1">
		<path id="XMLID_135_" class="st3" d="M82.7,21.3c5.6,5.9,11.2,11.8,16.7,17.7"/>
		<path id="XMLID_138_" class="st3" d="M101.8,23.3C84.7,41.4,80.4,40.4,80.4,40.4"/>
	</g>
	<g id="x4">
		<path id="XMLID_137_" class="st3" d="M78.2,81.1c8.2,7.6,16,15.7,23.3,24.2"/>
		<path id="XMLID_139_" class="st3" d="M105.2,76.7c-5,11.8-12.5,22.4-21.9,31.1"/>
	</g>
	<g id="x5">
		<path id="XMLID_141_" class="st3" d="M165.2,67.5c9.6,8.9,18.7,18.4,27.3,28.3"/>
		<path id="XMLID_140_" class="st3" d="M196.7,62.4c-5.9,13.8-14.6,26.3-25.6,36.4"/>	
	</g>
	<g id="x8">
		<path id="XMLID_142_" class="st3" d="M163.1,139.5c11.5,10.5,23.1,20.9,34.9,31.1"/>
		<path id="XMLID_144_" class="st3" d="M165.2,168.3c2.1,1.2,4.7-0.3,6.6-1.8c12.7-10,23.3-22.2,33.8-34.4"/>
	</g>
</g>
<g id="o">
	<path id="o1" class="st0" d="M98.5,17.2c-2.7,0.6-5.2-1.6-7.8-2.5c-5.2-1.7-10.7,1.7-14.1,6c-5.2,6.5-7.1,16.6-1.8,23
		c1.1,1.3,2.4,2.4,4.1,2.7c2.6,0.5,5.2-1,7.4-2.6c6.7-5,12.6-10.9,17.6-17.6c0.9-1.2,1.7-2.4,2-3.9c0.4-2.3-1-4.6-2.8-6
		c-1.9-1.4-4.1-2.1-6.4-2.8"/>
	<path id="o5" class="st0" d="M180.2,72.9c-4-3.5-10.7-3.1-14.6,0.5s-4.9,9.9-2.6,14.8c1.1,2.5,3.3,4.7,6,4.8c1.5,0,2.8-0.6,4.1-1.4
		c3.5-2,6.7-4.6,9.4-7.6c1.8-2.1,3.5-4.5,3.6-7.2c0.3-4.8-4-8.6-8.4-10.7"/>
	<path id="o8" class="st0" d="M183.5,138.2c-2.2-3.3-6.1-5.7-9.9-4.8c-2.4,0.6-4.3,2.3-5.9,4.1c-2.4,2.8-4.5,6.4-3.6,10
		c1.1,4.6,6.1,6.8,10.7,7.9c1.5,0.3,3,0.6,4.4,0c1.8-0.8,2.7-2.6,3.5-4.4c1.8-4.1,3.7-8.3,3.8-12.7c0.1-4.5-1.9-9.3-6-11.1"/>
	<path id="o4" class="st0" d="M95.9,83.3c-3.2,1.2-6.3,2.7-8.8,5.1c-2.4,2.4-4,5.9-3.4,9.2c0.6,3.4,3.6,6.2,7,6.6s7-1.5,8.4-4.6
		c0.9-1.8,1-3.9,1.1-6c0.2-2.5,0.3-5.2-0.6-7.5c-0.9-2.4-3.2-4.4-5.7-4.1"/>
	<path id="o0" class="st0" d="M26.3,35.6c-4-2.2-9.6-0.1-11.9,3.9s-1.7,9.2,0.6,13.2c1.8,3.1,5.1,5.9,8.6,5.2c4.3-0.9,6.1-6,7-10.4
		c0.3-1.3,0.5-2.6,0.1-3.9c-1-3-5-3.5-8.2-3.5"/>
	<path id="o3" class="st3" d="M29.7,94.6c-0.2,1.9-1.5,3.5-3.2,4.4s-3.6,1.2-5.5,1.2c-0.6,0-1.2,0-1.8-0.2c-0.6-0.2-1.1-0.7-1.6-1.2
		c-1.9-2-2.9-4.8-3-7.6c-0.1-2.8,0.8-5.5,2.2-7.9c0.4-0.7,0.9-1.4,1.6-1.9c0.6-0.4,1.2-0.5,1.9-0.6c2.2-0.1,4.4,1,5.9,2.6
		c1.6,1.6,2.6,3.6,3.7,5.5c0.6,1.1,1.2,2.2,1.8,3.3c0.5,0.9,1,1.9,1,3c0,1.1-0.7,2.2-1.7,2.4"/>
	<path id="o6" class="st3" d="M39.3,150.9c0.9-1.8,0.5-4.1-0.6-5.9s-2.9-2.9-4.7-3.9c-4.2-2.2-9-3.3-13.8-3.1
		c-0.8,0-1.7,0.1-2.4,0.6c-1.8,1.2-1.5,3.8-0.7,5.8c1.2,3.3,3,6.4,5.3,9.1c2.2,2.6,5,5,8.4,5.9c3.3,0.9,7.3,0.1,9.5-2.5
		c1.1-1.3,1.8-3.1,2-4.8c0.3-2.2,0-4.6-1.1-6.5"/>
	<path id="o2" class="st3" d="M187.3,22.4c-5-2.1-10.7-2.6-16-1.5c-0.8,0.2-1.6,0.4-2.2,0.8c-0.8,0.5-1.4,1.4-1.8,2.3
		c-1.7,3.5-1.7,8,0.8,10.9c0.5,0.6,1.1,1.1,1.9,1.4c0.6,0.2,1.2,0.2,1.8,0.2c3.5,0.1,7,0.1,10.5-0.6c2-0.4,4-1.1,5.5-2.5
		c1.5-1.4,2.4-3.6,1.8-5.6c-0.7-2.2-2.9-3.7-3.3-5.9"/>
	<path id="o7" class="st3" d="M101.6,144.1c-4-0.8-8.3-0.9-12,0.9s-6.2,6.2-5,10.1c0.8,2.7,3.1,4.6,5.7,5.8c5.9,2.8,13.5,2,18.7-2.1
		c0.6-0.5,1.2-1,1.7-1.7c0.5-0.7,0.8-1.5,1-2.3c0.5-2.4-0.6-4.8-2.2-6.6c-2.5-2.9-6.3-4.6-10.1-4.4"/>
</g>
<g id="winnerset">
  <path id="win0" class="st4" d="M7.7,54.1c0,0,84.3-34.3,196.3-28.3"/>
	<path id="win1" class="st4" d="M11.4,93.3c0,0,55,7.4,198.8-8.6"/>
	<path id="win2" class="st4" d="M20.6,15.6c0,0,1.4,192.9,10.4,154.9"/>
  <path id="win3" class="st4" d="M7.7,143.9c0,0,131.5,24.7,189.8-10.5"/>
	<path id="win4" class="st4" d="M91.9,8.4c0,0,12,157.5,0,167.5"/>	
	<line id="win5" class="st4" x1="177.9" y1="170.7" x2="174.9" y2="2.4"/>
  <path id="win6" class="st4" d="M10.4,28.4c0,0,88.5,93.5,193.5,135.3"/>
  <path id="win7" class="st4" d="M19.4,165.4C58.8,119.6,108,72.7,169.2,30.8c9.5-6.5,18.9-12.6,28.2-18.4"/>
</g>
</svg>
     
    <div class="tile" ></div>
    <div  class="tile" ></div>
    <div  class="tile" ></div>
    <div  class="tile" ></div>
    <div  class="tile" ></div>
    <div  class="tile"></div>
    <div  class="tile"></div>
    <div  class="tile"></div>
    <div  class="tile"></div>
    <div id="reset" class="btn"><h1>reset</h1></div>  
       </div>
     </div>  
  </div>
<div>

CSS

              
                
@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,
      lightblue,
      1px,
      transparent 1px,
      transparent 20px // determines size 
    ),
    -webkit-repeating-linear-gradient(
      bottom,
      lightblue,
      1px,
      white 1px,
      white 20px // determines size /
    );
  
  background-image: 
    repeating-linear-gradient(
      90deg,
      lightblue,
      1px,
      transparent 1px,
      transparent 20px // determines size 
    ),
    repeating-linear-gradient(
      0deg,
      lightblue,
      1px,
      white 1px,
      white 20px // determines size /
    ); 
  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(-3deg); 
}

.paper:after, .paper:before {
  z-index: -1;
  position: absolute;
  content: "";
  left: auto;
  max-width:300px;
  background: white;
  transform: rotate(-3deg);
}
  
  .paper:after {
  bottom: 10px;
  right: 7px; 
  width: 70%;
  top: 80%;
  box-shadow: 3px 15px 12px #777;
  transform: rotate(3deg);
    }

.paper:before {
  bottom: 10px;
  left: 7px; 
  width: 70%;
  top: 80%;
  box-shadow: -3px 15px 12px #777;
  transform: rotate(-3deg);
  }

#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;
  svg {
    fill:#000033;
    
  }
}
#gameboard {
  position:absolute;
  top:5px;
  left:20px;
  width:100%;
  height:auto; 
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  stroke:	#000033;//#000000;
  stroke-width:1.25px;
  stroke-miterlimit:10;
  fill:none;
    .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;
 // background:black;
  cursor:pointer;
  z-index:2;
 // float:left;
  
}
#winner {
  width:300px;
  height:40px;
  margin: auto;
  margin-top:30px;
  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;
}

//settings
h1, h2 {
 font-family:'Waiting for the Sunrise', cursive;
  margin:0;
  font-size:40px;
  color:	#000033;
}
#settings, .container, .options {
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

#settings { 
  height:70%; 
  align-items:center;
  align-content:center; 
  .container {
     height:30%;
     align-items:center;
    .options {
     flex-direction:row;
     width:60%;
     
    } 
  }
}

.btn {
  cursor:pointer;
  transition: all .2s ease-in-out;
  &: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;}
}

JS

              
                
// 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<child.length; d++) {                           
          if(child[d].nodeType == 1) { 
           var length = Math.ceil(child[d].getTotalLength());
           console.log('lenght '+d+' '+length);
          child[d].style.strokeDasharray = length;
          child[d].style.strokeDashoffset = length;
          child[d].style.animation = 'dash '+time+'s ease-out  '+delay+ 's   forwards';
          delay +=  newDelay;        
          }
       } 
    } else {
      var length = Math.ceil(element.getTotalLength());
       console.log('lenght '+length);
       element.style.strokeDasharray = length;
       element.style.strokeDashoffset = length;
        element.style.animation = 'dash 0.5s ease-out  forwards';
      }
 }


// when human vs human set position of the player on the board
// sign number = nbr of the cell in the ticktack toe board
// if player1 true - player 1 turn, do the staff so the player's sign appears on the board
// find html id element using (player?val plus signNumber) sigNumber - is index of click event from claim function
// draw sign than change turn by swich the boolen of player var
        
   function setPlayer(signNumber) {                         
     if (player1) {     
        board[signNumber] = player1val;
        var sign =  document.getElementById(player1val+signNumber);  
        drawingWithDelay(sign, 0.3, 0.3)                          
        updateScore(board, player1);
        player1 = false;
        player2 = true;
     } else {
        board[signNumber] = player2val;
        var sign =  document.getElementById(player2val+signNumber);
        drawingWithDelay(sign, 0.3, 0.3) 
        updateScore(board, player2);
        player1 = true;
        player2 = false;    
     }
   }
//human vs com set the players position ob the board, 
//works when game is true, 
//if spot on teh bord is empty board[i] == 0,
// at then end of human turn  lunch ai() - computer move

function set(index, player) {  
    if(game) {
       if(board[index] == 0) {
           if (computer) {
               if(player == human) {
                var sign =  document.getElementById(humVal+index);
                drawingWithDelay(sign, 0.3, 0.3);
                board[index] = humVal;
                console.log(board);
                updateScore(board, player);
                ai();  
             }  else {
                board[index] = comVal;
                var sign =  document.getElementById(comVal+index);
                setTimeout(function() { 
                  drawingWithDelay(sign, 0.3, 0.3); 
                  }, 500);
                updateScore(board, player);   
                }
            } 
        }
      }
  console.log(board);  
}

// update score on the board, 
// draw winners line and message for winner when checkWin() return true
function updateScore(board, player) { 
 if (computer) {
   if (player == computer) {
      if (checkWin(board, player)) {
        game = false;  
        setTimeout(function() {
        drawTheWinnersLine(board);  
        winner.innerHTML ="<h1>You loose !</h1>";
        }, 1400);
      return;
      } 
     }
   else if (player = human){
   if (player == human) {
      if (checkWin(board, player)) {
         game = false;
         drawTheWinnersLine(board);  
         setTimeout(function() {
         winner.innerHTML ="<h1>You won !</h1>";
        }, 1000);
      return;
        } 
      }
   }
 }
 else if (human){
    if (player == player1) {
      if (checkWin(board, player)) {
      game = false;
      drawTheWinnersLine(board);  
      setTimeout(function() {
      winner.innerHTML ="<h1>player1 won !</h1>";
        }, 1000);
      return;
      } 
    }  else {
      if (checkWin(board, player)) {
         game = false;
         drawTheWinnersLine(board);  
         setTimeout(function() {
         winner.innerHTML ="<h1>player2 won !</h1>";
        }, 1000);
      return;
      } 
      
    }
  }
  if (checkBoard(board)) {
     //  console.log(cb); 
      setTimeout(function() {
       winner.innerHTML= "<h1>Tie !</h1>";
       //reset();
      }, 1000);
      return;
   }
  }

// draw the winners line throught 3 equal signs laying next to each other
function drawTheWinnersLine(board) {
  var inedx;
  for (var x = 0; x < 8; x++ ) {
    // arr will contain signs from board according to each winningboard section
    var arr=[];
    var equals;
    for (var y=0; y<3; y++) {
   arr.push(board[winningBoard[x][y]])    
        }
    //when there gonna be 3 same signs in section, which are not a number, then we can draw a winner's line - winner sequence section from winning board and winners line in svg has same index
    var equals = arr.every(function(value, index, array){
    return (value === array[0] && isNaN(value) ) ? true : false});
    console.log(equals);
    if (equals) {
      console.log('x '+x);
      drawingWithDelay(winnerset[x], 1, 1)
    }
  }
  
    }
  
// check if there's a winner
function checkWin(board,player) {
  var value 
  if (computer) {
  value = player == human ? humVal : comVal;
  }
  else if (human) {
  value = player == player1 ? player1val : player2val; 
  }
  // loop through winningboard to find win sequence
  for (var x = 0; x < 8; x++ ) {
    var win = true;
    for(var y=0; y<3; y++) {
       if(board[winningBoard[x][y]] !=value)  {
         win = false;
         break;
       }
    }
    if(win) {
      return true;
    }
  }
  return false;
}


// check if board is full,
function checkBoard (board) {
for (var i = 0; i<board.length; i++) {
    if (board[i] == 0) {
      return false;
    }   
  }
 return true;
 } 

// reset button
// click button on tic tac toe board
for (var i=0; i < tiles.length; i++) {
tiles[i].addEventListener('click', claim);
}
function claim() {
  //round +=1;
  var i = Array.prototype.indexOf.call(tiles, this);   // take index of DOMs tiles class element
  console.log(i);
  if(game) { // board is active onlny when game is on
     if(board[i] == 0) {            
       if (human) {   // set human vs human plaers moves     
         setPlayer(i);
       } 
       else if (computer) {
              set(i, human); // set human vs computer plaers moves 
              }
            }
          }
        }

  // seetings
 // switch classes for seetings slides 
function switchClass (elementsToHide, elementsToShow) {
 for (var i =0; i< elementsToHide.length; i++){ 
   elementsToHide[i].addClass('disable');
    } 
  for (var j =0; j< elementsToShow.length; j++){ 
    if (j===0) {
     elementsToShow[j].addClass('fadeBounceIn'); 
    }
     if ( j > 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<actualBoard.length; i++) {
      
    // copy of the board for comp vs human moves simulation purpose
      var copyBoard = actualBoard.slice();
     
         if(copyBoard[i] == 0) {
           // console.log('start for lop, i ='+i+' ,depth = '+depth)
           
           // set the actual player value
           var value = player == computer ? comVal : humVal ;
           
           // make a move
           copyBoard[i] = value;
           // console.log('inside for loop max: '+ max+', '   +' player '+ player+' i '+ i+', depth :'+depth );
           //var index = i;
           
           // minimax score = minimax calls itself to check best move of opposite player
           var minmaxScore = minimax(copyBoard, depth + 1, !player)
           //console.log('after minimax: '+ max+', minmaxScore :'+minmaxScore  +' player '+ player+' index '+ index+', depth :'+depth );
          
           // after the minimax digs to the deeper level of the game with winning sequence, it brings back the winnig points to minimaxScore - 
           //console.log('if player comp or human ? :'+player)
           
           // after each move simulation , on each depth level, function choose the best possible move.
           // minimaxScore is compared to max value in order to minimize the maximum possible loss.
      if(player) {
      if(minmaxScore > 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

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions