source: components/poker/sections/PickATable.jsx@ 433e0c5

main
Last change on this file since 433e0c5 was 433e0c5, checked in by anastasovv <simon@…>, 2 years ago

Added complaints, managing credits, and lost connection screens

  • Property mode set to 100644
File size: 2.4 KB
Line 
1import React from 'react'
2
3import { useRef } from 'react'
4import { useSelector, useDispatch } from 'react-redux'
5import { setPoker } from '../../../redux/reducers/styleSlice';
6
7import axios from 'axios';
8
9const PickATable = () => {
10 const ref = useRef(null);
11
12 const dispatch = useDispatch();
13
14 const playerState = useSelector(state => state.player);
15 const styleState = useSelector(state => state.style);
16
17 function keyUp(e) {
18 if (e.key === 'Enter') {
19 createATable();
20 }
21 }
22
23 function onChangeTableName(e) {
24 dispatch(setPoker({
25 ...styleState.poker,
26 inputControls: {
27 ...styleState.poker.inputControls,
28 tableName: e.target.value,
29 }
30 }))
31 }
32
33 function createATable() {
34 axios.get(`/api/poker?action=create_a_table&session_id=${localStorage.CAESSINO_SESSION_ID}&displayName=${playerState.player.displayName}&tableName=${styleState.poker.inputControls.tableName}`);
35 }
36
37 function joinATable(e) {
38 axios.get(`/api/poker?action=join_a_table&session_id=${localStorage.CAESSINO_SESSION_ID}&tableId=${e.target?.dataset?.table}&displayName=${playerState.player.displayName}`);
39 }
40
41 return (
42 <div className="pokerPickATableContainer">
43 <div className="createATable">
44 <input ref={ref} type="text" onChange={(e) => {onChangeTableName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.poker.inputControls.tableName} placeholder="Table name"/>
45 <button className="secondaryButton" onClick={() => createATable()}>Create a table</button>
46 </div>
47 <div>
48 <h3>Pick a table:</h3>
49 <div onClick={(e) => joinATable(e)}>
50 {playerState.pokerGame.tables.filter(table=>table.started===false).map(table => (
51 <div data-table={table.id} key={table.id}>
52 <p data-table={table.id}>Table name: {table.name}</p>
53 <p data-table={table.id}>Creator: {table.creator}</p>
54 <p data-table={table.id}>Players: {table.players.filter(e=>e.isGhost===false).length}/8</p>
55 <p data-table={table.id}>Join</p>
56 </div>
57 ))}
58 </div>
59 </div>
60 </div>
61 )
62}
63
64export default PickATable
Note: See TracBrowser for help on using the repository browser.