Rock ✊ Paper ✋ Scissors ✌️

Source: Dev.to

What is WebForms Core?

WebForms Core is a new multi‑platform technology from Elanat that is designed to compete with modern front‑end frameworks – it is not an old ported version on .NET Core.

Example: Rock Paper Scissors

This example is a completely offline implementation using WebForms Core. The commands are written on the server and declare the behavior to the client.

Note: The HTML output of the example can be copied and used offline without a server.

Unlike other server‑driven UI systems, WebForms Core’s server has no direct relationship with the HTML; it is stateless and completely blind. This “server blindness” brings several benefits:

• Flexibility – the server can serve different clients (web, mobile, desktop) with different views.
• Scalability – different teams can work in parallel on server and client sides.
• Easier maintenance – changing the site’s appearance does not require changing server logic.
• Security – data is transferred raw and the client only displays what it needs.
• Reusability – the built‑in APIs can be used in multiple projects.

Golden sentence
The server is not blind because it does not understand;
it is blind because it does not need to see.

HTML

@page
@controller RockPaperScissorsController

    WebForms Core Technology
    

    
## Rock ✊ Paper ✋ Scissors ✌️

    Rock ✊
    Paper ✋
    Scissors ✌️

    
Computer choice: 

    

    
Game match: 0

    
Game win: 0

Server Code

using CodeBehind;

public partial class RockPaperScissorsController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        WebForms form = new WebForms();

        form.SetCommentEvent("*", HtmlEvent.OnClick, "play");
        form.StartIndex("play");
        form.Increase("counter|", 1);
        form.AddSessionCacheValue("random", Fetch.Random(0, 3));
        form.SetText("result", "😢 You lose!");
        form.IsEqualTo(Fetch.GetAttribute("$", "win-with"), Fetch.Saved("random"));
        form.StartBracket();
        form.SetText("result", "😀 You win!");
        form.Increase("win-counter|", 1);
        form.EndBracket();
        form.IsEqualTo(Fetch.GetAttribute("$", "value"), Fetch.Saved("random"));
        form.SetText("result", "😐 Equal!");
        form.IsEqualTo("0", Fetch.Saved("random"));
        form.SetText("computer|", "Rock ✊");
        form.IsEqualTo("1", Fetch.Saved("random"));
        form.SetText("computer|", "Paper ✋");
        form.IsEqualTo("2", Fetch.Saved("random"));
        form.SetText("computer|", "Scissors ✌️");

        Write(form.ExportToHtmlComment());
    }
}

Result (HTML with embedded WebForms comment)

*=onclick|play|
#=play
gtcounter|=i|1
SA=random|@mr3,0
stresult=😢 You lose!
{et=@$a$,win-with|@csrandom
{
stresult=😀 You win!
gtwin-counter|=i|1
}
{et=@$a$,value|@csrandom
stresult=😐 Equal!
{et=0|@csrandom
stcomputer|=Rock ✊
{et=1|@csrandom
stcomputer|=Paper ✋
{et=2|@csrandom
stcomputer|=Scissors ✌️-->
    WebForms Core Technology
    

    
## Rock ✊ Paper ✋ Scissors ✌️

    Rock ✊
    Paper ✋
    Scissors ✌️

    
Computer choice: 

    

    
Game match: 0

    
Game win: 0

Overview of the Example

This example demonstrates a fully interactive Rock‑Paper‑Scissors game without writing any JavaScript business logic.

• All game logic runs on the server.
• The browser receives clean, standard HTML.
• A lightweight client engine executes declarative instructions.
• No page reloads occur during interaction.

HTML Section: Structure Only, No Logic

The HTML defines only the user interface:

Rock ✊
Paper ✋
Scissors ✌️

Key points

• value represents the user’s choice.
• win-with defines which option defeats the current choice.

Server‑Side Declarative Behavior Definition

On the server a WebForms object is created and the entire page behavior is defined declaratively.

Event Binding

form.SetCommentEvent("*", HtmlEvent.OnClick, "play");

When any element is clicked, trigger an event named play.

Entry Point of the Logic

form.StartIndex("play");

All logic that follows runs only when the play event is triggered.

Game Logic – Step by Step

1. Increase the Match Counter

form.Increase("counter|", 1);

Each click increments the total number of matches.

2. Generate the Computer’s Choice

form.AddSessionCacheValue("random", Fetch.Random(0, 3));

A random value (0‑2) is generated and stored in the session.

3. Default Result – Loss

form.SetText("result", "😢 You lose!");

The game assumes a loss by default; later conditions may override it.

4. Check for User Win

If the clicked button’s win-with attribute matches the computer’s choice:

form.SetText("result", "😀 You win!");
form.Increase("win-counter|", 1);

The result is updated and the win counter is increased.

5. Check for a Draw

If the button’s value matches the computer’s choice:

form.SetText("result", "😐 Equal!");

The game ends in a draw.

6. Display the Computer’s Choice

Final Output – DSL Inside an HTML Comment

All server‑defined behavior is exported as a compact DSL and embedded into the HTML as a comment:

*=onclick|play|
#=play
gtcounter|=i|1
...
-->

• This comment is ignored by the browser’s rendering engine.
• It is parsed by the WebForms Core client engine.
• Enables partial DOM updates, avoiding full page reloads.
• Keeps the HTML clean and untouched.

Final Result

The example demonstrates that with WebForms Core:

• HTML remains purely structural – no JavaScript, conditions, or event handlers are present.
• All business logic is handled on the server.
• JavaScript acts only as a lightweight execution engine.
• UI updates are reactive without using SPA frameworks.

The Rock‑Paper‑Scissors demo shows how WebForms Core enables modern, stateful, and interactive web applications while preserving the simplicity and clarity of traditional HTML.

What Does This Example Prove?

1. WebForms Core is a True Server‑Driven UI

• No PostBack, no ViewState.
• Events are declarative‑like.
• State is determined on the server and sent to the client.
• Only the logical diff travels to the client.

This aligns closely with the philosophy of modern Live UIs.

2. The HTML Is Completely Clean and Standard

Rock

• No weird tags, heavy custom attributes, or dirty markup.

Consequences

• SEO‑friendly
• Progressive enhancement
• Full compatibility with front‑end tools

3. Game Logic Written Without a Single Line of JS

• In many modern frameworks JavaScript is heavy, or WebAssembly is required, or a complex build pipeline is needed.
• Here all game logic is in C#, the UI is just a listener.

This is the key point many have been looking for.

4. DSL Inside a Comment – An Unexpected and Smart Move

• No JSON, no inline script, no data blob.
• Still parsable, secure, cache‑friendly, and invisible to the browser.

The design shows a conscious, deep approach to technology.