Spin wheel game

Dears, is there a way to make spin wheel like this one by hype

1 Like

thank you so much

Dear aficionados and js-savvy connoisseurs of browser-based games

I'm now facing the same challenge as @haythamfarid
Looks like I've spotted the basic building blocks for a similar Wheel game:

Any tips @jonathan or guidelines (maybe they already exist on this forum and I have overlooked them?¿) on how to incorporate those js snippets into Tumult Hype?

Another derivate source here:

They are definitely working building blocks of the Spinning Wheel of Names -game but for a visual designer they make not much sense without a step-by-step guide on installation procedure to make them work inside Tumult Hype.
Is there a standardized procedure for installing similar third-party building blocks of js-based games a visual designer with an entry-level knowledge of JS can follow? Or is it something more complicated and case-sensitive with a need of hype API etc. advanced js-coding knowledge and varies from case to case so not as straightforward as I imagine it to be ?

copy and paste the html of the fiddle into a hype-rectangle (edit innerHTML) and copy paste the js to a hypefunction, run it on sceneload ... you should be mostly done ... i'd guess ... ah and include jquery-library, which is used ...

1 Like

The basic flow @h_classen responded with is usually the best starting point, but the unfortunate reality is a lot depends on the code used itself on where to place it. So there's no sure-fire method. Secondarily, placing javascript in the "On Scene Load" handler is the easiest route, but if you wind up with multiple scenes you often need to take special care to make sure it isn't run twice or loaded/unloaded appropriately.

If you don't need any real interaction between it and the Hype document, often the easiest route can be making a basic .html webpage and then using an HTML Widget (iframe) that simply references it.

1 Like

Thank you @jonathan for your reply. I was hoping that your easy-to-follow step-by-step guide would work for most other cases, and also for this Spinning wheel of names -game:

in addition to your general guidelines for using javascript:

Hi @h_classen
Thank you for pointing out the direction of installation of those game building blocks from jsfiddle.net/bramp/94jP6 So far so good, but Hype doesn't render the wheel (div id) though.
The wheel object is a canvas element '<canvas id="canvas" width="1000" height="600"></canvas> which Hype doesn't seem to support. Is there a way to convert canvas element into a format that Hype would render @jonathan natively, would it? I hope that iframe

is not the only viable option in this case?
My test: wheelofnames.hype.zip (17.5 KB)

wheelofnames.hype.zip (17,9 KB)
the script used a jquery-plugin-code (tsort) ... i disabled it ...


there's no canvas to html-element convert ... only to DataUrl, image ...


Now we're talking! Thanks a lot @h_classen for tuning in into this.

@MaxZieb's circular slideGesture.continueAfterDrag would work well for the wheel I think. Especially if you want to spin it by clicking and dragging. Hype Action Events - #19 by MaxZieb