index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="logo.png" />
  <script defer src="https://cloud.umami.is/script.js" data-website-id="b8494def-f350-473b-ab4c-ea018ab6b2b2"></script>
  <style>
    body {
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    fieldset {
      display: flex;
      flex-direction: column;
    }

    #generate-name-form {
      display: inline-flex;
      flex-direction: column;
      gap: 10px;
    }

    #result {
      margin-top: 10px;
    }
  </style>
  <title>Namegen - Project Name Generator</title>
</head>

<body>
  <form id="generate-name-form">
    <fieldset>
      <legend>General settings</legend>
      <label for="syllable-count">Number of syllables</label>
      <input type="number" id="syllable-count" name="syllable-count" min="1" required value="2">
      <label for="random-syllable-count">
        <input type="checkbox" id="random-syllable-count" name="random-syllable-count">
        Use random number of syllables (1-3)
      </label>
      <label for="add-dash">
        <input type="checkbox" id="add-dash" name="add-dash">
        Add dash between syllables
      </label>
    </fieldset>

    <fieldset>
      <legend>Syllables settings</legend>
      <label for="random-syllable-types">
        <input type="checkbox" id="random-syllable-types" name="random-syllable-types">
        Random
      </label>
      <label>
        <input type="checkbox" id="type-0" name="syllable-types" value="0" checked>
        0. Consonant-Vowel
      </label>
      <label>
        <input type="checkbox" id="type-1" name="syllable-types" value="1" checked>
        1. Consonant-Vowel-Consonant
      </label>
      <label>
        <input type="checkbox" id="type-2" name="syllable-types" value="2" checked>
        2. Consonant-Vowel-Vowel
      </label>
      <label>
        <input type="checkbox" id="type-3" name="syllable-types" value="3" checked>
        3. Vowel-Consonant
      </label>
      <label>
        <input type="checkbox" id="type-4" name="syllable-types" value="4" checked>
        4. Vowel-Consonant-Vowel
      </label>
      <label>
        <input type="checkbox" id="type-5" name="syllable-types" value="5" checked>
        5. Vowel-Vowel-Consonant
      </label>
      <label>
        <input type="checkbox" id="type-6" name="syllable-types" value="6" checked>
        6. Vowel-Vowel
      </label>
    </fieldset>

    <button type="submit" data-umami-event="Generate a name">Generate a name</button>
  </form>

  <div id="result">&mdash;</div>
</body>

<script>
  const allSyllableTypes = [0, 1, 2, 3, 4, 5, 6];

  // Cache DOM elements
  const addDashCheckbox = document.getElementById('add-dash');
  const generateNameForm = document.getElementById('generate-name-form');
  const randomSyllableCountCheckbox = document.getElementById('random-syllable-count');
  const randomSyllableTypesCheckbox = document.getElementById('random-syllable-types');
  const resultDiv = document.getElementById('result');
  const syllableCountInput = document.getElementById('syllable-count');
  const syllableTypeCheckboxes = document.querySelectorAll('input[name="syllable-types"]');

  document.addEventListener('DOMContentLoaded', function () {
    setupFormListeners();

    // Restore user's choices
    restoreUserChoices();
  });

  function restoreUserChoices() {
    const addDash = localStorage.getItem('addDash') === 'true';
    addDashCheckbox.checked = addDash;

    const randomSyllableCount = localStorage.getItem('randomSyllableCount') === 'true';
    randomSyllableCountCheckbox.checked = randomSyllableCount;

    const randomSyllableTypes = localStorage.getItem('randomSyllableTypes') === 'true';
    randomSyllableTypesCheckbox.checked = randomSyllableTypes;

    const selectedTypes = JSON.parse(localStorage.getItem('selectedTypes') || '[]');
    allSyllableTypes.forEach(type => {
      document.getElementById(`type-${type}`).checked = selectedTypes.includes(type);
    });

    const syllableCount = localStorage.getItem('syllableCount');
    if (syllableCount) {
      syllableCountInput.value = syllableCount;
    }

    // Disable inputs based on the initial state of the checkboxes
    syllableCountInput.disabled = randomSyllableCountCheckbox.checked;
    syllableTypeCheckboxes.forEach(checkbox => {
      checkbox.disabled = randomSyllableTypesCheckbox.checked;
    });
  }

  function saveUserChoices() {
    const addDash = addDashCheckbox.checked;
    const randomSyllableCount = randomSyllableCountCheckbox.checked;
    const randomSyllableTypes = randomSyllableTypesCheckbox.checked;
    const selectedTypes = Array.from(syllableTypeCheckboxes).filter(input => input.checked).map(input => parseInt(input.value));
    const syllableCount = syllableCountInput.value;

    localStorage.setItem('addDash', addDash);
    localStorage.setItem('randomSyllableCount', randomSyllableCount);
    localStorage.setItem('randomSyllableTypes', randomSyllableTypes);
    localStorage.setItem('selectedTypes', JSON.stringify(selectedTypes));
    localStorage.setItem('syllableCount', syllableCount);
  }

  function setupFormListeners() {
    // Setup the 'random syllable count' checkbox
    randomSyllableCountCheckbox.addEventListener('change', function () {
      syllableCountInput.disabled = randomSyllableCountCheckbox.checked;
    });

    // Setup the 'random syllable types' checkbox
    randomSyllableTypesCheckbox.addEventListener('change', function () {
      syllableTypeCheckboxes.forEach(checkbox => {
        checkbox.disabled = randomSyllableTypesCheckbox.checked;
      });
    });
  }

  function updateSyllableTypeCheckboxes(selectedTypes) {
    syllableTypeCheckboxes.forEach(checkbox => {
      checkbox.checked = selectedTypes.includes(parseInt(checkbox.value));
    });
  }

  // Setup form submission
  generateNameForm.addEventListener('submit', function (event) {
    event.preventDefault();
    console.group('Generate a name');

    const addDash = addDashCheckbox.checked;
    const randomSyllableCount = randomSyllableCountCheckbox.checked;
    const randomSyllableTypes = randomSyllableTypesCheckbox.checked;
    let syllableCount = parseInt(syllableCountInput.value);

    if (randomSyllableCount) {
      syllableCount = Math.floor(Math.random() * 3) + 1; // Random number between 1 and 3
      syllableCountInput.value = syllableCount;
      console.log('- Random syllable count: ' + syllableCount);
    }

    let selectedTypes;
    if (randomSyllableTypes) {
      selectedTypes = [];
      while (selectedTypes.length === 0) {
        selectedTypes = allSyllableTypes.filter(() => Math.random() < 0.5);
      }
      updateSyllableTypeCheckboxes(selectedTypes);
      console.log('- Random syllable types: ' + selectedTypes);
    } else {
      selectedTypes = Array.from(syllableTypeCheckboxes).filter(input => input.checked).map(input => parseInt(input.value));
      if (selectedTypes.length === 0) {
        alert('Please select at least one syllable type.');
        return;
      }
    }

    saveUserChoices();

    const vowels = ['a', 'e', 'i', 'o', 'u', 'y'];
    const consonants = ['b', 'c', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'z'];

    function randomConsonant() {
      return consonants[Math.floor(Math.random() * consonants.length)];
    }

    function randomVowel() {
      return vowels[Math.floor(Math.random() * vowels.length)];
    }

    function generateName(syllables) {
      let name = '';
      for (let i = 0; i < syllables; i++) {
        const syllableType = selectedTypes[Math.floor(Math.random() * selectedTypes.length)];
        let syllable = '';
        if (syllableType === 0) {
          syllable = randomConsonant() + randomVowel();
          console.log('> Consonant-Vowel (0): ' + syllable);
        } else if (syllableType === 1) {
          syllable = randomConsonant() + randomVowel() + randomConsonant();
          console.log('> Consonant-Vowel-Consonant (1): ' + syllable);
        } else if (syllableType === 2) {
          syllable = randomConsonant() + randomVowel() + randomVowel();
          console.log('> Consonant-Vowel-Vowel (2): ' + syllable);
        } else if (syllableType === 3) {
          syllable = randomVowel() + randomConsonant();
          console.log('> Vowel-Consonant (3): ' + syllable);
        } else if (syllableType === 4) {
          syllable = randomVowel() + randomConsonant() + randomVowel();
          console.log('> Vowel-Consonant-Vowel (4): ' + syllable);
        } else if (syllableType === 5) {
          syllable = randomVowel() + randomVowel() + randomConsonant();
          console.log('> Vowel-Vowel-Consonant (5): ' + syllable);
        } else {
          syllable = randomVowel() + randomVowel();
          console.log('> Vowel-Vowel (6): ' + syllable);
        }
        if (addDash && i > 0) {
          name += '-';
        }
        name += syllable;
      }
      return name.charAt(0).toUpperCase() + name.slice(1);
    }

    const generatedName = generateName(syllableCount);
    resultDiv.textContent = `Generated Name: ${generatedName}`;
    console.groupEnd();
  });
</script>

</html>