Commit 1f88f108 authored by Eric Schewe's avatar Eric Schewe
Browse files

Completely re-did the colour scheme, added ghost weaknesses and

strengths, removed some text I felt was distracting and could be
intuitively figured out by the user, re-organized buttons, moved footer
to actual bottom of the page.
parent 690af25e
......@@ -12,84 +12,116 @@
{
font-family: 'Courier' !important;
font-weight: 600;
background-color: black;
color: white;
background-color: #121212;
color: #9E9E9E;
}
p
{
color: white;
color: #9E9E9E;
font-size: 1em;
clear: both;
}
button
{
background-color:#000000;
background-color:#121212;
border-radius:28px;
border:2px solid #ffffff;
border:2px solid #9E9E9E;
display:inline-block;
cursor:pointer;
color:#ffffff;
color: #9E9E9E;
font-size:19px;
padding:10px 15px;
text-decoration:none;
}
#reset
table, tr
{
background-color:#8B0000;
border: none;
}
table, tr, td
{
border-spacing: 0em;
padding: 0em;
td {
border: none;
}
.name
{
color: darkgray;
font-size: 0.75em;
}
.left
{
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
/* unvisited link */
a:link {
color: red;
color: #c21b10;
}
/* visited link */
a:visited {
color: darkred;
color: #8B0000;
}
/* mouse over link */
a:hover {
color: darkred;
color: #8B0000;
}
#reset
{
background-color:#8B0000;
}
#evidenceButtons {
border: none;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#resetButton {
border: none;
padding-left: 0px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
/* Ghostname colour */
#ghostName
{
color: #8924a3;
}
/* Remaining evidence colour */
#evidence {
color: #349c27;
}
/* Ghost weakness text colour */
#weakness {
color: #c98134;
}
/* Ghost strength text colour */
#strength {
color: #c21b10;
}
#footer {
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
</style>
<script>
var ghostArray =
[
["Spirit", 2, 4, 5],
["Wraith", 3, 4, 5],
["Phantom", 0, 1, 3],
["Poltergeist", 1, 4, 5],
["Banshee", 0, 3, 5],
["Jinn", 0, 1, 4],
["Mare", 1, 3, 4],
["Revenant", 0, 2, 5],
["Shade", 0, 1, 2],
["Demon", 2, 3, 4],
["Yurei", 1, 2, 3],
["Oni", 0, 2, 4]
];
[
["Spirit", 2, 4, 5, "Smudge", "None"],
["Wraith", 3, 4, 5, "Salt", "No footprints"],
["Phantom", 0, 1, 3, "Photos", "Sanity drop"],
["Poltergeist", 1, 4, 5, "Empty room", "Throws lots of objects"],
["Banshee", 0, 3, 5, "Crucifix", "Only one targets"],
["Jinn", 0, 1, 4, "Power outage", "Fast Travel"],
["Mare", 1, 3, 4, "Lights", "Dark"],
["Revenant", 0, 2, 5, "Hiding", "Fast"],
["Shade", 0, 1, 2, "Too many people", "Hard to find"],
["Demon", 2, 3, 4, "Ouija board", "A T T A C K"],
["Yurei", 1, 2, 3, "Smudging", "Sanity"],
["Oni", 0, 2, 4, "Activity", "More people, more active"]
];
var buttonArray =
[
[0, "EMF 5"], // 0
[0, "Ghost Orbs"], // 1
[0, "Ghost Writing"], // 2
[0, "Freezing Temps"], // 3
[0, "Spirit Box"], // 4
[0, "Finger Prints"] // 5
[0, "EMF5"], // 0
[0, "Orbs"], // 1
[0, "Writing"], // 2
[0, "Freezing"], // 3
[0, "Box"], // 4
[0, "Prints"] // 5
];
var ghostsLeft;
......@@ -104,9 +136,9 @@
for (i = 0; i < buttonArray.length; i++)
{
buttonArray[i][0] = 0;
document.getElementById(i).style.background='#000000';
document.getElementById(i).style.background='#121212';
}
document.getElementById("Ghosts").innerHTML = "<br/>Please select evidence<br/><br/>Black = Not found<br/>Green = Found evidence";
document.getElementById("Ghosts").innerHTML = "<br/>Please select evidence<br/>";
document.getElementById("reset").innerHTML = "Reset";
ghostsLeft = JSON.parse(JSON.stringify(ghostArray));
};
......@@ -116,11 +148,11 @@
if (buttonArray[id][0] == 0 || buttonArray[id][0] > 1)
{
buttonArray[id][0] = 0;
document.getElementById(id).style.background='#000000';
document.getElementById(id).style.background='#121212';
}
else
{
document.getElementById(id).style.background='#045e04';
document.getElementById(id).style.background='#0a3266';
}
var Evidence = "ev_" + buttonArray[id][1];
......@@ -153,7 +185,7 @@
if (ghostsLeft.length == ghostArray.length)
{
document.getElementById("Ghosts").innerHTML = "<br/>Please select evidence<br/><br/>Black = Unknown<br/>Green = I found this evidence";
document.getElementById("Ghosts").innerHTML = "<br/>Please select evidence<br/>";
document.getElementById("reset").innerHTML = "Reset";
}
......@@ -162,21 +194,27 @@
var outputList = "";
var needComma;
outputList += "<br/><table><tr><td><u>Remaining:</u><br/><br/></td><td></td></tr>";
outputList += "<br/><table>"; //Create table and first row which is two cells wide
// If no ghosts are left to display
if (ghostsLeft.length == 0)
{
outputList += "<tr><td>No ghosts found</td><td></td></tr>";
document.getElementById("reset").innerHTML = "Reset";
}
// Else there must be more ghosts to display
else
{
// Iterate through the remaining ghosts based on evidence so far
for (var k = 0; k < ghostsLeft.length; k++)
{
outputList += "<tr><td>" + ghostsLeft[k][0] + "</td>";
outputList += "<tr><td id=\"ghostName\">" + ghostsLeft[k][0] + "</td>"; // Output name of the ghost in the first row cell
// Iterate through remianing ghosts and output evidence in the same row as the name but the next cell over
if (ghostsLeft.length > 1)
{
needComma = false;
outputList += "<td><span style=\"color: darkgray;\"> (";
outputList += "<td>Evidence: <span id=\"evidence\">";
if (ghostsLeft[k][1] >= 0 )
{
outputList += buttonArray[ghostsLeft[k][1]][1];
......@@ -193,7 +231,7 @@
if (needComma == true) { outputList += ", "; }
outputList += buttonArray[ghostsLeft[k][3]][1];
}
outputList += ")</span></td>";
outputList += "</span></td>"; // Close out table cell for evidence
document.getElementById("reset").innerHTML = "Reset";
}
else
......@@ -201,10 +239,22 @@
document.getElementById("reset").innerHTML = "Reset";
}
outputList += "</tr>";
// Output ghost weaknesses
outputList += "<tr><td></td>";
outputList += "<td>Weakness: <span id=\"weakness\">" + ghostsLeft[k][4] + "</span></td></tr>";
//Output ghost strengths
outputList += "<tr><td></td>";
outputList += "<td>Strength: <span id=\"strength\">" + ghostsLeft[k][5] + "</span></td></tr>";
//Output some whitespace
outputList += "<tr><td><br/></td><td></td></tr>";
}
}
outputList += "</table>";
document.getElementById("Ghosts").innerHTML = outputList;
}
};
</script>
......@@ -225,30 +275,24 @@
<!-- End Matomo Code -->
</head>
<body>
<div>
<button id="0" class="left" onClick="buttonClick(0)">EMF 5</button>
<button id="1" class="left" onClick="buttonClick(1)">Ghost Orbs</button>
<button id="2" class="left" onClick="buttonClick(2)">Ghost Writing</button>
<button id="3" class="left" onClick="buttonClick(3)">Freezing Temps</button>
<button id="4" class="left" onClick="buttonClick(4)">Spirit Box</button>
<button id="5" class="left" onClick="buttonClick(5)">Finger Prints</button>
</div>
<div>
<p id="Ghosts">
<br/>Please select evidence<br/><br/>
Black = Not found<br/>
Green = Found evidence
</p>
</div>
<div style="clear: both;">
<br/><button id="reset" onClick="buttonReset()">Reset</button>
</div>
<br/>
<div style="clear: both;">
<p>
With permission, edited from <a href="https://PhasmoCalc.com">PhasmoCalc.com</a> | <a href="https://git.pickysysadmin.ca/FiZi/phasmophobia-evidence-eliminator">Source code</a> | <a href="privacy.html">Privacy policy</a>
</p>
</div>
<table>
<tr>
<td id="resetButton"><button id="reset" onClick="buttonReset()">Reset</button></td>
<td id="evidenceButtons"><button id="0" onClick="buttonClick(0)">EMF5</button></td>
<td id="evidenceButtons"><button id="1" onClick="buttonClick(1)">Orbs</button></td>
<td id="evidenceButtons"><button id="2" onClick="buttonClick(2)">Writing</button></td>
<td id="evidenceButtons"><button id="3" onClick="buttonClick(3)">Temps</button></td>
<td id="evidenceButtons"><button id="4" onClick="buttonClick(4)">Box</button></td>
<td id="evidenceButtons"><button id="5" onClick="buttonClick(5)">Prints</button></td>
</tr>
</table>
</div>
<p id="Ghosts">
<br/>Please select evidence<br/>
</p>
<p id="footer">
With permission, edited from <a href="https://PhasmoCalc.com">PhasmoCalc.com</a> | <a href="https://git.pickysysadmin.ca/FiZi/phasmophobia-evidence-eliminator">Source code</a> | <a href="privacy.html">Privacy policy</a>
</p>
<!-- Matomo Image Tracker-->
<noscript><img referrerpolicy="no-referrer-when-downgrade" src="https://stats.pickysysadmin.ca/matomo.php?idsite=9&amp;rec=1" style="border:0" alt="" /></noscript>
<!-- End Matomo -->
......
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