blob: c53ba55099afaf11974a51b8e5123bfcac10b0d2 (
plain)
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
|
<!DOCTYPE html>
<html lang="en" translate="no">
<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>Game | Tic-Tac-Toe | Minteck Arcade</title>
<link rel="icon" href="/_general/favicon.svg" type="image/svg+xml">
<style>
body {
background: black;
}
td {
border: 1px solid white;
width: 25vh;
height: 25vh;
cursor: pointer;
text-align: center;
font-family: monospace;
font-size: 15vh;
}
table {
border-collapse: collapse;
}
.insight {
background: rgba(255, 255, 0, 0.3);
}
#resetbtn:hover {
background: white !important;
color: black !important;
}
#resetbtn:disabled {
pointer-events: none;
opacity: .5;
}
</style>
<script src="morpion/base.js"></script>
<script src="morpion/ml.js"></script>
<script src="morpion/model.js"></script>
<script src="morpion/auto.js"></script>
<script src="morpion/online.js"></script>
</head>
<body>
<iframe src="/_general/navbar.html" style="position: fixed;z-index: 9999999999;top: 0;border: none;left: 0;right: 0;height: 32px;width: 100%;"></iframe>
<div style="display:flex;align-items:center;justify-content: center;position:fixed;inset: 0;z-index:5;top:32px;">
<div id="loader" style="color: white;text-align: center;">
Loading...
</div>
<table id="game" style="display: none;">
<tr>
<td id="p1" onclick="player(1);"></td>
<td id="p2" onclick="player(2);"></td>
<td id="p3" onclick="player(3);"></td>
</tr>
<tr>
<td id="p4" onclick="player(4);"></td>
<td id="p5" onclick="player(5);"></td>
<td id="p6" onclick="player(6);"></td>
</tr>
<tr>
<td id="p7" onclick="player(7);"></td>
<td id="p8" onclick="player(8);"></td>
<td id="p9" onclick="player(9);"></td>
</tr>
</table>
<table class="game-template" style="display:none;">
<tr>
<td id="p1" onclick="player(1);"></td>
<td id="p2" onclick="player(2);"></td>
<td id="p3" onclick="player(3);"></td>
</tr>
<tr>
<td id="p4" onclick="player(4);"></td>
<td id="p5" onclick="player(5);"></td>
<td id="p6" onclick="player(6);"></td>
</tr>
<tr>
<td id="p7" onclick="player(7);"></td>
<td id="p8" onclick="player(8);"></td>
<td id="p9" onclick="player(9);"></td>
</tr>
</table>
</div>
<div id="wait" style="position:fixed;inset: 0;z-index:10;cursor:wait;display:none;"></div>
<pre id="instructions" style="position:fixed;bottom:0;left:0;color:white;margin:0;">// ML Model Training
model.addTrainedGame();</pre>
<div id="stats" style="position:fixed;top:32px;left:0;color:white;margin:0;font-family:monospace;">
<div id="online-credits" style="display:none;">Online mode made with ❤️ for Twi</div>
<div id="stats-left">
Thought Moves: <span id="stat-thought">0</span><br>Random Moves: <span id="stat-random">0</span><br>Randomness: <span id="stat-randomness">0.00%</span><br>Game State: <span id="stat-state">NONE</span><br>Learned Games: <span id="stat-games"><script>
document.getElementById("stat-games").innerText = modelTrainedGames;
</script></span><span id="stat-goal">/5000</span> (<span id="stat-modelsize">...</span>)<br>Played Games: <span id="stat-played">-</span></div>
</div>
<div id="last-games" style="text-align:right;position:fixed;top:32px;right:0;color:white;margin:0;font-family:monospace;">-</div>
<div id="online-restart-btn" style="text-align:left;position:fixed;bottom:0;left:0;color:white;margin:0;font-family:monospace;z-index:999999;">
<button disabled id="resetbtn" onclick="reset();" style="padding:10px 20px;background:black;color:white;border:1px solid white;border-bottom:none;border-left:none;">Restart Game</button>
</div>
<div id="auto-stats" style="position:fixed;bottom:0;right:0;color:white;margin:0;font-family:monospace;display:none;">
<div id="bars2" style="text-align:right;border-collapse:collapse;">
<div id="bar2-container-success" style="width:200px;background:#222;height:32px;margin-left:auto;border:1px solid #aaa;">
<div id="bar2-value-success" style="background:cyan;width:0%;height:32px;"></div>
</div>
<div id="bar2-container-failure" style="width:200px;background:#222;height:32px;margin-left:auto;border:1px solid #aaa;">
<div id="bar2-value-failure" style="background:lightgray;width:0%;height:32px;"></div>
</div>
</div>
<br>
<div id="bars" style="text-align:right;border-collapse:collapse;">
<div id="bar-container-success" style="width:200px;background:#222;height:32px;margin-left:auto;border:1px solid #aaa;">
<div id="bar-value-success" style="background:green;width:0%;height:32px;"></div>
</div>
<div id="bar-container-failure" style="width:200px;background:#222;height:32px;margin-left:auto;border:1px solid #aaa;">
<div id="bar-value-failure" style="background:red;width:0%;height:32px;"></div>
</div>
<div id="bar-container-none" style="width:200px;background:#222;height:32px;margin-left:auto;border:1px solid #aaa;">
<div id="bar-value-none" style="background:orange;width:0%;height:32px;"></div>
</div>
</div>
<br>
<div style="text-align:left;width:max-content;margin-left:auto;">
SUCCESS: <span id="ast-success">0.00%</span><br>
FAILURE: <span id="ast-failure">0.00%</span><br>
NONE: <span id="ast-none">0.00%</span><br>
NOFAIL: <span id="ast-nofail">0.00%</span><br>
</div>
</div>
</body>
</html>
|
