Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Various fixes for game popup in rating chart #1514

Merged
merged 1 commit into from Aug 15, 2021
Merged

Various fixes for game popup in rating chart #1514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/MiniGoban/MiniGoban.styl
View file
Open in desktop
Expand Up @@ -40,7 +40,7 @@
align-items: center;
margin-bottom: 0.5rem;

.game-date {
.game-date, .game-result {
font-size: smaller;
}
}
Expand Down
36 changes: 33 additions & 3 deletions src/components/MiniGoban/MiniGoban.tsx
View file
Open in desktop
Expand Up @@ -28,6 +28,7 @@ import {PersistentElement} from "PersistentElement";
import {rankString, getUserRating} from "rank_utils";
import { Clock } from 'Clock';
import { fetch } from "player_cache";
import { getGameResultText } from "misc";

interface MiniGobanProps {
id: number;
Expand Down Expand Up @@ -127,9 +128,37 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
}

if (this.props.title) {

// we have to cook up a `result` object to pass to getGameResultText
let result:any;

if (this.goban.engine.winner === this.goban.engine.black_player_id) {
result = {
black_lost: false,
white_lost: true
};
}
else if (this.goban.engine.winner === this.goban.engine.white_player_id) {
result = {
black_lost: true,
white_lost: false
};
}
else {
result = {
black_lost: true,
white_lost: true
};
}

result.outcome = this.goban.engine.outcome;

const result_string = getGameResultText(result);

this.setState({
game_name: this.goban.engine.game_name || "",
game_date: this.goban.config.end_time ? moment(new Date(this.goban.config.end_time * 1000)).format("LLL") : ""
game_date: this.goban.config.end_time ? moment(new Date(this.goban.config.end_time * 1000)).format("LLL") : "",
game_result: result_string
});
}

Expand Down Expand Up @@ -173,6 +202,7 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
<div className={"minigoban-title"}>
<div>{this.state.game_name}</div>
<div className="game-date">{this.state.game_date}</div>
<div className="game-result">{this.state.game_result}</div>
</div>
}
<div className="inner-container">
Expand All @@ -188,15 +218,15 @@ export class MiniGoban extends React.Component<MiniGobanProps, any> {
<span className={`player-name`}>{this.state.black_name}</span>
<span className={`player-rank`}>{this.state.black_rank}</span>
{this.state.finished || <Clock compact goban={this.goban} color='black' className='mini-goban' />}
<span className="score">{this.state.black_points}</span>
{this.state.finished || <span className="score">{this.state.black_points}</span>}
</div>
}
{!this.props.noText &&
<div className={`title-white ${this.state.white_to_move_cls}`}>
<span className={`player-name`}>{this.state.white_name}</span>
<span className={`player-rank`}>{this.state.white_rank}</span>
{this.state.finished || <Clock compact goban={this.goban} color='white' className='mini-goban' />}
<span className="score">{this.state.white_points}</span>
{this.state.finished || <span className="score">{this.state.white_points}</span>}
</div>
}
</div>
Expand Down
16 changes: 15 additions & 1 deletion src/components/RatingsChart/RatingsChart.tsx
View file
Open in desktop
Expand Up @@ -232,11 +232,15 @@ export class RatingsChart extends React.Component<RatingsChartProperties, any> {
this.graph_width = 2.0 * sizes.width / 3.0;

if (this.width > 768) { /* it gets too bunched up to show the pie */
this.show_pie = true;
if (!this.show_pie) {
this.show_pie = true;
this.plotWinLossPie();
}
}
else {
this.show_pie = false;
this.graph_width = this.width;
this.hideWinLossPie();
}

this.pie_width = sizes.width / 3.0;
Expand Down Expand Up @@ -600,7 +604,17 @@ export class RatingsChart extends React.Component<RatingsChartProperties, any> {
}
}

hideWinLossPie = () => {
if (this.win_loss_pie) {
this.win_loss_pie.selectAll('path').remove();
this.win_loss_pie.selectAll('rect').remove();
this.win_loss_pie.selectAll('text').remove();
}
}

plotWinLossPie = () => {
if (!this.win_loss_pie) { return; }

let agg = this.win_loss_aggregate;

/* with well spread data, the order here places wins on top, and stronger opponent on right of pie */
Expand Down
25 changes: 18 additions & 7 deletions src/components/RatingsChartByGame/RatingsChartByGame.tsx
View file
Open in desktop
Expand Up @@ -62,7 +62,7 @@ const secondary_charts_height = chart_height - margin2.top - margin2.bottom;
const show_hovered_game_delay = 250; // milliseconds till game info of hovered data point is updated
// fast enough to not feel like a wait, while limiting rate

const restore_delay = 1500; // long enough to go click on the minigoban if you want to, not so long as to come as a suprise later.
const pie_restore_delay = 1500; // long enough to go click on the minigoban if you want to, not so long as to come as a suprise later.

let format_date = (d:Date) => moment(d).format('ll');

Expand Down Expand Up @@ -226,9 +226,15 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
this.graph_width = 2.0 * sizes.width / 3.0;

if (this.width > 768) { /* it gets too bunched up to show the pie */
this.show_pie = true;
if (!this.show_pie) {
this.show_pie = true;
this.plotWinLossPie();
}
}
else {
if (this.show_pie) {
this.hideWinLossPie();
}
this.show_pie = false;
this.graph_width = this.width;
}
Expand Down Expand Up @@ -385,7 +391,7 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,

// get rid of mouse-hover effects
window.clearTimeout(this.hover_timer);
self.hover_timer = window.setTimeout(this.restorePie.bind(self), restore_delay);
self.hover_timer = window.setTimeout(this.restorePie.bind(self), pie_restore_delay);
})
.on('mousemove', function() {
/* tslint:disable */
Expand Down Expand Up @@ -536,12 +542,16 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
}

hideWinLossPie = () => {
this.win_loss_pie.selectAll('path').remove();
this.win_loss_pie.selectAll('rect').remove();
this.win_loss_pie.selectAll('text').remove();
if (this.win_loss_pie) {
this.win_loss_pie.selectAll('path').remove();
this.win_loss_pie.selectAll('rect').remove();
this.win_loss_pie.selectAll('text').remove();
}
}

plotWinLossPie = () => {
if (!this.win_loss_pie) { return; }

let agg = this.win_loss_aggregate;

/* with well spread data, the order here places wins on top, and stronger opponent on right of pie */
Expand Down Expand Up @@ -739,7 +749,9 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
}

this.computeWinLossNumbers();

if (!this.state.loading && this.show_pie) {
this.setState({hovered_game_id: null}); // make sure hovered game is not lingering while the are doing subselect
this.plotWinLossPie();
}
}
Expand Down Expand Up @@ -783,7 +795,6 @@ export class RatingsChartByGame extends React.Component<RatingsChartProperties,
title={true}
/>
}
{this.show_pie ? null : this.renderWinLossNumbersAsText()}
</div>
);
}
Expand Down