import React from 'react';
import Flux from '../../lib/flux';
import lodash from 'lodash';
import Popout from '../common/Popout';
import SwitchItem from '../../uikit/SwitchItem';
import Select from '../../uikit/Select';
import OverlayIconOff from '../../uikit/icons/OverlayIconOff';
import OverlayIconOn from '../../uikit/icons/OverlayIconOn';
import Button, {ButtonSizes, ButtonLooks, ButtonColors} from '../../uikit/Button';
import {FormSection, FormTitleTags, FormTitle, FormDivider} from '../../uikit/form';
import HoverRoll from '../../uikit/HoverRoll';
import EmptyState, {EmptyStateText, EmptyStateImage} from '../../uikit/EmptyState';
import classNames from 'classnames';
import NativeUtils from '../../utils/NativeUtils';
import UserSettingsActionCreators from '../../actions/UserSettingsActionCreators';
import UserSettingsStore from '../../stores/UserSettingsStore';
import RunningGameStore from '../../stores/RunningGameStore';
import GamesActionCreators from '../../actions/GamesActionCreators';
import Tooltip from '../common/Tooltip';
import i18n from '../../i18n';
import '../../styles/user_settings_games.styl';
import '../../styles/round_remove_button.styl';
import '../../styles/shared/hover_card.styl';
import type {RunningGame} from '../../flow/Client';
const ThemedEmptyState = Flux.connectStores([UserSettingsStore], () => ({
theme: UserSettingsStore.theme,
}))(EmptyState);
const enableOverlayToggle = NativeUtils.isWindows();
class AddGamePopout extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
selectedValue: null,
};
lodash.bindAll(this, ['handleGameChange', 'handleAdd', 'handleClose']);
}
render() {
const {candidates} = this.props;
const {selectedValue} = this.state;
const options = candidates.map(candidate => ({value: candidate.pid, label: candidate.name}));
return (
);
}
handleGameChange(value) {
this.setState({selectedValue: value});
}
handleAdd() {
GamesActionCreators.addGame(this.state.selectedValue.value);
const {onClose} = this.props;
onClose();
}
handleClose() {
const {onClose} = this.props;
onClose();
}
}
const AddGamePopoutConnected = Flux.connectStores([RunningGameStore], () => {
return {
candidates: RunningGameStore.getCandidateGames(),
};
})(AddGamePopout);
class Game extends React.PureComponent {
constructor(props) {
super(props);
lodash.bindAll(this, [
'handleRemoveClick',
'handleNameEdit',
'handleNameChange',
'handleOverlayToggle',
'handleEnterKey',
]);
this.state = {
editingName: props.game != null ? props.game.gameName : '',
};
}
componentWillReceiveProps(newProps) {
if (this.props.nowPlaying && newProps.game) {
if (newProps.game.gameName !== this.state.editingName) {
this.setState({editingName: newProps.game.gameName});
}
}
}
renderName() {
const {game} = this.props;
if (game == null) {
return {i18n.Messages.SETTINGS_GAMES_NO_GAME_DETECTED}
;
}
if (game.verified) {
return (
);
}
return (
);
}
renderLastPlayed() {
const {game, nowPlaying} = this.props;
if (game == null) {
return {i18n.Messages.SETTINGS_GAMES_NOT_PLAYING}
;
}
const {played, exePath} = game;
let lastPlayed;
if (nowPlaying) {
lastPlayed = i18n.Messages.SETTINGS_GAMES_NOW_PLAYING_STATE;
} else if (played) {
lastPlayed = i18n.Messages.SETTINGS_GAMES_LAST_PLAYED.format({when: played});
}
return (
{lastPlayed}
);
}
renderOverlayToggle() {
const {game} = this.props;
if (!enableOverlayToggle || game == null) {
return null;
}
const {overlay, overlayWarn} = game;
const text = overlay ? i18n.Messages.SETTINGS_GAMES_OVERLAY_ON : i18n.Messages.SETTINGS_GAMES_OVERLAY_OFF;
const icon = overlay
?
: ;
const overlayWarning = overlayWarn
?
: null;
return (
{overlayWarning}
{text}
{icon}
);
}
renderRemove() {
return (
{i18n.Messages.REMOVE_KEYBIND}
);
}
render() {
const {nowPlaying, game} = this.props;
const exists = game != null;
const classes = classNames('flex-center', {
game: !nowPlaying,
'ui-hover-card': !nowPlaying,
'now-playing': exists && nowPlaying,
'not-detected': !exists && nowPlaying,
});
return (
{this.renderName()}
{this.renderLastPlayed()}
{this.renderOverlayToggle()}
{!nowPlaying && exists ? this.renderRemove() : null}
);
}
// Handlers
handleRemoveClick() {
GamesActionCreators.deleteEntry(this.props.game);
}
handleNameEdit() {
const {game} = this.props;
const {editingName} = this.state;
if (game.gameName !== editingName) {
GamesActionCreators.editName(game, editingName);
}
}
handleNameChange(event) {
this.setState({editingName: event.target.value});
}
handleEnterKey(event) {
if (event.keyCode == 13) {
event.target.blur();
event.preventDefault();
}
}
handleOverlayToggle() {
GamesActionCreators.toggleOverlay(this.props.game);
}
}
class UserSettingsGames extends React.PureComponent {
props: {
showCurrentGame: boolean,
gameHistory: Array,
runningGame: RunningGame,
};
componentDidMount() {
RunningGameStore.watchCandidateGames(true);
}
componentWillUnmount() {
RunningGameStore.watchCandidateGames(false);
}
handleChangeCurrentGame(e) {
UserSettingsActionCreators.updateRemoteSettings({showCurrentGame: e.currentTarget.checked});
}
renderPopout(props) {
return ;
}
renderGameList() {
const {gameHistory} = this.props;
// Empty state message
if (!gameHistory.length) {
return (
{i18n.Messages.SETTINGS_GAMES_NO_GAMES_HEADER}
);
} else {
return (
{i18n.Messages.SETTINGS_GAMES_ADDED_GAMES_LABEL}
{gameHistory.map(game => )}
);
}
}
render() {
const {runningGame, showCurrentGame} = this.props;
return (
{i18n.Messages.SETTINGS_GAMES_NOT_SEEING_GAME}
{i18n.Messages.SHOW_CURRENT_GAME}
{this.renderGameList()}
);
}
}
export default Flux.connectStores([UserSettingsStore, RunningGameStore], () => {
return {
showCurrentGame: UserSettingsStore.showCurrentGame,
gameHistory: RunningGameStore.getGamesSeen(),
runningGame: RunningGameStore.getRunningGame(),
};
})(UserSettingsGames);
// WEBPACK FOOTER //
// ./discord_app/components/user_settings/UserSettingsGames.js