forked from jnthns/battleboat-experiment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (145 loc) · 7.49 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,maximum-scale=1">
<title>Battleboat.js - A JavaScript AI that beats humans at battleship.</title>
<meta name="description" content="Battleboat.js: A JavaScript AI that beats humans at battleship.">
<meta name="keywords" content="Battleboat.js, battleship, AI, robot, JavaScript">
<meta name="google" content="notranslate">
<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="image_src" href="img/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144-precomposed.png" />
<link rel="author" href="https://plus.google.com/+BillMei" />
<link rel="publisher" href="https://plus.google.com/+BillMei" />
<link href="css/styles.css" rel="stylesheet" media="all"/>
<script src="https://unpkg.com/@amplitude/experiment-js-client@1.0.3/dist/experiment.umd.js"></script>
<script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-AUydfiSe1Ky1zDY/KCJrSDvNC/Rb1TyoiQ10xfyB/LUYw8GOwJ07SUTa9SxvinL2"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-7.4.1-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var c=0;c<a.length;c++){s(o,a[c])}n.Identify=o;var u=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(u,l[p])}n.Revenue=u
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
var experiment = new Experiment.StubExperimentClient();
var experimentReady = new Promise((resolve, reject) => {
amplitude.getInstance().init('7db91a5c4478515a346dc05c8cd93425', 'experiment-test', null, function(instance) {
const apiKey = 'client-SkFY7JrOqJge2Fv7aU4mB1BKdacKDPBb';
const config = { debug: true }; // Any custom configuration (e.g. {debug: true})
experiment = Experiment.Experiment.initialize(apiKey, config);
experiment.setUserProvider(new Experiment.AmplitudeUserProvider(instance));
resolve();
});
});
const fetchWhenReady = async () => {
await window.experimentReady;
await window.experiment.fetch();
}
</script>
</head>
<body>
<div class="container">
<h1>Battleboat.js</h1>
<p class="tagline">A JavaScript AI that beats humans at battleship.</p>
<p>How to play</p>
<ol class="instructions">
<li id="step1">Select your ships from the left-hand side</li>
<li id="step2">Place your ships on your map</li>
<li id="step3">Click on the cells of the enemy's map<br>
to find and destroy all five enemy ships</li>
<li id="step4">The computer will fire on your ships<br>
immediately after you fire on its ships.</li>
</ol>
<div class="game-container">
<div id="restart-sidebar" class="hidden">
<h2>Try Again</h2>
<button id="restart-game">Restart Game</button>
</div><div id="roster-sidebar">
<h2>Place Your Ships</h2>
<ul class="fleet-roster">
<li id="patrolboat">Patrol Boat</li>
<li id="submarine">Submarine</li>
<li id="destroyer">Destroyer</li>
<li id="battleship">Battleship</li>
<li id="carrier">Aircraft Carrier</li>
</ul>
<button id="rotate-button" data-direction="0">Rotate Ship</button>
<button id="start-game" class="hidden">Start Game</button>
<button id="place-randomly" class="hidden">Place Randomly and Start</button>
</div><div id="stats-sidebar">
<h2>Stats</h2>
<p><strong>Games Won</strong></p>
<p id="stats-wins">0 of 0</p>
<p><strong>Accuracy</strong></p>
<p id="stats-accuracy">0%</p>
<button id="reset-stats">Reset Stats</button>
<button id="prob-heatmap" class="hidden">Show Probability Heatmap</button>
</div><div class="grid-container">
<h2>Your Fleet</h2>
<div class="grid human-player"><span class="no-js">Please enable JavaScript to play this game</span></div>
</div><div class="grid-container">
<h2>Enemy Fleet</h2>
<div class="grid computer-player"><span class="no-js">Please enable JavaScript to play this game</span></div>
</div>
</div>
<p>Created by <a href="https://billmei.net">Bill Mei</a>.</p>
<p>This project is open source <a href="https://github.com/billmei/battleboat">on GitHub</a>.</p>
</div>
<a href="https://github.com/billmei/battleboat"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<script>
function isEmpty(obj) {
return Object.keys(obj).length === 0;
}
fetchWhenReady().then(() => {
var tagline = document.getElementsByClassName('tagline')[0];
const variant = experiment.variant('ps-test-example');
if (variant.value === 'control') {
tagline.innerHTML = 'Showing Experiment Control'
tagline.style.color = "blue";
} else if (variant.value === 'treatment') {
tagline.innerHTML = 'Showing Experiment Treatment'
tagline.style.color = "red";
} else if (isEmpty(variant)) {
tagline.innerHTML = 'No variants were fetched'
}
});
// Don't change this variable.
var DEBUG_MODE = localStorage.getItem('DEBUG_MODE') === 'true';
// To turn DEBUG_MODE on, run `setDebug(true);` in the console.
if (!DEBUG_MODE) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-10730961-10', 'auto');
ga('send', 'pageview');
}
</script>
<script src="js/battleboat.js"></script>
<span class="prefetch" id="prefetch1"></span>
<span class="prefetch" id="prefetch2"></span>
<span class="prefetch" id="prefetch3"></span>
</body>
</html>