JS.setBackground cannot cope with three digit colour

ThePix commented 6 years ago

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 commented 3 months ago

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

[^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.

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/) ```js 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); } ```

KVonGit commented 3 months ago

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 commented 2 months ago

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; }

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

}

— Reply to this email directly, view it on GitHubhttps://github.com/textadventures/quest/issues/1052#issuecomment-2308929055, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACLFJTUI5DBHGMHJVGDJ72DZTIGFHAVCNFSM6AAAAABNBYJU6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYHEZDSMBVGU. You are receiving this because you authored the thread.

KVonGit commented 2 months ago

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 commented 2 months ago

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);
}

textadventures / quest

JS.setBackground cannot cope with three digit colour #1052