JS.setBackground cannot cope with three digit colour

[ThePix]

HTML/CSS should be able to cope with #rgb as well as #rrggbb. However, JS.setBackground attempts to slit the string into the three components, and is not built to take the former, resulting in a JS error.

NB: Different versions in playercore.js and paper.js, but neither can handle this.

[KVonGit]

This seems to fix it. Be sure to test it out, though. (I tend to overlook possibilities when testing things like this.) ¹

THIS CODE DOESN'T WORK IN QUEST DESKTOP)

(Found the code here: https://www.geeksforgeeks.org/how-to-convert-3-digit-color-code-to-6-digit-color-code-using-javascript/)

function setBackground(col) {
    /* If '#rgb', convert to '#rrggbb'*/
    if (col.startsWith("#") && col.length == 4) {
        /* var colBak = col */
        col = col.split("").map((item)=>{ if(item == "#"){return item} return item + item; }).join("")
        /* console.log ("DEBUGGING: setBackground() changed \"" + colBak + "\" to \"" + col "\" +.") */
    }
    colNameToHex = colourNameToHex(col);
    if (colNameToHex) col = colNameToHex;
    rgbCol = hexToRgb(col);
    var cssBackground = "rgba(" + rgbCol.r + "," + rgbCol.g + "," + rgbCol.b + "," + _backgroundOpacity + ")";
    $("#gameBorder").css("background-color", cssBackground);

    $("#gamePanel").css("background-color", col);
    $("#gridPanel").css("background-color", col);
}

Footnotes

1. Yep. I forgot the desktop player has a very old version of JS that doesn't recognize =>. See my next post for the good code. ↩

[KVonGit]

I tested the above code in the dev tools console in Firefox.

I forgot the => Javascript stuff doesn't work in the desktop player.

Here is actual good, tested code (EDITED TO REMOVE DEBUGGING MESSAGE):

String.prototype.startsWith = function(s){ return this.charAt(0) === s; }

function setBackground(col) {
  /* If '#rgb', convert to '#rrggbb'*/
  if (col.startsWith("#") && col.length == 4) {
    var colBak = "" + col + "";
    colArr = col.split("")
    var newCol = "";
    for (var i=0; i<colArr.length;i++){
      if (colArr[i] == "#"){
        newCol = newCol + colArr[i];
      } else {
        newCol = newCol + colArr[i] + colArr[i];
      }
    }
    col = newCol || col;
    /* console.log ("DEBUGGING: setBackground() changed \"" + colBak + "\" to \"" + col + "\".") */
  }
  colNameToHex = colourNameToHex(col);
  if (colNameToHex) col = colNameToHex;
  rgbCol = hexToRgb(col);
  var cssBackground = "rgba(" + rgbCol.r + "," + rgbCol.g + "," + rgbCol.b + "," + _backgroundOpacity + ")";
  $("#gameBorder").css("background-color", cssBackground);
  $("#gamePanel").css("background-color", col);
  $("#gridPanel").css("background-color", col);
}

[ThePix]

I have not tested your code, but have you considered using regular expressions for this? col.replace(/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, '#$1$1$2$2$3$3') Just a suggestion, and you may have a good reason not to! Andy

…

________________________________ From: K.V. ***@***.***> Sent: 25 August 2024 18:13 To: textadventures/quest ***@***.***> Cc: ThePix ***@***.***>; Author ***@***.***> Subject: Re: [textadventures/quest] JS.setBackground cannot cope with three digit colour (#1052) I tested the above code in the dev tools console in Firefox. I forgot the => Javascript stuff doesn't work in the desktop player. Here is actual good, tested code: String.prototype.startsWith = function(s){ return this.charAt(0) === s; } function setBackground(col) { /* If '#rgb', convert to '#rrggbb'*/ if (col.startsWith("#") && col.length == 4) { var colBak = col colArr = col.split("") var newCol = ""; for (var i=0; i<colArr.length;i++){ if (colArr[i] == "#"){ newCol = newCol + colArr[i]; } else { newCol = newCol + colArr[i] + colArr[i]; } } console.log(newCol) col = newCol || col; //console.log ("DEBUGGING: setBackground() changed \"" + colBak + "\" to \"" + col "\" +.") } colNameToHex = colourNameToHex(col); if (colNameToHex) col = colNameToHex; rgbCol = hexToRgb(col); var cssBackground = "rgba(" + rgbCol.r + "," + rgbCol.g + "," + rgbCol.b + "," + _backgroundOpacity + ")"; $("#gameBorder").css("background-color", cssBackground); $("#gamePanel").css("background-color", col); $("#gridPanel").css("background-color", col); } — Reply to this email directly, view it on GitHub<#1052 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACLFJTUI5DBHGMHJVGDJ72DZTIGFHAVCNFSM6AAAAABNBYJU6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYHEZDSMBVGU>. You are receiving this because you authored the thread.

[KVonGit]

have you considered using regular expressions for this?

I don't know why, but I never even think about using regular expressions. I have nothing against them.

I'll plug that in and see what happens.

Do you know if paper.js needs a function tweaked too, or is this function the only thing that calls the function in paper.js?

[KVonGit]

It seems to work fine with the regex.

Here is a ZIP with a small test game file and the JS file.

JS setBackground Test.zip

---

I opened the HTML tools and tested it quite a few times from the console. Seems to work fine.

---

String.prototype.startsWith = function(s){ return this.charAt(0) === s; }

function setBackground(col) {
  /* If '#rgb', convert to '#rrggbb'*/
  if (col.startsWith("#") && col.length == 4) {
    var colBak = "" + col + "";
    newCol = col.replace(/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, '#$1$1$2$2$3$3');
    col = newCol || col;
    console.log ("DEBUGGING:(playercore.js) setBackground() changed \"" + colBak + "\" to \"" + col + "\".")
  }
  colNameToHex = colourNameToHex(col);
  if (colNameToHex) col = colNameToHex;
  rgbCol = hexToRgb(col);
  var cssBackground = "rgba(" + rgbCol.r + "," + rgbCol.g + "," + rgbCol.b + "," + _backgroundOpacity + ")";
  $("#gameBorder").css("background-color", cssBackground);
  $("#gamePanel").css("background-color", col);
  $("#gridPanel").css("background-color", col);
}