v1.0.2

README.md

@@ -33,17 +33,17 @@
 <a href="https://nodejs.org/en">
 <img src="https://img.shields.io/badge/MADE%20WITH-NodeJS-yellow?style=for-the-badge&logo=javascript" alt="Made with NodeJS" style="vertical-align:middle">
 </a>
-<a>
+<a href="https://github.com/BrowserSourcesForOBS/obs-timer-controller">
 <img src="https://img.shields.io/badge/MADE%20WITH-HTML-orange?style=for-the-badge&logo=html5" alt="Made with HTML" style="vertical-align:middle">
 </a>
-<a>
+<a href="https://github.com/BrowserSourcesForOBS/obs-timer-controller">
 <img src="https://img.shields.io/badge/MADE%20WITH-CSS-blue?style=for-the-badge&logo=css3" alt="Made with CSS" style="vertical-align:middle">
 </a>
 <br>
 <a href="https://nodejs.org/en/download">
 <img src="https://img.shields.io/badge/VERSION-18.18.0%20LTS-yellow?style=for-the-badge&logo=javascript" alt="NodeJS version" style="vertical-align:middle">
 </a>
-<a href="https://nodejs.org/en/download">
+<a href="https://www.npmjs.com/">
 <img src="https://img.shields.io/badge/VERSION-10.2.0-red?style=for-the-badge&logo=npm" alt="npm version" style="vertical-align:middle">
 </a>
 </div>
@@ -69,4 +69,4 @@ The codes have been created with my current knowledge and may contain errors or
 
 ### :book: Documentation
 
-~~WIKI~~ (In construction)
+#### [WIKI](https://github.com/BrowserSourcesForOBS/obs-timer-controller/wiki 'WIKI')

core/client.js

@@ -5,6 +5,7 @@ const buttonCdownContainer = document.getElementById('button-container-cdown')
 const buttonCdowntimeContainer = document.getElementById('button-container-cdowntime')
 const buttonTimeContainer = document.getElementById('button-container-time')
 const buttonClose = document.getElementById('stop-code')
+const buttonWiki = document.getElementById('button-wiki')
 const languageSelector = document.getElementById('language-selector')
 const switchTheme = document.getElementById('switch-theme')
 const titleCrono = document.getElementById('crono-title')
@@ -36,6 +37,7 @@ socket.addEventListener('message', (event) => {
     // Configuration and translation
     switchTheme.checked = message.config.themedark
     buttonClose.title = translateElements.home.close
+    buttonWiki.title = translateElements.home.wiki
     if (message.config.themedark) {
       document.body.classList.remove('light-theme')
       document.body.classList.add('dark-theme')

core/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="topbar.css" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <title>Inicio</title>
     <link
@@ -30,6 +30,14 @@
             ><i class="fa-brands fa-github"></i
           ></a>
         </button>
+        <button class="link-button" id="button-wiki">
+          <a
+            href="https://github.com/BrowserSourcesForOBS/obs-timer-controller/wiki"
+            target="_blank"
+            id="wiki-button"
+            ><i class="fas fa-book-open"></i
+          ></a>
+        </button>
       </span>
       <span class="language-span"
         ><i class="fas fa-language"></i>

core/template/cdown/control/control.js

@@ -55,7 +55,7 @@ socket.addEventListener('message', (event) => {
 
     if (message.action === 'sendVariables' && message.classElement === classElement) {
       // If the message contains variable data
-      const ElementVariables = message.variables
+      const elementVariables = message.variables
       translateElements = message.translateElements
 
       // Config and translates
@@ -82,12 +82,12 @@ socket.addEventListener('message', (event) => {
         ? message.config.lang
         : 'en'
 
-      controlButton.textContent = translateElements.crono.buttons.start
-      resetButton.textContent = translateElements.crono.buttons.reset
+      controlButton.textContent = translateElements.timer.buttons.start
+      resetButton.textContent = translateElements.timer.buttons.reset
 
-      if (ElementVariables && typeof ElementVariables === 'object') {
-        checkTextTime = MsToText(ElementVariables.textmilliseconds)
-        checkHexColor = ElementVariables.colorText
+      if (elementVariables && typeof elementVariables === 'object') {
+        checkTextTime = MsToText(elementVariables.textmilliseconds)
+        checkHexColor = elementVariables.colorText
 
         // Format selector options
         formatSelector.innerHTML = ''
@@ -99,24 +99,32 @@ socket.addEventListener('message', (event) => {
         })
 
         // Perform necessary actions with the variables here
-        textMsg.textContent = ElementVariables.msgEnd
-        timeText.value = MsToText(ElementVariables.textmilliseconds)
-        formatSelector.value = ElementVariables.formatTime
-        fontSelect.value = ElementVariables.font
-        fontSize.value = ElementVariables.size
-        textFormat(ElementVariables)
-        formatAlign(ElementVariables.align)
-        colorPicker.value = ElementVariables.colorText
-        colorHex.value = ElementVariables.colorText
+        textMsg.textContent = elementVariables.msgEnd
+        if (elementVariables.msgEnd === '') {
+          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.style.color = '#555'
+        } else { textMsg.style.color = '#000' }
+        timeText.value = MsToText(elementVariables.textmilliseconds)
+        formatSelector.value = elementVariables.formatTime
+        fontSelect.value = elementVariables.font
+        fontSize.value = elementVariables.size
+        textFormat(elementVariables)
+        formatAlign(elementVariables.align)
+        colorPicker.value = elementVariables.colorText
+        colorHex.value = elementVariables.colorText
         if (translateElements) {
-          updateControlButton(ElementVariables.status)
+          updateControlButton(elementVariables.status)
         }
       } else {
         console.log('The server did not return valid data.')
       }
     } else {
       if (message[classElement].status !== 'started') {
         textMsg.textContent = message[classElement].msgEnd
+        if (message[classElement].msgEnd === '') {
+          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.style.color = '#555'
+        } else { textMsg.style.color = '#000' }
         timeText.value = MsToText(message[classElement].textmilliseconds)
         formatSelector.value = message[classElement].formatTime
         fontSelect.value = message[classElement].font
@@ -149,7 +157,7 @@ selectorLang.addEventListener('change', () => {
 })
 
 controlButton.addEventListener('click', () => {
-  if (controlButton.textContent === translateElements.crono.buttons.start) {
+  if (controlButton.textContent === translateElements.timer.buttons.start) {
     socket.send(JSON.stringify({ action: 'startCdown', classElement }))
   } else {
     socket.send(JSON.stringify({ action: 'pauseCdown', classElement }))
@@ -209,8 +217,19 @@ subContainer.addEventListener('click', (event) => {
   }
 })
 
+textMsg.addEventListener('focus', () => {
+  if (textMsg.textContent === translateElements.timer.ph_msgend) {
+    textMsg.textContent = ''
+    textMsg.style.color = '#000'
+  }
+})
+
 textMsg.addEventListener('blur', () => {
   socket.send(JSON.stringify({ action: 'editMsgCdown', msg: textMsg.textContent, classElement }))
+  if (textMsg.textContent === '') {
+    textMsg.textContent = translateElements.timer.ph_msgend
+    textMsg.style.color = '#555'
+  } else { textMsg.style.color = '#000' }
 })
 
 formatSelector.addEventListener('change', () => {
@@ -309,17 +328,17 @@ function updateControlButton (status) {
   controlButton.style.width = maxWidth
 
   if (status === 'started') {
-    controlButton.textContent = translateElements.crono.buttons.pause
+    controlButton.textContent = translateElements.timer.buttons.pause
   } else {
-    controlButton.textContent = translateElements.crono.buttons.start
+    controlButton.textContent = translateElements.timer.buttons.start
   }
 }
 
 function getMaxButtonWidth () {
   const widths = []
 
-  Object.keys(translateElements.crono.buttons).forEach((value) => {
-    controlButton.textContent = translateElements.crono.buttons[value]
+  Object.keys(translateElements.timer.buttons).forEach((value) => {
+    controlButton.textContent = translateElements.timer.buttons[value]
     widths.push(parseFloat(window.getComputedStyle(controlButton).getPropertyValue('width')))
   })
   // Get the maximum of the two widths

core/template/cdown/control/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="topbar.css" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <script
       src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"

core/template/cdowntime/control/control.js

@@ -23,7 +23,7 @@ const socket = new WebSocket('ws://localhost:3000')
 
 const classElement = window.location.href.split('/')[3]
 titlePage.textContent = classElement + ' - Control'
-// let translateElements
+let translateElements
 
 let checkHexColor
 
@@ -55,7 +55,7 @@ socket.addEventListener('message', (event) => {
     if (message.action === 'sendVariables' && message.classElement === classElement) {
       // If the message contains variable data
       const elementVariables = message.variables
-      // translateElements = message.translateElements;
+      translateElements = message.translateElements
 
       // Config and translates
       switchTheme.checked = message.config.themedark
@@ -81,6 +81,8 @@ socket.addEventListener('message', (event) => {
         ? message.config.lang
         : 'en'
 
+      textMsg.innerHTML = 'Hola'
+
       if (elementVariables && typeof elementVariables === 'object') {
         checkHexColor = elementVariables.colorText
 
@@ -104,6 +106,10 @@ socket.addEventListener('message', (event) => {
 
         // Perform necessary actions with the variables here
         textMsg.textContent = elementVariables.msgEnd
+        if (elementVariables.msgEnd === '') {
+          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.style.color = '#555'
+        } else { textMsg.style.color = '#000' }
         timeData.value = new Date(elementVariables.endDatetime).toLocaleString('en-CA', { timeZone: elementVariables.timezone, hour12: false }).replace(/,\s/, 'T')
         timezoneSelector.value = elementVariables.timezone
         formatSelector.value = elementVariables.formatTime
@@ -182,8 +188,19 @@ subContainer.addEventListener('click', (event) => {
   }
 })
 
+textMsg.addEventListener('focus', () => {
+  if (textMsg.textContent === translateElements.timer.ph_msgend) {
+    textMsg.textContent = ''
+    textMsg.style.color = '#000'
+  }
+})
+
 textMsg.addEventListener('blur', () => {
   socket.send(JSON.stringify({ action: 'editMsgCdownTime', msg: textMsg.textContent, classElement }))
+  if (textMsg.textContent === '') {
+    textMsg.textContent = translateElements.timer.ph_msgend
+    textMsg.style.color = '#555'
+  } else { textMsg.style.color = '#000' }
 })
 
 formatSelector.addEventListener('change', () => {

core/template/cdowntime/control/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="topbar.css" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <script
       src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"

core/template/cdowntime/control/styles.css

@@ -67,7 +67,6 @@ body {
   font-family: Arial, sans-serif;
   text-align: left;
   padding: 10px 20px; /* Espaciado interno */
-  text-align: right;
   border: 2px solid #cccccc88; /* Borde */
   border-radius: 5px; /* Borde redondeado */
   margin-right: 10px;

core/template/crono/control/control.js

@@ -80,8 +80,8 @@ socket.addEventListener('message', (event) => {
         ? message.config.lang
         : 'en'
 
-      controlButton.textContent = translateElements.crono.buttons.start
-      resetButton.textContent = translateElements.crono.buttons.reset
+      controlButton.textContent = translateElements.timer.buttons.start
+      resetButton.textContent = translateElements.timer.buttons.reset
 
       if (elementVariables && typeof elementVariables === 'object') {
         checkHexColor = elementVariables.colorText
@@ -139,7 +139,7 @@ languageSelector.addEventListener('change', () => {
 })
 
 controlButton.addEventListener('click', () => {
-  if (controlButton.textContent === translateElements.crono.buttons.start) {
+  if (controlButton.textContent === translateElements.timer.buttons.start) {
     socket.send(JSON.stringify({ action: 'startCrono', classElement }))
   } else {
     socket.send(JSON.stringify({ action: 'pauseCrono', classElement }))
@@ -265,17 +265,17 @@ function updateControlButton (status) {
   controlButton.style.width = maxWidth
 
   if (status === 'started') {
-    controlButton.textContent = translateElements.crono.buttons.pause
+    controlButton.textContent = translateElements.timer.buttons.pause
   } else {
-    controlButton.textContent = translateElements.crono.buttons.start
+    controlButton.textContent = translateElements.timer.buttons.start
   }
 }
 
 function getMaxButtonWidth () {
   const widths = []
 
-  Object.keys(translateElements.crono.buttons).forEach((value) => {
-    controlButton.textContent = translateElements.crono.buttons[value]
+  Object.keys(translateElements.timer.buttons).forEach((value) => {
+    controlButton.textContent = translateElements.timer.buttons[value]
     widths.push(parseFloat(window.getComputedStyle(controlButton).getPropertyValue('width')))
   })
 

core/template/crono/control/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="topbar.css" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <title id="titlePage"></title>
     <link

core/template/time/control/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="topbar.css" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <script
       src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"

core/template/time/control/styles.css

@@ -67,7 +67,6 @@ body {
   font-family: Arial, sans-serif;
   text-align: left;
   padding: 10px 20px; /* Espaciado interno */
-  text-align: right;
   border: 2px solid #cccccc88; /* Borde */
   border-radius: 5px; /* Borde redondeado */
   margin-right: 10px;

core/topbar.css

@@ -44,7 +44,8 @@
   border: 2px solid #444;
 }
 
-#github-button {
+#github-button,
+#wiki-button {
   font-size: 15px;
   color: white;
 }

core/translates/en.yaml

@@ -1,13 +1,15 @@
 home:
   close: Close the window and stop the code
+  wiki: Documentation
   cronoTitle: CLOCKS
   cdownTitle: TIMERS
   cdowntimeTitle: TIME UNTIL...
   twitchextTitle: EXTENSIBLE TWITCH
   timeTitle: CURRENT TIME
   notycopycrono: URL copied to clipboard
-crono:
+timer:
   buttons:
     start: Start
     pause: Pause
     reset: Reset
+  ph_msgend: Message to display when time expires

core/translates/es.yaml

@@ -1,13 +1,15 @@
 home:
   close: Cierra la ventana y detiene el código
+  wiki: Documentación
   cronoTitle: CRONÓMETROS
   cdownTitle: TEMPORIZADORES
   cdowntimeTitle: TIEMPO HASTA...
   twitchextTitle: EXTENSIBLE TWITCH
   timeTitle: HORA ACTUAL
   notycopycrono: URL copiada al portapapeles
-crono:
+timer:
   buttons:
     start: Iniciar
     pause: Pausar
-    reset: Reiniciar
+    reset: Reiniciar
+  ph_msgend: Mensaje a mostrar cuando finalice el tiempo