Update

src/RawConstants.ts

@@ -8,7 +8,9 @@ export type IPCChannel =
     | 'PREPARING'
 
 export enum IPCListenChannels {
-    'KEYPAD_INPUT'
+    'KEYPAD_INPUT'= 'KEYPAD_INPUT',
+    'NFC_CARD'= 'NFC_CARD',
+    'NFC_RAW' = 'NFC_RAW'
 }
 
 export interface IPCAnswer {
@@ -76,3 +78,29 @@ export interface GameRules {
 export interface Config {
     rules?: GameRules
 }
+
+export enum NFCCardType {
+    ACCOUNT,
+    PROPERTY,
+    TASK,
+}
+
+export interface NFCCard {
+    cardType: NFCCardType,
+    uid: string,
+    raw: string
+}
+
+export interface NFCAccountCard extends NFCCard {
+    symbol: string,
+    friendlyName: string,
+    pin: number
+}
+
+export interface NFCPropertyCard extends NFCCard {
+
+}
+
+export interface NFCTaskCard extends NFCCard {
+
+}

src/web/GameHandler.ts

@@ -1,4 +1,6 @@
 import {PAGE} from "./App";
+import {IPCListenChannels, NFCCard} from "../RawConstants";
+import IPCListener from "./IPCListener";
 
 export enum GAME_STATE {
     NOT_STARTED,
@@ -10,6 +12,7 @@ export enum GAME_STATE {
 export default class GameHandler {
 
     static GAMESTATE: GAME_STATE = GAME_STATE.NOT_STARTED;
+    static attachedNFCHandler: number = 0;
 
     static setGameState(state: GAME_STATE)
     {
@@ -26,6 +29,20 @@ export default class GameHandler {
         this.GAMESTATE = state;
     }
 
+    static attachNFCHandler(cb: (card: NFCCard) => void)
+    {
+        IPCListener.detach(this.attachedNFCHandler);
+        this.attachedNFCHandler = IPCListener.attach(IPCListenChannels.NFC_CARD, (ipcMsg) => {
+            if(ipcMsg.status)
+                cb(ipcMsg.data as NFCCard);
+        });
+    }
+
+    static detachNFCHandler()
+    {
+        IPCListener.detach(this.attachedNFCHandler);
+    }
+
     static async requestPreparing(useCloud: boolean)
     {
         let response = await window.api.request("PREPARING", {

src/web/GameSetup.tsx

@@ -1,26 +1,103 @@
 import {Component} from "react";
-
+import {
+    Button, Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Grid,
+    Snackbar,
+    Typography
+} from "@mui/material";
+import NfcIcon from '@mui/icons-material/Nfc';
+import AddCardIcon from '@mui/icons-material/AddCard';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import PersonRemoveIcon from '@mui/icons-material/PersonRemove';
+import GameHandler from "./GameHandler";
+import {NFCCard} from "../RawConstants";
 
 interface GameState {
-
+    snackMsg: string,
+    helpDialog: boolean
 }
 
 export default class GameSetup extends Component<{}, GameState> {
     constructor(props: {}) {
         super(props);
+        this.state = {
+            snackMsg: "",
+            helpDialog: true
+        }
     }
 
 
     componentDidMount() {
+        setTimeout(() => {
+            this.setState((prevState) => ({
+                ...prevState,
+                helpDialog: false,
+                snackMsg: "Zum hinzufügen von Spielern, NFC-Karte an das Lesegerät halten!",
+            }))
+        }, 15000);
 
+        GameHandler.attachNFCHandler((card: NFCCard) => {
+
+        })
     }
 
     componentWillUnmount() {
-
+        GameHandler.detachNFCHandler();
     }
 
     render() {
-        return <p>Test</p>
+        return <div className="gameSetup">
+            <Snackbar
+                open={!!this.state.snackMsg}
+                autoHideDuration={8000}
+                onClose={() => {
+                    this.setState(prevState => ({
+                        ...prevState,
+                        snackMsg: ""
+                    }))
+                }}
+                message={this.state.snackMsg}
+            />
+            <Dialog
+                open={this.state.helpDialog}
+                onClose={() => {
+                    this.setState((prevState) => ({
+                        ...prevState,
+                        helpDialog: false
+                    }))
+                }}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">
+                    Karte anhalten, um Spieler hinzuzufügen! <AddCardIcon/>
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        Um eine Figur zum Spiel hinzuzufügen, musst du die NFC-Spielerkarte an den Kartenleser
+                        halten. <br/><br/>
+                        Ein kurzes Berühren reicht aus, schon sollte der Spieler in der Tabelle auftauchen! <PersonAddIcon/>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => this.setState((prevState) => ({
+                        ...prevState,
+                        helpDialog: false
+                    }))}>
+                        Okay</Button>
+                </DialogActions>
+            </Dialog>
+
+
+            <Typography variant="h2" sx={{mb: 2}}>Wer spielt mit?</Typography>
+            <Grid container spacing={3}>
+
+            </Grid>
+        </div>
     }
 
-}
+    }

src/web/IPCListener.ts

@@ -7,10 +7,21 @@ type IPCListen = {
 
 export default class IPCListener {
     private static attachments: Map<number, IPCListen> = new Map<number, IPCListen>();
+    private static uID = 99;
+
+    public static attach(event: IPCListenChannels, fn: (message: IPCAnswer, ...args: any) => void): number {
+        this.uID++;
+        this.attachments.set(this.uID, {fn: fn, channel: event});
+        return this.uID;
+    }
+
+    public static detach(id: number)
+    {
+        this.attachments.delete(id);
+    }
 
 
-
-    public static attach()
+    public static initialAttach()
     {
         for(let c of Object.keys(IPCListenChannels))
         {