tic-tac-toe/index.html at main · julianachagas/tic-tac-toe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1><span class="text-primary">T</span>i<span class="text-secondary">c</span> <span
      class="text-primary">T</span>a<span class="text-secondary">c</span> <span class="text-primary">T</span>o<span
      class="text-secondary">e</span></h1>
  <div class="initial-screen">
    <button type="button" class="btn bg-primary" id="playerVsCpu">Player vs CPU</button>
    <button type="button" class="btn bg-secondary" id="player1VsPlayer2">Player 1 vs Player 2</button>
    <form id="players-names" class="hidden-transform">
      <div class="player1-input">
        <label for="player1-name">Player 1's name</label>
        <div class="form-control">
          <input type="text" name="" id="player1-name">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="22.3136" height="5.93052" rx="2"
              transform="matrix(0.708349 -0.705862 0.706871 0.707343 0.00195312 15.7502)" fill="#8ECAE6" />
            <rect width="22.3136" height="5.93053" rx="2"
              transform="matrix(0.707953 0.706259 -0.707953 0.706259 4.19849 0.0522461)" fill="#8ECAE6" />
          </svg>
        </div>
      </div>
      <div class="player2-input">
        <label for="player2-name">Player 2's name</label>
        <div class="form-control">
          <input type="text" name="" id="player2-name">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="10" cy="10" r="7.5" stroke="#FF5A5F" stroke-width="5" />
          </svg>
        </div>
      </div>
      <button type="submit" class="btn bg-accent">Start Game</button>
      <p class="form-feedback hidden">Please, enter the name(s) of the player(s)!</p>
    </form>
  </div>
  <div class="game hidden">
    <div class="game-header">
      <button type="button" id="restart" class="bg-accent">Restart</button>
      <div class="current-turn">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="current-player-mark" id="current-x">
          <rect width="22.3136" height="5.93052" rx="2"
            transform="matrix(0.708349 -0.705862 0.706871 0.707343 0.00195312 15.7502)" fill="#9ba1b6" />
          <rect width="22.3136" height="5.93053" rx="2"
            transform="matrix(0.707953 0.706259 -0.707953 0.706259 4.19849 0.0522461)" fill="#9ba1b6" />
        </svg>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="current-player-mark hidden" id="current-o">
          <circle cx="10" cy="10" r="7.5" stroke="#9ba1b6" stroke-width="5" />
        </svg>
        TURN
      </div>
      <button type="button" id="new-game" class="bg-accent">New Game</button>
    </div>
    <div class="gameboard">
      <button class="space" data-position="0"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="1"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="2"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="3"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="4"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="5"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="6"><img src="" alt="" class="player-mark hidden">
      </button>
      <button class="space" data-position="7"><img src="" alt="" class="player-mark hidden"></button>
      <button class="space" data-position="8"><img src="" alt="" class="player-mark hidden"></but>
    </div>
    <div class="scores">
      <div class="x-score bg-primary">
        <p>X (P1)</p>
        <p class="score">0</p>
      </div>
      <div class="ties bg-accent">
        <p>TIES</p>
        <p class="score">0</p>
      </div>
      <div class="o-score bg-secondary">
        <p>O (P2)</p>
        <p class="score">0</p>
      </div>
    </div>
  </div>
  <footer>
    <p>Made with <span class="text-secondary">&#9825;</span> by <a href="https://github.com/julianachagas"
        target="_blank">Juliana Chagas</a></p>
  </footer>
  <div class="modal-wrapper hidden" id="result-modal">
    <div class="modal">
      <p class="congrats-message">CONGRATS!</p>
      <p class="result-message"></p>
      <div class="modal-buttons">
        <button type="button" class="btn bg-accent" id="quit">Quit</button>
        <button type="button" class="btn bg-primary" id="next-round">Next Round</button>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>