diff --git a/index.php b/index.php index d370470..1ce87f5 100755 --- a/index.php +++ b/index.php @@ -58,6 +58,10 @@ margin-right: 0.5em; } + label small { + font-size: 0.75em; + font-weight: normal; + } textarea#query { font-family: monospace; } @@ -72,12 +76,34 @@ border-color: hsl(224, 78%, 75%); background-color: hsl(224, 78%, 90%); } + button[type=submit]:disabled { + border-color: hsl(224, 20%, 90%); + background-color: hsl(224, 20%, 75%); + } :required:invalid, :focus:invalid { /* insert your own styles for invalid form input */ background-color: #ffeeee; } </style> + <script type="text/javascript"> + function updateLineCounter() { + var linecounter = document.getElementById("linecounter"); + var submit = document.getElementById("submit"); + var queryfield = document.getElementById("query"); + + var count = query.value.split(/\r|\r\n|\n/).length; + linecounter.textContent = count+"/100"; + + if (count > 100) { + linecounter.setAttribute("style", "color: red;"); + submit.setAttribute("disabled", "disabled"); + } else { + linecounter.removeAttribute("style"); + submit.removeAttribute("disabled"); + } + } + </script> </head> <body> <h1>MtG Card Data Collector</h1> @@ -118,12 +144,15 @@ function x() { } switch ($_REQUEST['format']) { - case "set:num": + case "cardname": + $template = "{name}"; + break; + case "set:number": $template = "{set}: {number}"; break; - case "cardname": + case "setname:cardname": default: - $template = "{name}"; + $template = "{setName}: {name}"; } $lines = explode("\n", $q); @@ -139,6 +168,9 @@ function x() { $urls_only = false; foreach ($lines as $i => $line) { $parts = explode(' ', trim($line)); + if (count($parts) !== 2) + continue; + $url = "https://api.magicthegathering.io/v1/cards?set=$parts[0]&number=$parts[1]"; if (!$urls_only) { @@ -182,7 +214,8 @@ x() <?php foreach ([ "Card name" => "cardname", - "Set: Number" => "set:num", + "Set name: Card name" => "setname:cardname", + "Set: Number" => "set:number", ] as $label => $value) { $selected = $_REQUEST["format"] === $value ? " selected" : ""; echo "<option value=\"$value\" $selected>$label</option>"; @@ -196,24 +229,30 @@ foreach ([ </div> </div> <div class="row"> - <label for="query">Cards:</label> - <textarea id="query" name="query" rows="20" <?= !isset($_REQUEST['query']) ? "autofocus" : "" ?> required placeholder="M12 7 + <label for="query">Cards:<br><small id=linecounter>0/100</small></label> + <textarea id="query" name="query" rows="20" onkeyup="updateLineCounter()" <?= !isset($_REQUEST['query']) ? "autofocus" : "" ?> required placeholder="M12 7 ORI 25 AER 178"><?= !empty($_REQUEST['query']) ? $_REQUEST['query'] : "" ?></textarea> </div> <div class="row"> - <div></div> - <p style="padding: 1em 0;"> - Please keep in mind the data source for this service enforces a daily request limit, - so please don't waste it. If no cards are found and you are sure your set codes and - card numbers are valid, try again in a few hours or use the raw result URLs. - </p> + <div></div> + <div> + <p> + Please keep in mind the data source for this service enforces a daily request limit, + so please don't waste it. If no cards are found and you are sure your set codes and + card numbers are valid, try again in a few hours or use the raw result URLs. + </p> + <p> + Depending on how many cards you entered, loading the data will take a while. + </p> + </div> </div> <div class="row"> <span></span> - <button type="submit">Submit</button> + <button id=submit type="submit">Submit</button> </div> </div> </form> + <script type="text/javascript">updateLineCounter()</script> </body> </html>