Guess Who game

[davidVM]

Hello everyone!

My name is David and I like geocaching. My hobby is the reason for this post and I hope you can direct me in the right way.

I want to create a Guess Who game which should have following features:

• Cards are shown in a grid (doesn't need to be at random);
• User can flip a card from front to back (and from back to front) by clicking/tapping it;
• Flipping cards: the front should be an image (face) and the back the corresponding name and a code;
• If a user refreshes his browser the state of the cards (front/back) should stay the same (for 24h);
• A reset button for resetting all cards to the front state.

I googled for examples, but have difficulties in finding relevant information. 

Which language should I use? My initial idea was to use jQuery (and CSS/HTML) but I don't know if that's the right technology to save the states of cards.

And do you have interesting information/examples to inspire me? I have some knowledge and can probably tie the ends together.

Thanks in advance.

 

[mattstyles]

jQuery won't help with saving the state of the cards, but a DOM-based approach (as opposed to a canvas based approach that most games here adopt) would sound perfect for this sort of thing. The DOM makes laying out a grid reasonably easy, transitions to flip cards using CSS is also pretty easy, and its easier to get a responsive experience across different device sizes (and orientations) is easier with the DOM.

jQuery would be fine if you go that route, but, I'd suggest you don't need it now. Cross-browser issues are far less of a problem than they were so jQuery's usefulness is diminished. There are also better ways to structure a DOM based UI, such as React, Vue, multiple React-likes or Angular, but they will all require far more learning, you'd be fine for this project just using vanilla JS.

You can save state in the browser using a few different methods:

* Local storage is a key-value store, its very simple and supported in every browser

* Session storage is basically the same but deletes itself when you close the tab, which isn't what you want at all

* Browsers have better database options built in, either WebSQL or IndexedDB, these are very much like SQL or NoSQL databases you might be familiar with. Cross-browser support is sketchy

* You could even use cookies to persist data, but its awkward to use and for client-only storage it offers no benefits over local storage and is smaller and far harder to use

* You could even use file storage or cache storage but they're experimental and not well supported (yet) at all

However,

I really don't think local (any of the above) storage methods are going to cut it for you, they'll only get you half way.

Sounds like you want to change the data on a period, 24 hours?

You need to load in the initial state of all of the cards (the name and code), this means loading it from a server. Then you store the flip-state locally, probably with a timestamp. After the timestamp (24h) is reached, flip all the cards back again, then you need to load more data for the next day?

In theory, you could actually get away without a server.

The steps would be something like:

*  You could ship a version of your game,

* with the state of all the cards data baked in (hardcoded),

* On load you check your chosen local storage method for the card data and the timestamp

* If you don't find any then use the hard coded data and populate the local storage

* Each card has the data (this can be the hard coded data) and the flipped state (a boolean) in local storage

* As the user uses your game, you update the local storage flags

* On the next visit you start again from step 3

* If the timestamp is expired then flip all flags to false and proceed

* When you update the card data, you'd need a way to invalidate the locally stored data. This could be done by storing some meta (say, a version number) with your stored data, when you ship a new version of your app with new data you'd check that version number, if they don't match then re-initialise the local storage data and continue.

Make sure this data change does not confuse users i.e. if they're mid-way through a set of cards, it'll probably be annoying that they have now changed.

The alternative is to load that data in from a remote source, which involves setting up a server for it. This way you separate application and data, which is a good thing, but, it is a slightly more architecturally complex solution as you have to manage that data source and the server (api) that uses it.

Hope that helps a little

 

[davidVM]

Hi mattstyles

Thanks for your comprehensive post. It isn't a requirement to change the data every 24h, but I thought it was better to set a time limit to it. 

Anyhow with your comment I know I have to look for a DOM-based approach and I will look into this matter.

[mattstyles]

If you can get away without a server that'll make things easier.

If you can do client only have a look at now or netlify (there are others) that make deploying client-only stuff super super easy. They're amazing tools.