feat(examples): add r/demo/games/tictactoe 1P-VS-CPU

[grepsuzette]

Note: in this end of August 2024, as we are talking about Twitter Bootstrap-like component in the weekly meeting, there was a discussion about whether to keep HTML/CSS in our current markdown flavour. I'm definitely down with the fact of keeping it.

This is another tictactoe variation!

Cap'n Cluck was permissionlesslly deployed on test4. Try it here if you dare.

Built on top of Manfred's #613, it's a human VS CPU tic-tac-toe.

Addresses #611 (there is also gnochess, but we don't really have games. I am also thinking a simple winmine clone would be good),
Closes #613 (@moul's original model is in its own package).

some screenshot

principle

Since the realm is stateless, randomness had to be implemented using block's height.

About the state of the game, my first idea was to use something like to easily transmit the state in the url (type=hidden is convenient for that):

<form method=GET>
   <input type=hidden name=state value=:the_current_state: />
   <button /><button /><button /><br />
   <button /><button /><button /><br />
   <button /><button /><button /><br />
</form>

With each button having a name="move" and a coordinate for the value.

Since realms seem unable to access the querystring at the moment, links like <a href=r/demo/games/tictactoe:state=:current_state:&move=XY></a> are used for each of the 9 squares. Those links are styled within a <style type=text/css>...</style>, in the markdown itself.

So this is a realm full of tricks.
Full of controversy :) (of questions in fact)

path and query (remark)

In gno.land we currently have to use paths such as r/foo/foo:abcdef, with a colon :.
Gnoweb cuts off the querystrings at the moment¹, i.e. r/demo/echo:abc?bar will have a path foo in Render(), not foo?bar. @moul I have seen #2585 but I am not sure if it means querystring could become supported.

According to the RFC 3986 by Sir Tim Berners-Lee, it technically means our realm's path are indeed part of the URI path, and not of the query, consider for instance https://gno.land/r/demo/art/gnoface:1337 against this:

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment
          |   _____________________|__
         / \ /                        \
         urn:example:animal:ferret:nose

• the path would be /r/demo/art/gnoface:1337
• I think this is nice esthetically, it has been used rarely, but notably by Wikipedia e.g. https://en.wikipedia.org/wiki/User:Kazamzam, in fact Wikipedia uses this notation for all its system or special pages.
• But it also means, for games like this or a simple text adventure game for instance, all the possible outcomes in such a game (encoded in the path rather than in a querystring) are going to be distinct resources (the R in URI). Affecting potentially caching, routing, search engine databases, maybe web archivers.

A ?query normally makes sense when it's a random parameter, and things like r/foo:1337 can make sense (even though it's rarely seen) when the 1137 is an id or e.g. a crypto address.

This is why #2585 could be interesting.

packages

Maybe too much packages. Hard balance to find.

• p/demo/tictactoe (basically WIP feat: add tic-tac-toe experiment #613)
• p/demo/tictactoe/tictactoe1p (building 1P-vs-CPU logic on the above in a separate package)
• p/demo/ternary (mimicking ternary operator in other languages)
• r/demo/games (start addressing [META] Gaming #611), and finally
• r/demo/games/tictactoe

This last realm is the actual game.

feats

• Responsive for lower resolutions (below there's a picture of iPhone 11 resolution),
• Works with gnoweb day/night mode,
• Also tested with Dark Reader plugin (it's got its own day/night mode, so 2*2 combinations).

Footnotes

1. see https://gno.land/r/demo/echo:abc?def ↩

[grepsuzette]

To test, launch gnodev then go to http://localhost:8888/r/demo/games/tictactoe

[grepsuzette]

Set as draft, as it needs #2553

[grepsuzette]

By the way, with gnodev the chain's Height is fixed until a transaction happens.

Since this realm is stateless and number generator seed is initialized against the chain's height, randomness is reset to the same seed each request. It's playable still, but experience slightly worse.

If OTOH you use gnoland start, each new game, you will get more variability: CPU will alternatively decide to go first, you will get more lively messages from the parrot, it's more pleasant.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 60.20%. Comparing base (b7dbed9) to head (21c00cf).
Report is 64 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2554   +/-   ##
=======================================
  Coverage   60.19%   60.20%           
=======================================
  Files         562      562           
  Lines       75007    75057   +50     
=======================================
+ Hits        45154    45190   +36     
- Misses      26476    26491   +15     
+ Partials     3377     3376    -1     

Flag	Coverage Δ
contribs/gnodev	60.58% <ø> (ø)
contribs/gnofaucet	14.46% <ø> (ø)
gno.land	64.57% <ø> (+0.10%)	⬆️
gnovm	64.34% <ø> (+<0.01%)	⬆️
misc/genstd	80.54% <ø> (ø)
misc/logos	19.88% <ø> (ø)
tm2	61.93% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[grepsuzette]

Ready for review, updated the original text.

[grepsuzette]

Cap'n Cluck was successfully deployed on test4 so you may play it here.

[jefft0]

All checks pass. Ready for core devs to decide where this code should live.

[jefft0]

Removed the review/triage-pending label. Ready for core dev review.

[grepsuzette]

Thank you for your feedback @jefft0 !
As #2876 has passed I will provide an update shortly,
the fact the realm path now allows ?a=b&c=d will allow some simplification.

[Gno2D2]

I'm a bot that assists the Gno Core team in maintaining this repository. My role is to ensure that contributors understand and follow our guidelines, helping to streamline the development process.

The following requirements must be fulfilled before a pull request can be merged.
Some requirement checks are automated and can be verified by the CI, while others need manual verification by a staff member.

These requirements are defined in this configuration file.

Automated Checks

🟢 Maintainers must be able to edit this pull request
🔴 The pull request head branch must be up-to-date with its base

Manual Checks

• The pull request description provides enough details

Debug

Automated Checks

Maintainers must be able to edit this pull request

If

🟢 Condition met
└── 🟢 On every pull request

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

The pull request head branch must be up-to-date with its base

If

🟢 Condition met
└── 🟢 On every pull request

Then

🔴 Requirement not satisfied
└── 🔴 Head branch (grepsuzette:tictactoe) is up to date with base (master): behind by 214 / ahead by 20

Manual Checks

The pull request description provides enough details

If

🟢 Condition met
└── 🟢 Not (🔴 Pull request author is a member of the team: core-contributors)

Can be checked by

• team core-contributors