Pieced

Minor Fixes and animations

• Added nice logo as background
• Added small slide in animations

I guess thats a wrap… from this I learnt how to use keyframes in css to animate stuff

DEMO WEBSITE!!!?!?!?

• designed, coded the demo website
• record a short 30 second demo
• deployed the website

in this 2h and 55 mins I did up the demo website.
I think it turned out great, I used the colors from the logos to do up the website.
I didn’t learn much but I’m 8/10 satisfied from this. I think my css and html skills really improved from my previous project.
I will try to add animations later to make it more enticing and because Im not good at animations (yet)

EXTRA STUFF ON THE EXTENSION

What I did:

• added difficulty levels (easy, medium hard)
• added stats (Puzzles completed, Time wasted in total)

Nothing much, this time it was manageable.. I learnt how to store values using chrome.storage, and how to grab values from it

I am going to create a showcase or demo website for this now because I am bored

CONFETTI CONFETTI CONFETTI

worked on

• win condition
• adding confetti
• i also had to do a little debugging because it was kind of lagging when i added the confetti and it was because of the shuffling uguhguhguhgughuhg
• Refactoring of movement and detection code
• tracking of active puzzle

yippee I finally did it… the main plugin is completed!!! Time to add more stuff.
I learnt how to include other libraries and packages into my extension.
I also learnt how to use an immediate invoke function expression is in javascript although I do know that in python… I used it to precompute the correct sequence based on the dividers.

Worked on

• Real shuffling (previous shuffling algorithm did not work because there are some invalid moves)
• better empty tile design

Hello… I did not face many difficulties this time though my brain is pretty tired from all the logic…
I learnt how to use the .filter function to make my code more cleaner though!! Ok good night… I think I will add: difficulty levels (easy, medium hard) and I still need to write the win condition. I also want to add like a stat tracker or something because sliding puzzles are so annoying yet so addictive…

Hello
I worked on

• a fake scramble
• making the moving keys work on other websites instead of just html.
• make only one puzzle active at a time by clicking
  At the start I really did not know how to start if it made sense. After researching i gained more direction.

I learnt about the different type of event listeners. Do you know that there are two phases(?) you can put event listeners? The bubble phase and capture phase. You can register the listener in the capture phase to run that before other listeners. I also used preventDefault() to stop default behaviour such as scrolling up and down when the keys are pressed.

Hello its been 2 days because I was busy with school
worked on

• the movement and tracking of pieces. So you now can control the pieces using arrow keys.
  I currently find it really confusing for some reason even though the logic is now correct.
  Maybe because I am feeling sleepy, but I found this really challenging to do, and most of it was just logic. Good night!!

worked on:

• making each piece a div

yes!! each piece is a div with an image so in total the picture below is nine images!!

i learnt how to use different background properties such as backgroundImage, backgroundSize and backgroundPosition. i had a problem when the images looked kind of displaced because backgroundPosition moves it the opposite direction?!? i had to put the - sign. Also based on what i learnt yesterday, I was able to get the parent node of each image and replace the image node with a container that holds all the divs. At first i tried getting the position relative to the viewport then i realized that i could just replace the element!!

i worked on grabbing the images from ALL the sources.
um… it was hard. i actually tried on the previous devlog too, but i felt that it was a bit lacking and it didn’t work on google images at all. i hit a huge stump so i had to consult AI to see what i need to read up on to implement this feature.

i spent a lot of time learning about the DOM, nodes and how they work, i needed to use a mutation observer to check for any updates after the DOM is loaded, so that when i click on another image on google and it loads more images, they will still be affected. however i did not want other images that were already checked to be checked again. to fix this, i used the dataset attribute for custom data attribute.

finally after read read read cry cry cry, read read read cry cry cry,
IT WORKED?!?!?
yippee!!

TMI story but during the first version of this checking all the images i had to go do other assignments. when i pressed opened image in new tab, the images kept disappearing… it worked and i didn’t know… LOLOLOL only now then i realized it was the extension 😭😭😭😭 please save me

HELLO everyone.
This is my first chrome extension. I think it will be hard for me but let’s see. I first read the chrome documentation on how to create an extension. Then i followed the guide and got it set up. I’ve also create a small logo on figma. To be honest, I’m a little overwhelmed by this project but I will try to follow through.

I learnt how the manifest,json works and the different permissions. And also what permissions my chrome extension would need.