Commit 890ea2af authored by Hydrox6's avatar Hydrox6

Added Raids 1 Challenge and Raids 2 to Petlist

Changed dimensions to 6x7 to accommodate the new pets. Rejigged the layout to support longer names
parent a6800427
---
layout: default
---
<script src="PetListGen.js"></script>
<script src="wrapper.js"></script>
<h1>OSRS Pet List Generator</h1>
<p>Either check the boxes for the pets you have, then input the killcount/xp you got them on in the corresponding text box; or upload a pets.txt file; then press Generate.</p>
<form action="" id="petForm">
<div id="input-actions">
<label for="uploadPets" class="button">Upload pets.txt</label>
<input onchange="handleUpload()" class="hidden" type="file" accept=".txt" id="uploadPets"></input>
<button type="button" id="Generate">Generate</button>
<br/>
<br/>
<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">
<a href="#" class="button" id="saveImage" download="pets.png">Save Image</a>
<button type="button" id="Go Back">Go Back</button>
</div>
<br/>
<div id="inputSection">
<div id="options">
<div class="option">
<span>Scale Factor:</span>
<input type="text" id="scaleFactor" value="2" size=2/>
</div>
<div class="option">
<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">
</div>
</div>
<div id="processingSection">
</div>
</form>
<div id="result" class="hidden">
<p>Congratulations! Your very own fancy Pet List!</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>
<div id="frameStore">
<img id="frame_l" src="frame/l.png">
<img id="frame_r" src="frame/r.png">
<img id="frame_t" src="frame/t.png">
<img id="frame_b" src="frame/b.png">
<img id="frame_tl" src="frame/tl.png">
<img id="frame_tr" src="frame/tr.png">
<img id="frame_bl" src="frame/bl.png">
<img id="frame_br" src="frame/br.png">
---
layout: default
---
<script src="PetListGen.js"></script>
<script src="wrapper.js"></script>
<h1>OSRS Pet List Generator</h1>
<p>Either check the boxes for the pets you have, then input the killcount/xp you got them on in the corresponding text box; or upload a pets.txt file; then press Generate.</p>
<form action="" id="petForm">
<div id="input-actions">
<label for="uploadPets" class="button">Upload pets.txt</label>
<input onchange="handleUpload()" class="hidden" type="file" accept=".txt" id="uploadPets"></input>
<button type="button" id="Generate">Generate</button>
<br/>
<br/>
<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">
<a href="#" class="button" id="saveImage" download="pets.png">Save Image</a>
<button type="button" id="Go Back">Go Back</button>
</div>
<br/>
<div id="inputSection">
<div id="options">
<div class="option">
<span>Scale Factor:</span>
<input type="text" id="scaleFactor" value="2" size=2/>
</div>
<div class="option">
<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="6" size=2/>
<span>x</span>
<input type="text" id="gridY" value="7" size=2/>
</div>
</div>
<div id="background">
</div>
</div>
<div id="processingSection">
</div>
</form>
<div id="result" class="hidden">
<p>Congratulations! Your very own fancy Pet List!</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>
<div id="frameStore">
<img id="frame_l" src="frame/l.png">
<img id="frame_r" src="frame/r.png">
<img id="frame_t" src="frame/t.png">
<img id="frame_b" src="frame/b.png">
<img id="frame_tl" src="frame/tl.png">
<img id="frame_tr" src="frame/tr.png">
<img id="frame_bl" src="frame/bl.png">
<img id="frame_br" src="frame/br.png">
</div>
\ No newline at end of file
---
---
@import "base";
button, .button
{
background-color: #3f3f3f;
color:#dddddd;
border: none;
font-size: 20px;
font-weight: bold;
text-decoration: none;
padding: 10px 15px;
margin-right: 10px;
cursor:pointer;
border-radius: 4px;
}
div#background
{
margin-top:20px;
background-color: #3f3f3f;
padding: 20px;
border-radius: 5px;
}
div.petWrapper
{
position: relative;
display: inline-block;
/*margin-right:20px;*/
width:40%;
white-space: nowrap;
text-align: left;
margin-right:1em;
margin-left:1em;
padding-bottom: 5px;
padding-top: 5px;
}
div.petInputRoot > input, div.petWrapper > img
{
vertical-align: middle;
image-rendering: optimizeSpeed;
}
div.petInputRoot > input
{
}
div.petInputRoot
{
vertical-align: middle;
float:right;
height:100%;
}
div.petInputRoot > input[disabled]
{
background-color: #777777;
}
div.petInputRoot > input[type="checkbox"]
{
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
-webkit-transform: scale(1.6);
-o-transform: scale(1.6);
margin-top: 4px;
margin-right: 5px;
}
div#options
{
display: block;
margin-top:10px;
margin-bottom: -10px;
}
div.option
{
display: inline-block;
margin-right: 20px;
}
div#frameStore
{
display:none;
width: 0%;
height: 0%;
}
main#main
{
position: relative;
width: calc(100% - 3em);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (orientation:portrait)
{
div#background
{
/*width:530px;
max-width: 530px;*/
}
div.petWrapper
{
width:calc(100% - 3em);
max-width: 100%;
}
}
@media (max-width: 25em) and (orientation:portrait)
{
div#background
{
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;
}
}
.hidden
{
display: none;
}
img#resultImage
{
position: absolute;
left:0;
width:100%;
---
---
@import "base";
button, .button
{
background-color: #3f3f3f;
color:#dddddd;
border: none;
font-size: 20px;
font-weight: bold;
text-decoration: none;
padding: 10px 15px;
margin-right: 10px;
cursor:pointer;
border-radius: 4px;
}
div#background
{
margin-top:20px;
background-color: #3f3f3f;
padding: 20px;
border-radius: 5px;
}
div.petWrapper
{
position: relative;
display: inline-block;
/*margin-right:20px;*/
width:40%;
white-space: nowrap;
text-align: left;
margin-right:1em;
margin-left:1em;
padding-bottom: 5px;
padding-top: 5px;
vertical-align: top;
}
div.petLabelRoot > span
{
white-space: normal;
}
div.petInputRoot > input, div.petWrapper > img
{
vertical-align: middle;
image-rendering: optimizeSpeed;
}
div.petLabelRoot
{
width:70%;
float:left;
}
div.petLabelRoot > img
{
float:left;
}
div.petInputRoot
{
vertical-align: middle;
float:right;
height:100%;
width: 30%;
}
div.petInputRoot > input[disabled]
{
background-color: #777777;
}
div.petInputRoot > input[type="checkbox"]
{
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
-webkit-transform: scale(1.6);
-o-transform: scale(1.6);
margin-top: 4px;
margin-right: 5px;
}
div#options
{
display: block;
margin-top:10px;
margin-bottom: -10px;
}
div.option
{
display: inline-block;
margin-right: 20px;
}
div#frameStore
{
display:none;
width: 0%;
height: 0%;
}
main#main
{
position: relative;
width: calc(100% - 3em);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (orientation:portrait)
{
div#background
{
/*width:530px;
max-width: 530px;*/
}
div.petWrapper
{
width:calc(100% - 3em);
max-width: 100%;
}
}
@media (max-width: 25em) and (orientation:portrait)
{
div#background
{
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;
}
}
.hidden
{
display: none;
}
img#resultImage
{
position: absolute;
left:0;
width:100%;
}
\ No newline at end of file
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","herbi","noon","vorkath"]
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","Venenatis","Scorpia","Callisto","Vet'ion","TzTok Jad","Barbarian Assault","Chambers of Xeric","Skotizo","Corporeal Beast","Wintertodt","Agility","Farming","Runecrafting","Thieving","Mining","Fishing","Woodcutting","Chinchompa","Master Clues","The Inferno","Herbiboar","Dawn/Dusk","Vorki"]
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","herbi","noon","vorkath","dust","verzik"]
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","Venenatis","Scorpia","Callisto","Vet'ion","TzTok Jad","Barbarian Assault","Chambers of Xeric","Skotizo","Corporeal Beast","Wintertodt","Agility","Farming","Runecrafting","Thieving","Mining","Fishing","Woodcutting","Chinchompa","Master Clues","The Inferno","Herbiboar","Dawn/Dusk","Vorki", "Chambers of Xeric: Challenge Mode", "Theatre of Blood"]
safeNames = new Array();
function generatePetBoxes()
......@@ -12,14 +12,18 @@ function generatePetBoxes()
var Root = document.createElement("DIV");
Root.classList.add("petWrapper")
var labelRoot = document.createElement("DIV")
labelRoot.classList.add("petLabelRoot")
Root.appendChild(labelRoot);
var i = document.createElement("IMG");
i.src = "pets/"+petOrder[x]+".png"
i.id = fancy[x];
Root.appendChild(i);
labelRoot.appendChild(i);
var name = document.createElement("SPAN");
name.innerHTML = fancy[x];
Root.appendChild(name);
labelRoot.appendChild(name);
var inputRoot = document.createElement("DIV")
inputRoot.classList.add("petInputRoot")
......@@ -112,9 +116,9 @@ function readFile(e)
var v = results[l].split("\t")[1]
if(v != -1)
{
children[l].children[2].children[0].checked = true;
children[l].children[2].children[1].disabled = false;
children[l].children[2].children[1].value = v;
children[l].children[1].children[0].checked = true;
children[l].children[1].children[1].disabled = false;
children[l].children[1].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