furdzik · furdzik · Apr 5, 2025 · Apr 4, 2025 · Apr 5, 2025 · Apr 5, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,26 +7,45 @@
     "@emotion/styled": "11.11.5",
     "@mdi/js": "7.4.47",
     "@mdi/react": "1.6.1",
-    "@reduxjs/toolkit": "2.2.3",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "13.5.0",
-    "@types/jest": "27.5.2",
-    "@types/node": "16.18.96",
-    "@types/react-dom": "18.3.0",
     "immer": "10.1.1",
     "lodash": "4.17.21",
     "react": "18.3.1",
     "react-collapsible": "2.10.0",
     "react-colorful": "5.6.1",
     "react-dom": "18.3.1",
+    "react-intl": "7.1.6",
     "react-redux": "9.1.1",
     "react-router-dom": "6.23.0",
     "react-scripts": "5.0.1",
     "typescript": "4.9.5",
     "use-click-away-react": "1.0.3",
     "web-vitals": "2.1.4"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@reduxjs/toolkit": "2.2.3",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "13.5.0",
+    "@types/lodash": "4.17.0",
+    "@types/jest": "27.5.2",
+    "@types/node": "16.18.96",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "editorconfig": "2.0.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "17.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "postcss": "8.4.31",
+    "stylelint": "15.11.0",
+    "stylelint-config-kamisama": "0.4.7"
+  },
+  "resolutions": {
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.3"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -47,19 +66,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@types/lodash": "4.17.0",
-    "@types/react": "18.3.3",
-    "editorconfig": "2.0.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "postcss": "8.4.31",
-    "stylelint": "15.11.0",
-    "stylelint-config-kamisama": "0.4.7"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 
 import { Global, ThemeProvider } from '@emotion/react';
 import { Provider } from 'react-redux';
@@ -15,7 +16,9 @@ function App () {
     <ThemeProvider theme={theme}>
       <Global styles={GlobalStyles} />
       <Provider store={store}>
-        <RoutesConfig />
+        <IntlProvider locale="en">
+          <RoutesConfig />
+        </IntlProvider>
       </Provider>
     </ThemeProvider>
   );

diff --git a/src/components/AddScore/AddScore.tsx b/src/components/AddScore/AddScore.tsx
@@ -99,7 +99,7 @@ const AddScore = ({
         isOpen && (
           <AddBox ref={clickAwayRef} playerColor={player.color} position={position}>
             {
-              !roundsNotEvenWarning ? (
+              !roundsNotEvenWarning || (roundsNotEvenWarning && singleScore?.throw) ? (
                 <React.Fragment>
                   <Header>
                     Dodaj wynik:<br />

diff --git a/src/components/ScoresTable/ScoresTable.styles.ts b/src/components/ScoresTable/ScoresTable.styles.ts
@@ -113,6 +113,9 @@ const Row = (props: EmotionTheme & RowProps & PlayersProps) => css`
         font-size: 1rem;
         font-weight: ${props.theme.fontWeight.regular};
       }
+      b {
+        font-size: 1.2rem;
+      }
     }
   `};
   ${props.variant === RowVariants.SchoolSum && css`
@@ -251,6 +254,23 @@ const CurrentPlayerIcon = styled(Icon)<PlayersProps>`
   color: ${(props) => props.color || props.theme.mainColors.secondary};
 `;
 
+const SmallBonusTable = styled.table`
+  width: 100%;
+  text-align: center;
+  font-size: .9rem;
+  text-transform: uppercase;
+  font-weight: normal;
+  margin-top: .5rem;
+
+  b {
+    display: block;
+    margin-top: .5rem;
+    padding: .3rem 0;
+    font-size: 1.1rem;
+    background: rgba(0, 0, 0, .1);
+  }
+`;
+
 export {
   Wrapper,
   TablesWrapper,
@@ -265,5 +285,6 @@ export {
   WinnerBox,
   PlayerName,
   RoundWrapper,
-  CurrentPlayerIcon
+  CurrentPlayerIcon,
+  SmallBonusTable
 };
diff --git a/src/components/ScoresTable/ScoresTable.tsx b/src/components/ScoresTable/ScoresTable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Icon from '@mdi/react';
+import { useIntl } from 'react-intl';
 import { mdiChevronRightCircleOutline, mdiCrown, mdiDice6 } from '@mdi/js';
 
 import {
@@ -9,6 +10,7 @@ import {
   ConfigElement,
   Options,
   Player,
+  RestBonusesDetails,
   SaveScore,
   Score,
   ScoreElement,
@@ -33,7 +35,8 @@ import {
   WinnerBox,
   PlayerName,
   RoundWrapper,
-  CurrentPlayerIcon
+  CurrentPlayerIcon,
+  SmallBonusTable
 } from './ScoresTable.styles';
 
 export enum RowVariants {
@@ -59,6 +62,8 @@ export interface ScoresTableProps {
 const TITLE_LENGTH = 1;
 
 const ScoresTable = ({ config, scores, bonuses, sum, gameStarted, gameEnded, options, saveScore, className = '' }: ScoresTableProps) => {
+  const intl = useIntl();
+
   const figuresPart1 = Object.entries(config.figures).slice(0, 3);
   const figuresPart2 = Object.entries(config.figures).slice(3);
 
@@ -141,12 +146,10 @@ const ScoresTable = ({ config, scores, bonuses, sum, gameStarted, gameEnded, opt
                     <Th variant={RowVariants.Sum} playerColor={player.color}>Suma punktów</Th>
                     <Th variant={RowVariants.Sum} playerColor={player.color}>
                       <div>
-                        {
-                          (stats.currentRound || 0) < stats.numberOfRounds
-                            ? sum?.[`player${player.id}`]?.allSumWithoutSchool
-                            : sum?.[`player${player.id}`]?.all || 0
-                        }
-                        <small>(bez bonusów: {sum?.[`player${player.id}`]?.sumWithoutBonuses || 0})</small>
+                        {gameStarted ? intl.formatNumber(sum?.[`player${player.id}`]?.all, { style: 'decimal' }) : 0}
+                        <small>
+                          (bez szkoły: <b>{gameStarted ? intl.formatNumber(sum?.[`player${player.id}`]?.allSumWithoutSchool || 0, { style: 'decimal' }) : 0}</b>)
+                        </small>
                       </div>
                     </Th>
                   </tr>
@@ -354,10 +357,40 @@ const ScoresTable = ({ config, scores, bonuses, sum, gameStarted, gameEnded, opt
                       {playerBonuses?.thousandBonus as number || 0 }
                     </Th>
                   </tr>
+                  <tr>
+                    <Th variant={RowVariants.Bonus} playerColor={player.color}>Szkoła</Th>
+                    <Th variant={RowVariants.Bonus} colSpan={options.columns} playerColor={player.color}>
+                      {gameStarted ? playerBonuses?.schoolGeneralSum as number || 0 : 0}
+                    </Th>
+                  </tr>
                   <tr>
                     <Th variant={RowVariants.Bonus} playerColor={player.color}>Reszta</Th>
                     <Th variant={RowVariants.Bonus} colSpan={options.columns} playerColor={player.color}>
-                      {playerBonuses?.restBonuses as number || 0}
+                      <SmallBonusTable>
+                        <tbody>
+                          <tr>
+                            <td>Wicki</td>
+                            <td>Generały</td>
+                            <td><span title={`${(playerBonuses?.sectionsBonus as number[])?.join(' | ')}`}>Sekcje</span></td>
+                            <td>Kolumny</td>
+                          </tr>
+                          <tr>
+                            <td>{(playerBonuses?.restBonusesDetails as RestBonusesDetails)?.vice}</td>
+                            <td>{(playerBonuses?.restBonusesDetails as RestBonusesDetails)?.general}</td>
+                            <td>
+                              <span title={`${(playerBonuses?.sectionsBonus as number[])?.join(' | ')}`}>
+                                {(playerBonuses?.restBonusesDetails as RestBonusesDetails)?.sections}
+                              </span>
+                            </td>
+                            <td>{(playerBonuses?.restBonusesDetails as RestBonusesDetails)?.columns}</td>
+                          </tr>
+                          <tr>
+                            <td colSpan={4}>
+                              <b>Suma Reszty: {playerBonuses?.restBonuses as number || 0}</b>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </SmallBonusTable>
                     </Th>
                   </tr>
                 </tbody>

diff --git a/src/components/ui/Modal/Modal.styles.ts b/src/components/ui/Modal/Modal.styles.ts
@@ -46,8 +46,8 @@ const ModalWrapper = styled.div<ModalProps>`
   }
 
   @media (min-width: ${breakpoints.laptop}) {
-    min-width: calc(${(props) => props.theme.layout.width} - (2 * ${(props) => props.theme.layout.padding}));
-    max-width: calc(${(props) => props.theme.layout.width} - (2 * ${(props) => props.theme.layout.padding}));
+    min-width: calc(${breakpoints.laptop} - (2 * ${(props) => props.theme.layout.padding}));
+    max-width: calc(${breakpoints.laptop} - (2 * ${(props) => props.theme.layout.padding}));
   }
 `;
 

diff --git a/src/constant/config.ts b/src/constant/config.ts
@@ -258,8 +258,10 @@ export const config: Config = {
   bonuses: {
     schoolGeneral: {
       name: 'Bonus za szkołę',
-      value: 50,
-      minimalSum: 30
+      initialValue: 50,
+      value: 25,
+      minimalSum: 30,
+      maxBonusValue: 475
     },
     thousandBonus: {
       name: 'Przekroczenie 1000 punktów',
@@ -268,15 +270,19 @@ export const config: Config = {
     },
     sameValueVice: {
       name: 'Takie same wyniki Vicek',
+      initialValue: 300,
       value: 50
     },
     sameValueGeneral: {
       name: 'Takie same wyniki Generał',
+      initialValue: 600,
       value: 100
     },
     section1AllResults: {
       name: 'Wszystkie wyniki',
-      value: 300,
+      valuePerColumn: true,
+      initialValue: 400,
+      value: 50,
       rows: 6,
       sectionNames: [
         FigureId.TwoOfKind, FigureId.TwoOfTwoOfKind, FigureId.ThreeOfKind, FigureId.FourOfKind,
@@ -293,31 +299,35 @@ export const config: Config = {
     },
     section3AllResults: {
       name: 'Wszystkie wyniki',
-      value: 150,
+      valuePerColumn: true,
+      value: 70,
       rows: 3,
       sectionNames: [
         FigureId.SmallTriangle, FigureId.BigTriangle, FigureId.Goat
       ]
     },
     section4AllResults: {
       name: 'Wszystkie wyniki',
-      value: 150,
+      valuePerColumn: true,
+      value: 70,
       rows: 3,
       sectionNames: [
         FigureId.SmallStraight, FigureId.BigStraight, FigureId.Runner
       ]
     },
     section5AllResults: {
       name: 'Wszystkie wyniki',
-      value: 100,
+      valuePerColumn: true,
+      value: 50,
       rows: 4,
       sectionNames: [
         FigureId.Evens, FigureId.Odds, FigureId.ThreeToThree, FigureId.TwoToFour
       ]
     },
     section6AllResults: {
       name: 'Wszystkie wyniki',
-      value: 200,
+      valuePerColumn: true,
+      value: 100,
       rows: 4,
       sectionNames: [
         FigureId.FullHouse, FigureId.ThreeOfTwoOfKind, FigureId.SuperSmall, FigureId.SuperBig

diff --git a/src/constant/index.ts b/src/constant/index.ts
@@ -62,7 +62,6 @@ export const colorsByOrder = [
 export const MAX_PLAYERS_ALLOWED = 6;
 
 export const THOUSAND_BONUS_VALUE = 1000;
-export const SCHOOL_BONUS_MIN_VALUE = 30;
 
 export const MAX_PLAYER_ROUND_GAP = 2;
 

diff --git a/src/features/scoresTable/scoresTableSlice.ts b/src/features/scoresTable/scoresTableSlice.ts
@@ -186,7 +186,7 @@ const scoresTable = createSlice({
           thousandBonusResult,
           bonusThousandGrantedResultsBefore.includes(true),
           columns
-        )
+        );
         newBonuses = {
           ...newBonuses,
           [`player${player?.id}`]: playerBonuses

diff --git a/src/interfaces/scoresTable.ts b/src/interfaces/scoresTable.ts
@@ -24,6 +24,8 @@ export interface ConfigElement {
   rows?: number;
   sectionNames?: FigureId[];
   minimalSum?: number;
+  maxBonusValue?: number;
+  valuePerColumn?: boolean;
 }
 export interface ScoreElement {
   columnId: number | null;
@@ -59,7 +61,11 @@ export interface BonusesConfig {
   [kay: string]: ConfigElement;
 }
 
-export type BonusTypes = number | number[] | null;
+export type BonusTypes = number | number[] | null | RestBonusesDetails;
+
+export interface RestBonusesDetails {
+  [kay: string]: number | number[] | null;
+}
 
 export interface Bonuses {
   [kay: string]: BonusTypes;

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -7,7 +7,7 @@ export const theme: ITheme = {
   ...typography,
   layout: {
     background: colors.colorMono.white,
-    width: '190rem',
+    width: '180rem',
     padding: '1rem',
     modalDefaultPadding: '3rem',
     borderColor: '',