🎉 Started out with the calculator.
Reads in the json file with all L54 weapons, then puts the names into dropbox menus and displays weapon images and icons accordingly.main
Lavfluff
1 month ago
parent
707b7183a9
commit
074a8c5cb6
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,84 @@
|
||||
body {
|
||||
background-image: url("http://i.imgur.com/PSMsnS9.png");
|
||||
background-attachment: fixed;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
bottom: 15%;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
padding-top: 50px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
form {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.weapon-container {
|
||||
background: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.weapon-pair {
|
||||
display: inline-flex;
|
||||
flex-direction: column; /* Stack dropdown and output vertically */
|
||||
align-items: center; /* Center content horizontally */
|
||||
margin: 20px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.weapon-output {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.weapon-output img {
|
||||
width: 30%;
|
||||
height: auto;
|
||||
padding: 3px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.weapon-output .iconType {
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.weapon-output p {
|
||||
margin: 5px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.left_dmg {
|
||||
display: inline-flex;
|
||||
width: 45%;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
.right_dmg {
|
||||
display: inline-flex;
|
||||
width: 45%;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
border-left: 0;
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title> L54 Turn Calculator </title>
|
||||
<link rel="stylesheet" href='index.css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>L54 Turn Calculator</h1>
|
||||
<form action="" method="get">
|
||||
<div class="weapon-container">
|
||||
<?php
|
||||
// Path to the JSON file
|
||||
$filePath = '../data/L54_classic_weapons.json';
|
||||
|
||||
// Initialize weapons array
|
||||
$weapons = [];
|
||||
|
||||
// Check if the file exists
|
||||
if (file_exists($filePath)) {
|
||||
// Read and decode the JSON file
|
||||
$json = file_get_contents($filePath);
|
||||
$weapons = json_decode($json, true);
|
||||
sort($weapons);
|
||||
}
|
||||
|
||||
// Function to generate a dropdown
|
||||
function createDropdown($name, $selectedValue, $weapons) {
|
||||
echo "<select name=\"$name\" onchange=\"this.form.submit()\">";
|
||||
echo "<option value=\"\">-- Select a weapon --</option>";
|
||||
|
||||
foreach ($weapons as $weapon) {
|
||||
$weaponName = htmlspecialchars($weapon['name']);
|
||||
$selected = ($selectedValue === $weaponName) ? "selected" : "";
|
||||
echo "<option value=\"$weaponName\" $selected>$weaponName</option>";
|
||||
}
|
||||
|
||||
echo "</select>";
|
||||
}
|
||||
|
||||
function printIcons($iconType, $iconNumbers) {
|
||||
// first get the correct icon image
|
||||
switch($iconType) {
|
||||
case "airDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/air_def.png"; break;
|
||||
case "darkDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/darkness_def.png"; break;
|
||||
case "earthDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/earth_def.png"; break;
|
||||
case "fireDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/fire_def.png"; break;
|
||||
case "lightDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/light_def.png"; break;
|
||||
case "physicalDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/physical_def.png"; break;
|
||||
case "waterDef": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/water_def.png"; break;
|
||||
case "airAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/air.png"; break;
|
||||
case "darkAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/darkness.png"; break;
|
||||
case "earthAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/earth.png"; break;
|
||||
case "fireAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/fire.png"; break;
|
||||
case "lightAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/light.png"; break;
|
||||
case "physicalAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/physical.png"; break;
|
||||
case "waterAtk": $iconImage = "https://battlepedia.jellyneo.net/images/newicons/water.png"; break;
|
||||
default: $iconImage = ""; break;
|
||||
}
|
||||
|
||||
// then get the amount of icons
|
||||
preg_match_all('/\d+/', $iconNumbers, $matches);
|
||||
$numbers = $matches[0];
|
||||
$min = $numbers[0];
|
||||
$max = $numbers[1];
|
||||
if ($iconNumbers === '100-100') {
|
||||
echo "<img class=\"iconType\" src=\"$iconImage\" alt=\"$iconType\"> 100%";
|
||||
} elseif ($min !== $max) {
|
||||
|
||||
} else {
|
||||
// print icon image for each point
|
||||
for ($i = 1; $i <= $min; $i++) {
|
||||
echo "<img class=\"iconType\" src=\"$iconImage\" alt=\"$iconType\">";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to display selected weapon details in a div
|
||||
function displayWeapon($selectedWeapon, $weapons) {
|
||||
echo "<div class=\"weapon-output\">";
|
||||
if ($selectedWeapon) {
|
||||
foreach ($weapons as $weapon) {
|
||||
if ($weapon['name'] === $selectedWeapon) {
|
||||
$image = htmlspecialchars($weapon['image']);
|
||||
echo "<p>$selectedWeapon</p>";
|
||||
echo "<img src=\"$image\" alt=\"$selectedWeapon\"><br>";
|
||||
$hasPrinted = false;
|
||||
foreach ($weapon['icons'] as $iconType => $iconNumbers) {
|
||||
if ($iconType === "fireDef" && $hasPrinted) {
|
||||
echo "<br>";
|
||||
}
|
||||
if ($iconNumbers !== '0-0') {
|
||||
printIcons($iconType, $iconNumbers);
|
||||
$hasPrinted = true;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
echo "<p>None Selected</p>";
|
||||
echo "</div>";
|
||||
}
|
||||
|
||||
// Create four weapon pairs (dropdown + output div)
|
||||
for ($i = 1; $i <= 4; $i++) {
|
||||
$weaponKey = "weapon" . $i;
|
||||
$selectedWeapon = $_GET[$weaponKey] ?? "";
|
||||
echo "<div class=\"weapon-pair\">";
|
||||
createDropdown($weaponKey, $selectedWeapon, $weapons);
|
||||
displayWeapon($selectedWeapon, $weapons);
|
||||
echo "</div></div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</form>
|
||||
<div class="left_dmg"></div><div class="right_dmg"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue