Translate ban message

src/session.ts

@@ -103,11 +103,6 @@ function nowPlaying(): readonly NowPlayingGame[] {
  )
 }
 
-function currentBan(): Date | undefined {
- const playban = session && session.playban
- return playban && new Date(playban.date + playban.mins * 60000)
-}
-
 function isKidMode(): boolean {
  return !!(session && session.kid)
 }
@@ -370,8 +365,7 @@ export default {
  lichessBackedProp,
  setKidMode,
  confirmEmail,
- currentBan,
  hasCurrentBan(): boolean {
- return currentBan() !== undefined
+ return session?.playban !== undefined
  },
 }

src/styl/home.styl

@@ -192,6 +192,7 @@
  line-height 2em
  > p
  font-size 0.9em
+ text-align left
  > ul
  list-style initial
  margin-left 2em

src/ui/home/homeView.tsx

@@ -4,7 +4,7 @@ import socket from '../../socket'
 import { openExternalBrowser } from '../../utils/browse'
 import { emptyFen } from '../../utils/fen'
 import { hasNetwork } from '../../utils'
-import i18n, { plural, formatNumber, fromNow } from '../../i18n'
+import i18n, { plural, formatNumber, distanceToNowStrict } from '../../i18n'
 import session from '../../session'
 import { PongMessage, CorrespondenceSeek } from '../../lichess/interfaces'
 import spinner from '../../spinner'
@@ -55,7 +55,8 @@ function offline(ctrl: HomeCtrl) {
 }
 
 function online(ctrl: HomeCtrl) {
- const playbanEndsAt = session.currentBan()
+ const playban = session.get()?.playban
+ const playbanEndsAt = playban && new Date(playban.date + playban.mins * 60000)
 
  return (
  <div className="home">
@@ -350,31 +351,29 @@ function renderTimeline(ctrl: HomeCtrl) {
 }
 
 function renderPlayban(endsAt: Date) {
- const seconds = (endsAt.valueOf() - Date.now()) / 1000
  return (
  <div className="home-playbanInfo">
- <h2>Sorry :(</h2>
- <p>We had to time you out for a {seconds < 3600 ? 'little ' : ''}while.</p>
+ <h2>{i18n('sorry')}</h2>
+ <p>{i18n('weHadToTimeYouOutForAWhile')}</p>
  <br />
- <p>The timeout expires <strong>{fromNow(endsAt)}</strong>.</p>
- <h2>Why?</h2>
+ <p>{h.trust(i18n('timeoutExpires', `<strong>${distanceToNowStrict(endsAt)}</strong>`))}</p>
+ <h2>{i18n('why')}</h2>
  <p>
- We aim to provide a pleasant chess experience for everyone.
- To that effect, we must ensure that all players follow good practices.
- When a potential problem is detected, we display this message.
+ {i18n('pleasantChessExperience')}<br />
+ {i18n('goodPractice')}<br />
+ {i18n('potentialProblem')}
  </p>
- <h2>How to avoid this?</h2>
+ <h2>{i18n('howToAvoidThis')}</h2>
  <ul>
- <li>Play every game you start</li>
- <li>Try to win (or at least draw) every game you play</li>
- <li>Resign lost games (don't let the clock run down)</li>
+ <li>{i18n('playEveryGame')}</li>
+ <li>{i18n('tryToWin')}</li>
+ <li>{i18n('resignLostGames')}</li>
  </ul>
  <br />
- <br />
  <p>
- We apologize for the temporary inconvenience,<br />
- and wish you great games on lichess.org.<br />
- Thank you for reading!
+ {i18n('temporaryInconvenience')}<br />
+ {i18n('wishYouGreatGames')}<br />
+ {i18n('thankYouForReading')}
  </p>
  </div>
  )