-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
220 lines (212 loc) · 13.5 KB
/
index.html
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<title>Tic Tac Toe : Charles Fowler, Code Institute Portfolio: JavaScript Interactive </title>
<meta charset="UTF-8"> <!-- Character Encoding -->
<!-- Required Meta Tags -->
<meta content="width=device-width, initial-scale=1"
name="viewport"> <!-- Responsive Design -->
<!-- Recommended Meta Tags -->
<meta content="Tic Tac Toe : Charles Fowler, Code Institute Portfolio: JavaScript Interactive"
name="description"> <!-- SEO Meta Description -->
<meta content="Mini-TicTacToe, CodeInstitute, Software Developer, Interactive UI, JavaScript, Class, OOP, ECMAScript6,
JavaScript Interactive, Client-OOP-Server like, MVVC, Model-View, View, Controller, Presentation-UI"
name="keywords"> <!-- SEO Keywords -->
<meta content="Charles J Fowler"
name="author"> <!-- Author Information -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Links to CSS -->
<link href="src/assets/css/style.css"
rel="stylesheet">
<link href="src/assets/css/tw-style.css"
rel="stylesheet">
</head>
<!-- =============================================== TIC TAC TOE =========================================== -->
<body>
<!--JetBrains linter/inspection pragmas -->
<!--suppress GrazieInspection -->
<div class="min-w-screen min-h-screen bg-gray-800 flex flex-col items-center justify-center px-2 py-2 md:px-5 md:py-5">
<div class="sm:w-3/4 w-96 h-16 justify-center items-center mx-auto text-white-500 rounded-2xl
flex flex-col relative"
title="Tic Tac Toe"
id="match-controls">
<button id="modalBtn" class="help-button bg-indigo-500 hover:bg-indigo-600 text-white p-4 inline-block text-center
rounded-full cursor-pointer mx-1 my-2 control-shaddow"
title="More on the history of the game and the game play"
onclick="helpButton();">
<i class="fas fa-question"></i>Help
</button>
<div id="myModal" class="modal fixed z-10 inset-0 overflow-y-auto | flex items-center justify-center |
Pt-20 bg-black bg-opacity-80 hidden | font-inter">
<div class="modal-content m-auto p-5 border border-gray-400 w-4/5">
<button id="closeBtn" class="absolute top-0 right-2 p-3 cursor-pointer text-md">
<i class="fas fa-times"></i></button>
<hr class="my-6">
<h2 class="my-3 items-center"><strong>Tic-Tac-Toe Help <i class="fas fa-question"></i></strong></h2>
<hr class="my-6">
<h3 class="my-3"><strong>Tic Tac Toe</strong></h3>
<p class="my-3 text-gray-800">The game's origins can be traced back to its progenitor of three-in-a-row
boards as fare back to ancient Egypt (since 1300 BC).</p>
<p class="my-3 text-gray-800">Early variations of tic-tac-toe come from the Roman Empire; then known as
<em class="text-indigo-500">terni lapilli (or three pebbles at a time)</em>.
Another variation is <a class="text-indigo-500"
href="https://en.wikipedia.org/wiki/Three_men%27s_morris" target="_blank">
<i class="fas fa-external-link-alt text-[9px]"></i> three man morris</a>.
For more on the <a class="text-indigo-500"
href="https://en.wikipedia.org/wiki/Tic-tac-toe#History" target="_blank">
<i class="fas fa-external-link-alt text-[8px]"></i> history</a>, see Wikiepedia.</p>
<hr class="my-6">
<h3 class="my-3"><strong>Game Play</strong></h3>
<p class="my-3 text-gray-800">Tic-tac-toe is played on a three-by-three grid by two players,
who alternately place the marks X and O in one of the nine spaces in the grid</p>
<ul class="my-3 text-gray-800">
<li>- There is no universally agreed rule as to who plays first.
In the current version there is no option to change this.</li>
<li>- Convention is used so that <strong class="text-x text-2xl">X</strong> is played first.</li>
</ul>
<hr class="my-6">
<h3 class="my-3"><strong>This Game Play</strong></h3>
<p class="my-3 text-gray-800">To Start: A player starts a round clicking any grid</p>
<p class="my-3 text-gray-800">The First move is signalled by the
<strong class="text-x text-2xl">X</strong> first move.</p>
<ul class="my-3 text-gray-800">
<li>- <strong class="text-x text-1xl">Player 1</strong>: is marked by a
<span class="text-x">`Pink`</span> marker, e.g. <strong class="text-x text-2xl">X</strong>.</li>
<li>- <strong class="text-o text-1xl">Player 2</strong>: is marked by a
<span class="text-o">`Indigo`</span> marker, e.g. <strong class="text-o text-2xl">O</strong>.</li>
</ul>
<hr class="my-6">
<h3 class="my-3"><strong>Current Limitations: Edge Cases</strong></h3>
<p class="my-3 text-gray-800">A. To Draw a game is not detected: @see Issue
<a class="text-indigo-500" href="https://github.com/charlesjfowler/tic-tac-toe/issues/15" target="_blank">
<i class="fas fa-external-link-alt text-[8px]"></i> #15</a> on GitHub</p>
<p class="my-3 text-gray-800">B. A bad or illegal move is not detected.</p>
<p class="my-3 text-gray-800">C. There is an out of bounds error when a game is completed, and user clicks once more.</p>
<hr class="my-6">
<h3 class="my-3"><strong>Roadmap: Future Improvements</strong></h3>
<p class="my-3 text-gray-800">1. Once Win & Draw results are enabled, a score card matches best of 3 or 5 sets of games</p>
<p class="my-1.5 text-gray-800 pl-3"> - Display a score care on the Nos of Wins/Losses/Draws over a set fo games for each player </p>
<p class="my-1.5 text-gray-800 pl-3"> - Display a score card controls to start a new match or reset/end the current match </p>
<p class="my-3 text-gray-800">2. Allow players to select token type, color, and other attributes .</p>
<p class="my-3 text-gray-800">3. Allow players to choose who goes first.</p>
<button id="lowerCloseBtn"
class="mt-4 bg-blue-500 hover:bg-indigo-700 items-center text-white font-bold py-2 px-4 rounded mx-auto block">
Close
</button>
</div>
</div>
</div>
<div class="flex flex-col justify-center items-center | lg:w-2/5 mx-auto my-10 px-4 sm:px-0 | text-center text-indigo-500
rounded-2xl shadow-xl bg-gray-700 control-shadow overflow-hidden"
title="Tic Tac Toe"
id="game-banner">
<h1 class="sm:text-6xl text-4xl sm:my-6 my-4">Mini Tic Tac Toe</h1>
<hr class="w-3/4 border-indigo-700 my-4">
<h3 class="sm:text-3xl text-2xl ">By <a class="text-indigo-500" href="https://github.com/iPoetDev" target="_blank">iPoetDev</a>
<span class="sm:text-lg text-sm block mt-2"> on
<a class="text-indigo-500" href="https://github.com/iPoetDev/MiniTicTacToe"
title="=Mini TicTacToe Repository on Github"
target="_blank">
<i class="fab fa-github text-[2rem]"></i></a></span>
</h3>
</div>
<div class="sm:w-3/4"
title="Tic Tac Toe"
id="game-area">
<div class="w-full flex justify-center mb-10">
<button class="px-4 py-2 text-white bg-indigo-500 rounded
hover:bg-indigo-600 min-h-min control-shaddow " id="result">
<span class="" id="outcome"></span>
</button>
</div>
<div class="w-auto mx-auto max-w-sm min-h-[15rem] text-indigo-500 rounded-2xl
flex flex-wrap relative
shadow-xl bg-gray-700 game-area-shadow"
id="game-board">
<!--suppress GrazieInspection -->
<div class="flex flex-col sm:flex-row w-full h-auto border-b-2 border-indigo-700" id="row-1">
<div class="cell | border-r-2 border-b-2 border-indigo-700 w-1/3 shadow-inset-depth" id="cell-0">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-0" class="inline-block"></span>
</button>
</div>
<div class="cell | border-r-2 border-l-2 border-b-2 border-indigo-700 w-1/3 shadow-inset-depth" id="cell-1">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-1" class="inline-block"></span>
</button>
</div>
<div class="cell | border-b border-l-2 border-indigo-700 w-1/3 shadow-inset-depth" id="cell-2">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-2" class="inline-block"></span>
</button>
</div>
</div>
<div class="flex flex-col sm:flex-row w-full h-auto border-b-2 border-t-2 border-indigo-700" id="row-2">
<div class="cell | border-r-2 border-t-2 border-b-2 border-indigo-700 w-1/3" id="cell-3">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-3" class="inline-block"></span>
</button>
</div>
<div class="cell | border-l-2 border-b-2 border-r-2 border-t-2 border-indigo-700 w-1/3" id="cell-4">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-4" class="inline-block"></span>
</button>
</div>
<div class="cell | border-l-2 border-t-2 border-b-2 border-indigo-700 w-1/3" id="cell-5">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-5" class="inline-block"></span>
</button>
</div>
</div>
<div class="flex flex-col sm:flex-row w-full h-auto border-t-2 border-indigo-700" id="row-3">
<div class="cell | border-t-2 border-r-2 border-indigo-700 w-1/3" id="cell-6">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-6" class="inline-block"></span>
</button>
</div>
<div class="cell | border-t-2 border-l-2 border-r-2 border-indigo-700 w-1/3" id="cell-7">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-7" class="inline-block"></span>
</button>
</div>
<div class="cell | border-t-2 border-l-2 border-indigo-700 w-1/3" id="cell-8">
<button class="hover-brighten cell | w-full h-full | outline-none focus:outline-none |
sm:text-6xl text-8xl | leading-none">
<span id="cell-id-8" class="inline-block"></span>
</button>
</div>
</div>
</div>
<!--
Display the game reset button only the game is won or the number of turn increments exceed the maximum
Show the text of the button as 'Winner!' or '😔' on a dra (implicit ) show.
-->
<div class="w-full flex justify-center mt-4">
<button class="px-4 py-2 mt-10 text-white bg-indigo-500 rounded
hover:bg-indigo-600 control-shaddow " id="reset">
<span class="">Reset</span>
</button>
</div>
</div>
</div>
<script src="./src/assets/js/logging.js" type="text/javascript"></script>
<script src="./src/assets/js/logic.js" type="text/javascript"></script>
<script src="./src/assets/js/help.js" type="text/javascript"></script>
<script src="./src/assets/js/onload.js" type="text/javascript"></script>
<script src="./src/assets/js/watch.js" type="text/javascript"></script>
<script src="./src/assets/js/ui1.js" type="text/javascript"></script>
<script>
const logger = gameConsole
oninitload(new GameLogic(logger)) // if you have newgame defined
</script>
</body>
</html>