feat(matchmaking): add ranked matchmaking

apps/front/src/components/App.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-import { getPathLanguage } from '../translations'
+import { useTranslation } from 'react-i18next'
+import { BrowserRouter, useLocation } from 'react-router-dom'
+import { DEFAULT_LANGUAGE, getPathLanguage } from '../translations'
+import { ensurePlayerIdentity } from '../utils/playerIdentity'
 import { Language } from './Language'
-import { PlayerIdentityGate } from './PlayerIdentityGate'
 import { PlayerIdentityTransfer } from './PlayerIdentityTransfer'
 import { Router } from './Router'
 import {
@@ -13,11 +14,31 @@ import {
 } from './SideBar'
 import { Theme } from './Theme'
 
+function LanguageSync() {
+  const { pathname } = useLocation()
+  const { i18n } = useTranslation()
+
+  React.useEffect(() => {
+    const language = getPathLanguage(pathname) ?? DEFAULT_LANGUAGE
+    document.documentElement.lang = language
+    void i18n.changeLanguage(language)
+  }, [i18n, pathname])
+
+  return null
+}
+
 export function App() {
   const mainContentRef = React.useRef<React.ElementRef<'div'>>(null)
 
+  React.useEffect(() => {
+    void ensurePlayerIdentity().catch((error) => {
+      console.error('Failed to initialize player identity.', error)
+    })
+  }, [])
+
   return (
-    <BrowserRouter basename={getPathLanguage()}>
+    <BrowserRouter>
+      <LanguageSync />
       <div className='bg-slate-50 text-slate-900 transition-colors duration-150 ease-in-out dark:bg-slate-900 dark:text-slate-200'>
         <SideBarLayout>
           <SideBarContainer
@@ -31,14 +52,10 @@ export function App() {
           />
 
           <MainContent ref={mainContentRef}>
-            <PlayerIdentityGate>
-              <>
-                <SideBarActions>
-                  <PlayerIdentityTransfer />
-                </SideBarActions>
-                <Router />
-              </>
-            </PlayerIdentityGate>
+            <SideBarActions>
+              <PlayerIdentityTransfer />
+            </SideBarActions>
+            <Router />
           </MainContent>
         </SideBarLayout>
       </div>

apps/front/src/components/Button.tsx

@@ -30,7 +30,7 @@ export function Button<E extends React.ElementType = typeof defaultElement>({
     <Component
       {...props}
       className={clsx(
-        'flex flex-row items-center gap-2 rounded-md text-center font-medium text-slate-900 transition-colors duration-100 disabled:opacity-50 dark:text-slate-50',
+        'flex cursor-pointer flex-row items-center gap-2 rounded-md text-center font-medium text-slate-900 transition-colors duration-100 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50',
         {
           'justify-center': center,
           'justify-start': !center,

apps/front/src/components/Footer.tsx

@@ -19,7 +19,7 @@ export function Footer() {
       <div className='flex flex-row justify-center gap-4'>
         <a
           className='text-slate-900 transition-all hover:text-slate-900/80 dark:text-slate-200 dark:hover:text-slate-50/80'
-          href='https://github.com/Poooel/knucklebones'
+          href='https://github.com/osselets/knucklebones'
           target='_blank'
           rel='noreferrer'
         >

apps/front/src/components/Game.tsx

@@ -1,19 +1,24 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { useIsOnMobile } from '../hooks/detectDevice'
 import { useNoIndex } from '../hooks/useNoIndex'
+import { Button } from './Button'
 import { useGameWhileLoading } from './GameContext'
 import { GameOutcome } from './GameOutcome'
 import { HowToPlayModal } from './HowToPlay'
 import { Loading } from './Loading'
 import { OutcomeHistory } from './OutcomeHistory'
 import { PlayerOneBoard, PlayerTwoBoard } from './PlayerBoard'
 import { QRCodeModal } from './QRCode'
+import { RankedMatchInfo } from './RankedMatchInfo'
 import { ReconnectNotice } from './ReconnectNotice'
+import { ResignGame } from './ResignGame'
 import { SideBarActions } from './SideBar'
 import { WarningToast } from './WarningToast'
 
 export function Game() {
   const gameStore = useGameWhileLoading()
+  const { t } = useTranslation()
   const isOnMobile = useIsOnMobile()
   const gameRef = React.useRef<React.ElementRef<'div'>>(null)
   useNoIndex()
@@ -22,6 +27,17 @@ export function Game() {
     return <Loading />
   }
 
+  if (gameStore.status === 'identity-error') {
+    return (
+      <div className='flex flex-col items-center justify-center gap-4 p-4 text-center'>
+        <p className='text-lg'>{gameStore.errorMessage}</p>
+        <Button size='medium' onClick={gameStore.retryIdentity}>
+          {t('identity.retry')}
+        </Button>
+      </div>
+    )
+  }
+
   const { errorMessage, clearErrorMessage } = gameStore
 
   // Pas tip top je trouve, mais virtuellement ça marche
@@ -33,6 +49,8 @@ export function Game() {
         <HowToPlayModal />
         <QRCodeModal />
         <OutcomeHistory />
+        <ResignGame />
+        <RankedMatchInfo />
         {isOnMobile && gameOutcome}
       </SideBarActions>
       <div ref={gameRef} className='flex flex-col items-center justify-around'>

apps/front/src/components/GameContext/GameContext.tsx

@@ -25,9 +25,9 @@ export function useGameWhileLoading() {
 export function useGame() {
   const context = useGameWhileLoading()
 
-  if (context === null) {
+  if (context === null || context.status === 'identity-error') {
     throw new Error(
-      '`GameContext` should not be used while the game is still loading'
+      '`GameContext` should not be used while the game is loading or its identity is unresolved'
     )
   }