source: components/poker/sections/PickATable.jsx@ 189cd8f

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

Made poker tables system and round 1

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