talkgroup

Web walker experiments

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.

1 Like

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 +io - A trailhead….

Screenshot_2020-10-03 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:

1 Like

Notes:

  • walker, the character to walk around, as post type
    • Name?
    • Location, the current “room”. Can only have one. Hmmm, if I used the bi-directional field updates and a little AJAX magic, I could make it… multi-walker.
    • Walker UI, a form that lists and validates possible actions, and updates the walker record
      • Log it? Maybe use comments (update Walker and Room, show events in real time)?

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 ^_^).