I guess I should qualify and say the data should be semantically oriented…output from Shadow (Win8 version) game is shown below. Outside of line breaks, bold, italics, and noun/verb tagging (used for touch usage, but could be linked), there’s no layout information here.
You create the widgets in HTML or some templated system like Angular and bind your data to that template.
<div id="myTemplate">
<div class="title">{{viewModel.title}}</div>
<div class="chapter">{{viewModel.chapter}}</div>
<div class="main">{{viewModel.main}}>/div>
</div>
Then as the view model is updated from the game engine, the template is automatically updated. This is not a complete example, but it shows the gist of my efforts.
–dc
{
"channels": [
{
"MAIN": "\n\n\n\n\n\nIf I thought Abbots lived in luxury, then I was dead wrong. Even my attic's cozier than this. The <noun>Abbot<\/noun>'s got no furniture at all, except a <noun>desk<\/noun> and a <noun>cot<\/noun>, and no decoration except for a <noun>bust of St. Newton<\/noun>. None of the axle-mounted, bevelled mobiles I was expecting. There's barely even any sunlight: one thin <noun>window<\/noun> to catch the sunrise, opposite the <noun>door<\/noun> to the hallway back west.\n\n<noun>St. Newton<\/noun> is staring at the <noun>Abbot<\/noun>'s unpolished <noun>Grandfather clock<\/noun> with a severe frown.\n\n"
},
{
"HINT": "{ \"hints\": \"\" }"
},
{
"CHAP": "Between a Rack and a Gear-Trace"
},
{
"PLOG": "When the monks took me, aged six months, into their care, they named me Wren. Maybe because I was small, insignificant, and happy to eat any crumbs they threw my way. But these days I'm Wren, 2nd Assistant Clock Polisher... and that's a role that's about as important in the workings of the Cathedral of Time as the large deaf man who re-stretches the worn-out springs.\n\n\"<Italic>HEY WREN!<\/Italic>\"\n\nUh-oh.\n\n\"We've got a job for you!\"\n\n\"Yeah, a promotion!\"\n\nThis, coming from <noun>Drake and Calvin<\/noun>, means something horrible is about to happen.\n\n\"You've got your <noun>rag<\/noun>, don't you?\"\n\n\"And your <noun>polish<\/noun>?\"\n\n\"Yes,\" I bleat, holding up the <noun>glass tumbler<\/noun> they've given me.\n\n\"Course you do. Well, we've got something for you to do.\"\n\n\"Yeah,\" chimes <noun>Calvin<\/noun>.\n\nOne on each arm, they march me down the hall, towards the <noun>Abbot<\/noun>'s <noun>door<\/noun>. Am I in trouble? Going to be thrown out of the <noun>Cathedral<\/noun>?\n\n\"On three!\" shouts <noun>Drake<\/noun>.\n\n\"Tick!\" <noun>Calvin<\/noun> counts. \"Tick! <Italic>Tock!<\/Italic>\"\n\nThey shove me through the <noun>door<\/noun>. I fall into the <noun>Abbot<\/noun>'s personal chamber. I might not know much about the Abbey but I do know that I <Italic>really<\/Italic> shouldn't be in here.\n\n"
},
{
"TITL": "<Bold>The Shadow In The Cathedral<\/Bold>\n"
},
{
"CRED": "The Shadow In The Cathedral by Textfyre Inc\nVersion 2.0 (Windows 8 Store)\nCopyright 2013 by Textfyre, Inc.\nDesigned by Ian Finley and Jon Ingold\nWritten by Jon Ingold\nGame Engine (FyreVM) by Jesse McGrew\nInform 7 Story Programming by Jon Ingold and Brady Garvin\nCustom Library Messages extension by David Fisher\nTesting by Jon Ingold, Ian Finley, Paul O'Brian, Eric Eve, and Peter Berman\nSpecial thanks to Graham Nelson and Emily Short for all of their hard work on Inform 7.\nAll rights reserved\n"
},
{
"LOCN": "<noun>Abbot's Quarters<\/noun>"
},
{
"TUTR": "Some of the things you can do here include: \"EXAMINE COT\", \"EXAMINE DESK\", \"LOOK UNDER COT\", and \"LOOK AT CLOCK\". You could also try to \"POLISH THE CLOCK\" in case Drake or Calvin check on your work. But they won't, don't worry.\n"
},
{
"WRDS": "<suggestions><verb>wait<\/verb><verb>go<\/verb><verb>enter<\/verb><verb>look<\/verb><verb>inventory<\/verb><verb>examine<\/verb><verb>search<\/verb><verb>take<\/verb><verb>drop<\/verb><verb>put<\/verb><verb>throw<\/verb><verb>open<\/verb><verb>close<\/verb><verb>push<\/verb><verb>pull<\/verb><verb>say<\/verb><verb>talk<\/verb><verb>hit<\/verb><verb>polish<\/verb><substantive>me<\/substantive><substantive>abbey<\/substantive><substantive>Calvin and Drake<\/substantive><substantive>door<\/substantive><substantive>clock<\/substantive><substantive>cot<\/substantive><substantive>desk<\/substantive><substantive>Newton<\/substantive><substantive>window<\/substantive><substantive>lucky key<\/substantive><substantive>rag<\/substantive><substantive>tumbler<\/substantive><substantive>polish<\/substantive><compass point>inside<\/compass point><compass point>west<\/compass point><article>a<\/article><article>an<\/article><article>the<\/article><preposition>at<\/preposition><preposition>in<\/preposition><preposition>on<\/preposition><preposition>under<\/preposition><preposition>with<\/preposition><\/suggestions>"
},
{
"PRPT": ">"
},
{
"SCOR": "0"
},
{
"TIME": "900"
},
{
"TURN": "1"
}
]
}
