gmgauthier/gammatools
gmgauthier/gammatools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mental attacks to the web tools

Browse Source
This commit is contained in:
Greg Gauthier 2024-06-28 23:00:49 +01:00
parent ab61ceadfe
commit 1d3560bb9e
7 changed files with 108 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/encounter.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gamma World Game Play</title> <title>Gamma World Encounter Check</title>
<script src="encounter.js" defer></script> <script src="encounter.js" defer></script>
</head> </head>
<body> <body>

BIN
web/img/Attack Failed!.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
web/img/Attack Successful!.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

BIN
web/img/Devastating Success!.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

15
web/index.html
View File

@ -11,8 +11,10 @@
<div id="button-panel" style="text-align: center"> <div id="button-panel" style="text-align: center">
<button id="dieroller">Dice</button> <button id="dieroller">Dice</button>
<button id="chargen">Characters</button>
<button id="encounter">Encounters</button> <button id="encounter">Encounters</button>
<button id="mentalattack">Mental Attack!</button>
<button id="chargen">Characters</button>
</div> </div>
<hr/> <hr/>
<div id="toolPanel"></div> <div id="toolPanel"></div>
@ -23,13 +25,18 @@
loadContent("rolldice.html?t=" + new Date().getTime()); loadContent("rolldice.html?t=" + new Date().getTime());
}); });
document.getElementById("encounter").addEventListener("click", function () {
loadContent("encounter.html?t=" + new Date().getTime());
});
document.getElementById("mentalattack").addEventListener("click", function () {
loadContent("mentalattack.html?t=" + new Date().getTime());
});
document.getElementById("chargen").addEventListener("click", function () { document.getElementById("chargen").addEventListener("click", function () {
loadContent("chargen.html?t=" + new Date().getTime()); loadContent("chargen.html?t=" + new Date().getTime());
}); });
document.getElementById("encounter").addEventListener("click", function () {
loadContent("encounter.html?t=" + new Date().getTime());
});
}); });
function loadContent(pageUrl) { function loadContent(pageUrl) {

42
web/mentalattack.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamma World Mental Attack Roll</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="mentalattack.js" defer></script>
</head>
<body>
<h1>Mental Attack Roll!</h1>
<h4>Set Mental Strength Values, and Press Attack!</h4>
<div class="content-container">
<form id="mentalAttackForm">
<div class="form-row">
<div class="form-field">
<label for="ams">Attacker Mental Strength:</label>
<input type="number" name="ams" id="ams" min="3" max="18" value="10">
</div>
<div class="form-field">
<label for="dms">Defender Mental Strength:</label>
<input type="number" name="dms" id="dms" min="3" max="18" value="10">
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="modifier">Modifier:</label>
<input type="number" name="modifier" id="modifier" min="-100" max="100" value="0">
</div>
<div class="form-field">
<button type="submit">Attack!</button>
</div>
</div>
</form>
</div>
<hr/>
<div id="results"></div>
</body>
</html>

54
web/mentalattack.js Normal file
View File

@ -0,0 +1,54 @@
window.onload = function () {
document.getElementById('mentalAttackForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the form from submitting the normal way
const ams = parseInt(document.getElementById('ams').value, 10);
const dms = parseInt(document.getElementById('dms').value, 10);
const modifier = parseInt(document.getElementById('modifier').value, 0);
fetch('https://gammaworld.gmgauthier.com/roll/attack/mental', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
ams: ams,
dms: dms,
modifier: modifier
}),
})
.then(response => response.json())
.then(data => {
const resultsDiv = document.getElementById('results');
let html = '';
if (data['needed']) {
html += `<p><b>Needed: </b>${data['needed']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
}
if (data['original-roll']) {
html += `<b>Original Roll: </b>${data['original-roll']}</p>`;
}
if (data['modifier']) {
html += `<p><b>Modifier: </b>${data['modifier']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
}
if (data['adjusted-roll']) {
html += `<b>Adjusted Roll: </b> ${data['adjusted-roll']}</p>`;
}
html += `<br/>`;
if (data['outcome']) {
let outcomeText = data['outcome'];
html += `<p><h2>${outcomeText}</h2></p>`;
// adding img tag
let outcomeImage = 'img/' + outcomeText.replace(' ', '%20') + '.png';
html += `<img src="${outcomeImage}" width="500px" height="500px"/>`
resultsDiv.innerHTML = html;
}
})
});
}