Week11-Tic-Tac-Toe/Easy-3.html at main · Lhemingw/Week11-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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!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 href="Easy-3.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head><!--Connecting stuff at the bottom, and the body class as a background to make the ship-->
<body class="background"></body>
  <div class="container mt-5"><!--a container to hold it in along with margin top of 5-->
    <h1 id="turn">X's Turn</h1><!--anouncing X's turn, which rolls through all of the turns-->
    <h1 class="tile" id="tile">TIC-TAC-TOE</h1>
    <h1 class="tile"></div><!--A class tile to make the board from the css-->
    <div class="flex justify-center relative"></div><!--a flex box to make it a box and to make it center relative-->
    <div id="board" class="row"></div><!--a board and rows-->

      <!-- Create the grid cells dynamically using JavaScript -->
    </div>
    <button id="restart" class="btn btn-primary mt-3">Restart Game</button><!--this is the restart with a class button, to restart the game-->
  </div>


<script src ="Easy-3.js"></script><!--Connecting JS at the bottom-->
<!--<script src="script.js"></script>-->
</body>
</html>

   <!---<section>
        <h1 class="game--title">Tic Tac Toe</h1>
        <div class="game--container" onclick="displayValue(event)">
            <div data-index="0" class="cell">X</div>
            <div data-index="1" class="cell">X</div>
            <div data-index="2" class="cell">X</div>
            <div data-index="3" class="cell">X</div>
            <div data-index="4" class="cell">O</div>
            <div data-index="5" class="cell">O</div>
            <div data-index="6" class="cell">O</div>
            <div data-index="7" class="cell">O</div>
            <div data-index="8" class="cell">O</div>
        </div>
        <h2 class="game--status">Player 1 Wins!</h2>
        <button class="game--restart">Restart Game</button>
    </section>-->
    <script src ="Easy-3.js"></script>
</body>
</html>


<!--Board Players-->
<section class="mb-5 pb-12 flex items-center justify-center">
    <ul role="list" class="mt-10 grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-20">
      <li>
        <div class="flex items-center gap-x-1 relative">
          <img id="player-x-avatar" class="h-14 w-14 md:h-28 md:w-28 rounded-full object-cover" src="./Photos/James-T.Kurt_cropped_135x135.png" alt="x" />
          <!--<img id="player-x-trophy" class="trophy animate-wiggle" src="./assets/images/trophy.png" alt="trophy" />-->

          <div class="ml-4">
            <h3 id="player-x-name" class="text-base front-semibold leading-7 tracking-tight text-red-900 animate-bounce">Player X</h3>
            <p class="text-xs text-gray-500">Score: <span id="player-x-score">0</span></p>

            <button id="player-x-avatar-action" class="ignore mt-[5px] rounded-md border border-gray-300 bg-indigo-600 text-white hover:bg-indigo-700 py-1.5 px-2.5 text-sm font-semibold text-gray-900 shadow-sm" type="button">Change</button>
          </div>
        </div>
      </li>
            <button id=".cell.KURT--action" class="ignore mt-[5px] rounded-md border border-gray-300 bg-indigo-600 text-white hover:bg-indigo-700 py-1.5 px-2.5 text-sm font-semibold text-gray-900 shadow-sm" type="button">Change</button>
          </div>
        </div>
      </li>
      <li>
        <div class="flex items-center gap-x-1 relative">
          <img id="player-o-avatar" class="h-14 w-14 md:h-28 md:w-28 rounded-full object-cover" src="./Photos/Jean-Luc_Picard_cropped_135x135.png" alt="o" />
         <!--<img id="player-o-trophy" class="trophy animate-wiggle" src="./assets/images/trophy.png" alt="trophy" />-->

          <div class="ml-4">
            <h3 id="player-o-name" class="text-base front-semibold leading-7 tracking-tight text-red-900">Player O</h3>
            <p class="text-xs text-gray-500">Score: <span id="player-o-score">0</span></p>

            <button id="player-o-avatar-action" class="ignore mt-[5px] rounded-md border border-gray-300 bg-indigo-600 text-white hover:bg-indigo-700 py-1.5 px-2.5 text-sm font-semibold text-gray-900 shadow-sm" type="button">Change</button>
          </div>
        </div>
      </li>
    </ul>

  </section>
 <!--Board Actions-->
 <div class="alert alert-danger" class= "inline-flex justify-center rounded-md border-gray-900 bg-gray-900 px-3 py-2 text-sm front-semibold text-white shadow-sm hover:bg-gray-800 sm:w-auto disabled:cursor-not-allowed disabled:bg-gray-300" type="button">Announce winner</button>">
    <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
  </div>
 <section class="ignore mt-10 flex items-center justify-center space-x-4">
    <button id="reset-game-action" class="inline-flex justify-center rounded-md border-gray-900 bg-gray-900 px-3 py-2 text-sm front-semibold text-white shadow-sm hover:bg-gray-800 sm:w-auto disabled:cursor-not-allowed disabled:bg-gray-300" type="button" disabled>Reset Game</button>
    <button id="reset-score-action" class="inline-flex justify-center rounded-md border-gray-900 bg-gray-900 px-3 py-2 text-sm front-semibold text-white shadow-sm hover:bg-gray-800 sm:w-auto disabled:cursor-not-allowed disabled:bg-gray-300" type="button" disabled>Reset Score</button>
  </section>

  <!-- How it works?
  <article class="ignore prose max-w-none prose-sm hover:prose-a:text-indigo-600 mt-20 p-10 md:p-16 lg:p-20">
    <h1>How it works?</h1>

    <p>Welcome to Tic Tac Toe! In this game, you'll be playing against a friend, trying to get three of your symbols in a row before your opponent does.</p>

    <p>The game starts with player X's turn and they can click on an empty square to place their symbol. After player X makes their move, it becomes player O's turn to place their symbol in an empty square. During each turn, the game shows a bounce animation on the current player's name to indicate whose turn it is. This makes it easy for players to keep track of whose turn it is and adds a fun element to the game.</p>

    <p><span class="font-medium">Customizable Avatars:</span> By default, you'll see Davy Jones and Jack Sparrow representing X and O respectively. But if you want to personalize the game, you can upload your own avatars from your local machine. Note that the uploaded avatars won't persist after a page refresh since there's no database connectivity.</p>

    <p><span class="font-medium">Victory Celebrations:</span> When a player wins, the game will display confetti animations over winner's avatar and at the top of the page to celebrate the victory. The player's avatar will also be adorned with an animated Tic Tac Toe trophy. And to help you see the winning move more clearly, the game will highlight the three squares that make up the line.</p>

    <p><span class="font-medium">Score Tracking:</span> Each player has a score that increases by one after securing a victory. The scores are stored on the client side (in the local storage of your browser) so you can keep track of your progress even if you close the page. And if you ever want to start over, you can reset the scores to 0 for both players with a click of "Reset Score" button.</p>

    <p><span class="font-medium">Reset Game:</span> To reset the game after a victory, you can click the "Reset Game" button.</p>

    <p>At the end of the game, players can download an image of the board with the winning trophy and the score. This image can be saved or shared with others.</p>

    <p>In case the game ends in a draw, a popup message is displayed notifying you that the game ended in a draw.</p>

    <p>So what are you waiting for? Let's play some Tic Tac Toe!</p>

    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a href="https://www.youtube.com/@codeofrelevancy/videos" class="text-sm font-semibold leading-6 text-gray-900"
        target="_blank">Powered by Code of Relevancy <span aria-hidden="true">→</span></a>
    </div>
  </article>--->
<!-- Draw Modal -->
<div id="draw-modal" class="ignore relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                </svg>
              </div>
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Game ended in a draw!</h3>
                <div class="mt-2">
                 <!----<p class="text-sm text-gray-500">The game has ended in a draw. Both players have played their best
                    moves but neither has been able to claim victory. Don't worry though, there's always a chance for
                    a rematch. Keep practicing your Tic Tac Toe skills and try again soon.</p>
                  <p class="text-sm text-gray-500 mt-3">Thanks for playing and we hope you enjoyed the game!</p>--->
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 flex justify-end sm:px-6">
            <button id="alright-action" type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Alright</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- File pickers, invisible on UI -->
  <section class="ignore my-96">
    <input type="file" id="player-x-file" class="invisible" accept="image/png, image/gif, image/jpeg" />
    <input type="file" id="player-o-file" class="invisible" accept="image/png, image/gif, image/jpeg" />