The latest updates on your projects. Learn more about Vercel for Git ↗︎

Legend

Can someone please give me feedback on why it has not passed all the tests?

Can someone please give me feedback on why it has not passed all the tests?

Hello, @Carlos-Carsdfj ! Interesting contribution, was thinking to poke at the music player's aspect in the next milestone, v0.5 (codename Chimera).
Don't worry about those checks, they're very problematic. I will test this in a bit and provide you with feedback.
I like it overall, though I have a few ideas that shouldn't be too hard to implement and would push it further, but if you're not up for making tweaks, that's fine as well and I can open new issues to build upon this :)

Thank you for answering so quickly. I already understand that there are problems with ls test. I have no problem implementing that ideas, if they are very complicated I can do it tomorrow in my free time

Thank you for answering so quickly. I already understand that there are problems with ls test. I have no problem implementing that ideas, if they are very complicated I can do it tomorrow in my free time

No problem. Sounds good, no huge rush, as nobody is poking at the audio related code right now, but if you manage all the stuff within a week or so, that would be awesome. Opened a review with some basic stuff under the hood.

Regarding the audio player's aesthetics, div within div looks somewhat bad, at very least the player div should be moved outside; could have the playlist div more narrow to match width, we'll need some left/right side screen estate anyway to showcase the top backers and sponsors.

The "Music Song" text seems rather pointless, we should move "Shuffle" over there for a way nicer integration.

Bonus stuff: instead of using the current div, we could use this graphic as background (also used as button for materializing units):
https://github.com/FreezingMoon/AncientBeast/blob/master/assets/interface/long_button.png (doesn't have to be at 100% scale)
Always nice to have some more of that diversity between the elements of any screen instead of just repeating some of the stuff 😃

Your PR also fixes #1994 in the process. I've also opened #2085 to better keep track of things and also provide a token bounty 🪙
Feel free to comment on the issue(s) in order to properly get assigned. https://github.com/FreezingMoon/AncientBeast/wiki/Token

More stuff regarding player visuals if switching to using the background in order to take things to the next level:

• more thick bar that will support current time / total time text on it (centered), easier to scroll with finger that way
• larger gap between timeline and the elements under it, less accidental clicks especially when using finger
• play button should be located in the middle
• the shuffle button should be on the left side
• shuffle button should be ideally displayed as an icon (with tooltip text as the icons from the score screen have)

Regarding icon for shuffle, perhaps one of these here (with transparent background, svg format):
https://game-icons.net/tags/dice.html - ideally this https://game-icons.net/1x1/delapouite/perspective-dice-six-faces-random.html

For the shuffle icon we could use "icono-sync" from it https://saeedalipoor.github.io/icono/ which is also pure CSS icon since you already use it for the other icons.

Do not add this image because it loses quality when stretching it, https://github.com/FreezingMoon/AncientBeast/blob/master/assets/interface/long_button.png

for the moment I will leave it until here when I have free time again this week I will do it and I'll try to find another image for the background another pr, I hope that it is better that way.
If there is any problem I will be waiting for your notice to fix it

Do not add this image because it loses quality when stretching it, https://github.com/FreezingMoon/AncientBeast/blob/master/assets/interface/long_button.png

for the moment I will leave it until here when I have free time again this week I will do it and I'll try to find another image for the background another pr, I hope that it is better that way. If there is any problem I will be waiting for your notice to fix it

Very nice progress, it looks quite clean, definitely great progress compared to the default player.
I see you went with the svg icon after all instead of icono; it's way more intuitive that way I guess.

The background image was meant to be kept at original ratio, just rescaled if needed. Thought that went without saying :D

Anyway, I looked at OpenGameArt and did a search, bumped into this again https://opengameart.org/content/fantasy-ui-button
We're already using a few UI elements from that user, so might as well use one of those images as background, way cooler / original and better aspect ratio. Also, we could nicely integrate the audio tags in the gaps left and right to that skull at the top, centered/capitalized. With this background it could even sit inside that playlist div and you could make it narrow to nicely fit this.

Hello ! this is the playlist update i hope you like it

Hello ! this is the playlist update i hope you like it

Heya! It seems we have some misunderstanding: the background is supposed to be for the player itself, not the playlist xD
It makes no sense at all to try to fit the whole track list into such a small space overall UX wise. The tags are good though.
Once the background is used for the player, the 3 icons inside could be enlarged a bit to be easier to click or tap with finger.

Ok, I pass the background to the audio player and leave the list as it was before?

Ok, I pass the background to the audio player and leave the list as it was before?

Yes, though the audio tags will go to the audio player using that new background, like you managed, as that part was progress 👍🏻

it looks better that way 😁

@Carlos-Carsdfj Looks pretty good! <3 One more thing to tweak for now, alignments:

• rock tag should be a little bit more to the left or have the epic tag a bit more to the left so that gap is similar
• the seek bar should be a bit more to the left (the / should be under centered under the goblin's chin)
• the play/pause button should be a bit more to the right (goblin's chin should be between the two lines)

After that I'll merge and send bounties 🪙 I'll open right away a few more issues regarding the audio stuff.

it can also be like this

@Carlos-Carsdfj Close tags are good, I know I originally said way more spaced out (in the middles of those gaps) but like this they read like "epic rock" and it easier to get from one to another. Timeline should still be a bit more on the left side so it has even gaps compared to the margins.

One more issue that I've noticed thanks to you screwing up at first and using the background for the play list part itself:
the background graphic should be used at a 1:1 scale ratio, no stretching or any distorsion like that, scaling up or down at most might be ok, but it should be avoided if possible; the thing is that the background has some fine details (close to being pixel art on the margins) and if you distort it (or possible even rescale) it tends to look somewhat muddy/blurry. So please poke at this so we can have those crisp details. Like I said, the player itself shouldn't be confined inside the div, even made different issue #2093
The idea with that is to detach the elements so that it's easier to have more fluid UI overall if possible. Perhaps 2 track columns might even fit under the player itself in some cases; we're also moving the "Effects Volume" to the side & place it vertically #2091

Leave a fixed size so that the player does not jump with the changes in the size of the parent div.

The button image had errors so that nothing was exactly in the center. so i fix that

I only dedicated myself to the player because I thought it would not touch the parent div or the playlist.

"the player itself shouldn't be confined inside the div"
I don't quite understand what you mean by that? you want that i use positions absolute?

if you resize the parent div the audio player doesn't resize

Leave a fixed size so that the player does not jump with the changes in the size of the parent div.

The button image had errors so that nothing was exactly in the center. so i fix that

Looked at the file, tried a zealous crop but it didn't work, had to remove the semi-useless shadows first.
I've attached the shadowless file with file size optimizations thanks to tinypng.com, so make use of it:

Eventually will just generate some ambient occlusion for the music player if needed, by duplicating the frame under, gray scaling it and blurring it, should be all possible to achieve that effect just fine using CSS3 nowadays, as it has some filters.
Will keep that in mind and possibly open a new issue just for that stuff soon if really needed and worth it.

I only dedicated myself to the player because I thought it would not touch the parent div or the playlist.

"the player itself shouldn't be confined inside the div" I don't quite understand what you mean by that? you want that i use positions absolute?

When I say the "div" I mean the styled frame that surrounds the stuff.

if you resize the parent div the audio player doesn't resize

It's a fixed size element and that's completely fine.
Looking to make the playlist itself adjust at some point, because the div for it is a 9 slice, meant to rescale nicely as needed.

I can try to fix the playlist in another pr, I had already fixed it before when I put the background image in the list instead of the player😅

I already add the image shadowless file thanks

@Carlos-Carsdfj Alrighty, did some tweaks and finally merged this. Sent bounty 🪙 along with a bonus 👍🏻
https://www.mintme.com/explorer/tx/0xdae2c81f281048b0c2b03053f4ebe831de11486ecd8125bda5cbaa0ec8babee8

Thanks a lot ! 😁 right now I don't have electricity in my house😔 I'm going to see the link to know how to collect the reward

Thanks a lot ! grin right now I don't have electricity in my housepensive I'm going to see the link to know how to collect the reward

No problem. Sucks not to have power. The XatteR is already in your wallet, those links are just the proof of the transaction.
I don't recommend converting XTR to $ or so atm, because of bear market and the token's high price fluctuation (based on demand and offer) since it's low cap, but it's good to study about it and see how things work. MintMe had a bug and removed all buy offers, though you can trade it the myPeppermint and 1000x at better rates, they're listed dex-es; ideally wait for bull market, MintMe 2.0 release and Ancient Beast v0.4 launch or hold as much as you can, as target goal for XatteR is $123 within 3 years.

Great, I will study that a little more thoroughly and I will keep it in the wallet, so can I ask you any other questions? I might get back to collaborating on the playlist or something else in a week in my free time

Great, I will study that a little more thoroughly and I will keep it in the wallet, so can I ask you any other questions? I might get back to collaborating on the playlist or something else in a week in my free time

Sure thing. Usually I'm on our Discord daily https://discord.gg/x78rKen
Cool, plenty of open issues, can really use more coding help overall.