Selection of players working better
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
b57e771679
commit
a403f38f1c
@ -72,6 +72,10 @@
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.PlayerName {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#ChatList {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@ -225,7 +225,6 @@ const Chat = ({ board, promoteGameState }) => {
|
||||
})
|
||||
|
||||
//const timeDelta = game.timestamp - Date.now();
|
||||
|
||||
const messages = board.game.chat.map((item, index) => {
|
||||
return (
|
||||
<ListItem key={`msg-${index}`}>
|
||||
@ -237,10 +236,7 @@ const Chat = ({ board, promoteGameState }) => {
|
||||
);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.querySelector(".chatInput").focus();
|
||||
});
|
||||
|
||||
console.log(board.game);
|
||||
return (
|
||||
<Paper className="Chat">
|
||||
<List id="ChatList">
|
||||
@ -248,7 +244,6 @@ const Chat = ({ board, promoteGameState }) => {
|
||||
</List>
|
||||
<TextField className="chatInput"
|
||||
disabled={!board.game.activePlayer}
|
||||
inputRef={input => input && input.focus()}
|
||||
onChange={chatInput}
|
||||
onKeyPress={chatKeyPress}
|
||||
label={(<Moment format="h:mm:ss" interval={1000}/>)} variant="outlined"/>
|
||||
@ -284,58 +279,48 @@ const Action = ({ board }) => {
|
||||
);
|
||||
}
|
||||
|
||||
/* This needs to take in a mechanism to declare the
|
||||
* player's active item in the game */
|
||||
const Players = ({ board, promoteGameState }) => {
|
||||
const [selected, setSelected] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const PlayerName = ({board}) => {
|
||||
const [name, setName] = useState((board && board.game && board.game.activePlayerName) ? board.game.activePlayerName : "");
|
||||
|
||||
const nameInput = (event) => {
|
||||
console.log(event.target.value);
|
||||
};
|
||||
const nameChange = (event) => {
|
||||
setName(event.target.value);
|
||||
}
|
||||
|
||||
const nameKeyPress = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
console.log(`Send: ${event.target.value}`);
|
||||
setName(event.target.value);
|
||||
console.log(`Send: ${name}`);
|
||||
if (name && name != board.game.activePlayerName) {
|
||||
board.setPlayerName(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const change = { players: {} };
|
||||
return (
|
||||
<Paper className="PlayerName">
|
||||
<TextField className="nameInput"
|
||||
fullWidth
|
||||
onChange={nameChange}
|
||||
onKeyPress={nameKeyPress}
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
value={name}
|
||||
/>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
/* Joining: selected != "" and name != "" */
|
||||
if (selected && name && !board.game.activePlayer) {
|
||||
change.players[selected] = { name: name }
|
||||
promoteGameState(change)
|
||||
return;
|
||||
}
|
||||
|
||||
/* Leaving: selected = "", name = "" */
|
||||
if (!selected && board.game.activePlayer) {
|
||||
change.players[board.game.activePlayer] = { name: "" }
|
||||
promoteGameState(change)
|
||||
return;
|
||||
}
|
||||
|
||||
/* Updating name: selected != "", name != "", name != board.name*/
|
||||
if (selected &&
|
||||
board.player &&
|
||||
name &&
|
||||
board.game.players[board.game.activePlayer].name !== name) {
|
||||
change.players[board.game.activePlayer] = { name: name }
|
||||
promoteGameState(change)
|
||||
return;
|
||||
}
|
||||
});
|
||||
/* This needs to take in a mechanism to declare the
|
||||
* player's active item in the game */
|
||||
const Players = ({ board }) => {
|
||||
const [selected, setSelected] = useState(board.game && board.game.activePlayer ? board.game.activePlayer : "");
|
||||
|
||||
const toggleSelected = (key) => {
|
||||
if (selected === key) {
|
||||
setSelected("");
|
||||
setName("");
|
||||
} else {
|
||||
setSelected(key);
|
||||
}
|
||||
board.setSelected(selected === key ? "" : key);
|
||||
}
|
||||
|
||||
const classes = useStyles();
|
||||
@ -343,7 +328,6 @@ const Players = ({ board, promoteGameState }) => {
|
||||
const players = [];
|
||||
for (let key in board.game.players) {
|
||||
const item = board.game.players[key];
|
||||
console.log(item);
|
||||
if (board.game.state != "lobby" && item.status == 'Not active') {
|
||||
continue;
|
||||
}
|
||||
@ -352,23 +336,12 @@ const Players = ({ board, promoteGameState }) => {
|
||||
<ListItemAvatar>
|
||||
<Avatar className={classes[key]}>{key}</Avatar>
|
||||
</ListItemAvatar>
|
||||
<> { /* so flex-grow works we put in a fragment */ }
|
||||
{ selected === key && item.name === "" &&
|
||||
<TextField className="nameInput"
|
||||
onChange={nameInput}
|
||||
onKeyPress={nameKeyPress}
|
||||
inputRef={input => input && input.focus()}
|
||||
disabled={(name !== item.name) ? true: false}
|
||||
label="Name"
|
||||
variant="outlined" autoFocus/>
|
||||
}
|
||||
{ (selected !== key || item.name !== "") &&
|
||||
<ListItemText primary={item.name} secondary={item.status} />
|
||||
}
|
||||
</>
|
||||
<Switch edge="end"
|
||||
disabled={(selected && selected !== key) ? true : false} checked={selected === key}
|
||||
onChange={() => toggleSelected(key)}/>
|
||||
<ListItemText primary={item.name} secondary={item.status} />
|
||||
{ (!selected || selected === key) &&
|
||||
<Switch edge="end"
|
||||
checked={selected === key}
|
||||
onChange={() => toggleSelected(key)}/>
|
||||
}
|
||||
</ListItem>
|
||||
));
|
||||
}
|
||||
@ -413,6 +386,8 @@ class Board extends React.Component {
|
||||
this.updateGame = this.updateGame.bind(this);
|
||||
this.imageLoadError = this.imageLoadError.bind(this);
|
||||
this.imageLoaded = this.imageLoaded.bind(this);
|
||||
this.setPlayerName = this.setPlayerName.bind(this);
|
||||
this.setSelected = this.setSelected.bind(this);
|
||||
|
||||
this.mouse = { x: 0, y: 0 };
|
||||
this.radius = 0.317;
|
||||
@ -444,6 +419,74 @@ class Board extends React.Component {
|
||||
this.setState({message: `Error loading ${event.target.src}`});
|
||||
}
|
||||
|
||||
setSelected(key) {
|
||||
if (this.loadTimer) {
|
||||
window.clearTimeout(this.loadTimer);
|
||||
this.loadTimer = null;
|
||||
}
|
||||
|
||||
return window.fetch(`${base}/api/v1/games/${this.state.game.id}/player-selected/${key}`, {
|
||||
method: "PUT",
|
||||
cache: 'no-cache',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status >= 400) {
|
||||
throw new Error(`Unable to set selected player!`);
|
||||
}
|
||||
return res.json();
|
||||
}).then((game) => {
|
||||
let message;
|
||||
if (key) {
|
||||
message = `Player selected ${key}!`;
|
||||
} else {
|
||||
message = `Player deselected ${game.activePlayer}!`;
|
||||
}
|
||||
console.log (message);
|
||||
this.updateGame(game);
|
||||
this.setState({ game: game, message: message });
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
this.setState({message: error.message});
|
||||
}).then(() => {
|
||||
this.resetGameLoad();
|
||||
window.requestAnimationFrame(this.drawFrame);
|
||||
});
|
||||
}
|
||||
|
||||
setPlayerName(name) {
|
||||
if (this.loadTimer) {
|
||||
window.clearTimeout(this.loadTimer);
|
||||
this.loadTimer = null;
|
||||
}
|
||||
|
||||
return window.fetch(`${base}/api/v1/games/${this.state.game.id}/player-name/${name}`, {
|
||||
method: "PUT",
|
||||
cache: 'no-cache',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status >= 400) {
|
||||
throw new Error(`Unable to set player name!`);
|
||||
}
|
||||
return res.json();
|
||||
}).then((game) => {
|
||||
console.log (`Player name set to ${name}!`);
|
||||
this.updateGame(game);
|
||||
this.setState({ game: game, message: `Player name set to ${name}!`});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
this.setState({message: error.message});
|
||||
}).then(() => {
|
||||
this.resetGameLoad();
|
||||
window.requestAnimationFrame(this.drawFrame);
|
||||
});
|
||||
}
|
||||
|
||||
shuffleBoard() {
|
||||
if (this.loadTimer) {
|
||||
window.clearTimeout(this.loadTimer);
|
||||
@ -1244,8 +1287,8 @@ class Board extends React.Component {
|
||||
}
|
||||
|
||||
for (let image in images) {
|
||||
image.removeEventListener("load", this.imageLoaded);
|
||||
image.removeEventListener("error", this.imageLoadError);
|
||||
images[image].removeEventListener("load", this.imageLoaded);
|
||||
images[image].removeEventListener("error", this.imageLoadError);
|
||||
delete images[image];
|
||||
}
|
||||
|
||||
@ -1263,6 +1306,7 @@ class Board extends React.Component {
|
||||
<div className="Cards" ref={el => this.cards = el}>
|
||||
{ game &&
|
||||
<div className="Game">
|
||||
<PlayerName board={this}/>
|
||||
<Players board={this} promoteGameState={this.promoteGameState}/>
|
||||
<Chat board={this} promoteGameState={this.promoteGameState}/>
|
||||
<Action board={this}/>
|
||||
|
||||
@ -140,13 +140,66 @@ router.put("/:id/:action/:value?", (req, res) => {
|
||||
|
||||
let error;
|
||||
|
||||
if (!req.session.activePlayer || !(req.session.activePlayer in game.players)) {
|
||||
error = `Invalid player: ${req.session.activePlayer}`;
|
||||
if (req.params.action == "player-name") {
|
||||
if (!req.params.value) {
|
||||
error = `No name provided`;
|
||||
} else {
|
||||
req.session.playerName = req.params.value;
|
||||
const color = req.session.playerColor;
|
||||
if (color && game && color in game.players) {
|
||||
game.players[color].name = req.session.playerName;
|
||||
game.chat.push({ date: Date.now(), message: `${color} is no known as ${req.session.playerName}.` });
|
||||
}
|
||||
}
|
||||
|
||||
return sendGame(res, req, game, error);
|
||||
}
|
||||
|
||||
const player = game.players[req.session.activePlayer],
|
||||
name = player.name;
|
||||
if (req.params.action == "player-selected") {
|
||||
if (!game) {
|
||||
error = `No game found`;
|
||||
return sendGame(res, req, game, error);
|
||||
}
|
||||
|
||||
const selected = req.params.value;
|
||||
let player;
|
||||
|
||||
console.log(`player-selected: ${selected}`);
|
||||
|
||||
/* Deselect currentlyi active player for this session */
|
||||
for (let key in game.players) {
|
||||
if (key == req.session.playerColor && selected != key) {
|
||||
player = game.players[key];
|
||||
if (player.session == req.session.id) {
|
||||
player.session = '';
|
||||
player.name = '';
|
||||
player.status = 'Not active';
|
||||
req.session.playerColor = '';
|
||||
game.chat.push({ date: Date.now(), message: `${key} is no longer claimed.` });
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (selected in game.players) {
|
||||
player = game.players[selected];
|
||||
player.session = req.session.id;
|
||||
player.name = req.session.playerName;
|
||||
player.status = `Just joined`;
|
||||
req.session.playerColor = selected;
|
||||
game.chat.push({ date: Date.now(), message: `${selected} is now '${player.name}'.` });
|
||||
}
|
||||
|
||||
return sendGame(res, req, game, error);
|
||||
}
|
||||
|
||||
if (!req.session.playerColor || !(req.session.playerColor in game.players)) {
|
||||
error = `Invalid player: ${req.session.playerColor}`;
|
||||
return sendGame(res, req, game, error);
|
||||
}
|
||||
|
||||
player = game.players[req.session.playerColor];
|
||||
const name = player.name;
|
||||
|
||||
switch (req.params.action) {
|
||||
case "roll":
|
||||
@ -212,26 +265,12 @@ router.put("/:id", (req, res/*, next*/) => {
|
||||
const game = games[req.params.id],
|
||||
changes = req.body;
|
||||
|
||||
console.log(req.session.id, req.session.activePlayer);
|
||||
console.log(req.session.id, req.session.playerColor);
|
||||
console.log(JSON.stringify(changes, null, 2));
|
||||
|
||||
for (let change in changes) {
|
||||
switch (change) {
|
||||
case "players":
|
||||
console.log("Player change.");
|
||||
for (let player in changes.players) {
|
||||
const playerChange = changes.players[player];
|
||||
if (playerChange.name != "") {
|
||||
game.chat.push({ from: player, date: Date.now(), message: `${player} is now '${playerChange.name}'.` });
|
||||
req.session.activePlayer = player;
|
||||
game.players[player].status = `Just joined`;
|
||||
} else {
|
||||
game.chat.push({ from: player, date: Date.now(), message: `${player} is no longer claimed.` });
|
||||
req.session.activePlayer = "";
|
||||
game.players[player].status = `Not active`;
|
||||
}
|
||||
game.players[player].name = playerChange.name;
|
||||
}
|
||||
break;
|
||||
case "chat":
|
||||
console.log("Chat change.");
|
||||
@ -271,12 +310,18 @@ const sendGame = async (res, req, game, error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
return res.status(200).send(Object.assign({}, game, {
|
||||
const playerGame = Object.assign({}, game, {
|
||||
timestamp: Date.now(),
|
||||
status: error ? error : "success",
|
||||
activePlayer: (req.session && req.session.activePlayer) ?
|
||||
req.session.activePlayer : null
|
||||
}));
|
||||
activePlayerName: (req.session && req.session.playerName) ?
|
||||
req.session.playerName : "",
|
||||
activePlayer: (req.session && req.session.playerColor) ?
|
||||
req.session.playerColor : null
|
||||
});
|
||||
if (game.id == 'b3c4bd15efe212a2') {
|
||||
// console.log(req.session);
|
||||
}
|
||||
return res.status(200).send(playerGame);
|
||||
}
|
||||
|
||||
router.post("/:id?", (req, res/*, next*/) => {
|
||||
@ -315,7 +360,7 @@ router.post("/:id?", (req, res/*, next*/) => {
|
||||
};
|
||||
|
||||
games[game.id] = game;
|
||||
req.session.activePlayer = null;
|
||||
req.session.playerColor = null;
|
||||
shuffleBoard(game);
|
||||
console.log(`New game created: ${game.id}`);
|
||||
return sendGame(res, req, game);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user