feat: board opacity/background link with the room + start of screenshots feat

client/script.js

@@ -98,9 +98,24 @@ function getMessage(m) {
       break
 
     case 'editBoardMetas':
-      sendAction('editBoardMetas', { prop: 'opacity', value: 0.5 })
+      if (data.prop === 'imageUrl') {
+        document.body.style.backgroundImage = data.value ? `url("${data.value}")` : 'none'
+
+        if (data.value.startsWith('/images/')) {
+          $('.bg').removeClass('selected')
+          $(`.bg[src="${data.value}"]`).addClass('selected')
+        } else {
+          $('.bg').removeClass('selected')
+          $('.bgurl').val(data.value)
+        }
+      } else if (data.prop === 'opacity') {
+        document.documentElement.style.setProperty('--board-opacity', data.value)
+        const slider = document.getElementById('opacity-range')
+        if (slider) slider.value = data.value
+      }
       break
 
+
     case 'moveCard':
       moveCard($(`#${data.id}`), data.position)
       break
@@ -740,6 +755,18 @@ $(() => {
   // disable image dragging
   // window.ondragstart = function() { return false; };
 
+    const slider = document.getElementById('opacity-range');
+    if (slider) {
+      slider.addEventListener('input', function () {
+        document.documentElement.style.setProperty('--board-opacity', slider.value);
+        sendAction('editBoardMetas', {
+          id: 'opacity',
+          prop: 'opacity',
+          value: slider.value
+        });
+      });
+    }
+
   if (boardInitialized === false) blockUI('<img src="images/ajax-loader.gif" width=43 height=11/>')
 
   // setTimeout($.unblockUI, 2000);
@@ -1125,25 +1152,44 @@ $(() => {
     return false
   })
   $('.backgrounds .bg').on('click', function() {
+    const imageUrl = `/${$(this).attr('src')}`
+
     if ($(this).hasClass('selected')) {
       $('body').css('background-image', 'none')
       $(this).removeClass('selected')
+      sendAction('editBoardMetas', {
+        id: 'background',
+        prop: 'imageUrl',
+        value: ''
+      })
     } else {
       $('.selected').removeClass('selected')
       $('.bgurl').val('')
-      $('body').css('background-image', `url("/${$(this).attr('src')}")`)
+      $('body').css('background-image', `url("${imageUrl}")`)
       $(this).addClass('selected')
+      sendAction('editBoardMetas', {
+        id: 'background',
+        prop: 'imageUrl',
+        value: imageUrl
+      })
     }
   })
+
   $('.bgurl').on('change', function() {
     const url = $(this).val()
     if (url) {
       $('.selected').removeClass('selected')
       $('body').css('background-image', `url("${url}")`)
+      sendAction('editBoardMetas', {
+        id: 'background',
+        prop: 'imageUrl',
+        value: url
+      })
     }
   })
 })
 
+
 function toggleNav(target) {
   if ($('#site-wrapper').hasClass('show-nav') && target === false) {
     $('#site-wrapper').removeClass('show-nav')
@@ -1156,3 +1202,9 @@ function toggleNav(target) {
   }
   return false
 }
+
+function takescreenshot(selector) {
+    html2canvas(document.querySelector(selector)).then(canvas => {
+        document.body.appendChild(canvas)
+    });
+}