Is it possible to create something like a component?

[marceloreborn]

Hi!
I'm new to JS gamedev, but I had a good experience in Flash/AS3.
So, I'm starting a board game, and I need to roll a dice/roulette every turn. A kind of window will appear over the board and the player will be prompted to click the roulette. It will return a value between 1~9.
What I have until now is ths: https://jsfiddle.net/snake/m317ona9/

As you can see in my code, I'm using create() and update() methods just to create this example. In real game it wouldn't be handled like that, but in middle of game.
I have not so much ideas on how I can make a nice architecture in my code.What I have in mind, with my current small knowledge in Phaser, is to make a lot of conditions to manage states in game loop. The final code would be a maze! 

The perfect case for me: Create a function which would treat this roulette as a component or something like it, maybe with his own create and update methods, and returning a value to the game, so I can reuse it without the need to mess up my code.
Hope I've made myself clear
How can I proceed with it?

Thanks in advance!

[WombatTurkey]

Well, if you have sufficient knowledge in AS3.. You could probably just create a beautiful roulette in flash and then use it as an overlay ontop of Phaser.  Phaser is more of a game development framework than a editor, or in this case, a movieclip one. Although it's possible using shaders, etc... but... that I cannot help you with

[marceloreborn]

I think I didn't explained well. I'm talking about reusing my code. Going to edit it
Kind of I could create my own components, to make easier to usem them in medium to big projects.
 

[WombatTurkey]

3 minutes ago, marceloreborn said:

I think I didn't explained well. I'm talking about reusing my code. Going to edit it
Kind of I could create my own components, to make easier to usem them in medium to big projects.
 

It seems like you just need to add a game.input down event on the sprite so it randomly picks the roulette number? I'm sorry if I misunderstood 

[Tom Atom]

3 hours ago, marceloreborn said:

I think I didn't explained well. I'm talking about reusing my code. Going to edit it
Kind of I could create my own components, to make easier to usem them in medium to big projects.

 You can create your own classes and use them from project to project. For example if you create class that inherits from Phaser.Group, its update() method will be called if object of this class is currently in scene graph.
 I am usually leaving only "top" state logic in class with state, like building scene form sprites, groups or my own more complex components (that again are built from other gameobjects) or checking game state (win / loose).

 In your case, you can create class derived from Phaser.Group. In create() create instance of this class. To handle input there is lot of options - pass input to it in update(). Or create it like it reads input by itself and then it sends some signal to (all) listeners (Phaser.Signal), ...

[mattstyles]

You certainly can create "components", either tied to Phaser or without, a neat component would allow you to put any rendering engine in front of it i.e. you could have a component that defines the base behaviours of that component but allows you to attach stuff like Phaser.Sprite or Phaser.Group or whatever, if you got it absolutely right you could attach different engines on to it to allow it to work in different environments, but, to be honest that kinda sounds like more work than it is worth!

As a piece of advice, try to make sure your component is as self-contained as is possible i.e. if it relies on another class in your app then it is not really a reusable component as you have created a tight coupling and if you wanted to reuse the code you'd have to maintain that coupling. Often components do need to rely on other components, but that is where a well-documented and carefully considered api allows interaction to occur between components.

Creating reusable library code is a slightly different discipline to creating business logic for an application, for a start library code generally needs to be more robust and resilient to error as you can't always plan for every eventual use case for your component—this is where the unix philosophy of creating very tightly scoped components (do one job and do it well) is very useful, a more complex component can then be an amalgam of simpler components. Try to think in terms of what inputs your component takes and what behaviours (or outputs) it generates i.e. this often equates to carefully considering what arguments should be supplied to a constructor or any mutative functions and what side-effects your component produces, ideally there should be very limited side effects (preferably none).

[marceloreborn]

@Tom Atom, this is exactly was I looking for. 
Found a good example here: http://phaser.io/examples/v2/sprites/extending-sprite-demo-2

I was so tired that I couldn't explain it well. Thank you all!