(#100DaysOfCode) Day Two – Between U and I

Today I will be focusing on creating a simple UI to display the game intro text I set up in day one. For this I will be creating an ASP.NET Core MVC application.

In the solution, I added a new project and selected Web -> .NET Core -> ASP.NET Core Web Application:

I called it Cybermancer.CelestialAberration.WebApplication. After hitting O.K. I chose the Web Application (Model View Controller) template:

Once the project was created, I needed to do a little house keeping. Firstly I went into the _Layout.cshtml and moved the script tags from the bottom of the page to the top just under the opening body tag:-

<body>
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

This is necessary because it allows me to add additional script code in the page view (Index.cshtml) that will make use of the jquery script in the layout page.

(I also did some tidying up of the home controller and the About and Contact views but this is generally irrelevant to the actual intro text code we will be adding.)

Next I expanded dependencies and added a project reference to our game engine assembly.

I then added a view model class in the models directory that had a single GameInfo property (GameModel.cs):-

using Cybermancer.CelestialAberration.GameEngine.GameObjects;

namespace CyberMancer.CelestialAberration.WebApplication.Models
{
    public class GameModel
    {
        public GameIntro Intro { get; set; }
    }
}

And in the Index Action of the Home controller I used our assembly repository to populate this property on a GameModel instance to pass to the view:-

namespace CyberMancer.CelestialAberration.WebApplication.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            IGameResourceRepository gameResourceRepository = new GameResourceAssemblyRepository();
            var gameIntro = new GameModel()
            {
                Intro = gameResourceRepository.GetGameIntro("Default")
            };

            return View(gameIntro);
        }

Now the Index view is quite simple. I deleted all the markup and replaced it with this:

@model CyberMancer.CelestialAberration.WebApplication.Models.GameModel

@{
    ViewData["Title"] = "Home Page";
}

<div class="glitch">
    <div id="introText" class="neon">
    </div>
</div>

<script src="~/js/intro.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var gameInfo = @Html.Raw(@Model.Intro.ToString());
        StartIntro(gameInfo);
    });
</script>

The work itself is done in the file intro.js which relys heavily on css and timeouts to animate the intro text on the front page. I won’t go into the css, partially because I don’t fully understand it (my CSS knowledge sucks) and partly because it uses a mashup of a modified version of a neon glow text effect and the ‘TV Static’ animation found at https://codepen.io/run-time/full/knqDo

The intro.js file code is here:-

function StartIntro(gameIntro) {
    ShowTransition(gameIntro, 0);
}

function getTextItem(gameIntro, index) {
    var textId = "INTRO_" + index;

    for (textItemIndex in gameIntro.IntroTexts) {
        if (gameIntro.IntroTexts[textItemIndex].GameTextId == textId) {
            return gameIntro.IntroTexts[textItemIndex];
        }
    }

    return null;
}

function ShowTransition(gameIntro, index) {
    var currentTextItem = getTextItem(gameIntro, index);
    var nextTextItem = getTextItem(gameIntro, index + 1);
    $("#introText").hide();
    $("#introText").html("");
    $("#introText").removeClass();
    $("#introText").addClass(currentTextItem.Style);
    $("#introText").html(currentTextItem.Content.replace(/\[br\]/g, "<br />"));
    $("#introText").delay(2000).fadeIn(2000);
    $("#introText").delay(currentTextItem.SecondsToDisplay * 1000).fadeOut(2000).hide();
    if (nextTextItem !== null) {
        setTimeout(function () {
            ShowTransition(gameIntro, index + 1);
        }, currentTextItem.SecondsToDisplay * 1000 + 6000);
    }
    else {
        setTimeout(function () {
            ShowTransition(gameIntro, 0);
        }, currentTextItem.SecondsToDisplay * 1000 + 10000);
    }
}

This results in a changing page of fading in and fading out intro texts:-


The solution can be run by right clicking on the MVC project and selecting “Set as startup application”, then hitting the play button on the debugger.

That’s it for today. Tomorrow we will tackle adding game characters and setting up the player’s character.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.