Tema versus

README.md

@@ -18,7 +18,12 @@ npm install
 npm run dev
 ```
 
-3. Acesse no navegador:
+3. Em outro terminal, acompanhe o Sass e gere o CSS automaticamente:
+```bash
+npm run watch:styles
+```
+
+4. Acesse no navegador:
 ```
 http://localhost:1234
 ```

asset/javascript/ThemeController.js

@@ -0,0 +1,45 @@
+export function ThemeController(reference) {
+    const body = reference;
+
+    const themeMenuButton = body.querySelector('.js-theme-menu-button');
+    const themeDropdown = body.querySelector('.js-theme-dropdown');
+
+    const defaultThemeButton = body.querySelector('.js-default-theme-button');
+    const versusThemeButton = body.querySelector('.js-versus-theme-button');
+
+    function init() {
+        if (!themeMenuButton || !themeDropdown || !defaultThemeButton || !versusThemeButton) {
+            return;
+        }
+
+        bindButtons();
+    }
+
+    function bindButtons() {
+        themeMenuButton.addEventListener('click', toggleThemeMenu);
+        defaultThemeButton.addEventListener('click', setDefaultTheme);
+        versusThemeButton.addEventListener('click', setVersusTheme);
+    }
+
+    function toggleThemeMenu() {
+        themeDropdown.classList.toggle('hide');
+    }
+
+    function setDefaultTheme() {
+        body.classList.remove('versus-theme');
+        body.classList.remove('inverted');
+        closeThemeMenu();
+    }
+
+    function setVersusTheme() {
+        body.classList.add('versus-theme');
+        body.classList.remove('inverted');
+        closeThemeMenu();
+    }
+
+    function closeThemeMenu() {
+        themeDropdown.classList.add('hide');
+    }
+
+    init();
+}

asset/javascript/TimeController.js

@@ -10,11 +10,13 @@ import {
     secondsToHour,
     secondsToMinute,
 } from './TimeUtils.js';
+import { ThemeController } from './ThemeController.js';
 
 function TimerController(reference) {
     const hourInput = reference.querySelector('.js-hour-input');
     const minuteInput = reference.querySelector('.js-minute-input');
     const secondInput = reference.querySelector('.js-seconds-input');
+    const themeButton = reference.querySelector('.js-theme-menu-container');
 
     const actionButtonsContainer = reference.querySelector('.js-stopwatch-action-buttons');
     const enterFullscreenButton = actionButtonsContainer.querySelector('.js-enter-fullscreen-button');
@@ -55,6 +57,7 @@ function TimerController(reference) {
         bindButtons();
         bindFullscreenEvents();
         setInputValues(DEFAULT_SECONDS);
+        new ThemeController(reference);
     }
 
     var bindInputs = function () {
@@ -197,7 +200,10 @@ function TimerController(reference) {
                 lastTimerStatus = TimerStatus.COUNTDOWN;
                 playCountdownSound();
 
-                if (!preventOpenCountdown) executeCountdown(seconds);
+                if (!preventOpenCountdown) {
+                    themeButton.hideElement();
+                    executeCountdown(seconds);
+                }
             }
 
             setInputValues(seconds);
@@ -319,6 +325,7 @@ function TimerController(reference) {
         stopSound.pause();
         stopSound.currentTime = 0;
         stopSound.volume = 0;
+        themeButton.showElement();
     }
 
     function toggleButtonsContainer(isEditing) {