better miniboard vs text

app/templating/GameHelper.scala

@@ -37,8 +37,8 @@ trait GameHelper { self: I18nHelper with UserHelper with AiHelper with StringHel
     case Mode.Rated  ⇒ trans.rated.str()
   }
 
-  def usernameWithElo(player: Player) =
-    Namer.player(player)(userEnv.usernameOrAnonymous).await
+  def playerUsername(player: Player, withElo: Boolean = true) =
+    Namer.player(player, withElo)(userEnv.usernameOrAnonymous).await
 
   def playerLink(
     player: Player,
@@ -56,7 +56,7 @@ trait GameHelper { self: I18nHelper with UserHelper with AiHelper with StringHel
           """<a %s href="%s">%s%s</a>""".format(
             userClass(userId, cssClass, withOnline),
             routes.User show username,
-            usernameWithElo(player) + ~(player.eloDiff filter (_ ⇒ withDiff) map { diff ⇒
+            playerUsername(player) + ~(player.eloDiff filter (_ ⇒ withDiff) map { diff ⇒
               " (%s)".format(showNumber(diff))
             }),
             engine ?? """<span class="engine_mark" title="%s"></span>""" format trans.thisPlayerUsesChessComputerAssistance()

app/views/game/vstext.scala.html

@@ -1,6 +1,15 @@
-@(g: Game) 
+@(g: Game)
 
-<div class="vstext">
-  @usernameWithElo(g.creator) - @usernameWithElo(g.invited)<br />
-  @g.clock.map(shortClockName)
+<div class="vstext clearfix">
+  <div class="left">
+    @playerUsername(g.creator, false)<br />
+    @g.creator.elo
+  </div>
+  <div class="right">
+    @playerUsername(g.invited, false)<br />
+    @g.invited.elo
+  </div>
+  @g.clock.map { c =>
+  <div class="center"><br />@shortClockName(c)</div>
+  }
 </div>

public/stylesheets/common.css

@@ -1222,13 +1222,31 @@ div.game_list.realtime > div {
   float: left;
   margin: 0px 12px 12px 12px;
 }
-div.game_list.realtime div.vstext {
+div.vstext {
   font-size: 11.5px;
-  text-align: center;
   width: 224px;
+  line-height: 1.2em;
+  height: 2.4em;
   overflow: hidden;
   white-space: nowrap;
   margin-top: 5px;
+  position: relative;
+}
+div.vstext > .center {
+  width: 100%;
+  text-align: center;
+}
+div.vstext .left {
+  float: left;
+}
+div.vstext .right {
+  float: right;
+  text-align: right;
+}
+div.vstext .center {
+  position: absolute;
+  bottom: 0;
+  text-align: center;
 }
 div.extra_top {
   float: right;
@@ -1743,10 +1761,6 @@ div.game_config div.color_submits button.random span {
   background: red url(../images/engine_small.png) top left no-repeat;
   border-radius: 8px 0 3px 0;
 }
-#featured_game div.vstext {
-  margin-top: 0.7em;
-  text-align: center;
-}
 div.undertable {
   width: 514px;
   font-size: 11.5px;