Commit cf410b37 authored by Hydrox6's avatar Hydrox6

Improved the mobile experience

Also added another option for grid size, and changed the default to be portrait
parent 45a619de
......@@ -34,11 +34,9 @@ function renderText(context,colour,text,x,y)
}
}
function gen(canvas,scale,distance,pets,data)
function gen(canvas,ix,iy,scale,distance,pets,data)
{
var tsize = 32+distance
var ix = 9
var iy = 4
var width = (tsize)*ix + distance + 20;
var height = (tsize)*iy + distance + 20;
var scaledwidth = width * scale;
......
......@@ -13,7 +13,7 @@ layout: default
<button type="button" id="Generate">Generate</button>
<br/>
<br/>
<a href="#" id="petsHelp">What is pets.txt?</a>
<a href="javascript:void();"id="petsHelp">What is pets.txt?</a>
<p class="hidden" id="petsHelpBody">pets.txt is a file that stores the pet killcounts and experience in a way that this website can read. You can find a blank pets.txt <a href="https://gitlab.com/hydrox6/OSRS-PetListGen/blob/master/example_pets.txt">here.</a></p>
</div>
<div id="result-actions" class="hidden">
......@@ -31,6 +31,12 @@ layout: default
<span>Distance Between Images:</span>
<input type="text" id="distance" value="10" size=3/>
</div>
<div class="option">
<span>Grid Size:</span>
<input type="text" id="gridX" value="5" size=2/>
<span>x</span>
<input type="text" id="gridY" value="8" size=2/>
</div>
</div>
<div id="background">
......@@ -43,7 +49,7 @@ layout: default
</form>
<div id="result" class="hidden">
<p>Congratulations! Your very own fancy Pet List!</p>
<p>Either Right Click and save the image, or use the button above.</p>
<p>Either Right Click/Long Tap and save the image, or use the button above.</p>
<img id="resultImage">
<canvas id="resultCanvas" class="hidden"></canvas>
</div>
......
......@@ -28,6 +28,7 @@ div#background
div.petWrapper
{
position: relative;
display: inline-block;
/*margin-right:20px;*/
width:40%;
......@@ -35,25 +36,34 @@ div.petWrapper
text-align: left;
margin-right:1em;
margin-left:1em;
padding-bottom: 5px;
padding-top: 5px;
}
div.petWrapper > input, div.petWrapper > img
div.petInputRoot > input, div.petWrapper > img
{
vertical-align: middle;
image-rendering: optimizeSpeed;
}
div.petWrapper > input
div.petInputRoot > input
{
}
div.petInputRoot
{
float:right;
vertical-align: middle;
float:right;
height:100%;
}
div.petWrapper > input[disabled]
div.petInputRoot > input[disabled]
{
background-color: #777777;
}
div.petWrapper > input[type="checkbox"]
div.petInputRoot > input[type="checkbox"]
{
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
......@@ -74,6 +84,7 @@ div#options
div.option
{
display: inline-block;
margin-right: 20px;
}
......@@ -93,31 +104,55 @@ main#main
margin-right: auto;
}
@media (max-width: 850px)
@media (orientation:portrait)
{
form#petForm
div#background
{
width:calc(100% - 3em);
max-width: 100%;
margin-left:auto;
margin-right: auto;
/*width:530px;
max-width: 530px;*/
}
div.petWrapper
{
/*Holy shit thank you Chris Coyier for
writing about calc(). Saved my damn life
on this bug.*/
width:calc(100% - 3em);
max-width: 100%;
}
}
@media (max-width: 530px)
@media (max-width: 25em) and (orientation:portrait)
{
div#background
{
width:530px;
max-width: 530px;
position: absolute;
left:-18%;
width:120%;
max-width: 120%;
}
button, .button
{
margin-top: 15px;
}
div.option
{
margin-right: 0px;
}
div.petWrapper
{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #dddddd;
padding-left: 10px;
padding-right: 10px;
}
div.petWrapper > input, div.petWrapper > img
{
width:64px;
}
div.petInputRoot
{
position: absolute;
bottom:0;
right:0;
}
}
......
petOrder = ["chaos elemental","mole","kbd","zulrah","rex","supreme","prime","kq","zilyana","graardor","kril","kree","sire","kraken","cerb","thermy","chompy","venenatis","scorpia","callisto","vetion","jad","ba","olm","skotizo","corp","phoenix","squirrel","tangleroot","guardian","racoon","golem","heron","beaver","chinchompa","bloodhound"]
fancy = ["Chaos Elemental","Giant Mole","King Black Dragon","Zulrah","Dagannoth Rex","Dagannoth Supreme","Dagannoth Prime","Kalphite Queen","Commander Zilyana","General Graardor","K'ril Tsutsaroth","Kree'arra","Abyssal Sire","Kraken","Cerberus","Thermy","Chompy Chick","Venenatis","Scorpia","Callisto","Vet'ion","TzTok Jad","Barbarian Assault","Chambers of Xeric","Skotizo","Corporeal Beast","Wintertodt","Agility","Farming","Runecrafting","Thieving","Mining","Fishing","Woodcutting","Hunter","Master Clues"]
petOrder = ["chaos elemental","mole","kbd","zulrah","rex","supreme","prime","kq","zilyana","graardor","kril","kree","sire","kraken","cerb","thermy","chompy","venenatis","scorpia","callisto","vetion","jad","ba","olm","skotizo","corp","phoenix","squirrel","tangleroot","guardian","racoon","golem","heron","beaver","chinchompa","bloodhound","inferno"]
fancy = ["Chaos Elemental","Giant Mole","King Black Dragon","Zulrah","Dagannoth Rex","Dagannoth Supreme","Dagannoth Prime","Kalphite Queen","Commander Zilyana","General Graardor","K'ril Tsutsaroth","Kree'arra","Abyssal Sire","Kraken","Cerberus","Thermy","Chompy Chick","Venenatis","Scorpia","Callisto","Vet'ion","TzTok Jad","Barbarian Assault","Chambers of Xeric","Skotizo","Corporeal Beast","Wintertodt","Agility","Farming","Runecrafting","Thieving","Mining","Fishing","Woodcutting","Hunter","Master Clues","The Inferno"]
safeNames = new Array();
function generatePetBoxes()
......@@ -21,18 +21,24 @@ function generatePetBoxes()
name.innerHTML = fancy[x];
Root.appendChild(name);
var inputRoot = document.createElement("DIV")
inputRoot.classList.add("petInputRoot")
Root.appendChild(inputRoot);
var check = document.createElement("INPUT");
check.type = "checkbox";
check.name = safeName;
inputRoot.appendChild(check);
var entry = document.createElement("INPUT");
entry.type = "text";
entry.value = ""
entry.size = 6
entry.disabled = true;
entry.id = safeName;
Root.appendChild(entry);
inputRoot.appendChild(entry);
var check = document.createElement("INPUT");
check.type = "checkbox";
check.name = safeName;
Root.appendChild(check);
check.onchange = function()
{
......@@ -66,7 +72,9 @@ function generateImage()
data.push(val);
}
}
gen(canvas,scale,distance,fancy,data);
var iX = parseInt(document.getElementById("gridX").value);
var iY = parseInt(document.getElementById("gridY").value);
gen(canvas,iX,iY,scale,distance,fancy,data);
var url = canvas.toDataURL();
document.getElementById("resultImage").src = url;
document.getElementById("saveImage").href = url;
......@@ -105,9 +113,9 @@ function readFile(e)
var v = results[l].split("\t")[1]
if(v != -1)
{
children[l].children[3].checked = true;
children[l].children[2].disabled = false;
children[l].children[2].value = v;
children[l].children[2].children[0].checked = true;
children[l].children[2].children[1].disabled = false;
children[l].children[2].children[1].value = v;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment