šŸŽØ WDC #7 Can you re-create Tom's "Candle or Kitkat" app?

Kitkat or Candle :chocolate_bar: :candle:

I spotted this fun game over on Twitter today and thought ā€œI could make this in Thunkableā€

Thenā€¦I had a better thoughtā€¦I thought that anyone should be able to make this in Thunkable!

So, Iā€™m going to make a version of my own tomorrow but posting about it hear first as a design challenge of sorts to see if anyone else wants to have a go at making their own?


Donā€™t forget to leave a ā€œlikeā€ on Tomā€™s tweet to show your support for his original idea. I was chatting with him there and wouldnā€™t you know it but heā€™s already a Thunkable user!

2 Likes

In the spirit of sharing, here are a couple of resources to get you started:

1 Like

Sounds like fun! Whatā€™s the deadline?

1 Like

Iā€™m going to try to make a version tomorrow and then hopefully a short tutorial about it on Mondayā€¦soā€¦ Monday?


Alsoā€¦and completely not the point of this postā€¦ but how are folks doing in terms of top scores? :joy:

1 Like

8/10.

I was going to do something swipe-y with a dataviewer list, but custom views are refusing to stay centered. :cry: Maybe thereā€™ll be buttons instead.

4 Likes

I used to love playing You Donā€™t Know Jackā€™s ā€œDis or Datā€ game. This is similar. :slight_smile:

2 Likes

Iā€™ve made mine! Itā€™s called HogHouse, and itā€™s the same thing except itā€™s between Gryffindor and Slytherin(Harry Potter houses), and not Kitkat and Candles!

Screenshots:

Itā€™s not much but it was extremely fun developing it!

4 Likes

7/10 for me! And I am in no way familiar with KitKat flavorsšŸ˜‚

Oh wowā€¦ this is awesome @codeswept, and a really nice adaptation of the original idea.
I know a lot of Thunkers will be interested in the spinning wheel too - can you tell us a little more about how you made that part?

2 Likes

Thanks! The spinning wheel still isnā€™t fully developed. Iā€™ll share the code when(and if) I manage to finish it.

3 Likes

Just looked it up - looks like a lot of fun actually!


Amazing, thanks!

Iā€™m not quite done but still wanted to share what I have so far. The timerā€™s not resetting properly, fyi. And youā€™re missing the sound effects in the video but anyway:

Sports Team or Endangered Animal???

2 Likes

Iā€™m almost done with actual Candle vs KitKat, but yaā€™ll are so much more creative!

3 Likes

Thatā€™s some cool work, @tatiang !

2 Likes

I thought Iā€™d be done by now, but Iā€™m hitting a bug. The first screen looks exactly how I wanted it to look, but that ā€œletā€™s playā€ image doesnā€™t work yet. The second screen shows what happens when I add a ā€œWhen Image2 clickedā€ block. Everything goes wonkus. Help??

Yes, itā€™s definitely the when clicked block, even with no actions in it, because as soon as I delete it, the ā€œletā€™s playā€ image snaps back to where it should be.

ARRGH. How are other people dealing with this sort of problem? I donā€™t know Thunkable well enough yet to know how to work around it.

2 Likes

Thatā€™s a bit strange. I can see the ā€œLetā€™s playā€ block on the right screenshot. Itā€™s just really small and way off to the right. A ā€œWhen Image2 clickā€ block wouldnā€™t normally affect the size or position of an image component. Can you post a screenshot of that set of blocks?

image

Thatā€™s the only set of blocks on the screen. If I delete it, Letā€™s play goes back to where it should be. Thatā€™s on an iPhone SE (the little one). If I use my daughterā€™s iPad, itā€™s still in the wrong place (not centered where it should be), but at least it is on screen.

Hereā€™s the project: Thunkable

When I Live Test the project, the ā€œLetā€™s Playā€ image is tiny and aligned to the right whether or not I have the navigate block connected. I donā€™t think that has any effect on this issue. Sometimes the preview doesnā€™t update right away so you might think itā€™s having an effect when it isnā€™t.

Thereā€™s something else going on and I canā€™t find whatā€™s causing it. I thought there must be a property (sizing, spacing, etc.) but I donā€™t see anything obvious that would cause that.

Edit: Although ā€œfill containerā€ should work for the width, it seems to be misaligning your image component. Try changing it to a relative width of 100%:

image

Iā€™ll try that. May I ask what youā€™re testing on? Iā€™m on an iPhone SE (the 5S form factor one).

It seems like Iā€™m having a lot more trouble with layout than others, and I wonder if itā€™s a small screen gremlin. Still, it is the wrong size for you alsoā€¦?

I just tested it in a browser (Chrome) on a Mac. I didnā€™t try it on my iPhone.