index.html

<!doctype html>
<html>
  <head>
    <title>Steam Tags</title>
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
<!--

var profile = null;  // all the user state.

var current_popover = null;
function end_popover()
{
    if (current_popover != null)
    {
        $(current_popover).fadeOut("slow");
        $("#backgroundpopover").fadeOut("slow");  
        current_popover = null;
    } // if
} // end_popover

function popover(element)
{
    if (current_popover != null)
        $(current_popover).fadeOut("slow");

    current_popover = element;
    ui_resize();  // make this sane.

    $("#backgroundpopover").css('opacity', '0.7');
    $("#backgroundpopover").fadeIn('slow');
    $(element).fadeIn('slow');

    // I guess this doesn't actually recalculate the element sizes until the
    //  scripts are idle, so do a short timeout so it rechecks this after
    //  the layout has a chance to catchup.
    setTimeout('ui_resize();', 10);
} // popover

function ui_resize()
{
    var element = current_popover;
    if (element == null)
        return;

    $('#backgroundpopover').css('height', windowHeight);

    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupWidth = windowWidth / 2;
    $(element).css('width', popupWidth);

    var popupHeight = $(element).children().height();

    $(element).css({
        position: 'absolute',
        top: (windowHeight - popupHeight) / 2,
        left: (windowWidth - popupWidth) / 2,
        width: popupWidth,
        height: popupHeight
    });
} // 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)
        return;

    $('img.avatar').attr('src', profile.avatarurl_medium);
    $('div.nickname').text(profile.nickname);

    var gameidx;
    for (gameidx in profile.gamelist)
    {
        var game = profile.gamelist[gameidx];
        var html = "<tr class='gamerow' profilegameidx='" + gameidx + "'>" +
                   "<td class='gamecell'>" +
                   "<a href='steam://run/" + game.appid + "'>" + 
                   "<img width='123' height='45' src='" + game.logourl + "'/>" +
                   "</a><td class='gamecell'>" +
                   "<h4>" + game.title + "</h4><div class='tagline'>Tags:" +
                   "<div class='taglist' profilegameidx=" + gameidx + ">";

        if (game.tags.length == 0)
            html += ' (none)';
        else
        {
            var tagidx;
            for (tagidx in game.tags)
                html += " " + game.tags[tagidx];
        } // else
        html += "</div></div></td></tr>";

        $('table.gametable > tbody:last').append(html);
    } // for

    $('tr.gamerow').each(function() {
        profile.gamelist[$(this).attr('profilegameidx')].element = $(this);
    });

    $('div.taglist').one("click", function() { clicked_taglist($(this)); });
    $('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)
{
    var prof = $(xml).find('profile');
    var steamid = prof.find('steamid').text();
    if (steamid == '0')
    {
        popover('#loginpopover');
        return null;
    } // if

    if (prof.find('valid').text() == '0')
    {
        popover('#loginfailurepopover');
        return null;
    } // if

    if (prof.find('private').text() == '1')
    {
        var url = 'http://steamcommunity.com/profiles/' + steamid + '/edit/settings';
        $('a#privpage').attr('href', url);
        popover('#privateprofilepopover');
        return null;
    } // if

    var retval = {
        nickname: prof.find('nickname').text(),
        steamid: prof.find('steamid').text(),
        name: prof.find('name').text(),
        profileurl: prof.find('profileurl').text(),
        onlinestate: prof.find('onlinestate').text(),
        statemsg: prof.find('statemsg').text(),
        avatarurl_small: prof.find('avatarurl_small').text(),
        avatarurl_medium: prof.find('avatarurl_medium').text(),
        avatarurl_large: prof.find('avatarurl_large').text(),
        vacbanned: (prof.find('vacbanned').text() != '0'),
        membersince: prof.find('membersince').text(),
        rating: prof.find('rating').text(),
        hoursplayed_2weeks: prof.find('hoursplayed_2weeks').text(),
        headline: prof.find('headline').text(),
        location: prof.find('location').text(),
        realname: prof.find('realname').text(),
        summary: prof.find('summary').text(),
        weblinks: new Array(),
        gamelist: new Array(),
        filter: '',
        tagmap: new Object()
    }

    prof.find('weblink').each(function(){
        retval['weblinks'].push({
            title: $(this).find('title').text(),
            url: $(this).find('url').text()
        });
    })

    prof.find('game').each(function(){
        var game = {
            appid: $(this).find('appid').text(),
            title: $(this).find('title').text(),
            logourl: $(this).find('logourl').text(),
            storeurl: $(this).find('storeurl').text(),
            tagmatchcount: 0,
            element: null,
            tags: new Array
        };

        $(this).find('tag').each(function(){
            var t = $(this).text().toLowerCase();
            game.tags.push(t);
            if (retval.tagmap[t] == null)
                retval.tagmap[t] = new Array();
            retval.tagmap[t].push(game);
        });

        retval['gamelist'].push(game);
    });

    if (retval['gamelist'].length == 0)
    {
        popover('#noappspopover');
        return null;        
    } // if

    return retval;
} // process_steam_profile

var run_filter_timer = null;
function run_filter()
{
    // stop any pending filter runs.
    clearTimeout(run_filter_timer);
    run_filter_timer = null;

    var filter = '';
    var widget = $('input.tagfilter');

    // ignore text in box if we haven't focused it yet.
    if (widget && widget.attr('filter_cleared'))
        filter = widget.val();

    filter = filter.toLowerCase();
    filter = filter.replace(/^\s*|\s*$/g, '');

    if (profile.filter == filter)
        return;  // fast path: nothing's changed.

    profile.filter = filter;

    // fast path: can we just show everything?
    if (filter == '')   // just show everything.
    {
        $('tr.gamerow').show();
        return;
    } // if

    var filtertags = filter.split(' ');

    for (var t in filtertags)
    {
        // fast path: can we just hide everything?
        if (profile.tagmap[filtertags[t]] == null)
        {
            $('tr.gamerow').hide();   // no rows match this tag.
            return;
        } // if
    } // for

    for (var t in filtertags)
    {
        var tag = filtertags[t];
        for (var i in profile.tagmap[tag])
        {
            var game = profile.tagmap[tag][i];
            game.tagmatchcount++;
        } // for
    } // for

    // okay, now we have a list of games that should be filtered.
    for (var i in profile.gamelist)
    {
        var game = profile.gamelist[i];
        if (game.tagmatchcount != filtertags.length)
            game.element.hide();
        else
            game.element.show();
        game.tagmatchcount = 0;   // reset this for next time.
    } // for
} // run_filter

function focus_filter_textbox()
{
    // blank out the filter textbox when focused if it has default text.
    var widget = $('input.tagfilter');
    if (widget && !widget.attr('filter_cleared'))
    {
        widget.attr('filter_cleared', true);
        widget.val('');
    } // if
} // focus_filter_textbox

function typing_in_filter()
{
    // we only update the filter when it's been more than X ms, in case the
    //  list is massive.
    if (run_filter_timer != null)
        clearTimeout(run_filter_timer);
    run_filter_timer = setTimeout('run_filter();', 50);
} // typing_in_filter

function save_tags(appid, tagstr)
{
    // we only allow a-z, 0-9, and spaces. So URI encode the spaces.
    var tagstrurl = tagstr.replace(/ /g, '%20');
    $.ajax({
        type: 'GET',
        url: 'savetags.php?appid=' + appid + '&tags=' + tagstrurl,
        dataType: "xml",
        success: function(xml) {
            // !!! FIXME: we leave the tags dead if this fails for any reason.
            var resxml = $(xml).find('result');
            if ((resxml == null) || (resxml.text() != '1'))
                return;

            var appidxml = $(xml).find('appid');
            if (appidxml == null)
                return;

            // !!! FIXME: we can just upvalue here, right? Why iterate?
            var appid = appidxml.text();
            var game = null;
            for (var i in profile.gamelist)
            {
                if (profile.gamelist[i].appid == appid)
                {
                    game = profile.gamelist[i];
                    break;
                } // if
            } // for

            if (game == null)
                return;

            var element = game.element.find('div.taglist');
            if (element == null)
                return;

            // !!! FIXME: get this from the stylesheet
            element.css('color', '#FFFFFF');
            element.one("click", function() { clicked_taglist($(this)); });
        }
    });
} // save_tags

function process_tag_edit(element, tagstr)
{
    tagstr = tagstr.toLowerCase();
    tagstr = tagstr.replace(/^\s*|\s*$/g, '');
    tagstr = tagstr.replace(/\s+/g, ' ');
    tagstr = tagstr.replace(/[^a-z0-9 ]/g, '');

    // remove duplicate tags...
    var dupetags = tagstr.split(' ');
    var tags = new Array();
    for (var i in dupetags)
    {
        var dupe = false;
        for (var j in tags)
        {
            if (dupetags[i] == tags[j])
            {
                 dupe = true;
                 break;
            } // if
        } // for
        if (!dupe)
            tags.push(dupetags[i]);
    } // for
    tagstr = tags.join(' ');

    // update profile.gamelist[gameidx].tags and profile.tagmap...
    var parentdiv = element.parent();
    var gameidx = parentdiv.attr('profilegameidx');
    var game = profile.gamelist[gameidx];

    for (var i in game.tags)
    {
        var t = game.tags[i];
        var gamelist = profile.tagmap[t];
        for (var j = 0; j < gamelist.length; j++)
        {
            if (gamelist[j] == game)
            {
                gamelist.splice(j, 1);
                j--;
            } // if
        } // for
        if (gamelist.length == 0)
            profile.tagmap[t] = null;
    } // for

    for (var i in tags)
    {
        var t = tags[i];
        if (profile.tagmap[t] == null)
            profile.tagmap[t] = new Array();
        profile.tagmap[t].push(game);
    } // for

    game.tags = tags;

    // Push the updated tags back to the server for storage.
    save_tags(game.appid, tagstr);

    // Kill the text input widget, go back to regular text.
    if (tagstr == '')
        tagstr = '(none)';
    parentdiv.html(' ' + tagstr);
    // !!! FIXME: get this from the stylesheet
    parentdiv.css('color', '#777777');
} // process_tag_edit

function clicked_taglist(element)
{
    var editor = $("input.tagedit");
    if (editor)
        editor.blur();  // that should kill it.

    var tagstr = element.text().replace(/^\s*|\s*$/g, '');
    if (tagstr == '(none)')
        tagstr = '';

    var html = "<input type='text' autocapitalize='off' size='100'" +
               " class='tagedit' name='tagedit'" +
               " value='" + tagstr + "'/>";
    element.html(html);

    editor = $("input.tagedit");
    editor.blur(function() { process_tag_edit($(this), $(this).val()); });
    editor.change(function() { process_tag_edit($(this), $(this).val()); });
    editor.keyup(function(e) {
        if (e.keyCode != 27)
            return;
        // revert to original tags on escape.
        var parentdiv = $(this).parent();
        var gameidx = parentdiv.attr('profilegameidx');
        var game = profile.gamelist[gameidx];
        var tagstr = game.tags.join(' ');
        process_tag_edit($(this), tagstr);
    });
    editor.focus();
} // clicked_taglist

// kick off AJAX load of user profile when document is ready for action.
$(document).ready(function(){
    $(window).resize( function() { ui_resize(); } );

    // Mobile Safari (etc?) orientation support.
    window.onorientationchange = function() { ui_resize(); }

    popover('#loadingmessage');
    $.ajax({
        type: "GET",
        url: "steamprofile.php",
        dataType: "xml",
        error: function() { popover('#loginfailurepopover'); },
        success: function(xml) {
            profile = process_steam_profile(xml);
            render();
        }
    });
});

-->
    </script>
  </head>
  <body>
    <div class='main'>
      <div class="global_header"> 
        <img class='avatar' width='64' height='64' src='loading.gif'/>
        <div class='nickname'></div>
        <div class='controls'>
          <div class='searchbox'> 
            <input type='text' autocapitalize='off'
                   class='tagfilter' name='filter'
                   onFocus='focus_filter_textbox();' 
                   onBlur='run_filter();'
                   onChange='run_filter();' 
                   onKeyDown='typing_in_filter();' 
                   value='Enter filter tags' size='22' autocomplete='off'/>
          </div>
          <div class='navbar'>
            <center>
            [
            <a href='javascript:restart_tutorial();'>help</a>
            -
            <a target='_blank' href='http://hg.icculus.org/icculus/steamtags'>source code</a>
            -
            <a target='_blank' id='profileurl' href='xxx'>profile</a>
            -
            <a href='mailto:icculus@icculus.org?subject=Steam%20Tags%20Feedback'>feedback</a>
            -
            <a href='auth.php?logout=1'>logout</a>
            ]
            <br/>
            [ <a target='_blank' href='http://steampowered.com/'> Powered by Steam</a> ]
            </center>
          </div>
        </div>
      </div>
      <table class='gametable'><tbody></tbody></table>
      <div class="global_footer"></div> 
    </div>

    <div id='loadingmessage'>
      <center>Loading your Steam Community profile...</center>
    </div>

    <div class='popover' id='loginpopover'>
      <center>
        <p>This website lets you organize and filter your Steam purchases
           through tags you choose. You can categorize and file your games
           thousands of different ways.</p>
        <br/>
        <p>You need to log in to Steam Community to access this page.</p>
        <p>Your password will only be supplied to the Steam website. This
           website will never have access to your login information.</p>
        <br/>
        <p><a href='auth.php'>
           Click here to log in through steamcommunity.com</a></p>
      </center>
    </div>

    <div class='popover' id='loginfailurepopover'>
      <center>
        <p>We're having trouble accessing your Steam Community profile.</p>
        <br/>
        <p>This is probably a temporary network glitch. Please try again later.</p>
        <p>If this problem persists, feel free to
           <a href='mailto:icculus@icculus.org'>ask Ryan about it</a>.</p>
        <br/>
        <p><a href='http://store.steampowered.com/'>
          Click here to shop for games on Steam in the meantime.</a></p>
      </center>
    </div>

    <div class='popover' id='privateprofilepopover'>
      <center>
        <p>Your Steam Community profile appears to be set to private.</p>
        <br/>
        <p>You need to change your Steam Community settings to access this page.</p>
        <p>The "profile status" must be set to "public."</p>
        <p>Please note that this will let everyone see your information!</p>
        <p>Unfortunately, it's the only way this site can see it, too.</p>
        <br/>
        <p><a id='privpage' href='xxx'>
          Click here to go to your steamcommunity.com settings.</a></p>
      </center>
    </div>

    <div class='popover' id='noappspopover'>
      <center>
        <p>You don't seem to own any games!</p>
        <br/>
        <p>This website isn't very useful if you don't have something to
           organize.</p>
        <br/>
        <p><a href='http://store.steampowered.com'>
          Click here to go shopping!</a></p>
      </center>
    </div>

    <div class='tutorial' id='tutorial0' 
     tutorialtarget='div.taglist:first' tutorialtimeout='15000'>
      <center>
        <p>Click a game's tags, and then you can edit them.</p>
        <br/>
        <p>Just type in some simple words, separated with spaces. Describe
           the game.</p>
        <br/>
        <p>If this game were <a target='_blank' href='http://store.steampowered.com/app/26800'>Braid</a>, you might type in:</p>
        <p><code>platformer indie puzzle steamplay</code></p>
        <p>Or <a target='_blank' href='http://store.steampowered.com/app/1250'>Killing Floor</a> might be:</p>
        <p><code>fps multiplayer zombies</code></p>
        <br/>
        <p>Use any words you like to describe the game. You'll be able to
           find this game later through these words.</p>
        <br/>
        <p>When you're done, just click elsewhere to save.</p>
      </center>
    </div>

    <div class='tutorial' id='tutorial1'
     tutorialtarget='div.searchbox' tutorialtimeout='10000'>
      <center>
        <p>Next, type in some tags up here.</p>
        <br/>
        <p>The list of games will filter down to exactly match the tags you
           typed, as you type them.</p>
        <p>Now you can find your games based on arbitrary criteria you choose!</p>
      </center>
    </div>

    <div class='tutorial' id='tutorial2'
     tutorialtarget='td.gamecell > a > img:first' tutorialtimeout='8000'>
      <center>
        <p>Click a game's icon to launch it.</p>
        <br/>
        <p>This will tell the Steam client to install and run the game.</p>
        <p>You'll need to have Steam installed for this to work.</p>
      </center>
    </div>

    <div class='tutorial' id='tutorial3'
     tutorialtarget='img.avatar' tutorialtimeout='3000'>
      <center>
        This is you. A beautiful and unique snowflake.
      </center>
    </div>

    <div class='tutorial' id='tutorial4'
     tutorialtarget='div.navbar' tutorialtimeout='10000'>
      <center>
        <p>Here are some various useful links.</p>
        <br/>
        <p>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.</p>
        <br/>
        <p>Clicking 'help' reruns this tutorial.</p>
      </center>
      <br/>
      <p align='right'>Have fun!</p>
      <p align='right'>--ryan.</p>
    </div>

    <div id='backgroundpopover'></div>
  </body>
</html>