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="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"
  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: 10vh;
  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           line-height: 0.6em;
  88           width: 0.6em;
  89           height: 0.6em;
  90           font-size: 20vmin;
  91           font-family: 'Sans', sans-serif;
  92           border-style: solid;
  93           border-width: 1px;
  94           border-radius: 0.3em;
  95           position: absolute;
  96           margin-top: -2.25em;
  97           margin-left: 1.6667em;
  98           overflow: hidden;
  99       }
 100
 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. */
 104
 105       @media screen and (-webkit-min-device-pixel-ratio:0) {
 106           .adj { line-height: 0.5333em; }
 107       }
 108
 109       @-moz-document url-prefix() {
 110           .adj { line-height: 0.6667em; }
 111       }
 112
 113       .score {
 114           top: 0vh;
 115           left: 0;
 116           bottom: 30vh;
 117           right: 50vw;
 118           line-height: 70vh;
 119       }
 120
 121       .action {
 122           top: 0;
 123           left: 45vw;
 124           bottom: 30vh;
 125           right: 0;
 126           line-height: 70vh;
 127       }
 128
 129       .container {
 130           position: absolute;
 131           display: block;
 132       }
 133
 134       .inner h1 {
 135           font-size: 1.25em;
 136       }
 137
 138       .inner {
 139           vertical-align: middle;
 140           line-height: 2em;
 141           display: inline-block;
 142       }
 143
 144       #current-score {
 145           display: inline-block;
 146           font-size: 32vmin;
 147           width: 1.25em;
 148           height: 1.25em;
 149           line-height: 1.25em;
 150           font-family: 'Sans', sans-serif;
 151           border-style: solid;
 152           border-width: 1.5px;
 153           border-radius: 0.625em;
 154       }
 155
 156       #current-actions {
 157           display: inline-block;
 158           font-size: 32vmin;
 159           width: 1.25em;
 160           height: 1.25em;
 161           line-height: 1.25em;
 162           margin: 0;
 163           font-family: 'Sans', sans-serif;
 164           border-width: 1.5px;
 165       }
 166
 167
 168       @-moz-document url-prefix() {
 169           #current-score, #current-actions { line-height: 1.3333em; }
 170       }
 171
 172       .turn {
 173           left: 45vw;
 174           top: 70vh;
 175           bottom: 10vh;
 176           right: 0;
 177           line-height: 15vh;
 178       }
 179
 180       .turn a {
 181           font-size: 1em;
 182           white-space: nowrap;
 183           padding-top: 0.25em;
 184           padding-bottom: 0.25em;
 185           padding-left: 1.5em;
 186           padding-right: 2.0em;
 187       }
 188
 189       @media (max-aspect-ratio: 1/1) {
 190           .score {
 191               top: 20vh;
 192               left: 2vw;
 193               bottom: 30vh;
 194               right: 40vw;
 195               line-height: 50vh;
 196           }
 197
 198           .action {
 199               top: 5vh;
 200               left: 40vw;
 201               bottom: 45vh;
 202               right: 2vw;
 203               line-height: 50vh;
 204           }
 205
 206           #current-actions + .adj {
 207               margin-top: -0.3333em;
 208           }
 209
 210           #current-score + .adj {
 211               margin-top: -0.3333em;
 212               margin-left: -0.25em;
 213           }
 214
 215           .turn {
 216               left: 45vw;
 217               top: 60vh;
 218               bottom: 25vh;
 219               right: 2vw;
 220               line-height: 15vh;
 221           }
 222
 223           .bits {
 224               top: 75vh;
 225               right: 20vw;
 226               bottom: 10vh;
 227               left: 20vw;
 228               line-height: 15vh;
 229           }
 230       }
 231
 232
 233       #triggered {
 234           position: absolute;
 235           left: 8vw;
 236           right: 8vw;
 237           font-size: 16vmin;
 238           pointer-events: none;
 239           -webkit-transform: translate3d(0, 0, 0);
 240       }
 241
 242       #triggered .die:after {
 243           border-width: 0.05em;
 244       }
 245
 246
 247     </style>
 248
 249     <script type="text/javascript" src="fastclick.js"></script>
 250     <script type="text/javascript" src="mlpccg.js"></script>
 251     <script type="text/javascript">
 252       "use strict";
 253
 254       var ACTION_COUNT = [2, 2,
 255                           3, 3, 3, 3,
 256                           4, 4, 4, 4, 4,
 257                           5, 5, 5, 5, 5];
 258       var opponentScore = 0;
 259       var score = 0;
 260       var actions = 0;
 261
 262       function actionsPerTurn () {
 263           return ACTION_COUNT[Math.max(score, opponentScore)];
 264       }
 265
 266       function dscore (d) {
 267           score = iclamp(score + d, 0, 15);
 268           update();
 269           broadcast({ type: 'score', score: score });
 270           if (score >= 15)
 271               show('win');
 272       }
 273
 274       function dactions (d) {
 275           actions = iclamp(actions + d, 0, 99);
 276           update();
 277       }
 278
 279       function update () {
 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();
 285       }
 286
 287       messages.score = function (data) {
 288           opponentScore = data.score | 0;
 289           update();
 290       };
 291
 292       messages.dismiss = function () {
 293           var overlay = document.getElementById("overlay");
 294           if (overlay)
 295               overlay.parentNode.removeChild(overlay);
 296       };
 297
 298       function maybeBack (event) {
 299           if (Math.max(score, opponentScore) !== 0
 300               && Math.max(score, opponentScore) !== 15) {
 301               show('confirmBack');
 302               event.preventDefault();
 303               event.stopImmediatePropagation();
 304               event.stopPropagation();
 305           }
 306       }
 307
 308       function handleStatusBars () {
 309           if (navigator.standalone) {
 310               removeStatusBar();
 311               if (window.name !== "p2"
 312                   || window.parent.innerHeight <= window.parent.innerWidth) {
 313                   addStatusBar();
 314               }
 315           }
 316       }
 317
 318       window.addEventListener('resize', handleStatusBars);
 319       window.addEventListener('orientationchange', handleStatusBars);
 320
 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)";
 327            }
 328           handleStatusBars();
 329       });
 330
 331     </script>
 332   </head>
 333   <body onload="update()">
 334     <div class="mark subdue background"></div>
 335     <div id="spinner" class="spinner"></div>
 336     <div class="score container">
 337       <div class="inner">
 338         <h1>Points</h1>
 339         <a id="current-score" onclick="dscore(+1)">0</a>
 340         <a class="adj" onclick="dscore(-1)">-</a>
 341       </div>
 342     </div>
 343     <div class="action container">
 344       <div class="inner">
 345         <h1>Actions</h1>
 346         <div class="action-token" id="current-actions" onclick="dactions(-1)">0</div>
 347         <a class="adj" onclick="dactions(+1)">+</a>
 348       </div>
 349     </div>
 350     <div class="bits container">
 351       <div class="inner">
 352         <a onclick="spin()">
 353           <span style="display: inline-block; vertical-align: -0.125em;">↻</span>
 354         </a>
 355         <a onclick="roll(6)">
 356           <span class="die d6" data-roll=6></span>
 357         </a>
 358         <a onclick="roll(20)">
 359           <span class="die d20" data-roll=20></span>
 360         </a>
 361       </div>
 362     </div>
 363     <div class="turn container">
 364       <div class="inner">
 365         <a onclick="dactions(actionsPerTurn())" class="button">
 366           Turn <span class="action-token" id="actions-per-turn">+2</span>
 367         </a>
 368       </div>
 369     </div>
 370     <div id="triggered">
 371     </div>
 372     <a class="back subdue"
 373        href="mlpccg.html" target="_parent"
 374        onclick="maybeBack(event)">
 375     </a>
 376     <a class="change mark subdue" onclick="nextTheme(document.body.parentNode)"></a>
 377     <div class="dialog" id="confirmBack">
 378       <p>
 379         You sure you want to stop?
 380       </p>
 381       <a class="button" onclick="dismiss()">Nnope.</a>
 382       <a class="button" href="mlpccg.html" target="_parent">Eeyup.</a>
 383     </div>
 384     <div class="dialog" id="win">
 385       <div class="mark subdue" style="font-size: 30vmin; height: 40vmin"></div>
 386       <a class="button" onclick="dismiss()">You Win!</a>
 387     </div>
 388     <div id="overlay"></div>
 389   </body>
 390 </html>