Xbox Live: Recently Played Games / Gamercard by MrBlank

utility.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <!--
        
        Description: 
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Symphony utility - UNFINISHED CODE you'll have to work with this, but it's a start. It should get yolu 90% of the way. :-)
        
        Xbox Live: Recently Played Games / Gamercard
        
        Uses Duncan Mackenzie’s API for Xbox Gamertag Data as a datasource: http://duncanmackenzie.net/blog/put-up-a-rest-api-for-xbox-gamertag-data/default.aspx
        Example: http://duncanmackenzie.net/services/GetXboxInfo.aspx?GamerTag=MrBlank+0
        Replace 'MrBlank+0' with your Gamertag. Use a '+' for any spaces in the Gamertag.
        
        Some CSS you can use to start with:
        
        .xbox-games { clear:both; margin-bottom:2em; }
        .xbox-games h4 { margin-left: 80px; font-size:2em; color:#360; margin-bottom:10px; font-weight:normal; }
        .xbox-games img { float:left; margin:5px 15px 15px 0; overflow:hidden; width:64px; height:64px; }
        .xbox-bar { display:block; position:relative; margin:0 0 10px 80px; padding:5px; background-color:#eee; border:#360 solid 1px; }
        .xbox-bar .score { display:block; position:relative; z-index:2; font-size:1em; line-height:1em; color:#000; }
        .xbox-bar .bar-fill { display:block; position:absolute; top:0; left:0; height:100%; background:#b5d4ab; text-indent:-9999px; overflow:hidden; }
        .gamercard { margin-bottom:2em; }
        .gamercard h3 { font-size:2em; color:#360; margin-bottom:10px; font-weight:normal; }
        .gamercard img.icon { float:left; margin:0 1em 1em 0; }
        .gamercard ul { list-style:none; margin-bottom:0; }
        .gamercard ul li img.rep-image { border:2px solid #757575; vertical-align:text-bottom;}
        .gamercard ul.played-games { clear:both; margin:0 0 .6em 0; }
        .gamercard ul.played-games li { width:32px; height:32px; float:left; margin:0 5px 6px 0; line-height:1em; overflow:hidden; }
                
        .clearfix:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
        .clearfix {display:block;}
        .clearfix {*display:inline-block;} //for IE
        * html .clearfix {*height:1%;} // for IE   
        
        To do: 
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        - Rep stars are fugly. I need to figure out how to replace them with the nice gold, transparent ones found on the Xbox Live profile page.
        
        Credit:
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Created by Josh Nichols 
        http://www.joshnichols.com
        
    --> 
    <xsl:template match="data">
        <div class="recent-games">
            <h4>Recently Played Games</h4>
            <!-- Check for feed errors and output somethig incase the data is unavailable -->
            <xsl:choose>
                <!-- When Duncan Mackenzie’s API for Xbox Gamertag Data is down -->
                <xsl:when test="xbox-live-info/error">
                    <p>The feed is down right now, sorry. :-(</p>
                </xsl:when>
                <!-- When Duncan Mackenzie’s API for Xbox Gamertag Data can't connect to Xbox Live -->
                <xsl:when test="xbox-live-info/XboxInfo/AccountStatus = 'Unknown'">
                    <p>Xbox Live connection is down! :-(</p>
                </xsl:when>
                <!-- If it's all good, apply the recently played games template -->
                <xsl:otherwise>
                    <xsl:apply-templates select="xbox-live-info/XboxInfo/RecentGames/XboxUserGameInfo"/>
                </xsl:otherwise>
            </xsl:choose>
        </div>
        <div class="sidebar">
            <!-- Simple error checking like above -->
            <xsl:choose>
                <xsl:when test="xbox-live-info/error"/>
                <xsl:when test="xbox-live-info/XboxInfo/AccountStatus = 'Unknown'"/>
                <!-- If all's good, apply the gamercard template -->
                <xsl:otherwise>
                    <xsl:apply-templates select="xbox-live-info/XboxInfo"/>
                </xsl:otherwise>
            </xsl:choose>
        </div>
    </xsl:template>
    
    <!-- Played games stats -->
    <xsl:template match="XboxUserGameInfo">
        <!-- Make parameters out of the bits of info we need for easy coding below -->
        <xsl:param name="title" select="Game/Name"/>
        <xsl:param name="thumb" select="Game/Image64Url"/>
        <xsl:param name="link" select="DetailsURL"/>
        <xsl:param name="total-achievments" select="Game/TotalAchievements"/>
        <xsl:param name="achievments" select="Achievements"/>
        <xsl:param name="achievment-percent" select="format-number($achievments div $total-achievments, '##%')"/>
        <xsl:param name="total-score" select="Game/TotalGamerScore"/>
        <xsl:param name="score" select="GamerScore"/>
        <xsl:param name="score-percent" select="format-number($score div $total-score, '##%')"/>
        
        <div class="xbox-games clearfix">
            <!-- Game thumbnail link -->
            <img src="{$thumb}" alt="{$title}" title="{$title}" />
            <!-- Game title -->
            <h4>
                <!-- A choose statement to remove the annoying '™' from some game names -->
                <xsl:choose>
                    <xsl:when test="contains($title, '™')">
                        <xsl:value-of select="substring-before($title, '™')"/><xsl:value-of select="substring-after($title, '™')"/>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="$title"/>
                    </xsl:otherwise>
                </xsl:choose> 
            </h4>
            <!-- Achievements bar -->
            <div class="xbox-bar">
                <!-- Write the label for the bar -->
                <span class="score"><xsl:value-of select="$achievments"/> of <xsl:value-of select="$total-achievments"/> achievements</span>
                <!-- When 0% give a width of 0. Otherwise calculate the percent -->
                <xsl:choose>
                    <xsl:when test="$achievments = 0">
                        <span class="bar-fill" style="width:0;"> 0%</span>
                    </xsl:when>
                    <xsl:otherwise>
                        <span class="bar-fill" style="width:{$achievment-percent};">
                            <xsl:value-of select="$achievment-percent"/>
                        </span>
                    </xsl:otherwise>
                </xsl:choose>
            </div>
            <!-- Points bar -->
            <div class="xbox-bar">
                <!-- Write the label for the bar -->
                <span class="score"><xsl:value-of select="$score"/> of <xsl:value-of select="$total-score"/> gamer points</span>
                <!-- When 0% give a width of 0. Otherwise calculate the percent -->
                <xsl:choose>
                    <xsl:when test="$score = 0">
                        <span class="bar-fill" style="width:0;"> 0%</span>
                    </xsl:when>
                    <xsl:otherwise>
                        <span class="bar-fill" style="width:{$score-percent};">
                            <xsl:value-of select="$score-percent"/>
                        </span>
                    </xsl:otherwise>
                </xsl:choose>
            </div>
        </div>
    </xsl:template>
    
    <!-- Gamercard -->
    <xsl:template match="XboxInfo">
        <div class="gamercard clearfix">
            <h4>Xbox Live Gamercard</h4>
            <!-- Output Gamertag and link to Xbox Live profile -->
            <h3><a href="{ProfileUrl}"><xsl:value-of select="Gamertag"/></a></h3>
            <!-- Profile avatar and link to Xbox Live profile -->
            <a href="{ProfileUrl}"><img class="icon" src="{TileUrl}" alt="{Gamertag}" title="{Gamertag}" /></a>
            <!-- Begin list of profile metadata -->
            <ul>
                <li>
                    <strong>Rep: </strong>
                    <!-- Output rep stars -->
                    <img class="rep-image" src="{ReputationImageUrl}" alt="{Reputation}" />
                </li>
                <li>
                    <strong>Gamerscore: </strong>
                    <xsl:value-of select="GamerScore" />
                </li>
                <li>
                    <strong>Zone: </strong>
                    <xsl:value-of select="Zone" />
                </li>
            </ul>
            <!-- Begin recently played games list -->
            <ul class="played-games">
                <!-- Grab the last 5 played games and their small icons -->
                <xsl:for-each select="RecentGames/XboxUserGameInfo[position() &lt;= 5]">
                    <li>
                        <img src="{Game/Image32Url}" alt="{Game/Name}" title="{Game/Name}" />
                    </li>
                </xsl:for-each>
            </ul>
        </div>
    </xsl:template> 
    
</xsl:stylesheet>