Template:TypeRacer Code

From OpenSocial Directory

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
      title="TypeRacer"
      description="Typing meets racing in this first-ever competitive typing game. Compete against your friends and the whole world in the new sport of keyboarding!"
      author="Alex Epshteyn"
      author_email="alex@typeracer.com"
      screenshot="http://typeracer.com/opensocial/images/appDirectoryScreenshotSmall.jpg"
      author_location="Boston, MA, USA"
      thumbnail="http://typeracer.com/opensocial/images/TyperacerThumb120px.png"
      author_affiliation="TypeRacer.com"
      title_url="http://typeracer.com"
      directory_title="TypeRacer"
  >
    <Require feature="opensocial-0.7"/>
    <Require feature="views"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
<script type="text/javascript" src="http://typeracer.com/opensocial/json2.js"></script>
<script type="text/javascript" src="http://typeracer.com/opensocial/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://typeracer.com/opensocial/commons.js"></script>
<script type="text/javascript" src="http://typeracer.com/opensocial/typeracerGadget.js"></script>
<script type="text/javascript" src="http://typeracer.com/orkut/gadgetScript.js"></script>

<style type="text/css">
  body,td,a,div,p {font-family:Verdana,Arial,sans-serif;}
  .profileWPM {font-size:50px; display:block;}
  #profileLogoSection {padding-right:10px;}
  #profileTextSection {text-align:center;}
  #profileStandingsSection {margin-top:10px;}
  .profileLinkToCanvasHolder {margin-top:10px}
  .profileLinkToCanvas {font-size:120%;}
  .tblStandingsOwnerRow {font-weight:bold;}
  #tblStandings th {font-style:italic; font-size:75%;}
  #tblStandings td {text-align:center; font-size:75%;}
  #profileView h3 {margin:0; font-size:90%; color:#676767;}
  #canvasLoadingMessage {margin-top:100px; left:100%;right:100%; text-align: center;}
  #canvasViewAppNotInstalled {margin-top:20px; left:100%;right:100%; text-align: center;}
</style>

<div id="main">
  <div id="canvasView" style="display:none;">
    <div id="canvasLoadingMessage">
      <img src="http://typeracer.com/opensocial/images/redTypewriterSmall.jpg"/>
      <img src="http://typeracer.com/opensocial/images/loadingDripCircleRed.gif"/>
      Please wait...
    </div>
    <div id="canvasHostpageIframeHolder" style="display:none;">

    </div>
    <div id="canvasViewAppNotInstalled" style="display:none;">
      <img src="http://typeracer.com/opensocial/images/TyperacerCanvasRoadster.jpg" align="top"/>
      <div style="margin-top:20px;">Ready to race?  You just need to add TypeRacer to your account first.</div>
      <div class="howToAddAppMsgHolder"></div>
    </div>
  </div>

  <div id="profileView" style="display:none;">
    <div id="profileTop">
      <table style="width:100%;">
        <tr>
          <td>
            <div id="profileLogoSection">
            <a class="profileLinkToCanvas" href="javascript:void(0);" onclick="navigateToCanvas();">
              <img id="profileLogo" src="http://typeracer.com/opensocial/images/TyperacerCanvasRoadster.jpg" border="0"/>
            </a>
            </div>
          </td>
          <td>
            <div id="profileTextSection">
              <div id="profileTextSection_OwnerHasStats_true_ViewerOwner_true_ViewerHasApp_true" style="display:none;">
                <div>You type <span class="profileWPM"></span> words per minute.</div>
                <div class="profileLinkToCanvasHolder"><a class="profileLinkToCanvas" href="javascript:void(0);" onclick="navigateToCanvas();">Race again!</a></div>
              </div>
              <div id="profileTextSection_OwnerHasStats_false_ViewerOwner_true_ViewerHasApp_true" style="display:none;">
                <div>Your score will be posted here after after you've played.</div>
                <div class="profileLinkToCanvasHolder"><a class="profileLinkToCanvas" href="javascript:void(0);" onclick="navigateToCanvas();">Play now!</a></div>
              </div>
              <div id="profileTextSection_OwnerHasStats_true_ViewerOwner_false_ViewerHasApp_true" style="display:none;">
                <div>I type <span class="profileWPM"></span> words per minute.</div>
                <div class="profileLinkToCanvasHolder">Try to <a class="profileLinkToCanvas" href="javascript:void(0);" onclick="navigateToCanvas();"> beat me!</a></div>
              </div>
              <div id="profileTextSection_OwnerHasStats_false_ViewerOwner_false_ViewerHasApp_true" style="display:none;">
                <div>I just added TypeRacer but haven't played yet.  You go ahead and I'll race you as soon as I have time!</div>
                <div class="profileLinkToCanvasHolder"><a class="profileLinkToCanvas" href="javascript:void(0);" onclick="navigateToCanvas();">Play now!</a></div>
              </div>
              <div id="profileTextSection_OwnerHasStats_true_ViewerOwner_false_ViewerHasApp_false" style="display:none;">
                <div>I type <span class="profileWPM"></span> words per minute.</div>
                <div class="profileLinkToCanvasHolder">
                  <div>Race me after you've added TypeRacer to your account!</div>
                  <div class="howToAddAppMsgHolder"></div>
                </div>
              </div>
              <div id="profileTextSection_OwnerHasStats_false_ViewerOwner_false_ViewerHasApp_false" style="display:none;">
                <div>I just added TypeRacer but haven't played yet.  You go ahead and I'll race you as soon as I have time!</div>
                <div class="profileLinkToCanvasHolder">
                  <div class="howToAddAppMsgHolder"></div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div id="profileStandingsSection" style="display:none;">
      <h3>Friend Standings</h3>
      <table id="tblStandings" style="width: 100%;">
        <colgroup>
          <col style="width: 20px;"/>
          <col style="width: 100%;"/>
          <col style="width: 20px;"/>
          <col style="width: 20px;"/>
        </colgroup>
        <thead>
            <tr>
              <th>rank</th>
              <th>name</th>
              <th>average speed</th>
              <th>races completed</th>
            </tr>
        </thead>
        <tbody id="tblStandingsBody">

        </tbody>
      </table>
    </div>
  </div>
</div>
<div id="errorInfo" style="display:none;">
  <img class="imgLogo" src="http://typeracer.com/opensocial/images/TyperacerCanvasRoadster.jpg" style="left:100%;right:100%;display:none;"/>
  <div class="errorMessage" style="margin-top:20px;">
  </div>
</div>
<div id="debugInfo" style="display:none;"></div>
    ]]>
  </Content>

</Module>