SolidJS•11mo ago

I use set timeout everywhere for animation and state is that ok?

yes

6 Replies

gsoutzOP•11mo ago

Ok why can you be more helpful please.

Answers can't be very helpful if the question doesn't contain information. We have no way to know what problems you are facing that you feel the need to use setTimeout everywhere.

gsoutzOP•10mo ago

I don't face any problems, I am worried if I can get timing issues later otherwise it's cool. Maybe there is a system practice to use for this.

bigmistqke•10mo ago

In that case it's probably fine. I was reading your original question as that you were doing setTimeout(() => setState(...), 0) everywhere, as a hack to solve some state issues. With setTimeout (and anything async) you should just be careful that effects might not work as expected: see https://playground.solidjs.com/anonymous/ed7ff235-05d4-40df-8b4c-50e24e89adab will log only once.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

gsoutzOP•10mo ago

Here' let me dump you something:

    createEffect(on(() => shalala.add_uci, (uci?: string) => {
        if (!uci) {
            return
        }

        let pp = plies()

        if (pp > 0) {
          set_plies(pp - 1)
          let path = tree_lala.add_uci(uci)

          let ps = paths()
          ps.push(path)
          set_paths(ps)

          if (pp - 1 === 0) {

            begin_engines_turn()
            .then(_ => {
                set_engine_state('drop_fails')
                return new Promise(r => setTimeout(r, 1000)).then(_ => {
                    tree_lala.drop_failed_paths()
                    set_engine_state('idle')
                })
            })
            .then(_ => {
                set_plies(6)
            })
          }
        }
    }))

    async function begin_engines_turn() {
        let pp = paths()

        const p = pp.shift()
        if (!p) {
            return
        }

        const i = await tree_lala.tree!.request_ceval_and_get_at(p)
        const eval_accuracy = i?.eval_accuracy!
        if (eval_accuracy.accuracy > 70) {
            // good move
            tree_lala._solved_paths.add_path(p)
        } else if (eval_accuracy.accuracy < 60) {
            // blunder
            tree_lala.add_failed_path(p)
            pp = pp.filter(_ => !_.join('').startsWith(p.join('')))
        } else {
            // decent
            tree_lala._solved_paths.add_path(p)
        }

        set_paths(pp)

        await new Promise(resolve => setTimeout(resolve, 1000))

        await begin_engines_turn()
    }

    createEffect(on(() => shalala.add_uci, (uci?: string) => {
        if (!uci) {
            return
        }

        let pp = plies()

        if (pp > 0) {
          set_plies(pp - 1)
          let path = tree_lala.add_uci(uci)

          let ps = paths()
          ps.push(path)
          set_paths(ps)

          if (pp - 1 === 0) {

            begin_engines_turn()
            .then(_ => {
                set_engine_state('drop_fails')
                return new Promise(r => setTimeout(r, 1000)).then(_ => {
                    tree_lala.drop_failed_paths()
                    set_engine_state('idle')
                })
            })
            .then(_ => {
                set_plies(6)
            })
          }
        }
    }))

    async function begin_engines_turn() {
        let pp = paths()

        const p = pp.shift()
        if (!p) {
            return
        }

        const i = await tree_lala.tree!.request_ceval_and_get_at(p)
        const eval_accuracy = i?.eval_accuracy!
        if (eval_accuracy.accuracy > 70) {
            // good move
            tree_lala._solved_paths.add_path(p)
        } else if (eval_accuracy.accuracy < 60) {
            // blunder
            tree_lala.add_failed_path(p)
            pp = pp.filter(_ => !_.join('').startsWith(p.join('')))
        } else {
            // decent
            tree_lala._solved_paths.add_path(p)
        }

        set_paths(pp)

        await new Promise(resolve => setTimeout(resolve, 1000))

        await begin_engines_turn()
    }

What could go wrong? It's working currently. I don't so much care about smooth cancellable animations per say, but still nothing should break with this kind of setTimeout madness.

bigmistqke•10mo ago

(u can get syntax highlighting with

``tsx)
afaik u have to be careful with effects not working as expected after async boundaries, but i see ur already taking care of that with

on(...` you basically end up with dependency-arrays I am not sure how tito's example relates to async

Gaming

Programming

I use set timeout everywhere for animation and state is that ok?