sticker organizing thoughts & work

03-21-25

i've been really enjoying collecting pixel stickers from all over the web & i want to add them to my sticker book but i got too carried away and i have over 500 stickers already... the thought of manually organizing them is frightening so i want to create a javascript function that can sort & organize the stickers for me. there are sooo many ideas floating through my brain and i lack the experience & knowdledge to filter out the bad options so its time to ponder & create some bad javascript logic!


  • option 1 name the stickers in a specific way & use regex to sort/filter them accordingly using tags and set numbers & render with JS ex: set1-tag1-tag2-tag3-filename / 23-animal-bear-brown-sleeping.png
  • what if i want to add the artists name to the sticker group? i cant manually edit it in HTML since JS will be creating those elements... GAH!
  • option 2 sort stickers in separate folders named with set name or artist name, files named with tags ending with filename ex: folder/tag1-tag2-tag3-filename.png / Bohie/animal-bear-brown-sleeping.png
  • SO. MANY. FOLDERS. i have like over 200 sticker groups already & it's overwhelming thinking about managing all those folders... mmm ok scrap this one
  • option 3 just add the artist name to the file name duh ex: artist-setnum-tag1-tag2-tag3-filename / bohie-23-animal-bear-brown-sleeping.png
  • but what if some sets don't have a cited artist? how will i be able to distinguish that...
  • all files should start with a set number, so check if the filename value before the first - character is numerical, if not due to file naming convention (setnum, tags, filename) it should be the cited artists name? mhm mhm sounds good in theory

thinking of options...

i want to sort stickers by their tags and sets

so in the sticker book page can maybe select a button styled like a book tab to show certain stickers with that tag? or a dropdown depending on how many tags i'll have.

default view has stickers organized into their sets... click on a button/tab to filter stickers by a certain tag -> yay filtered stickers

this feels like a lot of work but if i do this right all i need to do is edit the file name of stickers as i add them to my folder & they'll automatically show up where they need to

the vision

  • getting files from folder js code

    • this code works except for organizing the sets according to their number. sets 1 & 10 are placed next to each other, so need to add logic to organize based on alphanumeric value not just the first character. 

    //request to get files in defined folder
var xhr = new XMLHttpRequest();
var tempArr = [];
xhr.open("GET", "./journal/testing", true);
xhr.responseType = "document";

//on page load if request was successfull, 
//get 'a' elements & loop through 
//array getting all files ending with jpeg/png/gif/webp, 
//then add to tempArr array
xhr.onload = () => {
if (xhr.status === 200) {
  var elements = xhr.response.getElementsByTagName("a");
    for (x of elements) {
      if (x.href.match(/\.(jpe?g|png|gif|webp)$/)) {
        tempArr.push(x.href);
    }
}

//create function that will 
//sort the array that contains
//alphanumeric strings
const sortAlphaNum = (a, b) =>
a.localeCompare(b, "en", { numeric: true });

//pass alphanumeric sorting function 
//into sort function 
tempArr.sort(sortAlphaNum);
  • sort-mixed-aplha-numeric-array

    • adding function to sort array with alphanumerical strings...

    whew it works! I may have to change this to Intl.Collator.compare() later since it'll be sorting hundreds of images. don't know what that fully does atm but i trust MDN web docs with my LIFE.

    ok so now i want to render the images in separate divs based on their set number... do i have to sort them into objects? mmm or i can use regex to just pull the number value from the string & add them to divs after they're sorted... i wonder if I can add that logic to the alphanumeric sorting array... nvm i'll just get the set number using regex

    lousy javascript work
    I'VE DONE IT! hehehehe ok so i couldn't figure out how to combine the 2 regex patterns into one pattern so it's split into 2. basically the regex pattern for z1 is getting rid of the https:// text before the file name, and the regex pattern for z2 is getting rid of everything after the setNum. then the if block checks if a does not equal the set num (which it shouldn't at first since a = 0), if this is true then it creates a new div in the document! YAY. after that images can be added into that div until a new set number comes up

    i don't wanna talk about how long it took me to create a simple if loop that worked right. i mistakenly set the value of a IN the for loop, so each time the for loop ran it reset a back to 0 and fucked up the if loop entirely i thought i was going CRAZY but it was just a minor mistake! 

    //ex string:
//http://000.0.0.0:0000/journal/testing/
//10-food-drink-brown-coffemusic.gif
    
function groupImages(arr) {
var a = 0;
let div;
let img;
for (z of arr) {
  //regex to remove 'http://000.0.0.0:0000/journal/testing/'
  var z1 = z.replace(/^.*[\\\/]/, "");
    
  //regex to remove '-food-drink-brown-coffemusic.gif'
  var z2 = z1.replace(/\-.*/, "");
    
  //create new div for new set num
  if (a != z2) {
    console.log("new group created for group " + z2);
    div = document.createElement("div");
    a++;
  }
  img = document.createElement("img");
  img.src = z;
  console.log("add " + img.src + " to div");
  div.appendChild(img);
  document.getElementById("sticker-container").appendChild(div);
}
}

    success!!

    first big thing accomplished! next step is to work on the filtering logic which i'm feeling confident about now that i've messed with regex a bit. what i'm imagining is that i can create different arrays with the names of the tags i have ex: let animal = []; let bear = []; & only add the image filename to arrays that exactly matches the tag name. if there is no match for any tags put it in let other = []; array.

    anywho i'm very happy but my brain hurts and so do my arms for some reason. quick screenshot of how it renders. each line is a separate div element.

    goodnight!
      let animal=[];
  let bear = [];
                                    
  let arr = [animal-bear-file1.jpg, 
  bear-file2.jpg, heart-pink-file3.jpg]
                                    
  for (x of arr) {
  //complicated regex pattern used 
  //here to get each tag value
  //up until the last '-' character
                                    
  var y = x.replace(/REGEXHERE/, "");
                    
  //could maybe use a switch instead here?
  if (y == "animal") {
    animal.push(x);
  }
  }

    future plans + screenshot of results