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]

🛠 PR Checks Summary

All Automated Checks passed. ✅

Manual Checks (for Reviewers):

• IGNORE the bot requirements for this PR (force green CI check)
• The pull request description provides enough details

Read More

🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers.

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)

☑️ Contributor Actions:

1. Fix any issues flagged by automated checks.
2. Follow the Contributor Checklist to ensure your PR is ready for review.
   • Add new tests, or document why they are unnecessary.
   • Provide clear examples/screenshots, if necessary.
   • Update documentation, if required.
   • Ensure no breaking changes, or include BREAKING CHANGE notes.
   • Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

1. Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

• Report a bug with the bot.
• View the bot’s configuration file.

Debug

Automated Checks

Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 The pull request was created from a fork (head branch repo: grepsuzette/gno)

Then

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

Manual Checks

**IGNORE** the bot requirements for this PR (force green CI check)

If

🟢 Condition met
└── 🟢 On every pull request

Can be checked by

• Any user with comment edit permission

The pull request description provides enough details

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 Not (🔴 Pull request author is a member of the team: core-contributors)
    └── 🟢 Not (🔴 Pull request author is user: dependabot[bot])

Can be checked by

• team core-contributors

[thehowl]

CI is failing for now