Commit 830ed882 authored by Hydrox6's avatar Hydrox6

Added functionality for pets.txt upload, save by button, and a help link

parent bdee545c
......@@ -8,11 +8,16 @@ layout: default
<form action="" id="petForm">
<div id="input-actions">
<button type="button" id="uploadPets">Upload pets.txt</button>
<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="#" 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">
<button type="button" id="saveImage">Save image</button>
<a href="#" class="button" id="saveImage" download="pets.png">Save Image</a>
<button type="button" id="Go Back">Go Back</button>
</div>
<br/>
......@@ -37,10 +42,10 @@ layout: default
</form>
<div id="result" class="hidden">
<canvas id="resultCanvas"></canvas>
<p>Congratulations! Your very own fancy Pet List!</p>
<p>Either Right Click 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">
......
......@@ -2,7 +2,7 @@
---
@import "base";
button
button, .button
{
background-color: #3f3f3f;
color:#dddddd;
......@@ -13,6 +13,7 @@ button
padding: 10px 15px;
margin-right: 10px;
cursor:pointer;
border-radius: 4px;
}
......@@ -120,11 +121,6 @@ main#main
}
}
canvas#resultCanvas
{
display: none;
}
.hidden
{
display: none;
......
......@@ -69,6 +69,7 @@ function generateImage()
gen(canvas,scale,distance,fancy,data);
var url = canvas.toDataURL();
document.getElementById("resultImage").src = url;
document.getElementById("saveImage").href = url;
var stage3 = document.getElementById("result");
stage3.classList.remove("hidden");
var stage3Actions = document.getElementById("result-actions");
......@@ -88,6 +89,45 @@ function goBack()
stage1Actions.classList.remove("hidden");
}
function readFile(e)
{
var file = e.target.result, results;
if(file && file.length)
{
results = file.split("\n");
console.log(results)
if(results[0].includes("\t"))
{
var children = document.getElementById("background").children;
for(var l = 0, len = results.length; l < len; l++)
{
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;
}
}
}
}
}
function handleUpload()
{
var fls = document.getElementById("uploadPets");
if('files' in fls)
{
if(fls.files.length != 0)
{
var reader = new FileReader();
reader.readAsText(fls.files[0]);
reader.addEventListener("load",readFile);
}
}
}
function onLoad()
{
generatePetBoxes();
......@@ -101,14 +141,17 @@ function onLoad()
goBack();
});
document.getElementById("uploadPets").addEventListener("click",function()
{
alert("Not currently implemented, sorry!");
});
document.getElementById("saveImage").addEventListener("click",function()
document.getElementById("petsHelp").addEventListener("click",function()
{
alert("Not currently implemented, sorry!");
var p = document.getElementById("petsHelpBody")
if(p.className.includes("hidden"))
{
p.classList.remove("hidden");
}
else
{
p.classList.add("hidden");
}
});
}
......
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