<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subversion Community Sheet Generator</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.relations-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Subversion Community Sheet Generator</h1>
<div>
<h2>Community Details</h2>
<div class="grid">
<div class="form-group">
<label for="communityName">Community Name</label>
<input id="communityName" type="text" value="The Resistance">
</div>
<div class="form-group">
<label for="communityType">Community Type</label>
<input id="communityType" type="text" value="Underground Network">
</div>
<div class="form-group">
<label for="communityPower">Power</label>
<select id="communityPower">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="communityCaste">Caste</label>
<select id="communityCaste">
<option value="Undercity">Undercity</option>
<option value="Lower">Lower</option>
<option value="Lower-Middle" selected>Lower-Middle</option>
<option value="Upper-Middle">Upper-Middle</option>
<option value="Upper">Upper</option>
<option value="Elite">Elite</option>
</select>
</div>
<div class="form-group">
<label for="primarySkill">Primary Skill</label>
<input id="primarySkill" type="text" value="Espionage">
</div>
<div class="form-group">
<label for="archetype">Archetype</label>
<input id="archetype" type="text" value="Rebels">
</div>
</div>
</div>
<div>
<h2>Values, Impulses, and Goals</h2>
<div class="grid">
<div class="form-group">
<label for="value1">Value 1</label>
<input id="value1" type="text" value="Freedom">
</div>
<div class="form-group">
<label for="value2">Value 2</label>
<input id="value2" type="text" value="Justice">
</div>
<div class="form-group">
<label for="value3">Value 3</label>
<input id="value3" type="text" value="Solidarity">
</div>
<div class="form-group">
<label for="impulse1">Impulse 1</label>
<input id="impulse1" type="text" value="Defy Authority">
</div>
<div class="form-group">
<label for="impulse2">Impulse 2</label>
<input id="impulse2" type="text" value="Protect the Weak">
</div>
<div class="form-group">
<label for="goal1">Goal 1</label>
<input id="goal1" type="text" value="Overthrow the Regime">
</div>
<div class="form-group">
<label for="goal2">Goal 2</label>
<input id="goal2" type="text" value="Establish Democracy">
</div>
<div class="form-group">
<label for="goal3">Goal 3</label>
<input id="goal3" type="text" value="Create Equality">
</div>
</div>
</div>
<div>
<h2>Resources and Relations</h2>
<div>
<h3>Resources (Fortune: <span id="fortuneDisplay">80</span>)</h3>
<div id="resourcesContainer">
<div class="form-group">
<label for="resource1">Resource 1</label>
<input id="resource1" type="text" value="Secret Hideout">
</div>
<div class="form-group">
<label for="resource2">Resource 2</label>
<input id="resource2" type="text" value="Communication Network">
</div>
</div>
<button id="addResourceBtn">Add Resource (10 Fortune)</button>
</div>
<div>
<h3>Relations</h3>
<div id="relationsContainer">
<div class="relations-grid">
<div class="form-group">
<label for="relation1Name">Name</label>
<input id="relation1Name" type="text" value="The Underworld">
</div>
<div class="form-group">
<label for="relation1Archetype">Archetype</label>
<input id="relation1Archetype" type="text" value="Criminal Syndicate">
</div>
<div class="form-group">
<label for="relation1Skill">Skill</label>
<input id="relation1Skill" type="text" value="Black Market">
</div>
<div class="form-group">
<label for="relation1Power">Power</label>
<input id="relation1Power" type="number" value="7">
</div>
<div class="form-group">
<label for="relation1Regard">Regard</label>
<input id="relation1Regard" type="number" value="6">
</div>
</div>
<div class="relations-grid">
<div class="form-group">
<label for="relation2Name">Name</label>
<input id="relation2Name" type="text" value="Tech Hackers">
</div>
<div class="form-group">
<label for="relation2Archetype">Archetype</label>
<input id="relation2Archetype" type="text" value="Information Brokers">
</div>
<div class="form-group">
<label for="relation2Skill">Skill</label>
<input id="relation2Skill" type="text" value="Cyber Warfare">
</div>
<div class="form-group">
<label for="relation2Power">Power</label>
<input id="relation2Power" type="number" value="5">
</div>
<div class="form-group">
<label for="relation2Regard">Regard</label>
<input id="relation2Regard" type="number" value="8">
</div>
</div>
</div>
<button id="addRelationBtn">Add Relation (2 Fortune)</button>
</div>
</div>
<button id="generateSheetBtn" style="margin-top: 20px;">Generate Sheet</button>
</div>
<script>
let fortune = 80;
let resourceCount = 2;
let relationCount = 2;
document.getElementById('addResourceBtn').addEventListener('click', function() {
if (fortune >= 10) {
fortune -= 10;
resourceCount++;
const resourcesContainer = document.getElementById('resourcesContainer');
const newResource = document.createElement('div');
newResource.className = 'form-group';
newResource.innerHTML = `
<label for="resource${resourceCount}">Resource ${resourceCount}</label>
<input id="resource${resourceCount}" type="text" value="New Resource">
`;
resourcesContainer.appendChild(newResource);
updateFortuneDisplay();
}
});
document.getElementById('addRelationBtn').addEventListener('click', function() {
if (fortune >= 2) {
fortune -= 2;
relationCount++;
const relationsContainer = document.getElementById('relationsContainer');
const newRelation = document.createElement('div');
newRelation.className = 'relations-grid';
newRelation.innerHTML = `
<div class="form-group">
<label for="relation${relationCount}Name">Name</label>
<input id="relation${relationCount}Name" type="text" value="New Relation">
</div>
<div class="form-group">
<label for="relation${relationCount}Archetype">Archetype</label>
<input id="relation${relationCount}Archetype" type="text" value="Unknown">
</div>
<div class="form-group">
<label for="relation${relationCount}Skill">Skill</label>
<input id="relation${relationCount}Skill" type="text" value="TBD">
</div>
<div class="form-group">
<label for="relation${relationCount}Power">Power</label>
<input id="relation${relationCount}Power" type="number" value="4">
</div>
<div class="form-group">
<label for="relation${relationCount}Regard">Regard</label>
<input id="relation${relationCount}Regard" type="number" value="5">
</div>
`;
relationsContainer.appendChild(newRelation);
updateFortuneDisplay();
}
});
document.getElementById('generateSheetBtn').addEventListener('click', function() {
const community = {
name: document.getElementById('communityName').value,
type: document.getElementById('communityType').value,
power: parseInt(document.getElementById('communityPower').value),
caste: document.getElementById('communityCaste').value,
primarySkill: document.getElementById('primarySkill').value,
archetype: document.getElementById('archetype').value,
values: [
document.getElementById('value1').value,
document.getElementById('value2').value,
document.getElementById('value3').value
],
impulses: [
document.getElementById('impulse1').value,
document.getElementById('impulse2').value
],
goals: [
document.getElementById('goal1').value,
document.getElementById('goal2').value,
document.getElementById('goal3').value
],
fortune: fortune,
resources: Array.from(document.getElementById('resourcesContainer').children).map(el => el.querySelector('input').value),
relations: Array.from(document.getElementById('relationsContainer').children).map(el => ({
name: el.querySelector('input[id$="Name"]').value,
archetype: el.querySelector('input[id$="Archetype"]').value,
skill: el.querySelector('input[id$="Skill"]').value,
power: parseInt(el.querySelector('input[id$="Power"]').value),
regard: parseInt(el.querySelector('input[id$="Regard"]').value)
}))
};
console.log(JSON.stringify(community, null, 2));
alert('Community sheet generated! Check the console for the JSON output.');
});
function updateFortuneDisplay() {
document.getElementById('fortuneDisplay').textContent = fortune;
document.getElementById('addResourceBtn').disabled = fortune < 10;
document.getElementById('addRelationBtn').disabled = fortune < 2;
}
updateFortuneDisplay();
</script>
</body>
</html>