search

realm-of-ra / mancala

https://meowing-anteater-cee.notion.site/Mancala-Game-MVP-7521e2f2e5294575b33b17601afde810
MIT License
9 stars 23 forks source link

added the volume modal display in the gamesplay #102

Closed Dprof-in-tech closed 1 week ago

Dprof-in-tech commented 1 week ago

image I'm done with adding the volume controls across the gameplay screen.

closes #28

vercel[bot] commented 1 week ago

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

Name Status Preview Comments Updated (UTC)
mancala ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 23, 2024 0:28am
mancala-pkco ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 23, 2024 0:28am
supreme2580 commented 1 week ago

Hi @Dprof-in-tech I am currently reviewing your PR and I noticed a few things

This is how the figma design looks

image

This is how it looks from your code

image

A few things are off, namely

Also in the code, this 

< style> {
    `

    /* Custom styles for the input thumb */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 0;
        /* width of the thumb */
        height: 0;
        /* height of the thumb */
        background: transparent;
        /* thumb background color */
        cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
        width: 0;
        height: 0;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    `
}

< /style>

This isn't acceptable in the gameplay.tsx do this in the index.css file instead

Dprof-in-tech commented 1 week ago

Hi @Dprof-in-tech I am currently reviewing your PR and I noticed a few things

This is how the figma design looks

image

This is how it looks from your code

image

A few things are off, namely

  • The mute/unmute button is tiny and too far away from Playing - Storms in Africa

  • The chevron arrow indicating whether the volume change popup is open or not is not point up/down based on the state of the popup (open/close)

  • The entire field should be clickable not just the chevron arrow

  • The cursor type for the entire field should be pointer not just for the chevron arrow button

  • The volume track pad cursor type should not be pointer it should be grab

  • The thumb of the track pad color should be #FCE3AA and the track should be #E48D32

  • The volume icon is also tiny and incorrect

  • The color of the volume icon should be #FCE3AA

  • The control buttons should have cursor type pointer

  • The background color should be transparent but blurred

Also in the code, this 


< style> {

    `

    /* Custom styles for the input thumb */

    input[type="range"]::-webkit-slider-thumb {

        -webkit-appearance: none;

        appearance: none;

        width: 0;

        /* width of the thumb */

        height: 0;

        /* height of the thumb */

        background: transparent;

        /* thumb background color */

        cursor: pointer;

    }

    input[type="range"]::-moz-range-thumb {

        width: 0;

        height: 0;

        background: transparent;

        border: none;

        cursor: pointer;

    }

    `

}

< /style>

This isn't acceptable in the gameplay.tsx do this in the index.css file instead

Okay Let me work on these corrections as fast as possible

supreme2580 commented 1 week ago

Okay great

Dprof-in-tech commented 1 week ago

hey @supreme2580 I've made the corrections based on the comments above

Also according to a video of the volume screen prototype shared in the telegram group some time back, the chevron arrow has a state of up when open and down when the screen is closed. I have removed this for now, but it is only down right now.

supreme2580 commented 1 week ago

Hi @Dprof-in-tech I just reviewed your PR again, just one more observation

https://github.com/realm-of-ra/mancala/assets/100731397/d96df50f-7bfb-459f-a32a-3054862508bc

When I touch anything on the popup it automatically close after, the issue might be this

{/* End of game board */}
          <div className="flex flex-row items-center justify-between w-full mt-10">
            <div
              className="relative flex flex-row gap-2 items-center justify-center border border-gray-800 rounded-full py-2 px-4 cursor-pointer"
              onClick={toggleDropdown}
            >

being the parent of the popup this

{isDropdownOpen && (
                <div className="absolute bottom-20 left-[7%] bg-transparent backdrop-blur-md rounded-md shadow-lg px-6 py-4 z-50 w-[240px]">
                  <div className="flex items-center gap-1 justify-center">
                    <img
                      src={playprevious}
                      width={30}
                      height={30}
                      alt="toggle play previous"
                      className="rounded-full cursor-pointer"
                    />

So because the popup is a child of the toggle controller when you click on anything on the popup you are triggering the toggle popup controller

Dprof-in-tech commented 1 week ago

Yes that was why according to the prototype I had made only the arrow clickable because I was using a toggle function

On Fri, Jun 21, 2024 at 5:45 PM Supreme Labs @.***> wrote:

Hi @Dprof-in-tech https://github.com/Dprof-in-tech I just reviewed your PR again, just one more observation

https://github.com/realm-of-ra/mancala/assets/100731397/d96df50f-7bfb-459f-a32a-3054862508bc

When I touch anything on the popup it automatically close after, the issue might be this

{/ End of game board /}

being the parent of the popup this {isDropdownOpen && (
toggle play previous So because the popup is a child of the toggle controller when you click on anything on the popup you are triggering the toggle popup controller — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you were mentioned.Message ID: ***@***.***>
Dprof-in-tech commented 1 week ago

I could put back the toggle function to the chevron arrow

Dprof-in-tech commented 1 week ago

@supreme2580

i updated it so that only the chevron arrow toggles the volume bar display

supreme2580 commented 1 week ago

Checking it out

supreme2580 commented 1 week ago

Hi @Dprof-in-tech The issue of touching anything on the popup closes the popup still persists, also it'll be cool if the popup and storms in africa width are the same

Dprof-in-tech commented 1 week ago

Ok, I'll check it out.

On Sun, Jun 23, 2024 at 11:11 AM Supreme Labs @.***> wrote:

Hi @Dprof-in-tech https://github.com/Dprof-in-tech The issue of touching anything on the popup closes the popup still persists, also it'll be cool if the popup and storms in africa width are the same

— Reply to this email directly, view it on GitHub https://github.com/realm-of-ra/mancala/pull/102#issuecomment-2184931328, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3W3TPNGQN6WVFYSWKPYRUDZI2NMDAVCNFSM6AAAAABJTU53A6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBUHEZTCMZSHA . You are receiving this because you were mentioned.Message ID: @.***>

supreme2580 commented 1 week ago

The issue of it closing everytime anywhere else is clicked is now fixed, but clicking the entire Playing - Storms in africa does not open the popup only the chevron arrow does

Dprof-in-tech commented 1 week ago

Unless I modify the toggle function to match this

Do you think I should do that instead of the toggle button that is a one way click of open and close

On Sun, Jun 23, 2024 at 12:23 PM Supreme Labs @.***> wrote:

The issue of it closing everytime anywhere else is clicked is now fixed, but clicking the entire Playing - Storms in africa does not open the popup only the chevron arrow does

— Reply to this email directly, view it on GitHub https://github.com/realm-of-ra/mancala/pull/102#issuecomment-2184950097, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3W3TPLZOEBAWPDEGIFCRADZI2V3XAVCNFSM6AAAAABJTU53A6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBUHE2TAMBZG4 . You are receiving this because you were mentioned.Message ID: @.***>