I’m building a web experiment to build virtual worlds navigated using hyperlinks. It’s as simple as it sounds, but I’m interested on refining the idea with things I’ve learned, and hopefully produce some new reusable patterns that others can base future worlds upon.
This is a log of these experiments.
The first experiment was to create some “rooms” and connect them to create a “walking” navigation.
Taking inspiration from walker data structure, I created a CPT in WordPress called “room”, and used Pods templates to list them at the bottom of the “room”.
You can see it in action at https://allthe.io/room/a-trailhead/.
It connects to another room:
These are very basic post types at the moment, only have a title, body, and bi-directional “connected” field to, um, connect them (this is experimenting in part so I figure out what to call these things…):
I apply a Pods template after the_content, the following:
<ul class="rooms-list">
[each connected]
<li><a href="{@permalink,esc_url}">{@post_title}</a></li>
[/each]
</ul>
Basically the example snippet listed at EACH Loop Tag - Pods Docs.
Okay, I’ve got a basic “walker”, but it is missing some features from my vision. This is great as a navigation device, though! As in, many websites would benefit from this kind of related content, so I’m going to polish an interface for it, from the front end, using some Pods + GravityForms glue…
Reference:
Notes:
walker, the character to walk around, as post type
The rooms will have two additional fields added, for “color”. We will add a 4px wide border at he top and bottom of the room description, to add a bit of visual flair, and to test he workflow for adding texture to a room.
For input I’m going to use base 16 web colors, Web colors - Wikipedia. We could just do a hex input, but I want to keep it simple while prototyping (and also to show how arbitrary it is to change the modal and color system ^_^).