From 328f9203f2fd1e2e77aedcfbc21b391cd5374fd7 Mon Sep 17 00:00:00 2001 From: "Ryan C. Gordon" Date: Mon, 5 Jul 2010 23:57:25 -0700 Subject: [PATCH] Added basic tutorial. --- index.html | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++-- style.css | 15 ++++++ 2 files changed, 146 insertions(+), 4 deletions(-) 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 = "" + "" + + "" + "" + - "" + - "

" + - game.title + "

Tags:" + + "" + + "

" + game.title + "

Tags:" + "
"; if (game.tags.length == 0) @@ -103,6 +156,16 @@ $('a#profileurl').attr('href', profile.profileurl); $('div.main').show(); end_popover(); + + var has_tags = false; + for (var i in profile.tagmap) + { + has_tags = true; + break; + } // for + + if (!has_tags) + restart_tutorial(); } // render function process_steam_profile(xml) @@ -458,7 +521,7 @@
[ - buy games + help - source code - @@ -536,6 +599,70 @@
+
+
+

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.

+
+
+ +
+
+ This is you. A beautiful and unique snowflake. +
+
+ +
+
+

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.

+
+
diff --git a/style.css b/style.css index 4872797..afd8ca5 100644 --- a/style.css +++ b/style.css @@ -177,3 +177,18 @@ div.taglist { margin-left: 5px; } +.tutorial { + display:none; + position:fixed; + _position:absolute; /* hack for internet explorer 6*/ + width:35%; + background:#4a4746; + color: #cdc9c0; + border:2px solid #cecece; + z-index:500; + padding:12px; + font-size:13px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} +