Devlog #17

Today I polished the SpaceGuessr UI a lot and also cleaned up how small animation states work in the game.

What I improved

• Reworked the start menu so the main card feels bigger and more like a real game menu
• Made the game mode area clearer with better spacing and stronger visual focus
• Updated the mode descriptions so they sound cleaner and more professional
• Made the start button larger and more important visually
• Removed the small line/gloss artifact from the selected game mode tab
• Improved the dark mode styling so the in-game UI feels less weird and more consistent
• Reworked the final report card so it matches the rest of the project style better
• Cleaned up the light mode end screen because it looked too washed out before
• Improved the theme toggle so it fits the glass / space design better

JS improvements

I also added small UI animation states in JavaScript instead of only relying on random class toggles.

New state classes now include things like:

• is-transitioning
• is-answering
• is-feedback-open
• is-round-complete
• is-results-view

That makes the UI feel more stable and gives smoother transitions between:

• loading a round
• answering
• opening feedback
• showing the end screen

Small code example

function setUiState(stateKey, isActive) {
  const stateClassName = uiStateClassMap[stateKey];

  if (!stateClassName) {
    return;
  }

  uiStateTargets.forEach((element) => {
    element.classList.toggle(stateClassName, isActive);
  });
}