Untitled

<!DOCTYPE html>
<html>
<head>
    <title>TI4 Unit Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        h1 {
            color: #2c3e50;
            text-align: center;
        }

        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .unit-section {
            display: grid;
            grid-template-columns: 3fr 1fr 1fr 1fr;
            align-items: center;
            margin-bottom: 10px;
        }

        .unit-name {
            font-size: 18px;
        }

        .button {
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }

        .button:hover {
            background-color: #2980b9;
        }

        .button:active {
            transform: translateY(2px);
        }

        input[type="text"] {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
            width: 60px;
            margin: 0 auto;
            display: block;
        }

        .faction-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        select {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .checkbox-container {
            display: flex;
            align-items: center;
        }

        input[type="checkbox"] {
            margin-right: 5px;
            width: 16px;
            height: 16px;
        }

        .result-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            margin-top: 20px;
        }

        .result-item {
            background-color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
        }

        .result-value {
            font-size: 24px;
            font-weight: bold;
            margin-top: 5px;
        }

        .caption {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 5px;
        }

        #buildStatus {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            padding: 10px;
            margin-top: 20px;
            border-radius: 5px;
        }

        .valid {
            background-color: #2ecc71;
            color: white;
        }

        .invalid {
            background-color: #e74c3c;
            color: white;
        }

        .notes {
            margin-top: 20px;
            font-size: 14px;
            color: #7f8c8d;
        }
    </style>
</head>

<body>
    <h1>TI4 Unit Calculator</h1>

    <div class="container">
        <div class="faction-container">
            <div>
                <label for="faction">Faction:</label>
                <select name="faction" id="faction" onchange="updateUnitData()">
                    <option value="Other">Other</option>
                    <option value="Arborec">Arborec</option>
                    <option value="Barony">Barony of Letnev</option>
                    <option value="Embers">Embers of Muaat</option>
                    <option value="L1Z1X">L1Z1X Mindnet</option>
                    <option value="Naalu">Naalu Collective</option>
                    <option value="Saar">Clan of Saar</option>
                    <option value="Sol">Federation of Sol</option>
                </select>
            </div>
            <div class="checkbox-container">
                <input type="checkbox" id="sarween" onchange="calculateAll()">
                <label for="sarween">Sarween Tools</label>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>Units to Build</h2>

        <div class="unit-section">
            <div class="unit-name">Infantry (0.5 Resources each)</div>
            <button class="button" onclick="alter('newInfantry',-1)">-</button>
            <input size="1" type="text" id="newInfantry" value="0" onchange="calculateTotals()">
            <button class="button" onclick="alter('newInfantry',1)">+</button>
        </div>

        <div class="unit-section">
            <div class="unit-name">Mechs (2 Resources each)</div>
            <button class="button" onclick="alter('newMechs',-1)">-</button>
            <input size="1" type="text" id="newMechs" value="0" onchange="calculateTotals()">
            <button class="button" onclick="alter('newMechs',1)">+</button>
        </div>

        <div class="unit-section">
            <div class="unit-name">Fighters (0.5 Resources each)</div>
            <button class="button" onclick="alter('newFighters',-1)">-</button>
            <input size="1" type="text" id="newFighters" value="0" onchange="calculateTotals()">
            <button class="button" onclick="alter('newFighters',1)">+</button>
            <div class="checkbox-container" style="margin-top: 10px;">
                <input type="checkbox" id="Fi2" onchange="calculateTotals()">
                <label for="Fi2">Fighter II (can count as ships)</label>
            </div>
        </div>

        <div class="unit-section">
            <div class="unit-name">Carriers (3 Resources)</div>
            <button class="button" onclick="alter('newCarriers',-1)">-</button>
            <input size="1" type="text" id="newCarriers" value="0" onchange="calculateAll()">
            <button class="button" onclick="alter('newCarriers',1)">+</button>
        </div>

        <div class="unit-section">
            <div class="unit-name">Destroyers (1 Resource)</div>
            <button class="button" onclick="alter('newDestroyers',-1)">-</button>
            <input size="1" type="text" id="newDestroyers" value="0" onchange="calculateAll()">
            <button class="button" onclick="alter('newDestroyers',1)">+</button>
        </div>

        <div class="unit-section">
            <div class="unit-name">Cruisers (2 Resources)</div>
            <button class="button" onclick="alter('newCruisers',-1)">-</button>
            <input size="1" type="text" id="newCruisers" value="0" onchange="calculateAll()">
            <button class="button" onclick="alter('newCruisers',1)">+</button>
        </div>

        <div class="unit-section">
            <div class="unit-name">Dreadnoughts (4 Resources)</div>
            <button class="button" onclick="alter('newDreadnoughts',-1)">-</button>
            <input size="1" type="text" id="newDreadnoughts" value="0" onchange="calculateAll()">
            <button class="button" onclick="alter('newDreadnoughts',1)">+</button>
        </div>

        <div class="unit-section">
            <div class="unit-name">War Suns (12 Resources)</div>
            <button class="button" onclick="alter('newWarSuns',-1)">-</button>
            <input size="1" type="text" id="newWarSuns" value="0" onchange="calculateAll()">
            <button class="button" onclick="alter('newWarSuns',1)">+</button>
            <div class="checkbox-container" style="margin-top: 10px;">
                <input type="checkbox" id="Wa2" checked onchange="calculateAll()">
                <label for="Wa2">War Sun Upgrade</label>
            </div>
        </div>

        <div class="unit-section">
            <div class="unit-name">Flagship (8 Resources)</div>
            <button class="button" onclick="alter('newFlagships',-1)">-</button>
            <input size="1" type="text" id="newFlagships" value="0" onchange="calculateAll()">
            <button class="button" onclick="alter('newFlagships',1)">+</button>
        </div>
    </div>

    <div class="container">
        <div class="result-container">
            <div class="result-item">
                <div>Total Resource Cost</div>
                <div id="totalCost" class="result-value">0</div>
            </div>
            <div class="result-item">
                <div>Minimum Fleet Supply Needed</div>
                <div id="totalFleetNeeded" class="result-value">0</div>
            </div>
            <div class="result-item">
                <div>Production Needed</div>
                <div id="totalProduction" class="result-value">0</div>
            </div>
            <div class="result-item">
                <div>Total Capacity Needed</div>
                <div id="totalCapacity" class="result-value">0</div>
                <div class="caption">(Fighters + Infantry + Mechs)</div>
            </div>
            <div class="result-item">
                <div>Capacity for Fighters Only</div>
                <div id="capacityWithoutGround" class="result-value">0</div>
                <div class="caption">(Ground troops can be on planets)</div>
            </div>
        </div>

        <div id="buildStatus">Enter units above</div>

        <div class="notes">
            <p>Note: This calculator shows the minimum requirements to produce these units. Remember to check:</p>
            <ul>
                <li>Production capacity of the system you're building in (must be ≥ Production Needed)</li>
                <li>Units already present in the system (for fleet supply limits)</li>
                <li>Available capacity for fighters and ground troops</li>
                <li>Available resources and trade goods</li>
            </ul>
            <p><strong>Production Rule:</strong> Each unit counts as 1 production, regardless of cost (exception: Mechs count as 2 production each). Your Space Dock's production value must be equal to or greater than your total Production Needed.</p>
            <p><strong>Capacity Note:</strong> Infantry and Mechs can be on planets and don't require capacity if they stay grounded. Fighters always need capacity.</p>
        </div>
    </div>

    <script>
        // Cost data for units [cost, counts as ship for fleet supply]
        let unitData = {
            Infantry: [0.5, false],
            Mechs: [2, false],
            Fighters: [0.5, false], // normally false, but can be true with Fighter II
            Carriers: [3, true],
            Destroyers: [1, true],
            Cruisers: [2, true],
            Dreadnoughts: [4, true],
            WarSuns: [12, true], // Cost can change with tech
            Flagship: [8, true]
        };

        // Add event listeners for all form elements
        document.addEventListener('DOMContentLoaded', function() {
            // Attach change listeners to all inputs
            document.querySelectorAll('input[type="text"]').forEach(input => {
                input.addEventListener('change', function() {
                    calculateTotals();
                });
            });

            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    // Update unit data without making recursive calls
                    if (this.id === "Fi2") {
                        unitData.Fighters[1] = this.checked;
                    } else if (this.id === "Wa2" && document.getElementById("faction").value === 'Embers') {
                        unitData.WarSuns[0] = this.checked ? 10 : 12;
                    }
                    calculateTotals();
                });
            });

            document.getElementById('faction').addEventListener('change', function() {
                // Reset to default values
                unitData = {
                    Infantry: [0.5, false],
                    Fighters: [0.5, false],
                    Carriers: [3, true],
                    Destroyers: [1, true],
                    Cruisers: [2, true],
                    Dreadnoughts: [4, true],
                    WarSuns: [12, true],
                    Flagship: [8, true]
                };

                // Apply faction-specific changes
                if (this.value === 'Embers') {
                    if (document.getElementById("Wa2").checked) {
                        unitData.WarSuns[0] = 10; // Embers with War Sun upgrade
                    } else {
                        unitData.WarSuns[0] = 12; // Embers standard War Sun
                    }
                }

                // Update Fighter II status
                unitData.Fighters[1] = document.getElementById("Fi2").checked;

                calculateTotals();
            });

            // Initial calculation
            calculateTotals();
        });

        // Update unit data based on faction selection
        function updateUnitData() {
            // Reset to default values
            unitData = {
                Infantry: [0.5, false],
                Fighters: [0.5, false],
                Carriers: [3, true],
                Destroyers: [1, true],
                Cruisers: [2, true],
                Dreadnoughts: [4, true],
                WarSuns: [12, true],
                Flagship: [8, true]
            };

            // Apply faction-specific changes
            const faction = document.getElementById("faction").value;

            if (faction === 'Embers') {
                if (document.getElementById("Wa2").checked) {
                    unitData.WarSuns = [10, true]; // Embers with War Sun upgrade
                } else {
                    unitData.WarSuns = [12, true]; // Embers standard War Sun
                }
            }

            // Update Fighter II status
            unitData.Fighters[1] = document.getElementById("Fi2").checked;

            // Calculate totals without recursive calls
            calculateTotals();
        }

        function alter(id, amount) {
            let currentValue = parseInt(document.getElementById(id).value);

            // Prevent negative values
            if (amount < 0 && currentValue === 0) {
                return;
            }

            // Apply unit-specific maximums
            const unitMaximums = {
                'newFlagships': 1,
                'newWarSuns': 2,
                'newDreadnoughts': 5,
                'newCruisers': 8,
                'newDestroyers': 8,
                'newCarriers': 4,
                'newMechs': 4  // Adding limit for mechs
            };

            if (amount > 0 && unitMaximums[id] && currentValue >= unitMaximums[id]) {
                return;
            }

            document.getElementById(id).value = currentValue + amount;
            calculateTotals();
        }

        function calculateAll() {
            // Update unit data without recursive calls
            updateUnitData();
        }

        function calculateTotals() {
            // Calculate total cost
            let totalCost = 0;
            let totalShips = 0;
            let totalProduction = 0;
            let totalCapacityNeeded = 0;
            let capacityNeededWithoutGround = 0;

            // Infantry (0.5 resource per unit)
            let infantryCount = parseInt(document.getElementById("newInfantry").value) || 0;
            totalCost += Math.ceil(infantryCount * 0.5);
            totalProduction += infantryCount;
            totalCapacityNeeded += infantryCount;

            // Mechs (2 resource per unit)
            let mechCount = parseInt(document.getElementById("newMechs").value) || 0;
            totalCost += mechCount * 2;
            totalProduction += mechCount;
            totalCapacityNeeded += mechCount;

            // Fighters (0.5 resource per unit)
            let fighterCount = parseInt(document.getElementById("newFighters").value) || 0;
            totalCost += Math.ceil(fighterCount * 0.5);
            totalProduction += fighterCount;
            totalCapacityNeeded += fighterCount;
            capacityNeededWithoutGround += fighterCount;

            // If Fighter II is checked, fighters count toward fleet supply
            if (unitData.Fighters[1]) {
                totalShips += fighterCount;
            }

            // Other ships
            let carriers = parseInt(document.getElementById("newCarriers").value) || 0;
            totalCost += carriers * unitData.Carriers[0];
            totalShips += carriers;
            totalProduction += carriers;

            let destroyers = parseInt(document.getElementById("newDestroyers").value) || 0;
            totalCost += destroyers * unitData.Destroyers[0];
            totalShips += destroyers;
            totalProduction += destroyers;

            let cruisers = parseInt(document.getElementById("newCruisers").value) || 0;
            totalCost += cruisers * unitData.Cruisers[0];
            totalShips += cruisers;
            totalProduction += cruisers;

            let dreadnoughts = parseInt(document.getElementById("newDreadnoughts").value) || 0;
            totalCost += dreadnoughts * unitData.Dreadnoughts[0];
            totalShips += dreadnoughts;
            totalProduction += dreadnoughts;

            let warSuns = parseInt(document.getElementById("newWarSuns").value) || 0;
            // War Sun cost depends on tech and faction
            if (document.getElementById("Wa2").checked) {
                if (document.getElementById("faction").value === 'Embers') {
                    totalCost += warSuns * 10; // Embers with war sun upgrade
                } else {
                    totalCost += warSuns * 12; // Others with war sun upgrade
                }
            } else {
                totalCost += warSuns * 12; // No upgrade (rare)
            }
            totalShips += warSuns;
            totalProduction += warSuns;

            let flagships = parseInt(document.getElementById("newFlagships").value) || 0;
            totalCost += flagships * unitData.Flagship[0];
            totalShips += flagships;
            totalProduction += flagships;

            // Apply Sarween Tools discount if checked
            if (document.getElementById("sarween").checked) {
                totalCost = Math.max(0, totalCost - 1);
            }

            // Update UI
            document.getElementById("totalCost").textContent = totalCost;
            document.getElementById("totalFleetNeeded").textContent = totalShips;
            document.getElementById("totalProduction").textContent = totalProduction;
            document.getElementById("totalCapacity").textContent = totalCapacityNeeded;
            document.getElementById("capacityWithoutGround").textContent = capacityNeededWithoutGround;

            // Check if there's anything to build
            let buildStatus = document.getElementById("buildStatus");

            if (infantryCount + mechCount + fighterCount + carriers + destroyers + cruisers + dreadnoughts + warSuns + flagships > 0) {
                buildStatus.textContent = "Build Requirements Calculated";
                buildStatus.className = "valid";
            } else {
                buildStatus.textContent = "Select units to build";
                buildStatus.className = "";
            }
        }

        // Initialize
        calculateAll();
    </script>
</body>
</html>