clear canvas from a parent component

[fresh spear]

hi
i'm trying to make a game with solid + html canvas
i want to be able to draw/clear the canvas from a parent "game" component (the "game" component should manage basically everything)
how can I do that
(if the "game" component idea is bad, let me know and what I can do diffrently please)

also it would be nice if you ping me when you reply 🙂

[sick gull]

are you asking basically how to "send events from parent to child", or to call some function that child component exposes?

[fresh spear]

basically send events yea

and that the parent "game" component is the entity that sends out events and stuff

[sick gull]

only one "canvas component" I imagine?

[fresh spear]

yes.

[sick gull]

there are various ways
for example if there is only one child:

const Child = (props: {setCallback: (cb: () => void) => void}) => {
  props.setCallback(() => {
    // handle event from parent
  })
  return <></>
}

const Parent = () => {
  let callback: () => void
  return <Child setCallback={cb => callback = cb} />
  // then you can call callback()
}

but as you see that is a bit annoying to do. also it might be a hint that the structure of your app is wrong.
as usually you make components because you don't want to explicitly call something
Like if child needs to be aware of parent, and parent of child, why make them separate components at all
you could just separate them to different functions if you want to keep the locality

const createChildState = () => {
  // some child state

  return {
    callback: () => {/* hande the event */}
  }
}

const Child = (props: {state: ReturnType<typeof createChildState>}) => {
  // use the state to render what you need
  return <></>
}

const Parent = () => {
  const child_state = createChildState()
  return <Child state={child_state} />

  // then call child_state.callback()
}

You might also use something like a pubsub, where you send event from higher up in the tree, and listen to them lower
But thats more for when you have multiple child components, and you don't manage them directly
https://github.com/solidjs-community/solid-primitives/tree/main/packages/event-bus#createemitter

Also I'm curious how are you using solid reactivity together with a canvas to make a game.
From my understanding you don't benefit much from the reactivity when you redraw the scene on every frame regardless.

[fresh spear]

well this is the tree of components (i'm making a clone of the chrome dinosaur game)

game (parent component)
|
---- canvas (will handle all drawing)
|
---- dino (the dinosaur)
|
---- cactus
|
---- ground

and im sorta new to web game dev so i dont really know the "best practices"

[hybrid imp]

Also I'm curious how are you using solid reactivity together with a canvas to make a game.
From my understanding you don't benefit much from the reactivity when you redraw the scene on every frame regardless.

One of the things I like about signals and rendering in the canvas is that it's trivial to do render-on-demand: createEffect(render) and u good to go basically. Idk if it's a good reason, but it's satisfying ☺️

Also mb interesting for you @fresh spear https://github.com/bigmistqke/solid-canvas lil experiment I did half year ago for making a solid renderer

[fresh spear]

oh thanks ill try it

[sick gull]

Wouldn’t you want to do rendering in a animation frame though? if not then yeah I guess signals work well

Like you still want to redraw everything, even if only one part changed, so why not have only one any_change signal.

Although memos are still cool. otherwise thinking what needs to be recalculated and what not could be a pain

[hybrid imp]

Haha ye it's in a very rough state, so mb don't get ur hopes up haha 🤣 docs r pretty out of date too, just so u know

[hybrid imp]

For this game, most likely yes, but with a more thurn-based game it would make sense I think. Or p.ex if you would have an illustration that has a small animation at some point but is static for the rest.

It's kind of handy that you don't have to think about it. Nice DX.

I think w solid-canvas I eventually had the rendercall in a batch and debounced so it wouldn't overrun. I remember it performed great in my tests, definitely not worse then requestAnimstionframe.