diff --git a/index.html b/index.html index a2e23ac..f2ab0d4 100644 --- a/index.html +++ b/index.html @@ -62,6 +62,59 @@ }); } // ui_resize + +var tutorial_stage = -1; +var tutorial_timer = null; +function end_tutorial_stage() +{ + if (tutorial_timer != null) + { + clearTimeout(tutorial_timer); + tutorial_timer = null; + } // if + + if (tutorial_stage >= 0) + $('div#tutorial' + tutorial_stage).fadeOut('slow'); +} // end_tutorial_stage + +function tutorial() +{ + end_tutorial_stage(); + tutorial_stage++; + var element = $('div#tutorial' + tutorial_stage); + if (element.length == 0) + return; // ran out of tutorial. + + var tut = $('div#tutorial' + tutorial_stage); + var target = $(tut.attr('tutorialtarget')); + + var left = target.offset().left + 5; + var window_width = document.documentElement.clientWidth; + if ((left + tut.width()) > window_width) + left = (window_width - tut.width()) - 30; + + var top = target.offset().top + target.height() + 5; + var window_height = document.documentElement.clientHeight; + if ((top + tut.height()) > window_height) + top = (window_height - tut.height()) - 30; + + tut.css({ position: 'absolute', top: top, left: left }); + tut.fadeIn('slow'); + tutorial_timer = setTimeout('tutorial();', tut.attr('tutorialtimeout')); +} // tutorial + +function halt_tutorial() +{ + end_tutorial_stage(); + tutorial_stage = -1; +} // halt_tutorial + +function restart_tutorial() +{ + halt_tutorial(); + tutorial(); +} // restart_tutorial + function render() { if (profile == null) @@ -76,10 +129,10 @@ var game = profile.gamelist[gameidx]; var html = "
Click a game's tags, and then you can edit them.
+Just type in some simple words, separated with spaces. Describe + the game.
+If this game were Braid, you might type in:
+platformer indie puzzle steamplay
Or Killing Floor might be:
+fps multiplayer zombies
Use any words you like to describe the game. You'll be able to + find this game later through these words.
+When you're done, just click elsewhere to save.
+Next, type in some tags here.
+The list of games will filter down to exactly match the tags you + typed, as you type them.
+Now you can find your games based on arbitrary criteria you choose!
+Click a game's icon to launch it.
+This will tell the Steam client to install and run the game.
+You'll need to have Steam installed for this to work.
+Here are some various useful links.
+Definitely consider clicking the 'feedback' one and telling Ryan + what you think. Javascript hacker? Grab the source code. Bored? + Buy something ('Powered by Steam'). Done? Logout.
+Clicking 'help' reruns this tutorial.
+Have fun!
+--ryan.
+