In the previous article , it turned out to make a prototype of the game with questions. But it did not work out to do it fully on WebAssembly. This time, I propose to convert this prototype, making a full WebAssembly application from it, and also add to it the attributes of most games - the experience and levels of the player. As well as simple logic - when we move to some levels we will discover new skills.

Demo

Create a WebAssembly project


Let's create a new project that will host the WebAssembly application, inside the Web application (ASP.NET Core). To be more precise, the Web application returns a WebAssembly application that remains in the user's browser and interacts with the server via http (or web sockets). To do this, we need to create a BlazorApp project and select ASP.NET Core hosted

ITKarma picture

Or, from the console:

dotnet new blazorwasm --hosted 

Since we already have a Blazor project from the previous article, and the syntax is the same for projects with server hosting and WebAssembly, then all pages can be simply copied. But with classes for logic, this does not work out - you need to create a new controller as part of the backend. This is the regular asp.net controller with which our customer will communicate.

I would like to redo the logic of communication with the server. For example, so that there is no need for each user action to send a request to the server. It would be interesting, as an option, to download a few questions with a margin, so that with the correct answer, show the next question without a request to the server. But let's play with it next time.

Change the version to.NET 5 preview 6


There is no urgent need to do this. But, since the preliminary version of.NET 5 has already grown to the sixth, it supports Blazor and it has some new features (for example, extension methods for server requests), so why not upgrade to it now. Migrating is quite simple if you know what to do. In our case, this is a replacement of the target framework versions in the server project and the transition to the new version of all nuget packages.

Github commit: Update to.NET 5 preview 6


Add experience and level


For the connection between the level and experience we will use a simple formula: minimum experience for the level=2 ^ (level) . In order for the player to understand how much experience he has gained and what level he is, we add these two parameters to his model. And also, add a field to the table with questions to indicate how many experience points one question will give. So far, all questions will add 1 experience point.

To display on the user interface, we use simple Bootstrap components.

<div class="row"> <div class="col-md-auto"> <span class="badge badge-warning"> Уровень <span class="badge badge-light">@state.Level</span> </span> </div> <div class="col"> <div class="progress mt-1"> <div class="progress-bar" role="progressbar" style="width: @GetExperienceWidgetWidth()" aria-valuenow="@state.Experience" aria-valuemin="0" aria-valuemax="@experienceDiff"> XP: @state.Experience </div> </div> </div> </div> 

Result:

ITKarma picture

Github commit: Add level and experience to UI


Level Skills


While in our game there is not so much functionality, but nevertheless we can show some of them gradually. We will add a greeting when reaching the first level and a notification of new features for the second and fourth levels.

Github commit: Show features depending on level


We also add the rating of players with the highest level. This will serve as an example of what a commit looks like with a separate component that relates to various existing parts. In my opinion, it looks very understandable.

Github commit: Add leader board


In the same change, when editing the feedback on the wrong answer, I came across an interesting point.I tried to simultaneously subscribe to keypress events (if it is Enter - send to the server) and changes to the control value (if it is empty - remove the message about the incorrect answer). It turned out that this option is not supported . Which, in turn, provoked somehow to get around this. There are options in the described ticket, but I tried another one:

var timer=new Timer(1); timer.Elapsed += (object sender, ElapsedEventArgs e) => { wrongStyle="visibility:hidden"; }; timer.Start(); 

It works exactly as I need - when you change the answer, the message disappears. Although a timer for 1 millisecond. In general, using the.NET timer inside the browser sounds strange. But it seems that if the user is not active, then the timer will automatically freeze.

Admin


A nice bonus to using Blazor inside an ASP.NET Core application is the ability to use mature framework tools. In this case, we can make a simple admin panel for viewing/editing questions using code generation.

Add some typical lines to the authorization configuration logic (Startup.cs) and generate a couple of standard parts - Identity pages for authorization and a controller with views for viewing questions. The result was a sheet of code from which only a few lines were written by hand.

Github commit: add admin part


Validation of responses and security


Since most of the logic is on the client, for example, checking the correctness of the response that the user sent, this is a big problem from a security point of view. At the moment, an advanced user (who knows how to see the details of traffic in the browser) can easily check the answer while downloading a question from the server. Probably the best solution to this problem would be to use one-way encryption to verify the response is correct. But let’s leave it for later, giving young hackers the opportunity to gain a gaming experience.

Conclusions


Today, there are both positive and negative aspects of development on Blazor. The best part is to see how the user interface is interactively changing, while using only C # as a programming language. Oddly enough, in spite of the simplicity of the framework, it turns out that the required user interface is quite simple and everything works. Of the negative aspects - the main problem is the feeling of dampness. Perhaps when using stable versions everything looks better.

In general, the sensations are very interesting. You have to use the good old tools for writing a web application in a completely new way. It seems to me that so far the development of Blazor is going in a very right direction - just compiled code that works in the browser without any strange gadgets.

Result:

Github
Demo .

Source