feature: improve ui

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:preview": "tsc && vite build && mkdir dist/quiz && mv dist/index.html dist/quiz && mv dist/assets/ dist/quiz && code dist",
     "ci": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/index.css

@@ -20,6 +20,7 @@ main {
 main > .container {
     min-height: calc(100vh - 198px);
     transition: height 0.3s;
+    max-width: 1024px;
 }
 
 footer {

src/view/components/game/GamePlaySession.tsx

@@ -91,14 +91,21 @@ export function GamePlaySession ({ game, onStart, onFinish }: GamePlaySessionPro
         />
       </Case>
       <Case value={GamePlaySessionStatus.STARTED}>
+        <div className="progress opacity-50 mb-1">
+          <div
+            className="progress-bar bg-primary"
+            role="progressbar"
+            style={{ width: `${((game.questions.length - questions.length) / game.questions.length) * 100}%` }}
+          />
+        </div>
         <GamePlaySessionQuestion
           timeout={timeout}
           text={currentQuestion?.text || ''}
           answers={currentQuestion?.answers || []}
           answerQuestion={answerQuestion}
           nextQuestion={nextQuestion}
         />
-        <div className="py-1">
+        <div className="mt-1">
           <small>{game.questions.length - questions.length} / {game.questions.length} ({interaction})</small>
           &nbsp;
           {
@@ -109,13 +116,6 @@ export function GamePlaySession ({ game, onStart, onFinish }: GamePlaySessionPro
                 ''
           }
         </div>
-        <div className="progress opacity-50">
-          <div
-            className="progress-bar bg-warning"
-            role="progressbar"
-            style={{ width: `${((game.questions.length - questions.length) / game.questions.length) * 100}%` }}
-          />
-        </div>
       </Case>
       <Case value={GamePlaySessionStatus.FINISHED}>
         <AlertWarning />

src/view/pages/auth/SignInPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useApp } from '../../hooks/useApp.ts'
 import { AlertDanger } from '../../components/general/Alert.tsx'
 import { mode } from '../../../config/env.ts'
+import { Loading } from '../../components/general/Loading.tsx'
 
 export function SignInPage () {
   const { auth, session } = useApp()
@@ -97,6 +98,11 @@ export function SignInPage () {
             Entrar
           </button>
         </div>
+        {
+          loading && (
+            <Loading />
+          )
+        }
         {error && (
           <AlertDanger>
             <span className="text-light-emphasis">{error}</span>

src/view/providers/AppProvider.tsx

@@ -11,7 +11,9 @@ export function AppProvider ({ children }: { children: React.ReactNode }) {
   const [session, setSession] = useState<Session>(null)
 
   const updateAuthSession = (session: Session) => {
-    setSession(session)
+    if (session?.credential) {
+      setSession(session)
+    }
   }
 
   const auth = authManagerFactory(updateAuthSession)