Minty Makes Things

So, I wanted to make something, and along the way I forgot what the problem even was. I've found solutions to whatever these problems were, but wanted to make a better solution anyway.

So, lets go ahead and try to work through that and actually identify the problem. Identifying the problem you're even trying to solve is a great first step to any project, you don't want to create a solution without even being able to explain what it is or why you made it.

We'll start by listing the general gripes that I have in my head when I think of this project:

Discord isn't self hosted

Rolegate isn't self hosted

Roleplaying Services like Roll20 are too focused on the virtual tabletop

Roleplaying Services like MUSHes are very old technology

Not necessarily a bad thing

Lots of old legacy decisions though

Can't easily interact with modern tech such as WebSockets, although a lot of the developers are creating methods for this

Forums don't hold a candle to Discord

Discord can't fully give everything a forum can

My original goal was to streamline an RP Server process I had created on Discord, but along the way I had picked up the previously mentioned list of gripes. I've tried to incorporate all of them into this one project, and obviously I've muddled my attempts. This has lead to me being unable to really understand how I should approach my project, and what my project goals are.

I can seperate this list into two problem catagories, Roleplay Related and Discussion Related.

Discussion Related

Discord isn't self hosted

Forums don't hold a candle to Discord

Discord can't fully give everything a forum can

Roleplay Related

Discord isn't self hosted

Rolegate isn't self hosted

Roleplaying Services like Roll20 are too focused on the virtual tabletop

Roleplaying Services like MUSHes are very old technology

Not necessarily a bad thing

Lots of old legacy decisions though

Can't easily interact with modern tech such as WebSockets, although a lot of the developers are creating methods for this

It doesn't take much effort to see that these two problems have a lot of overlap, which is what has lead to the most recent confusion.

None of this really answers the question of "What is my problem that I am trying to solve?" so lets go ahead and try to list some possible problems I can use when trying to sum all this up to others.

My Roleplay Servers need a streamlined custom solution that better matches their usage

MUSHes don't make use of all the latest features of technology to convey information in a pleasant and usable manner

There needs to be a self hosted Discord alternative that anyone can run, unlike Matrix's Synapse which requires a large amount of technology to host.

Forums are no longer compatible with the new high-speed communication culture that Discord has fostered over the last 3 years

Discord needs a better method of handling long-form content, similar to forums.

My Roleplay Servers need a streamlined custom solution that better matches their usage

I could probably solve this with a bot for Discord, but that comes with its own ups and downs, but it would also be an easier integration. At one point I thought the only solution to this was a full on webapp that straight up clones Discord and adds features to it. While thats an ideal solution it isn't one that can be done singlehandedly in a speedy and sufficient manner.

MUSHes don't make use of all the latest features of technology to convey information in a pleasant and usable manner

This is just a personal opinion, and possibly not one that needs solving. I'm willing to say MUSH server developers would even refuse to agree with this opinion, and give me very good reasons why my opinion is ill informed. They're constantly updating their server code, adding new features that make a lot of amazing things very possible

There needs to be a self hosted Discord alternative that anyone can run, unlike Matrix's Synapse which requires a large amount of technology to host.

This is an opinion, but one I hold dearly. Although, IRC and a good bit of web-client configuration could probably fix anyone who believes this for their own community. I've seen the solution implemented before.

Forums are no longer compatible with the new high-speed communication culture that Discord has fostered over the last 3 years

Is this truely a problem? Yes. Every forum I've been part of has now transitioned to Discord. They use their Forums for anything that needs a more firm posting order and a more book-like format. Although this is fairly easily mitigated with heavy use of Discord's channel and category features, the channel and categories aren't as similar to forum and topics as one would like.

Once again, this doesn't need a full webapp. A bot with channel and category management permissions can probably do a lot in this space.

Discord needs a better method of handling long-form content, similar to forums.

While this opinion is easily seperate from the previous problem stated, its solution easily falls under the "Make a bot" solution.

I'm making progress on the backend by writing tests! Click here to see the test file.

Been working on the backend and getting it to a point I like. Only really interesting thing to talk about here is metaprogramming and sqlite in memory.

Without sqlite being run using ':memory:' those tests are very slow because it actually have to use the disk i/o instead of RAM.

I'm using the mocha testing framework to test my backend, practically writing a frontend client to do so.

Small lesson to learn here? When you start to actually do parts like this, you start to see small areas you can take shortcuts. Its worth taking them. Everything in the add_channel section is using metaprogramming to create functions that get set into the list of mutations functions.

I haven't touched my front-end code in a month and I'm almost scared to go back to it.

After ten thousand years I return.

So, what is this? If you're familiar with MUSH, MUD, MUCK, or similar Servers... this is a new MUSH Server that returns JSON when its on Websockets. Oh, also it supports web sockets in addition to the classic telnet sockets.

On the right? Thats the client that takes full advantage of it.

At the moment none of it works, and a lot of things need a lot of improvement, but I'm having fun making it.

Why did I do this? I don't like how MUSHes work. They're essentially text-based MMOs, which doesn't really reflect their roleplay purposes. I would have used an existing MUSH Server if it had a way to tell a client why it is receiving a message.

I have been told Evennia has support for this but I have not investigated it as I am having fun writing this.

So theres a few differences between this and a mush. MUSHes have a thing called a "grid". A "grid" is a bunch of rooms similar to a text adventure. They have a setting description, a list of objects you can interact with, and other characters. Its all very self contained.

Every object, room, and character holds its own description. You need to be in the same room as it, and you need to look at it to read it's description.

This web mush has channels, more similar to IRC, instead of rooms. It also has a wiki to contain and display descriptions and character data.

In the near future you will be able to go to an article in the wiki, and create a new specialized "story" room that references that character and/or wiki, and adds some extra niceties to help turning the roleplay into a publishable story to the wiki a little easier.

At the time, it doesn't have absolute feature parity with mushes. It focuses more on making communication and collaborative storytelling easier.

You can see all the code here. https://bitbucket.org/minty-cream/wushu/src/master/

Tools being used

Vuex

WebSockets & ws

telnet sockets

sqlite

I’m still making things. Just some excerpts from a bit of fun I’m having trying to make a mockup of my own microblogging platform that works in a similar fashion to Mastodon. When I’m done I’ll have a paper to go alongside it that better explains the idea.

Tumblr resizes things horribly. Heres some better versions of the images.

Guess what everyone? I went missing for a month because its finally reached MVP status! All that work I did on that pretty frontend? Scrapped, it became boggy.

Now it looks ugly. This is because I learned that trying to deal with color too early results in slowing down and bike shedding

I ended up using deployd and react to actually get it done. I'm using superagent to make the restful calls. Everything is styled via style tags. And another project known as notebook.ai does everything it does and better, except for the map. And I learned this just after rushing through it to get it done in time for bookcon.

And you know what? I'm still proud of it. People have told me to be proud of it. People are giving me suggestions on how to improve it and make it different and better for my intended audiences.

When I come back to this project, I'm definitely converting the style tags to CSS in some way. I'm also probably going to swap deployd out for something that uses postgres instead of mongodb. I'm looking at expressa and liking what I'm seeing. I'm also probably going to work it so that more of the components use the mobx store instead of having five million random restful calls.

You can view the frontend code here . The tests are useless and fail due to how much I changed everything after trying to write my initial tests without thinking about how react-router works.

Look at me changing things again. I realized theres something nice about simplicity. So I went back and reworked how the notes work. Now they look like this. The tabs from left to right are "Information", "Files", and "Relationships". The back arrow takes you to wherever you were previously or the map, the "World Name" takes you to the map, and from the map you can press back once again to get to the world selection screen.

I got rid of the "Quick Stats" because I realized anything like that, a user will likely be able to handle doing it themselves in the Details box.

So, today my designs got accused of being "Cheap rookie work". I took offense to that, and ended up redesigning the entire desktop design. Now everything is one column at every size. I actually like the change. I took inspiration from the mobile twitter site while making my changes.

Now my next big challenge is figuring out how best to add pages for adding new stuff. Namely...

Adding new worlds

Adding new tiles

Adding new people

Adding new items

Where to include "Add new whatevers"

Find a way to differentiate them

I'm considering changing the search button to a notebook, having a search functionality inside that page, and having "Add New Whatever" inside that tab.

If you're someone who's following this blog to learn something the first thing you should be asking is "Why the hell is that Save/Edit button in such a weird spot?"

The answer to that is position: fixed , on an actual device it is always in the same spot. This is actually a good thing. Nice usability. I also changed the placeholder text to font-awesome icons representing the world map, the notes, and the search function.

Its in the weird spot on the desktop screenshots because of my web dev terminal.

I'm still thinking of how someone actually adds a new note aside from a wiki style link. Maybe it wouldn't be a bad idea to just like, force a user to add a new location to a new world, and force them to add people via links and relationship to that place.

Also realized that I don't really know how to make the Relationships tab actually useful. My original notes included a really ugly "Create Relationship" box that might work perfectly.

Some of you more experienced might be thinking "Modals!"for the "Create Relationship" idea. To that I say "No! Modals are super ugly and one of the worst ideas in web design!" They're annoying to develop, they're annoying from a user point of view, they're a marketer's way around the "They all block popups now!" They should only be used for call to attention and thats just about it.

Importantest change! I realized that the Character page was pretty much the perfect generic Note page, regardless of if its a snippet or whatever. Anything can be related to anything. Anyone can be related to anyone. Anywhere can be related to anywhere, and so on and so on.

Planning for the future. Someone on IRC, GothAlice, pointed out to me that this software is essentially geneology software with a really funky family. This is a mockup for a potential change to the "main content" pages, which displays a relational map on top, and a timeline on the bottom.

Making these changes are effort though, and for now the one-depth solution works. And as soon as this becomes a usable project by the masses, its going to be going through iteration after iteration anyway. So this is filed under the "wishlist" for the moment.

So this is currently where the project is at right now. I finished the relationships tab. It took me about four hours. "But it looks so simple" you might be wondering. And heres why it wasn't. My first thought was that I needed a complex mapping software such as d3.js to get a nice tree. So I searched through all of d3's examples, trying to find a relevant example. Then I remembered after about an hour that hierachial trees for relationships have existed for a long time. And that they're pretty easily solved with Box Drawing Characters. So, I just went ahead and made a list representing the relationships, and used css to restyle it so use Box Drawing characters intelligently.

This was after a couple of iterations where I was trying to simulate Box Drawing Characters using arrows and border-left.

So, the idea here is that you can click on an image of a related article, and it takes you right to the article!

If I ever post something on here that seems confusing that's you would like more information on, just ask and I'll answer. I recognize I gloss over a lot because this is a very stream of consciousness style blog.

Well, I started the first page. I just rolled a 1d4 to choose from what I deemed the "easy list", because I was DM'ing most of all day today, and it landed on 4 so I started working on the Notes Page.

Probably the biggest thing that I've done is restructure all my code today. Originally I had everything thrown into a single folder, which create-react-app gives you. Thats fairly useless in terms of organization though and doesn't look nice when you run tree so you don't get ANY dev-cred if you just throw everything into a folder. Obviously, if I want to keep up with the joneses, I had a bit of work to do.

So, I scoured the web for like 5 minutes and became amazed at how fast the human brain can process text. Along the way I came across an article named Structuring React Projects. I like the advice in it, so I took it for the most part. I stopped after where it suggests splitting "components" and "views". Elsewhere, it was suggested I split "components" into "components" and "modules". Which are "dumb" and "smart" components respectively. Seems a bit over-engineering for the stage I'm at now and I'm lazy when it comes to coding for fun since no one else has to deal with my code.

Oh I am super duper califradilate on an update haha.

Well, I started coding the other day. All I did was just start a new project using create-react-app and downloaded the react-router project. I have react-router's configuration commented out for the sake of these screenshots.

I decided not to use any CSS frameworks this time around, rare for me, because I've grown very used to Flexbox. Which does everything I feel a need for in my web projects. I'll probably be proven wrong quickly, or pleasently surprised.

You might notice that theres some new stuff in the TopBar's nav menu not in my original notes.

R - Relationships

M - Map

P - People

S - Snippets

N - Notes

In the future, these boxes should display only their headers while in mobile mode, and not their contents. This should provide a nice look on mobile devices. Some web components or pages might automatically be opened on a page's first load or something. I'll have to play and test when I have everything scaffolded.

The lazy trick I'm doing for cheap responsive design is that all of my web components have a switch, exclusive to landscape mode, that switches from display: column to display: row. The reason I did this is to make it easier for mobile users to load it up, as they tend to be working with a tighter bandwidth.