diff --git a/package.json b/package.json index a00c356..12341ad 100755 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "license": "ISC", "author": "Daniel Ledda", "scripts": { - "build": "webpack --mode development", - "postbuild": "rsync -avu --delete dist/ ../kadi_backend/dist/game/static", + "build-dev": "webpack --mode development && postbuild", + "build": "webpack --mode production", + "postbuild": "rsync -avu --delete dist/ ../kadi_backend/static/game", "start": "webpack-dev-server --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/public/index.html b/public/index.html index 104521c..3a4647d 100755 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + { + private readonly updateUserContext: (username: string, loggedIn: boolean) => void; + private readonly changeLang: (lang: SupportedLang) => void; constructor(props: AppProps) { super(props); - this.state = { + this.updateUserContext = (username, loggedIn) => { + this.setState({userContext: { + username: username, + loggedIn: loggedIn, + updateUserContext: this.updateUserContext + }}); }; + + this.changeLang = (lang: SupportedLang) => { + if (lang in SupportedLang) { + this.setState({localeContext: { + strings: IntlStrings[lang], + currentLang: lang, + changeLang: this.changeLang + }}); + } + }; + + this.state = { + userContext: { + username: "", + loggedIn: false, + updateUserContext: this.updateUserContext, + }, + localeContext: { + currentLang: SupportedLang.gb, + strings: IntlStrings[SupportedLang.gb], + changeLang: this.changeLang, + } + }; + } + + componentDidMount(): void { + axios.get("/api/user", {baseURL: SERVER_BASE_NAME}) + .then((res) => { + const data = res.data as any; + this.updateUserContext(data.username, true); + this.changeLang(data.lang); + }) + .catch(err => console.log(err)); } render(): ReactNode { return ( - - + + + + ); } diff --git a/src/Components/Game.tsx b/src/Components/Game.tsx index 485a1a7..ecead83 100755 --- a/src/Components/Game.tsx +++ b/src/Components/Game.tsx @@ -21,7 +21,6 @@ class Game extends React.Component { const startupSettings: GameSettings = { playerIds: Settings.players, ruleset: Settings.ruleset, - lang: Settings.lang as SupportedLang }; this.state = { diff --git a/src/Components/GameSetup.tsx b/src/Components/GameSetup.tsx index 2f9e6f3..d118fc5 100755 --- a/src/Components/GameSetup.tsx +++ b/src/Components/GameSetup.tsx @@ -1,7 +1,25 @@ import React, {ChangeEvent, FocusEvent, KeyboardEvent, ReactNode} from "react"; import {getSchemaListings, SchemaListing} from "../static/rulesets"; -import {LocaleContext, LanguageNames} from "../static/strings"; +import {LanguageNames} from "../static/strings"; +import LocaleContext from "../LocaleContext"; import {SupportedLang} from "../static/enums"; +import {Button} from "semantic-ui-react"; + +interface GameSetupProps { + onSetupComplete: (settings: GameSettings) => void; + settings: GameSettings; +} + +interface GameSetupState { + selectedRuleset: string; + enteredPlayerIds: string[]; + editingPlayerName: boolean; +} + +export interface GameSettings { + ruleset: string; + playerIds: string[]; +} class GameSetup extends React.Component { private readonly availableRulesets: SchemaListing[]; @@ -14,22 +32,12 @@ class GameSetup extends React.Component { this.availableRulesets = getSchemaListings(); this.changeLang = () => {}; this.state = { - selectedLang: this.props.settings.lang, selectedRuleset: this.props.settings.ruleset, enteredPlayerIds: this.props.settings.playerIds, editingPlayerName: false, }; } - componentDidMount(): void { - this.changeLang = this.context.changeLang; - } - - onLanguageChange: (lang: SupportedLang) => void = (lang) => { - this.setState({ selectedLang: lang }); - this.changeLang(lang); - }; - onRulesetChange: (ruleset: string) => void = (ruleset) => { this.setState({ selectedRuleset: ruleset }); }; @@ -52,31 +60,12 @@ class GameSetup extends React.Component { this.props.onSetupComplete({ ruleset: this.state.selectedRuleset, playerIds: this.state.enteredPlayerIds, - lang: this.state.selectedLang, }); }; render(): ReactNode { const Locale = this.context.strings; - const langOptions: ReactNode[] = []; - for (const lang in SupportedLang) { - let className = "option"; - if (this.state.selectedLang === lang) { - className += " selected"; - } - langOptions.push(( -
this.onLanguageChange(lang as SupportedLang)} - > - {LanguageNames[lang as SupportedLang]} - -
- )); - } - const rulesetOptions: ReactNode[] = []; for (const rulesetListing of this.availableRulesets) { let className = "option"; @@ -143,24 +132,15 @@ class GameSetup extends React.Component { {rulesetOptions} -
-
- - {Locale.setupScreen.selectLanguage} - -
-
- {langOptions} -
-
- +
@@ -170,24 +150,6 @@ class GameSetup extends React.Component { } GameSetup.contextType = LocaleContext; -interface GameSetupProps { - onSetupComplete: (settings: GameSettings) => void; - settings: GameSettings; -} - -interface GameSetupState { - selectedLang: SupportedLang; - selectedRuleset: string; - enteredPlayerIds: string[]; - editingPlayerName: boolean; -} - -export interface GameSettings { - ruleset: string; - playerIds: string[]; - lang: SupportedLang; -} - const AddPlayerField: React.FunctionComponent = ({playersListEmpty, submitNewPlayer, userEditing}) => { const Locale = React.useContext(LocaleContext).strings; diff --git a/src/Components/KadiBlockRenderer.tsx b/src/Components/KadiBlockRenderer.tsx index 4dd3745..348bdf4 100755 --- a/src/Components/KadiBlockRenderer.tsx +++ b/src/Components/KadiBlockRenderer.tsx @@ -1,7 +1,7 @@ import {BlockDef} from "../static/rulesets"; import {CellLocation} from "../Classes/PlayerScoreCard"; import React, {ReactElement} from "react"; -import {formatUnicorn, LocaleContext} from "../static/strings"; +import {formatUnicorn} from "../static/strings"; import {FieldType} from "../static/enums"; import {BlockScores, CellEventResponse} from "./KadiBoard"; import GenericKadiRowContainer from "./GenericKadiRowContainer"; @@ -9,6 +9,7 @@ import KadiEditableRowCells from "./KadiEditableRowCells"; import KadiBlockTotalRow from "./KadiBlockTotalRow"; import KadiBlockSubtotalRow from "./KadiBlockSubtotalRow"; import KadiBlockBonusRow from "./KadiBlockBonusRow"; +import LocaleContext from "../LocaleContext"; interface BlockRendererProps { blockSchema: BlockDef; diff --git a/src/Components/KadiBoard.tsx b/src/Components/KadiBoard.tsx index d47c4e2..ad5ff4e 100755 --- a/src/Components/KadiBoard.tsx +++ b/src/Components/KadiBoard.tsx @@ -1,7 +1,8 @@ import React, {ReactElement, ReactNode, useContext} from "react"; import PlayerScoreCard, {CellLocation, PlayerScoreCardJSONRepresentation} from "../Classes/PlayerScoreCard"; import {BlockDef, GameSchema, getGameSchemaById} from "../static/rulesets"; -import {formatUnicorn, LocaleContext} from "../static/strings"; +import {formatUnicorn} from "../static/strings"; +import LocaleContext from "../LocaleContext"; import {CellFlag} from "../static/enums"; import {ScoreCellValue} from "../Classes/ScoreCell"; import {CaretakerSet} from "../Classes/Caretaker"; @@ -131,11 +132,14 @@ class KadiBoard extends React.Component { } private getJSONRepresentationForBoard(): string { - const JSONRepresentation: PlayerScoreCardJSONRepresentation[] = []; + const JSONScoreCards: PlayerScoreCardJSONRepresentation[] = []; for (const playerId in this.state.scoreSheet) { - JSONRepresentation.push(this.state.scoreSheet[playerId].getJSONRepresentation()); + JSONScoreCards.push(this.state.scoreSheet[playerId].getJSONRepresentation()); } - return JSON.stringify(JSONRepresentation); + return JSON.stringify({ + gameType: this.gameSchema.id, + results: JSONScoreCards + }); } private canSave(): boolean { diff --git a/src/Components/KadiGrandTotalRow.tsx b/src/Components/KadiGrandTotalRow.tsx index 0e9618a..2612ae0 100755 --- a/src/Components/KadiGrandTotalRow.tsx +++ b/src/Components/KadiGrandTotalRow.tsx @@ -1,5 +1,5 @@ import React, {ReactNode} from "react"; -import {LocaleContext} from "../static/strings"; +import LocaleContext from "../LocaleContext"; import KadiCell from "./KadiCell"; import {FieldType} from "../static/enums"; import {Icon} from "semantic-ui-react"; diff --git a/src/LocaleContext.ts b/src/LocaleContext.ts new file mode 100755 index 0000000..ee42f91 --- /dev/null +++ b/src/LocaleContext.ts @@ -0,0 +1,19 @@ +import {SupportedLang} from "./static/enums"; +import React from "react"; +import {IntlStrings} from "./static/strings"; + +export interface ILocaleContext { + currentLang: SupportedLang; + strings: any; + changeLang: (lang: SupportedLang) => void; +} + +export const localeDefaultVal: ILocaleContext = { + currentLang: SupportedLang.gb, + strings: IntlStrings[SupportedLang.gb as SupportedLang], + changeLang: () => {}, +}; + +const LocaleContext = React.createContext(localeDefaultVal); + +export default LocaleContext; \ No newline at end of file diff --git a/src/UserContext.ts b/src/UserContext.ts new file mode 100755 index 0000000..a099de1 --- /dev/null +++ b/src/UserContext.ts @@ -0,0 +1,17 @@ +import React from "react"; + +export interface IUserContext { + username: string; + loggedIn: boolean; + updateUserContext: (username: string, loggedIn: boolean) => void; +} + +const userDefaultVal = { + loggedIn: false, + username: "", + updateUserContext: () => {}, +} as IUserContext; + +const UserContext = React.createContext(userDefaultVal); + +export default UserContext; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 27a77cb..1acefcd 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,8 @@ import App from "./App"; import * as serviceWorker from "./serviceWorker"; import "./filetypes.d"; +export const SERVER_BASE_NAME = "/kadi"; + ReactDOM.render(( diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100755 index 91e6951..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ -svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"> - - - - - - diff --git a/src/static/css/game.css b/src/static/css/game.css index d80d2e9..8aa3635 100755 --- a/src/static/css/game.css +++ b/src/static/css/game.css @@ -74,7 +74,7 @@ input[type="number"] { } -.kniffelTable { +.kadiTable { margin-left: auto; margin-right: auto; border: var(--thick-border); @@ -82,27 +82,27 @@ input[type="number"] { border-radius: var(--outer-radius); } -.kniffelCell, +.kadiCell, .rowLabelCell, .playerNameCell, .topLeftBlankCell { background-color: var(--bg-cells); } -.kniffelCell.editable { +.kadiCell.editable { background-color: var(--bg-cells); transition: background-color 100ms; } -.kniffelCell.editable:hover { +.kadiCell.editable:hover { background-color: var(--bg-cell-hover); } -tr.subtotalField > .kniffelCell { +tr.subtotalField > .kadiCell { border-top: var(--thick-border); } -tr.totalField > .kniffelCell, +tr.totalField > .kadiCell, .playerNameCell, .topLeftBlankCell { border-top: var(--thick-border); @@ -114,7 +114,7 @@ tr.totalField > .kniffelCell, border-right: var(--thick-border); } -.kniffelTable > thead { +.kadiTable > thead { font-size: xx-large; text-align: center; background-color: var(--bg-border); diff --git a/src/static/enums.ts b/src/static/enums.ts index f9ca071..4339058 100755 --- a/src/static/enums.ts +++ b/src/static/enums.ts @@ -15,7 +15,7 @@ export enum CellFlag { } export enum SupportedLang { - en = "en", + gb = "gb", de = "de", it = "it", } \ No newline at end of file diff --git a/src/static/settings.json b/src/static/settings.json index 3807dd7..0924150 100755 --- a/src/static/settings.json +++ b/src/static/settings.json @@ -1,5 +1,4 @@ { - "lang": "en", "players": [], "ruleset": "default_en", "maxHistoryLength": 256, diff --git a/src/static/strings.ts b/src/static/strings.ts index 063adfd..d4bf683 100755 --- a/src/static/strings.ts +++ b/src/static/strings.ts @@ -22,13 +22,13 @@ export function formatUnicorn(fmt: string, ...args: string[]): string { } export const LanguageNames: Record = { - en: "English", + gb: "English", de: "Deutsch", it: "Italiano", }; -const IntlStrings = { - en: { +export const IntlStrings = { + gb: { rowLabels: { subtotal: "Subtotal", bonus: "Bonus", @@ -123,15 +123,4 @@ const IntlStrings = { players: "Giocatori:", }, }, -} as const; - -export const localeDefaultVal = { - strings: IntlStrings[Settings.lang as SupportedLang], - changeLang: changeLang, -}; - -export const LocaleContext = React.createContext(localeDefaultVal); - -export function changeLang(newLang: SupportedLang): void { - localeDefaultVal.strings = IntlStrings[newLang]; -} \ No newline at end of file +} as const; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index d16b73a..8433349 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,7 +3,7 @@ const webpack = require("webpack"); module.exports = { entry: "./src/index.tsx", - mode: "development", + mode: "production", module: { rules: [ { @@ -38,13 +38,13 @@ module.exports = { resolve: { extensions: [".tsx", ".ts", ".js", "*"] }, output: { path: path.resolve(__dirname, "dist/"), - publicPath: "/kadi/game/static/", + publicPath: "/kadi/static/game/", filename: "bundle.js" }, devServer: { contentBase: path.join(__dirname, "public/"), port: 3000, - publicPath: "http://localhost:3000/dist/", + publicPath: "http://localhost:3000/", hotOnly: true }, plugins: [new webpack.HotModuleReplacementPlugin()]