Created
May 5, 2014 19:39
-
-
Save yuitest/cfdd6f71343acd3e20ac to your computer and use it in GitHub Desktop.
MLP CCG のスコア・トークンカウンタを作ってみる。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>カードのスコア管理的なやつを作ってる</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <!-- | |
| <script src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script> | |
| --> | |
| <script> | |
| jQuery(function ($) { | |
| //$('body').append(base({id: 'player1'}).addClass('opposite')); | |
| $('body').append(base({id: 'player2'})); | |
| $('.numincdec').each(addIncrementDecrementBox); | |
| function addIncrementDecrementBox() { | |
| var elm = $(this); | |
| var table = $('<table class="incdecbuttontable">').append( | |
| $('<tr>').append( | |
| $('<td>').append( | |
| $('<input type="button" value="▲" class="incdecbutton">').click(function () { | |
| elm.val(parseInt(elm.val(), 10) + 1); | |
| }) | |
| ) | |
| ) | |
| ).append( | |
| $('<tr>').append( | |
| $('<td>').append( | |
| $('<input type="button" value="▼" class="incdecbutton">').click(function () { | |
| var num = parseInt(elm.val(), 10); | |
| if (num > 0) { | |
| elm.val(num - 1); | |
| } | |
| }) | |
| ) | |
| ) | |
| ); | |
| elm.after(table); | |
| } | |
| function base (attr) { | |
| return $('<section id="player1" class="player">\ | |
| <table>\ | |
| <tr>\ | |
| <th>Score</th>\ | |
| <th>Tokens</th>\ | |
| </tr>\ | |
| <tr>\ | |
| <td>\ | |
| <input value="0" min="0" class="numincdec currentScore">\ | |
| </td>\ | |
| <td>\ | |
| <input value="0" min="0" class="numincdec actionTokens">\ | |
| </td>\ | |
| </tr>\ | |
| </table>\ | |
| <table>\ | |
| <tr>\ | |
| <td style="background-color: Aqua;">\ | |
| <input value="0" min="0" class="numincdec pointEoh">\ | |
| </td>\ | |
| <td style="background-color: Orange;">\ | |
| <input value="0" min="0" class="numincdec pointEoh">\ | |
| </td>\ | |
| <td style="background-color: Pink;">\ | |
| <input value="0" min="0" class="numincdec pointEoh">\ | |
| </td>\ | |
| </tr>\ | |
| <tr>\ | |
| <td style="background-color: Purple;">\ | |
| <input value="0" min="0" class="numincdec pointEoh">\ | |
| </td>\ | |
| <td style="background-color: WhiteSmoke;">\ | |
| <input value="0" min="0" class="numincdec pointEoh">\ | |
| </td>\ | |
| <td style="background-color: Yellow;">\ | |
| <input value="0" min="0" size="1" class="numincdec pointEoh">\ | |
| </td>\ | |
| </tr>\ | |
| </table>\ | |
| </section>').attr(attr); | |
| } | |
| }); | |
| </script> | |
| <style> | |
| .player { | |
| margin: 0 auto; | |
| font-family: "Courier New", monospace; | |
| } | |
| .incdecbuttontable { | |
| display: inline; | |
| vertical-align: middle; | |
| } | |
| .incdecbuttontable input{ | |
| background-color: transparent; | |
| } | |
| .incdecbutton { | |
| font-size: 1.5em; | |
| height: 2em; | |
| } | |
| .pointEoh { | |
| background-color: transparent; | |
| } | |
| .currentScore { | |
| } | |
| .actionTokens { | |
| } | |
| .numincdec { | |
| width: 2.8em; | |
| font-size: 1.4em; | |
| } | |
| .opposite { | |
| transform: rotate(180deg); | |
| -webkit-transform: rotate(180deg); | |
| -moz-transform: rotate(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body></body> | |
| </html> |
各色ごとのカウンタはいらない気がする。
むしろ「アクショントークンを 2 つ消費」「アクショントークンを 3 つ消費」「アクショントークンを 4 つ消費」みたいな、各消費量のボタンとかがあったほうが実用的かなー。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
コレを参考にしたらいいのかなー: https://play.google.com/store/apps/details?id=com.AaronGoodwine.MLPCCGScoreBoard