Logic World Wednesdays: The Thursday Edition

by @MouseHatGamesDeveloper3 years ago

Hello and welcome back to Logic World Wednesdays!


Due to some personal life events I took a break from working on Logic World. This is why there wasn’t a blog post last week and why today’s post is a day late. I am back at it now, though, and I’m excited to keep improving this game.

I’ve been working on a feature that I’ve wanted to work on for a very long time: Board Resizing. All the structure in Logic World is made up of circuit boards. They are the base upon which you build circuitry. And now you can change their size after you’ve placed them, using lovely world-space UI.

I’ve also spent a good deal of time tracking down a particularly elusive and annoying bug. I still do not know the bug’s cause and solution, but hopefully next week I will have figured it out and I can give you a detailed writeup about it.

Felipe (aka pipe01)

This week I’d like to talk about the logicworld.net website itself. I’m afraid I’m going to use technical jargon this time, but I enjoy when I get to know how things work deep down so I’d like to give you that sort of experience.

The website was at first written using ASP.NET Core for the backend and jQuery for the frontend, however this stack was quickly running short of space to expand (mostly due to jQuery) so I decided to make the switch to using the same backend tech but with Vue (and TypeScript and Webpack and all of that) for the frontend. This allowed much quicker iterations (although ironically the Webpack build times took much longer) and, most importantly, more reusability and modularity through the use of Vue single-file components. This meant that new features could be added to the site without giving much thought to how it affected the rest of the pages.

In order to connect the backend and frontend though, I’m using a Visual Studio 2017 extension called TypeWriter. This extension allows you to write TypeScript templates in .tst files that transform C# classes into TypeScript files. This is absolutely amazing since now I only need to write C# code, which will get transformed into the TS code I need in order to use it from the client-side. Currently, ASP.NET Core API controllers are being transformed into TS files that use the axios library in order to send a request to the server. This is an example of a generated endpoint:

import http from axios

export async function postPost(model: Logic_World.Models.ViewModels.NewPostViewModel, id: number) : Promise<Logic_World.Models.Post> {
    return (await http({
        method: 'post',
        url: /api/forum/{id}/post.replace({id}, String(id)),
        data: model,
        params: null

This has been generated from the following controller method:

[Model(typeof(Post))] //This indicates what type of object the endpoint returns on success
public IActionResult PostPost([FromBody]NewPostViewModel model, [FromRoute]long id)

I’m also using this technique in order to create simple TS models from C# classes, as you can see with the Post and NewPostViewModel types.

All of this means I no longer have to worry about writing bridge code between the back and the front end, and instead it’s all generated for me as soon as I hit Control+S.

Although, this has one big drawback: you must use Visual Studio 2017. It would probably be a much better experience if it was integrated into the .NET build process, but alas it’s a VS2017 extension which means that you must have it open in order to apply any changes you’ve made. I would still 100% recommend this extension if you’re working on anything related to this; it doesn’t even have to be web-related.

So, I hope you were able to follow through. I promise next week it will be more interesting and less tech-loaded.

If you’d like to receive an email each time we post one of these blogs, you can sign up for our newsletter. Be sure also to wishlist Logic World on Steam, join the official Discord, and follow @LogicWorldGame on twitter.

See you next Wednesday!

@Hydra3 years ago

Cool! Every dev update I get more and more hyped up to work with logic world hands on! :)

@ForLoveOfCats3 years ago

It would be awesome is the board resizing had corner arrows. Of course the issue is that at smaller sizes the corner arrows will intersect with the side arrows. While this could be resolved by hiding them at smaller board sizes the issue would still present itself if using one of the corner arrows to shrink a board past this limit at which these corner arrows would be hidden. Would take some work but would be a great addition to this amazing feature. Cheers!

@JimmyDeveloper3 years ago

This is one of the things I want to add this week

@Broyojo3 years ago

Thank you for board resizing!! It’s one of my biggest gripes with TUNG.