single.html

   1 <!DOCTYPE html>
   2 <html manifest="mlpccg.appcache" class="stored-theme">
   3   <!--
   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.
   8
   9   You can copy, modify, distribute and perform the work, even for
  10   commercial purposes, all without asking permission.
  11
  12   See https://creativecommons.org/publicdomain/zero/1.0/ for details.
  13   -->
  14   <head>
  15     <meta charset="utf-8">
  16     <meta name="viewport" content="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"
  22           href="favicon.ico">
  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>
  39     <style>
  40       body {
  41           -webkit-transform: translate3d(0, 0, 0);
  42       }
  43
  44       .action-token {
  45           border-radius: 1em;
  46           font-family: 'Sans', sans-serif;
  47           background-color: rgba(254, 243, 237, 0.8) !important;
  48           border: solid black 1px;
  49           width: 1.375em;
  50           height: 1.375em;
  51           line-height: 1.375em;
  52           display: inline-block;
  53           font-size: 1em;
  54           color: black !important;
  55       }
  56
  57       .dialog h1 {
  58           font-size: 5vmin;
  59           margin-top: 2vmin;
  60           margin-bottom: 2vmin;
  61       }
  62
  63       .bits {
  64           top: 70vh;
  65           left: 0;
  66           bottom: 15vh;
  67           right: 50vw;
  68           line-height: 15vh;
  69       }
  70
  71       .bits a {
  72           display: inline-block;
  73           font-size: 8vmin;
  74           width: 1.5em;
  75           height: 1.5em;
  76           min-width: 1.5em;
  77           min-height: 1.5em;
  78           max-width: 1.5em;
  79           max-height: 1.5em;
  80           border-radius: 1em;
  81           border-style: solid;
  82           border-width: 1px;
  83       }
  84
  85       .adj {
  86           display: block;
  87           padding: 0;
  88           max-width: 0.6em;
  89           min-width: 0.6em;
  90           line-height: 0.6em;
  91           width: 0.6em;
  92           height: 0.6em;
  93           max-height: 0.6em;
  94           max-height: 0.6em;
  95           font-size: 20vmin;
  96           font-family: 'Sans', sans-serif;
  97           border-style: solid;
  98           border-width: 1px;
  99           border-radius: 0.3em;
 100       }
 101
 102       /* Height 0.6 with line-height 0.6 should be centering the text,
 103          but it doesn't. Worse, it's wrong in different directions in
 104          different renderers. */
 105
 106       @media screen and (-webkit-min-device-pixel-ratio:0) {
 107           .adj { line-height: 0.5333em; }
 108       }
 109
 110       @-moz-document url-prefix() {
 111           .adj { line-height: 0.6667em; }
 112       }
 113
 114       .score {
 115           top: 0vh;
 116           left: 0;
 117           bottom: 70vh;
 118           right: 50vw;
 119           line-height: 70vh;
 120       }
 121
 122       .action {
 123           top: 0;
 124           left: 45vw;
 125           bottom: 30vh;
 126           right: 0;
 127           line-height: 70vh;
 128       }
 129
 130       .container {
 131           position: absolute;
 132           display: block;
 133       }
 134
 135       .inner h1 {
 136           font-size: 1.25em;
 137       }
 138
 139       .inner {
 140           vertical-align: middle;
 141           line-height: 2em;
 142           display: inline-block;
 143       }
 144
 145       #current-score {
 146           display: inline-block;
 147           font-size: 32vmin;
 148           width: 1.25em;
 149           height: 1.25em;
 150           line-height: 1.25em;
 151           font-family: 'Sans', sans-serif;
 152           border-style: solid;
 153           border-width: 1.5px;
 154           border-radius: 0.625em;
 155       }
 156
 157       #current-actions {
 158           display: inline-block;
 159           font-size: 32vmin;
 160           width: 1.25em;
 161           height: 1.25em;
 162           line-height: 1.25em;
 163           margin: 0;
 164           font-family: 'Sans', sans-serif;
 165           border-width: 1.5px;
 166       }
 167
 168
 169       @-moz-document url-prefix() {
 170           #current-score, #current-actions { line-height: 1.3333em; }
 171       }
 172
 173       #current-score + .adj, #current-actions + .adj {
 174           position: absolute;
 175           margin-top: -2.25em;
 176           margin-left: 1.6667em;
 177       }
 178
 179       .turn {
 180           left: 45vw;
 181           top: 70vh;
 182           bottom: 15vh;
 183           right: 0;
 184           line-height: 15vh;
 185       }
 186
 187       .turn a {
 188           font-size: 1em;
 189           white-space: nowrap;
 190           padding-top: 0.25em;
 191           padding-bottom: 0.25em;
 192           padding-left: 1.5em;
 193           padding-right: 2.0em;
 194       }
 195
 196       @media (max-aspect-ratio: 1/1) {
 197           .score {
 198               top: 20vh;
 199               left: 2vw;
 200               bottom: 30vh;
 201               right: 40vw;
 202               line-height: 50vh;
 203           }
 204
 205           .action {
 206               top: 5vh;
 207               left: 40vw;
 208               bottom: 45vh;
 209               right: 2vw;
 210               line-height: 50vh;
 211           }
 212
 213           #current-actions + .adj {
 214               margin-top: -0.3333em;
 215           }
 216
 217           #current-score + .adj {
 218               margin-top: -0.3333em;
 219               margin-left: -0.25em;
 220           }
 221
 222           .turn {
 223               left: 45vw;
 224               top: 60vh;
 225               bottom: 25vh;
 226               right: 2vw;
 227               line-height: 15vh;
 228           }
 229
 230           .bits {
 231               top: 75vh;
 232               right: 20vw;
 233               bottom: 10vh;
 234               left: 20vw;
 235               line-height: 15vh;
 236           }
 237       }
 238
 239
 240       #triggered {
 241           position: absolute;
 242           left: 8vw;
 243           right: 8vw;
 244           font-size: 16vmin;
 245           pointer-events: none;
 246           -webkit-transform: translate3d(0, 0, 0);
 247       }
 248
 249       #triggered .die:after {
 250           border-width: 0.05em;
 251       }
 252
 253
 254     </style>
 255
 256     <script type="text/javascript" src="fastclick.js"></script>
 257     <script type="text/javascript" src="mlpccg.js"></script>
 258     <script type="text/javascript">
 259       "use strict";
 260
 261       var ACTION_COUNT = [2, 2,
 262                           3, 3, 3, 3,
 263                           4, 4, 4, 4, 4,
 264                           5, 5, 5, 5, 5];
 265       var opponentScore = 0;
 266       var score = 0;
 267       var actions = 0;
 268
 269       function actionsPerTurn () {
 270           return ACTION_COUNT[Math.max(score, opponentScore)];
 271       }
 272
 273       function dscore (d) {
 274           score = iclamp(score + d, 0, 15);
 275           update();
 276           broadcast({ type: 'score', score: score });
 277           if (score >= 15)
 278               show('win');
 279       }
 280
 281       function dactions (d) {
 282           actions = iclamp(actions + d, 0, 99);
 283           update();
 284       }
 285
 286       function update () {
 287           document.getElementById("current-score").textContent = score;
 288           document.getElementById("current-actions").textContent =
 289               actions < 100 ? actions : "…";
 290           document.getElementById("actions-per-turn").textContent =
 291               "+" + actionsPerTurn();
 292       }
 293
 294       messages.score = function (data) {
 295           opponentScore = data.score | 0;
 296           update();
 297       };
 298
 299       messages.dismiss = function () {
 300           var overlay = document.getElementById("overlay");
 301           if (overlay)
 302               overlay.parentNode.removeChild(overlay);
 303       };
 304
 305       messages.show = function (data) {
 306           show(data.id);
 307       };
 308
 309       function maybeBack (event) {
 310           if (Math.max(score, opponentScore) !== 0
 311               && Math.max(score, opponentScore) !== 15) {
 312               show('confirmBack');
 313               event.preventDefault();
 314               event.stopImmediatePropagation();
 315               event.stopPropagation();
 316           }
 317       }
 318
 319       function handleStatusBars () {
 320           if (navigator.standalone) {
 321               removeStatusBar();
 322               if (window.name !== "p2"
 323                   || window.parent.innerHeight <= window.parent.innerWidth) {
 324                   addStatusBar();
 325               }
 326           }
 327       }
 328
 329       window.addEventListener('resize', handleStatusBars);
 330       window.addEventListener('orientationchange', handleStatusBars);
 331
 332       window.addEventListener('DOMContentLoaded', function () {
 333           // iOS 6 won't detect events for a rotated iframe properly,
 334           // so the rotation has to be done in the body.
 335           if (window.name === "p1") {
 336               document.body.style["-webkit-transform"] =
 337                   document.body.style.transform = "rotateZ(180deg)";
 338            }
 339           handleStatusBars();
 340       });
 341
 342     </script>
 343   </head>
 344   <body onload="update()">
 345     <div class="mark subdue background"></div>
 346     <div id="spinner" class="spinner"></div>
 347     <div class="score container">
 348       <div class="inner">
 349         <h1>Points</h1>
 350         <a id="current-score" onclick="dscore(+1)">0</a>
 351         <a class="adj" onclick="dscore(-1)">-</a>
 352       </div>
 353     </div>
 354     <div class="action container">
 355       <div class="inner">
 356         <h1>Actions</h1>
 357         <div class="action-token" id="current-actions" onclick="dactions(-1)">0</div>
 358         <a class="adj" onclick="dactions(+1)">+</a>
 359       </div>
 360     </div>
 361     <div class="bits container">
 362       <div class="inner">
 363         <a onclick="spin()">
 364           <span style="display: inline-block; vertical-align: -0.125em;">↻</span>
 365         </a>
 366         <a onclick="roll(6)">
 367           <span class="die d6" data-roll=6></span>
 368         </a>
 369         <a onclick="roll(20)">
 370           <span class="die d20" data-roll=20></span>
 371         </a>
 372       </div>
 373     </div>
 374     <div class="turn container">
 375       <div class="inner">
 376         <a onclick="dactions(actionsPerTurn())" class="button">
 377           Turn <span class="action-token" id="actions-per-turn">+2</span>
 378         </a>
 379       </div>
 380     </div>
 381     <div id="triggered">
 382     </div>
 383     <a class="back subdue"
 384        href="mlpccg.html" target="_parent"
 385        onclick="maybeBack(event)">
 386     </a>
 387     <a class="change mark subdue" onclick="nextTheme(document.body.parentNode)"></a>
 388     <div class="dialog" id="confirmBack">
 389       <h1>You Sure?</h1>
 390       <p>
 391         Do you want to stop playing?
 392       </p>
 393       <a class="button" onclick="dismiss()">Nnope.</a>
 394       <a class="button" href="mlpccg.html" target="_parent">Eeyup.</a>
 395     </div>
 396     <div class="dialog" id="win">
 397       <div class="mark subdue" style="font-size: 30vmin; height: 40vmin"></div>
 398       <a class="button" onclick="dismiss()">You Win!</a>
 399     </div>
 400   </body>
 401 </html>