Better layout in dev-server settings + fix in lingui extractor

lerna.json

@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "2.3.0-alpha.0",
+  "version": "2.4.0-alpha.0",
   "npmClient": "pnpm"
 }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lefun/core",
-  "version": "2.3.0-alpha.0",
+  "version": "2.4.0-alpha.0",
   "description": "Core library to make games for https://lefun.fun",
   "author": "Simon Lemieux",
   "repository": {

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lefun/dev-server",
-  "version": "2.3.0-alpha.0",
+  "version": "2.4.0-alpha.0",
   "description": "Development server to run games developed for https://lefun.com.",
   "author": "Simon Lemieux",
   "repository": {

packages/dev-server/src/App.tsx

@@ -12,7 +12,9 @@ import { createStore as _createStore } from "zustand";
 
 import type {
   GameId,
+  GamePlayerSettings_,
   GameSetting,
+  GameSettings_,
   Locale,
   MatchPlayersSettings,
   MatchSettings,
@@ -305,21 +307,18 @@ function MatchSetting({
 
 function SettingsSection({ children }: { children: ReactNode }) {
   return (
-    <div className="w-full px-1 overflow-hidden ">
-      <div className="rounded-lg bg-neutral-200 p-2 space-y-2 max-h-72 overflow-y-auto w-full">
+    <div className="w-full px-1">
+      <div className="rounded-lg bg-neutral-200 p-2 space-y-2 w-full">
         {children}
       </div>
     </div>
   );
 }
 
-function MatchSettingsView() {
-  const game = useStore((state) => state.game);
+function MatchSettingsView({ gameSettings }: { gameSettings: GameSettings_ }) {
   const matchSettings = useStore((state) => state.match?.matchSettings);
 
-  const { gameSettings } = game;
-
-  if (!gameSettings || !matchSettings) {
+  if (!matchSettings) {
     return null;
   }
 
@@ -382,9 +381,13 @@ function MatchPlayerSetting({
     </div>
   );
 }
-function MatchPlayerSettings({ userId }: { userId: UserId }) {
-  const game = useStore((state) => state.game);
-  const { gamePlayerSettings } = game;
+function MatchPlayerSettings({
+  userId,
+  gamePlayerSettings,
+}: {
+  userId: UserId;
+  gamePlayerSettings: GamePlayerSettings_;
+}) {
   const matchPlayersSettings = useStore(
     (state) => state.match?.matchPlayersSettings,
   );
@@ -412,7 +415,11 @@ function MatchPlayerSettings({ userId }: { userId: UserId }) {
   );
 }
 
-function PlayerSettingsView() {
+function PlayerSettingsView({
+  gamePlayerSettings,
+}: {
+  gamePlayerSettings: GamePlayerSettings_;
+}) {
   const match = useStore((state) => state.match);
   if (!match) {
     return null;
@@ -425,7 +432,11 @@ function PlayerSettingsView() {
     <SettingsSection>
       <div className="flex flex-col space-y-4">
         {userIds.map((userId) => (
-          <MatchPlayerSettings key={userId} userId={userId} />
+          <MatchPlayerSettings
+            key={userId}
+            userId={userId}
+            gamePlayerSettings={gamePlayerSettings}
+          />
         ))}
       </div>
     </SettingsSection>
@@ -595,6 +606,9 @@ function Settings() {
   const collapsed = useStore((state) => state.collapsed);
   const view = useStore((state) => state.view);
 
+  const game = useStore((state) => state.game);
+  const { gameSettings, gamePlayerSettings } = game;
+
   if (collapsed) {
     return (
       <div className="absolute right-0 top-0">
@@ -604,21 +618,20 @@ function Settings() {
   }
 
   return (
-    <div
-      className={classNames(
-        "flex w-1/4 min-w-60 flex-col overflow-y-auto",
-        "space-y-2",
-      )}
-    >
+    <div className={classNames("flex w-1/4 min-w-60 flex-col", "space-y-2")}>
       <SettingsButtons />
       {view === "game" && (
         <>
-          <div className="max-h-60 overflow-y-auto">
-            <MatchSettingsView />
-          </div>
-          <div className="max-h-60 overflow-y-auto">
-            <PlayerSettingsView />
-          </div>
+          {!!gameSettings?.allIds?.length && (
+            <div className="flex-initial max-h-1/8 overflow-y-auto">
+              <MatchSettingsView gameSettings={gameSettings} />
+            </div>
+          )}
+          {!!gamePlayerSettings?.allIds?.length && (
+            <div className="flex-initial max-h-1/8 overflow-y-auto">
+              <PlayerSettingsView gamePlayerSettings={gamePlayerSettings} />
+            </div>
+          )}
           <div className="flex-1 overflow-y-auto">
             <MatchStateView />
           </div>

packages/dev-server/tailwind.config.js

@@ -2,7 +2,24 @@
 export default {
   content: ["./src/**/*.{html,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      spacing: {
+        full: "100%",
+        "1/2": "50%",
+        "1/3": "33.333333%",
+        "2/3": "66.666667%",
+        "1/4": "25%",
+        "3/4": "75%",
+        "1/8": "12.5%",
+        "3/8": "37.5%",
+        "5/8": "62.5%",
+        "7/8": "87.5%",
+        "1/12": "8.333333%",
+        "5/12": "41.666667%",
+        "7/12": "58.333333%",
+        "11/12": "91.666667%",
+      },
+    },
   },
   plugins: [],
 };

packages/game/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lefun/game",
-  "version": "2.3.0-alpha.0",
+  "version": "2.4.0-alpha.0",
   "description": "Main dependency for writing game logic at https://lefun.fun.",
   "author": "Simon Lemieux",
   "repository": {

packages/ui-testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lefun/ui-testing",
-  "version": "2.3.0-alpha.0",
+  "version": "2.4.0-alpha.0",
   "description": "Utils for testing the UI of games at https://lefun.fun.",
   "author": "Simon Lemieux",
   "repository": {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lefun/ui",
-  "version": "2.3.0-alpha.0",
+  "version": "2.4.0-alpha.0",
   "description": "Main dependency for writing the UI of games at https://lefun.com.",
   "author": "Simon Lemieux",
   "repository": {

packages/ui/src/lefunExtractor.ts

@@ -72,8 +72,8 @@ export const lefunExtractor = (game: Game<any, any>) => ({
 
       // Game player settings
       if (game.gamePlayerSettings) {
-        for (const [key, setting] of Object.entries(game.gamePlayerSettings)) {
-          const { options, type } = setting;
+        for (const gamePlayerSetting of game.gamePlayerSettings) {
+          const { key, options, type } = gamePlayerSetting;
 
           // Add translations only for "string" player options.
           if (type !== "string") {