streamer page tweaks

app/views/streamer/StreamerSvg.scala

@@ -12,7 +12,14 @@ object StreamerSvg {
 
   val youTube = Html("""
 <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path class="a" d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
+  <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
+</svg>
+""")
+
+  val lichess = Html("""
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="5 5 40 40">
+<path d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18"/>
+<path d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31 C 9.958,30.06 12.41,27.96 11,28 C 10,28 11.19,29.23 10,30 C 9,30 5.997,31 6,26 C 6,24 12,14 12,14 C 12,14 13.89,12.1 14,10.5 C 13.27,9.506 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.28,8.008 21,7 C 22,7 22,10 22,10"/>
 </svg>
 """)
 }

app/views/streamer/header.scala.html

@@ -19,6 +19,12 @@
         @youTube.minUrl
       </a>
       }
+      @if(following.isDefined) {
+      <a class="service lichess" href="@routes.User.show(s.user.username)">
+        @StreamerSvg.lichess
+        lichess.org/@@/@s.user.username
+      </a>
+      }
     </div>
     <div class="metas">
       <div class="ats">

app/views/streamer/show.scala.html

@@ -40,7 +40,8 @@
 @moreJs = {
 @embedJs {
 $('button.follow').click(function() {
-$(this).toggleClass('active');
+var klass = 'active';
+$(this).toggleClass(klass);
 $.ajax({
 url: '/rel/' + ($(this).hasClass('active') ? 'follow/' : 'unfollow/') + $(this).data('user'),
 method:'post'
@@ -89,7 +90,7 @@ case _ => {
   @header(s, following.some)
   <div class="description">@richText(s.streamer.description.fold("")(_.value))</div>
   <a class="ratings" href="@routes.User.show(s.user.username)">
-    @s.user.best8Perfs.map { pt =>
+    @s.user.best6Perfs.map { pt =>
     @showPerfRating(s.user, pt)
     }
   </a>

modules/user/src/main/User.scala

@@ -84,16 +84,17 @@ case class User(
 
   def lightCount = User.LightCount(light, count.game)
 
-  private def best4Of(perfTypes: List[PerfType]) =
+  private def bestOf(perfTypes: List[PerfType], nb: Int) =
     perfTypes.sortBy { pt =>
       -(perfs(pt).nb * PerfType.totalTimeRoughEstimation.get(pt).fold(0)(_.centis))
-    } take 4
+    } take nb
 
   private val firstRow: List[PerfType] = List(PerfType.Bullet, PerfType.Blitz, PerfType.Rapid, PerfType.Classical, PerfType.Correspondence)
   private val secondRow: List[PerfType] = List(PerfType.UltraBullet, PerfType.Crazyhouse, PerfType.Chess960, PerfType.KingOfTheHill, PerfType.ThreeCheck, PerfType.Antichess, PerfType.Atomic, PerfType.Horde, PerfType.RacingKings)
 
-  def best8Perfs: List[PerfType] =
-    best4Of(firstRow) ::: best4Of(secondRow)
+  def best8Perfs: List[PerfType] = bestOf(firstRow, 4) ::: bestOf(secondRow, 4)
+
+  def best6Perfs: List[PerfType] = bestOf(firstRow ::: secondRow, 6)
 
   def hasEstablishedRating(pt: PerfType) = perfs(pt).established
 

public/stylesheets/streamer.show.css

@@ -59,6 +59,9 @@ div.content_box.streamer h1 {
   height: 1.4em;
   margin-right: 0.4em;
 }
+.streamer a.service:hover svg path {
+  fill: #3893E8!important;
+}
 .livestream {
   margin-bottom: 0px;
   line-height: 0;
@@ -77,14 +80,15 @@ div.content_box.streamer h1 {
   letter-spacing: 10px;
 }
 .streamer .description {
-  padding: 2.5em;
+  padding: 2.5em 50px 2.5em 65px;
   font-size: 1.4em;
 }
+.streamer .services a:hover,
 .streamer .description a {
- color: #3893E8;
+  color: #3893E8;
 }
 .streamer .ratings {
-  padding: 2em;
+  padding: 2em 50px 2em 58px;
   font-size: 1.6em;
   background: rgba(128,128,128,0.3);
   background: rgba(220,50,47,0.2);
@@ -93,6 +97,10 @@ div.content_box.streamer h1 {
   justify-content: space-between;
   margin-bottom: 1em;
 }
+.streamer .ratings span::before {
+  font-size: 1.6em;
+  margin-right: 0.1em;
+}
 body.dark .streamer .service svg path {
   fill: #aaa;
 }