F3rro32

Okay, so I fixed small bugs and fixe the UI, because some elements were out of place

i continued working on the project. I wanted to make a quick check for watching if pings where actually working. So I used the 127.0.0.1 address, and as you can see in the docker logs, it’s status it’s online, so it’s working fine.
I also worked on the UI, as you can see, in the hosts page I added filters.
That’s pretty much it, I’ll now make other little details, and I’ll be done pretty soon.

So, I added hosts page and also hosts/slug page. The first page contains an overview of all hosts, as you can see in the image there is the name, the ip, the status. You can either delete the device, or view more details, going to the page hosts/slug. As you can see, there are further details, and you can also edit the various fields, as you like.
Btw, I know there are the 3 buttons all, Online and offline, they’re filters, I just created them to have an idea of the content, I still have to stilify them and fix them (making them work properly).

I continued working on the dashboard. As you can see in the image, I generated a logo with gemini, I still have to fix it, but for now it’s okay. I implemented the sidebar (for now It’s without routing), added account infos. I also added logout button, which redirects to /auth/logout. This file get’s the cookie and with a POST to directus invalidates the sessions, and then I delete the cookie.
In the dashboard I also implemented a rapid overview, with some basic infos.

Added also register page, very similar to login. I have still some issues with margin-bottom, I’m fixing this ASAP. I also implemented the “service” called register.ts (contained in the folder api).
It does basically the action of registering (it collaborates with backend).
I’ll know start working on dashboard.

Fixed everything and made login working. Since I use directus, the login it’s pretty simple. I save the token in a cookie, that last 24h.
I’m now focusing on frontend, but I first needed to fix some minor bugs on backend (for example I called a field in directus ip, and then in backend, ip_address).
I also discovered something new. In Astro there isn’t real “gaurds”, like angular, so I created a file called auth.ts, that contains a simple funciton requireAuth for being able to avoid peopel entering the page if not logged.

Finished working on backend. I created another collection in directus, called alerts.
I then added api folders, containing the endpoints, and also swaggerUI, for helping me managing the API better.
I also added worker, which is the application that ping devices and manages all the rael backend of my application.

Fixed stars not working - Enhanced event listeners for star rating system
Fixed draft saving - Corrected destructuring syntax in triggerAutoSave()
Fixed Drive sync - Added missing space in Authorization header (Bearer instead of Bearer)
Fixed rating detection - Added :checked selector to properly read selected scores
Fixed dark mode toggle - Changed from getElementById to querySelector for correct element selection
Fixed AI suggester - Changed baseline score from 0 to 5 for more sensible recommendations
Fixed preview panel visibility - Updated CSS styling with blue gradient for better contrast

Added nice effect with images when choosing a drink

Continued with the project. I finished the basic config of directus, with all db infos.
I started coding a bit the frontend, with Astro, to just have at least a page working decently.
I then focused on the worker, which is the deputed to pinging devices and managing hosts along with directus. I clearly added a Dockerfile for it too.
Stay tuned cause your home will be monitored easily

I just finished the bot, it’s now working.
As i said in earlier devlogs, I cant stream songs, because yt blocks anything that seems like a bot.
I came out with a nice solution. I added a folder containing just a few songs (if you guys need, I can add more), where you can test the bot. If you like it, you just have to host it yourself, the instructions are all in the README.
Good listening!

Added setup distribution.md, which explains clearly how to use correctly the extension.
It’s 99% made by AI, since, as I said in other devlogs, I hate doing docs.

Finished the project for now, I still have to test some things, but the main part is working.
I did also the README, so everything should be alright.
Tomorrow I’ll test it out correctly so I hope it works.

Finished working on the code.
Now I’ll just have to fix some bugs with google Console, to make it work seriously and test the extension out.
I’ll first do the readme
Vote.

Fixed some minor bugs and added (fake) ai suggester.
Vote with this and you’ll save a lot of time

Finished the html, css part, and started fixing some minor bugs in js.
The extension is working, I still have to fix some things and add
some nice features, but this journey is coming to an end.
I hope you’ll enjoy the final product

Finished option.js, so I completed all options threes, so options.html, css, js.
I’m proud of my work, I’ll now focus on the content.css.
Stay tuned

Finished the service-worker and started coding some UI.
I’m focusing now on the options part.
Stay tuned, cause voting won’t be a problem anymore

Added first popup.html / css code, to see the extension working.
I also started working to the service-worker and mainly to the content.js.

Init project.
I created the structure and initialized some files, like the manifests and the content.js. Additionaly I started the popup.html
Stay tuned cause this extension will be peak

Configured server on #nest.
I used https://vinylbot.alessio.hackclub.app as domain.
I had to configure the reverse proxy, I struggled a bit, but then everything worked out.

Added drink and drinks commands for managing daily caffeine assumption.
I also improved the UI and added Notifications for the end of sessions.
Finished the README

Improved a bit the UI and the general style. Since I have to fulfill the 10h quest, I decided to go back to CSS (It’s been so long since I wrote a single line, and doing it again it’s pretty exciting).

Added weekly command and profile
The first command shows a resume of the week, with also barchart.
The second command instead shows the complete profile, with also a stats part.
Stay tuned cause the release it’s near

Added stats command, which shows stats of every user. I calculated the number of total sessions, the total time (via the singol session, I add to a record), the average. Also by day and week.

logout

Added some nice commands.
You can now login (with email and password) and also register. This will log you in in firestore, where I manage sessions and users, to have a persistence of data.
I also added some music commands. There are three types of music, all generated by AI (it’s just some frequencies, nothing exciting). I also improved part of the code.

Improved some minor things. Added music command.
The music it’s just frequencies, so nothing exciting, but are like ‘white noises’ and such things, and I know they relax and help people studying / concetraiting (I dont get how)
Added pomodoro sessions, with command pomodoro
I also decided to add firabse with firestore. This will help saving sessions and tasks all over different devices.
Of course you’ll need to authenticate before using this service. The auth will remain in terminal style.

Added some commands, and improved a bit the UI.
The commands I added are:
add [task] with this you can add a task. When you start a timer, the tasks will be displayed.
done [n] completes a determined task
todos shows all tasks
theme [color] allows choosing between 5 different themes.
I also added autocompletion.

Added nice ascii art.
Also added arrow Up and arrow Down commands history.
Now I’ll improve the general app and add new content.

Started project.
Added initial file configuration and general structure.
I’ll do a SPA, without routing.
Added two services, for managin timers and interaction with users.
stay tuned and drink more monster

added a progress bar to the missing-cards page

I’m sorry guys, I wasn’t able to fulfill my idea. The bot remains just local.
I’m so sorry for this, I wanted to fix this, but it’s impossible. Now I can say it: I lost the battle with yt.

I’m really sorry, but I think I’ll have to resign. I thought I could win the battle with youtube, using tools like https://github.com/YunzheZJU/youtube-po-token-generator and cookies generator, but that’s impossible. Yotube just won the battle.
I’ll have to give up on the deployment. While writing this, I really meant this words.
But now, now I have an idea. An idea, like the ones who come at night at 2AM.
Stay tuned because I will not surrender.

I’m completing my project, it will only take a few days and then you will have the product working.
For the deploy I decided to use https://railway.com/ with firestore for data.
I had to migrate the file database.js to firestore.js, to sync data on firestore. I decided that the leaderboard will be global, not server-wide.
I also had to fix some minor bugs, due to the change to firestore.
Stay tuned

Started working on this project. This devlog it’s just for “advertising”.
Further more information will be given in a while, stay tuned cause this project will be outstanding.

Since the game is now working properly, I’m working on fixing the code and refactoring it.
I’m commeting some parts missing comments and fixing some small bugs.
I’m also improving some things in the code, like for example I added two commands (and two fields to the gameState), called /stats, /streak.
I’m also improving a bit the gameplay. I added some hints, which are given after 15 sec without anyone guessing the song.
I’m happy since everything is working, even if I changed approach so many times and I had to start some things From Zero (like the album by Linking Park).
Stay tuned, ’cause the bot is about to be public.

Here we go. Finally the game is working pretty well.
Now you can start the game, it goes well, it recognizes who wins. I also added some controls to not play the same song twice.
I also started adding some nice things.
I added some nice badges, based on the points a user get.
if (points < 5) return { emoji: '🌑', name: 'Novice', tier: 1 }; if (points < 10) return { emoji: '💿', name: 'Scout', tier: 2 }; if (points < 20) return { emoji: '📀', name: 'Guitarist', tier: 3 }; if (points < 50) return { emoji: '🔥', name: 'Maestro', tier: 4 }; if (points < 100) return { emoji: '💎', name: 'Legend', tier: 5 }; return { emoji: '🏆', name: 'Immortal', tier: 6};
I also added some nice fields for each user. Now you also have a streak, a max Streak and nice things like that.

Guess what, I changed another time approach, but that’s okay, since now the bot is working.
I have had a few problems with docker for allowing the /auth, but I was able to fix it somehow.
As you see in the screenshot, now it starts playing a song, and you can guess it. Of couse if you guess it right, you get point in the database (I still have to fix some things, but the main logic is working).
I also added a “cleaning” to the strings of the names of the songs. As you see in the image, Come Together by Beatles, comes with a long title, also containing “- Remastered 2009”. I clean every time the string, so you just have to put in the “main” name.
I’ll now address the technical changes. This is how the game goes:
/quiz_start artist:Beatles
↓
spotify.searchArtist() → { id: '3WrFJ7ztbogyGnTHbHJFl2', name: 'The Beatles' }
↓
spotify.getArtistTopTracks() → [ 'Let It Be', 'Hey Jude', 'Come Together', ... ]
↓
Random choice → 'Hey Jude'
↓
YouTube.searchSong('Hey Jude The Beatles')→ gets the yt URL
↓
createAudioStream(url) → stream audio 20/30 sec
↓
Bot enter the voice channel and starts playing the song
↓
RoundHandler listens for the messages coming from the chat (internal of the voice channel)
↓
User writes "Hey Jude" → checkGuess() → true → point in the db!
↓
nextRound() → new random

I was finally able to make the bot connect with discord and then entry the voice channel. That’s a great accomplishment, since I had had a lot of problems with this. I’m so happy it finally worked.
Basically, what I did was adding some permissions to the bot (without them the VOICE_SERVER_UPDATE packet wasn’t working). I also started using docker. With docker I can change versions easily, since some libraries aren’t as updated as node is.
I’m so glad I finally managed to make this happen.
Now I just have to make the last thing happen, the music has to play. For now it isnt working, but I’ll find soon a solution.

I’m so happy since I’m encountering so many difficulties. I can’t even count them, they’re too many. I had another problem and I had to change approach. I abandoned the spotify quiz_idea, because, with actual spotify API, I had to add a user to the “whitelist” on spotify_apps; the max was 5 users, so not working for me.
I decided to use yt, for getting the audios. I decided to download just 20 sec of the song (using also ffmpeg) and then reproduce it. I first tried usign yt-dlp, but it wasn’t working. So I changed another time approach, and tried using @distube/ytsr. Nothing changed. I have to search for something else, but I’m positive.
A positive aspect is that I didn’t have to change many files. I just had to add a file for managing the interaction with the API, which I called YouTubeSearch.js. Then I just had to fix and replace some methods in GameManager.js and in RoundHandler, along with fixing the commands.
I’m founding a lot of problems, but I think I’ll be able to complete my idea, sooner or later.

Here’s a little update.
I was able to fix some minor problems. It’s really tough so far this part (the debugging part), since it’s the first time I make a bot. It’s challenging, but I like proving myself so I’ll try harder and harder every day till finishing this project.
The first thing I fixed, was the scopes of the bot on the https://discord.com/developers. It’s so easy to forget even a single permission; nothing works.
Then I fixed some minor bugs in the code, for example client.once('ready') this is now deprecated and become client.once('clientReady'). Small things, that matters so much in the entire project.
I then fixed other small bugs.
At least now when I try the command /quiz_start, the server responds, and the permissions are correct; unfortunately there’s still some issues, but I’m going to fix them soon.
Bye bye from vinylBot kitchen

Added Scorer.js and RoundHandler.js
The first just manages the temporarly scores of a game. Then it will be determined the winner, who’ll be given a point in the db.
The RoundHandler.js has just two methods (startRound, stopRound); basically it manages all actions in a round.
Updated the intents on https://discord.com/developers/applications.
For now the “music bot”, the one who just controls spotify , works pretty well. The “quiz bot” instead doesn’t work at all, so I’ll fix it.
I like encountering this kind of problems. They’re stimulating and help improve.
Stay tuned, cause we are closer to the end.

I’ve implemented the gameManager, which contains 4 functions for managing the entire game.
I then started coding the quiz.js. It contains the commands for the quiz; it’s similar to the spotify.js that I’ve made before.
The commands it will contain are:
/quiz_start <playlist_name> -> starts the game (for now I’ll accept only a playlist. I’ll figure out other options, such as artists, genres and other things like that, for now accept this :))
/quiz_stop -> stops the game
/quiz_skip -> skips the round (no one knows the answer so you just skip)
/leaderboard -> shows the leaderboard

I found a big issue, and I feel like it’s not the first I’ll find. My idea was to make a bot like jockie music, so when you “call it” it comes in your voice channel, plays the song, and you have to guess it.
It turns out it’s really difficult to do something like this with spotify, since it doesn’t allow “complete usage”.
My idea was using previews. Spotify allows to play a preview of the song (just 30 seconds). It’s enough for me, so I’m really lucky.
I wanted to restart everything, but to not waste my code, I decided that it will have two functionalities; the first, as the main idea, is the game, the second is that you can control your spotify (you must have PREMIUM) via ds commands, like the one I posted on the prev devlog.
I hope everything goes well :)

Made spotify js, with all commands.
The commands are:
/auth –> send the link to authenticate
/logout –> logs out
/play <song_name> –> plays a determinate song
/pause –> pauses the song
/resume –> resume the song
/skip –> goes to the next song
/previous –> goes to the previous song
/volume <volume_level> –> change the SPOTIFY volume
/nowplaying –> shows the current track

It wasn’t so difficult, since I tried to give recognizable names to the funcs and attributes, so it was easier to code this part.
I tried it out (for now it’s just local), and it worked really well.
Stay tuned, cause the main part is coming

I did the client.js. I’m happy I did it since it’s one of the most complex in the whole project.
It manages all spotify logic, impling authentication OAuth, token refresh, research and control of reproduction.
Stay tuned for further updates.

Init of project. Created the structure.
Completed index.js and tokenStore.js
Stay tuned for updates

Added README.
Made the app totally responsive (missing projects page)
Added vercel.json and configured everything needed for deploy on vercel.
Added favicon

Added al projects infos.
Added also repo and demo links

Added projects page

Added skills page

Added about page

Added a timeline and fixed the gerneral content.

Intialized project. Added the initial configuration, routes and all needed to make the basic website working. I made the home page. I liked the “terminal style”, so I tried to replicate a terminal. I hope it’s as simil as possible to a real one.
I also added SOCIAL, where you can reach me.

Improved UI.
In the home now you have simplier things, just explaining app functionalities.

Added all functionality for guets.
Now you can save your data on local storage. You have like a full profile, the only thing is that if you log out you can’t of course re-login.

Added guest login possibility (thanks for the advice).
Now you can login as a guest, save all your data in local storage. Clearly there’s no saving with firestore.
I’ll also update the decks saving, allowing also local storage saving.

Made the app finally responsive. Still the decks page is not adapted on smartphones, but I’ll figure out how to fix this.
The rest of the app is now responsive and working
Hope you like it

First working version.
You can find all of the infos for installing in the README.
Moved all the “new tab” logic to the popup, so you can access all links in the popup, without the annoying new tab problem.
Enjoy

Added first version.
For now it’s pretty uncomplete. There’s still a big issue. When you open a new page you just see the list of links. You’ll not be able to see the “normal” google/other engine page, unless you disable the extension.
Try it out.
New versions are coming.

Added two buttons under each card. You will set every card based on having it or not.
After pressing the button the missing cards only will be saved on your account, so you’ll be able to trade them and have a quick review of your missing cards.
There will be also a count of possessed cards.

Added your-profile page, where you can manage your profile, see the number of cards you posses (you’ll have to insert them manually) and also the missing cards.

Now login works. I used firebase and vercel for deployment.
I had some difficulties with firebase APIs (i had to set them inside of vercel)

Added login with firebase and google OAuth.
I will deploy the website on vercel to start using some functions.

Added info about a card when clicked on it after a research. Unfortunately the quality of the images is pretty bad, but it’s not my fault.
I created a componente called card-item to achieve this result

Added a nice UI in cards. The cards you see have a fan effect, so when you hover them, they become the first one in z-index

I finally was able to filter cards based on tgcp. It was pretty difficult, because the api doesn’t include an endpoint for searching a card from a determined series. I tried many ways and finally was able to fix this bug and get only tgcp pokemon cards.

Added a “fan” effect, so when you hover onto a card, it changes its z-index. The other cards are all behind the “selectioned” card

Added home. All functionalities you can do, various images and so on.

Added possibility to search a card, based on an expansion.
I will add a button so you can add the card in your missing card and then visualize all the cards you don’t have, so it’s easier to trade them.
This will be saved in a databased linked with the user account.
Unfortunately there isn’t any possibility of directly linking your pokemon pocket account, so you’ll have to add manually all the cards and then also remove them when you got them.

Completed the collage/poster. I still have one problem. I’m not able to like cut the images so they stay in the main page and don’t need extra space, like you can see frome the two horizontal and vertical bars.
I appreciate any advice.

Adding a nice “poster” containing some of the packs of the game.

Added some boxes, generated by an array containing the id, and the name of the expansion. When you click on the box, you can see all the cards of the expansion.
Still to add prettier style.

Implemented the expansion details page. Here you can search for an expansion and then see all the cards.
I want also to add a function, so when you click on a card there’s all the information about it.
Still to add the search bar to search for an expansion (for now you have to search also by ID, so I’ll have to implement something to convert that id into the name)

Added player to the game.
On the right there will be the “Ai bot”, while on the left will be the player.
For now I haven’t managed the rigidbody and collision on player and also on ball.

Added the search bar with logic to search a card. For now it searchs in all the api. I’ll fix this and just consider pokemon pocket cards.

Added the search bar.
Also added a poster. There’s a nice effect; when you hover the cards they become bigger.
When you’ll search for a pokemon this poster will be replaced by a grid of cards with the name of the pokemon you searched (ex, full-art, shiny, …)

Just quite finished to implement all the field for my game. For all the circles I used code, so it was a bit difficult, since I drawed all of them by myself. I know I could have used simpler things but I wanted to try and I did it. Still to fix the corners.

Finished the initial menu, where you can choose the flag you’re going to use in the game and start the game, against the CPU (I’ll implement a sort of bot which plays against you and maybe it increases it’s “strength” when you’re good at the game, so it has like e 3-4 levels of strength).
Now I’m implementing the main game.

Prepared the menu scene. Here you can select a flag (managed via a button) and, after that, start the game.
For now it was pretty easy, I just had to remember things I did many time ago, but everything was good.
Stay focused for the “Game scene”, which will contain the real game.

Added a search-bar in the page ‘cards’. The search-bar is managed in a component, so its reusable.
When you type a pokemon it return a grid of cards taken from the game ‘pokemon pocket’.
Still missing style and images.

if you guys want, I have a playlist with lots of songs that help me concentrate and kind of “trigger” my brain, so when I listen to it, I enter in a focus state

https://open.spotify.com/playlist/7mQliCHTzzjXXMxa6bTUQT?si=18ae60491c67435d

Added NavBar and initialized all the angular project, with the pokemon SDK implemention, tailwindCSS, routing for the pages and creation of all components / services (for the SDK).

Today I started the project, I’m excited to do it.
I’ll be coding all day long so stay focused, cause nice things are coming.
Greets