strings are strictly equal but, comparing against context provided value nulling equality [7:09am]

[frankcollins3]

https://github.com/frankcollins3/fill_container/assets/73137934/682c254b-c618-48b0-9633-d61710e2949a

the issue is with this line of code: http://localhost:3000/water_img/mouse_droplet.png Captcha.tsx:33

const { bg, mouseDroplet, mouseWaterCup } = useImage()

if (event.target.src === mouseDroplet) {

the issue is that the src does equal mouseDroplet. They are the same but the variable reference seems to be interrupting that it's being compared to the string

this looks to be the deal with Context

proposed approach: regex to remove the characters /water_img/ and beyond. Already have one.

in normal case without regex:

let myshirt = 'myshirt' let alsomyshirt = 'myshirt' 👍 if (myshirt === alsomyshirt)

these would match in another case. This issue has the exact same thing going on as [myshirt === alsomyshirt] : except there is no match for equality and this below condition never expresses:

        const CaptchaClick = (event:any) => {
            console.log('event')
            console.log(event)
            console.log(event.target)
            console.log(event.target.src)
`            if (event.target.src === mouseDroplet) {`
                RESET_INCORRECT_LOGIN_ATTEMPT()
            } else {
                $('#drop').addClass('boop')
            }
        }

[frankcollins3]

this doesn't work even though they are strictly equal. mouseDroplet is the img of the src. 👎 if (event.target.src === mouseDroplet) {`

regex from context: MprePng: /(.+).png/, APIsplit: "***", 👍 MimgSrc: /\/water_img\/(.+)/

after applying that regex which pulls all characters after and including /water_img/

        const CaptchaClick = (event:any) => {

            const CaptchaPromise = new Promise( (resolve:any, reject:any) => {
                let target = event.target
                let src:string = target.src
                console.log('src')
                console.log(src)
                let matchSrc = src.match(MimgSrc)
`👍                 resolve(src = matchSrc ? matchSrc[0] : target.src)             // regex`
            })
            CaptchaPromise
            .then( (src:any) => {
                console.log('src from the promise')
                console.log(src)
`👍                 if (src === mouseDroplet) {`             // same exact strings as above which don't work
                    $(event.target).css('border', '5px solid hotpink')
                }
            })

if this was an image as a variable and another local to component declaration they'd be equal. Have to separate concerns of the {mouseDroplet} img which is an object key technically.

[8:40am]