Our goal of providing steem functionality from inside user created VR scenes is finally realized. See a real live steem post. This a a static webpage stored in IPFS. Our steem frontend puts that static content in an iFrame and gives it limited API to a users steem wallet; Vote. However, it can display current state information as well. The goal with this test is to show functional features. Like who is logged in (disregardfiat), the post title, as well as the current vote total.
If your eyes are already glazed over I wouldn't recommend reading further. However, if you're interested in seeing how you might create experiences to share then lets get to it!
initialState: {
post: "",
username: "@",
id: "",
title: "No sync ...",
author: "",
rep: "UND",
profileimage: "",
votesNum: "UNK",
votesVal: "$0",
menuVis: false,
voteMsg: "Vote!"
}
All state is store in one state component, this, in addition to any state requirements of your experience, is the data model to use. aframe-state-component has some useful documentation to apply this model to your interactive experience.
Handlers listen for updates and automatically update components that have bound values.
<a-gui-label
width="6.5" height="0.75"
bind__value="votesVal"
value=""
id="voteMsgR"
font-family="Arial"
margin="0 0 0.05 0">
</a-gui-label>
The bind is easy to program:
value="Something Static" /* becomes -> */ bind__value="votesVal"
These data model bound values can even be networked. A two player game of horse for instance is not much more difficult than specifying "shared" attributes for the ball's position and game score and using the right aframe modules for physics and collisions.
<a-gui-button
width="2.5" height="0.75"
onclick="voteButton"
bind__value="voteMsg"
value="Vote"
font-family="Helvetica"
margin="0 0 0.05 0">
</a-gui-button>
Actions such as onclick="voteButton can be bound to anything. This is XR. Triggering a vote also updates the SteemState for the page, which means you get feedback as to how much the vote was worth.
Visit and contribute to this opensource project dluxio
Join our Discord