2 <html manifest=
"mlpccg.appcache" class=
"stored-theme">
4 The person who associated a work with this deed has dedicated the work
5 to the public domain by waiving all of his or her rights to the work
6 worldwide under copyright law, including all related and neighboring
7 rights, to the extent allowed by law.
9 You can copy, modify, distribute and perform the work, even for
10 commercial purposes, all without asking permission.
12 See https://creativecommons.org/publicdomain/zero/1.0/ for details.
15 <meta charset=
"utf-8">
16 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
17 <meta name=
"apple-mobile-web-app-status-bar-style" content=
"black-translucent">
18 <meta name=
"apple-mobile-web-app-capable" content=
"yes">
19 <meta name=
"apple-mobile-web-app-title" content=
"MLPCCG">
20 <meta name=
"mobile-web-app-capable" content=
"yes">
21 <link rel=
"shortcut icon" sizes=
"16x16 24x24 32x32 48x48 64x64"
23 <link rel=
"icon" type=
"image/png" sizes=
"32x32" href=
"favicon_32.png">
24 <link rel=
"icon" type=
"image/png" sizes=
"128x128" href=
"favicon_128.png">
25 <link rel=
"icon" type=
"image/png" sizes=
"196x196" href=
"favicon_196.png">
26 <link rel=
"icon" type=
"image/png" sizes=
"256x256" href=
"favicon_256.png">
27 <link rel=
"icon" type=
"image/png" sizes=
"64x64" href=
"favicon_64.png">
28 <link rel=
"apple-touch-icon" sizes=
"57x57" href=
"favicon_57.png">
29 <link rel=
"apple-touch-icon" sizes=
"72x72" href=
"favicon_72.png">
30 <link rel=
"apple-touch-icon" sizes=
"76x76" href=
"favicon_76.png">
31 <link rel=
"apple-touch-icon" sizes=
"114x114" href=
"favicon_114.png">
32 <link rel=
"apple-touch-icon" sizes=
"120x120" href=
"favicon_120.png">
33 <link rel=
"apple-touch-icon" sizes=
"144x144" href=
"favicon_144.png">
34 <link rel=
"apple-touch-icon" sizes=
"152x152" href=
"favicon_152.png">
35 <meta name=
"msapplication-TileColor" content=
"#ffffff">
36 <meta name=
"msapplication-TileImage" content=
"favicon_144.png">
37 <link rel=
"stylesheet" href=
"main.css" type=
"text/css">
38 <title>MLPCCG Helper - Solo
</title>
41 -webkit-transform: translate3d(
0,
0,
0);
46 font-family: 'Sans', sans-serif;
47 background-color: rgba(
254,
243,
237,
0.8) !important;
48 border: solid black
1px;
52 display: inline-block;
54 color: black !important;
72 display: inline-block;
91 font-family: 'Sans', sans-serif;
97 margin-left:
1.6667em;
101 /* Height
0.6 with line-height
0.6 should be centering the text,
102 but it doesn't. Worse, it's wrong in different directions in
103 different renderers. */
105 @media screen and (-webkit-min-device-pixel-ratio:
0) {
106 .adj { line-height:
0.5333em; }
109 @-moz-document url-prefix() {
110 .adj { line-height:
0.6667em; }
139 vertical-align: middle;
141 display: inline-block;
145 display: inline-block;
150 font-family: 'Sans', sans-serif;
153 border-radius:
0.625em;
157 display: inline-block;
163 font-family: 'Sans', sans-serif;
168 @-moz-document url-prefix() {
169 #current-score, #current-actions { line-height:
1.3333em; }
184 padding-bottom:
0.25em;
186 padding-right:
2.0em;
189 @media (max-aspect-ratio:
1/
1) {
206 #current-actions + .adj {
207 margin-top: -
0.3333em;
210 #current-score + .adj {
211 margin-top: -
0.3333em;
212 margin-left: -
0.25em;
238 pointer-events: none;
239 -webkit-transform: translate3d(
0,
0,
0);
242 #triggered .die:after {
243 border-width:
0.05em;
249 <script type=
"text/javascript" src=
"fastclick.js"></script>
250 <script type=
"text/javascript" src=
"mlpccg.js"></script>
251 <script type=
"text/javascript">
254 var ACTION_COUNT = [
2,
2,
258 var opponentScore =
0;
262 function actionsPerTurn () {
263 return ACTION_COUNT[Math.max(score, opponentScore)];
266 function dscore (d) {
267 score = iclamp(score + d,
0,
15);
269 broadcast({ type: 'score', score: score });
274 function dactions (d) {
275 actions = iclamp(actions + d,
0,
99);
280 document.getElementById(
"current-score").textContent = score;
281 document.getElementById(
"current-actions").textContent =
282 actions <
100 ? actions :
"…";
283 document.getElementById(
"actions-per-turn").textContent =
284 "+" + actionsPerTurn();
287 messages.score = function (data) {
288 opponentScore = data.score |
0;
292 messages.dismiss = function () {
293 var overlay = document.getElementById(
"overlay");
295 overlay.parentNode.removeChild(overlay);
298 function maybeBack (event) {
299 if (Math.max(score, opponentScore) !==
0
300 && Math.max(score, opponentScore) !==
15) {
302 event.preventDefault();
303 event.stopImmediatePropagation();
304 event.stopPropagation();
308 function handleStatusBars () {
309 if (navigator.standalone) {
311 if (window.name !==
"p2"
312 || window.parent.innerHeight <= window.parent.innerWidth) {
318 window.addEventListener('resize', handleStatusBars);
319 window.addEventListener('orientationchange', handleStatusBars);
321 window.addEventListener('DOMContentLoaded', function () {
322 // iOS
6 won't detect events for a rotated iframe properly,
323 // so the rotation has to be done in the body.
324 if (window.name ===
"p1") {
325 document.body.style[
"-webkit-transform"] =
326 document.body.style.transform =
"rotateZ(180deg)";
333 <body onload=
"update()">
334 <div class=
"mark subdue background"></div>
335 <div id=
"spinner" class=
"spinner"></div>
336 <div class=
"score container">
339 <a id=
"current-score" onclick=
"dscore(+1)">0</a>
340 <a class=
"adj" onclick=
"dscore(-1)">-
</a>
343 <div class=
"action container">
346 <div class=
"action-token" id=
"current-actions" onclick=
"dactions(-1)">0</div>
347 <a class=
"adj" onclick=
"dactions(+1)">+
</a>
350 <div class=
"bits container">
353 <span style=
"display: inline-block; vertical-align: -0.125em;">↻
</span>
355 <a onclick=
"roll(6)">
356 <span class=
"die d6" data-roll=
6></span>
358 <a onclick=
"roll(20)">
359 <span class=
"die d20" data-roll=
20></span>
363 <div class=
"turn container">
365 <a onclick=
"dactions(actionsPerTurn())" class=
"button">
366 Turn
<span class=
"action-token" id=
"actions-per-turn">+
2</span>
372 <a class=
"back subdue"
373 href=
"mlpccg.html" target=
"_parent"
374 onclick=
"maybeBack(event)">
376 <a class=
"change mark subdue" onclick=
"nextTheme(document.body.parentNode)"></a>
377 <div class=
"dialog" id=
"confirmBack">
380 Do you want to stop playing?
382 <a class=
"button" onclick=
"dismiss()">Nnope.
</a>
383 <a class=
"button" href=
"mlpccg.html" target=
"_parent">Eeyup.
</a>
385 <div class=
"dialog" id=
"win">
386 <div class=
"mark subdue" style=
"font-size: 30vmin; height: 40vmin"></div>
387 <a class=
"button" onclick=
"dismiss()">You Win!
</a>
389 <div id=
"overlay"></div>