diff --git a/web/static/assets/img/synth.png b/web/static/assets/img/keyboard.png similarity index 100% rename from web/static/assets/img/synth.png rename to web/static/assets/img/keyboard.png diff --git a/web/static/assets/img/pro_synth.png b/web/static/assets/img/pro_keyboard.png similarity index 100% rename from web/static/assets/img/pro_synth.png rename to web/static/assets/img/pro_keyboard.png diff --git a/web/static/css/styles.css b/web/static/css/styles.css index 7ef8979..637f66e 100644 --- a/web/static/css/styles.css +++ b/web/static/css/styles.css @@ -128,6 +128,16 @@ body { align-items: center; /* Center items vertically */ } +#instrument_name { + margin-top: 5px; + margin-right: 5px; /* Space between text and icon */ + text-transform: uppercase; + font-size: 25px; /* Adjust font size as needed */ + font-variation-settings: "wdth" 700, "wght" 668; + color: hsla(245, 100%, 80%, 0.55); + transition: opacity 0.5s ease-in-out; /* Smooth transition for text */ +} + #instrument img { width: 40px; /* Small icon size */ height: 40px; /* Small icon size */ diff --git a/web/static/js/script.js b/web/static/js/script.js index 8b738cb..103e24e 100644 --- a/web/static/js/script.js +++ b/web/static/js/script.js @@ -5,7 +5,10 @@ let previousData = { current_album_art: '', current_instrument: '', current_intensity: -1, - song_state: false + song_state: false, + icon_bass: '', + icon_guitar: '', + icon_vocals: '' }; async function fetchStatus() { @@ -21,6 +24,7 @@ async function fetchStatus() { const intensityIcon = document.getElementById('intensity_icon'); const difficultyIcon = document.getElementById('difficulty_icon'); const textInfo = document.getElementById('text_info'); + const instrumentName = document.getElementById('instrument_name'); if (data.song_state) { // Delay the visibility change to allow data to load @@ -94,24 +98,30 @@ async function fetchStatus() { } let instrumentSrc; + let instrumentText = ''; switch (data.current_instrument?.toLowerCase()) { case 'bass': - instrumentSrc = '/static/assets/img/bass.png'; + instrumentSrc = data.icon_bass === 'Keyboard' ? '/static/assets/img/keyboard.png' : '/static/assets/img/bass.png'; + instrumentText = data.icon_bass === 'Keyboard' ? 'Bass' : ''; break; case 'drums': instrumentSrc = '/static/assets/img/drums.png'; break; case 'lead': - instrumentSrc = '/static/assets/img/lead.png'; + instrumentSrc = data.icon_guitar === 'Keyboard' ? '/static/assets/img/keyboard.png' : '/static/assets/img/lead.png'; + instrumentText = data.icon_guitar === 'Keyboard' ? 'Lead' : ''; break; case 'vocals': - instrumentSrc = '/static/assets/img/vocals.png'; + instrumentSrc = data.icon_vocals === 'Keyboard' ? '/static/assets/img/keyboard.png' : '/static/assets/img/vocals.png'; + instrumentText = data.icon_vocals === 'Keyboard' ? 'Vocals' : ''; break; case 'pro lead': - instrumentSrc = '/static/assets/img/pro_lead.png'; + instrumentSrc = data.icon_guitar === 'Keyboard' ? '/static/assets/img/pro_keyboard.png' : '/static/assets/img/pro_lead.png'; + instrumentText = data.icon_guitar === 'Keyboard' ? 'Pro Lead' : ''; break; case 'pro bass': - instrumentSrc = '/static/assets/img/pro_bass.png'; + instrumentSrc = data.icon_bass === 'Keyboard' ? '/static/assets/img/pro_keyboard.png' : '/static/assets/img/pro_bass.png'; + instrumentText = data.icon_bass === 'Keyboard' ? 'Pro Bass' : ''; break; default: instrumentSrc = ''; @@ -123,12 +133,20 @@ async function fetchStatus() { instrumentIcon.src = instrumentSrc; instrumentIcon.style.display = 'block'; instrumentIcon.style.opacity = 1; + if (instrumentText) { + instrumentName.textContent = instrumentText; + instrumentName.style.display = 'block'; + } else { + instrumentName.style.display = 'none'; + } } else { instrumentIcon.style.display = 'none'; + instrumentName.style.display = 'none'; } previousData.current_instrument = data.current_instrument; } else if (!instrumentSrc) { instrumentIcon.style.display = 'none'; + instrumentName.style.display = 'none'; } if (previousData.current_intensity !== data.current_intensity) { @@ -145,6 +163,9 @@ async function fetchStatus() { } previousData.song_state = data.song_state; + previousData.icon_bass = data.icon_bass; + previousData.icon_guitar = data.icon_guitar; + previousData.icon_vocals = data.icon_vocals; } catch (error) { console.error('Error fetching status:', error); diff --git a/web/templates/index.html b/web/templates/index.html index 02d7280..9909395 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -23,6 +23,7 @@ +