Tinting Specific Sprite Frames in Phaser

[Shortstuff81000 0]

I am creating a Bejeweled game using Emanuele Feronato's awesome prototype; Match 3 Bejeweled HTML5 prototype made with Phaser – detecting combos. I created my own grayscale graphics in Photoshop, made them a little bigger, increased the grid size of the game, and used some code from his HTML5 Dungeon Raid tile engine made with Phaser – Part 4 tutorial to make the game scalable.

I used Phaser's sprite tint property to color my jewels. They look awesome all randomly colored like that, but it is difficult to make matches on just shape alone. How would you tint specific frames a certain color? I will have made a great leap forward in my game when it can do the following:

• Select seven out of 13 color options
• Select seven out of 49 sprites in the Jewels spritesheet. I used the same layer style in this original. It doesn't look bad, but I think different styles of jewel as well as having the shapes all tinted the same color will make matches easier to see. The sprites should all be from different columns. For example, if the first sprite selected was the star in the top left corner of the image, the next frame should be a hexagon or other shape from a different row.
• Once the different frames have been chosen, the game should apply the chosen colors to to the chosen frames of my spritesheet.

I have attached my code. I appreciate any help you can give. Thank you all very much!

CatsTreasures.zip