Add games menu carousel indicators

src/styl/games-menu.styl

@@ -1,5 +1,9 @@
 #games_menu
   background rgba(21,26,30,0.8)
+  display flex
+  flex-flow column nowrap
+  aligns-items center
+  justify-content center
 
 #wrapper_games
   width 100%
@@ -20,6 +24,19 @@
     flex-flow row nowrap
     overflow-x auto
 
+.carouselIndicators
+  display flex
+  flex-flow row nowrap
+  margin-bottom 1em
+  .indicator
+    width 10px
+    height 10px
+    border 1px solid #fff
+    border-radius 50%
+    margin-right 5px
+    &.current
+      background #fff
+
 .card
   background #2a2a2a
   border-radius 5px

src/ui/gamesMenu.ts

@@ -1,6 +1,8 @@
 import * as h from 'mithril/hyperscript'
+import * as range from 'lodash/range'
 import * as Siema from 'siema'
 import * as utils from '../utils'
+import redraw from '../utils/redraw'
 import { positionsCache } from '../utils/gamePosition'
 import { getOfflineGames } from '../utils/offlineGames'
 import { playerName as liPlayerName } from '../lichess/player'
@@ -47,6 +49,7 @@ export default {
       onbeforeremove: menuOnBeforeRemove
     }, [
       h('div.wrapper_overlay_close', { oncreate: menuOnOverlayTap }),
+      renderCarouselIndicators(),
       h('div#wrapper_games', renderAllGames()),
     ])
   }
@@ -70,7 +73,9 @@ function wrapperOnCreate({ dom }: Mithril.DOMNode) {
       perPage: helper.isWideScreen() ? 2 : 1,
       startIndex: 0,
       draggable: true,
+      onChange: () => redraw(),
     })
+    redraw()
   }
 }
 
@@ -226,6 +231,20 @@ function renderIncomingChallenge(c: Challenge) {
   ])
 }
 
+function renderCarouselIndicators() {
+  if (helper.isPortrait() && scroller) {
+    return h('div.carouselIndicators',
+      range(0, scroller.innerElements.length).map(i =>
+        h('i.indicator', {
+          className: i === scroller.currentSlide ? 'current' : ''
+        })
+      )
+    )
+  }
+
+  return null
+}
+
 function renderAllGames() {
   const nowPlaying = session.nowPlaying()
   const challenges = challengesApi.incoming()