document.getElementById('terrainForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var terrain = document.getElementById('terrainType').value;

    fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            "terrain": terrain
        })
    }).then(response => {
        if (!response.ok) { throw response }
        return response.json()  //we only get here if there is no error
    }).then(json => {
        //Handle null encounter
        let encounterText = json.encounter ? json.encounter : "No Encounter";
        let resultSection = document.getElementById('resultSection');
        resultSection.style.textAlign = 'center'; // To center text
        resultSection.style.fontSize = '1.5em'; // Relative to current font-size (1.5 times the size of the current font)
        resultSection.style.fontWeight = 'bold'; //To make it bold like H3
        resultSection.innerText = encounterText;
    }).catch(err => {
        err.text().then(errorMessage => {
            let resultSection = document.getElementById('resultSection');
            resultSection.style.textAlign = 'center';
            resultSection.style.fontSize = '1.5em';
            resultSection.style.fontWeight = 'bold';
            resultSection.innerText = errorMessage;
        })
    });
});