<commit_before>import React from "react";
import { Table } from "react-materialize";
import cloneDeep from "lodash.clonedeep";

import {
  cellTypeByPos,
  emptyGrid,
  distance,
  timeControlToString,
  cellEnum,
} from "../shared/gameLogicUtils";
import { prettyDate } from "../shared/utils";
import { getColor } from "../shared/colorThemes";
import hoverHighlight from "../shared/hoverHighlight.module.css";

const winnerToString = (serverGame) => {
  if (serverGame.winner === "creator") return "<";
  else if (serverGame.winner === "draw") return "=";
  else return ">";
};

const cachedFinalDists = new Map();
const finalDists = (serverGame) => {
  //limit the size so old games don't accrue indefinitely
  if (cachedFinalDists.size > 1000) cachedFinalDists.clear();
  if (cachedFinalDists.has(serverGame._id))
    return cachedFinalDists.get(serverGame._id);

  const grid = emptyGrid(serverGame.boardSettings.dims);
  const playerPos = cloneDeep(serverGame.boardSettings.startPos);
  let idxToMove = serverGame.creatorStarts ? 0 : 1;
  for (let k = 0; k < serverGame.moveHistory.length; k++) {
    const actions = serverGame.moveHistory[k].actions;
    for (let k2 = 0; k2 < actions.length; k2++) {
      const pos = actions[k2];
      if (cellTypeByPos(pos) === cellEnum.ground) {
        playerPos[idxToMove] = pos;
      } else {
        grid[pos[0]][pos[1]] = idxToMove + 1;
      }
    }
    idxToMove = (idxToMove + 1) % 2;
  }
  const [g1, g2] = serverGame.boardSettings.goalPos;
  const [d1, d2] = [
    distance(grid, playerPos[0], g1),
    distance(grid, playerPos[1], g2),
  ];
  cachedFinalDists.set(serverGame._id, [d1, d2]);
  return [d1, d2];
};

const RecentGameList = ({
  recentGames,
  isLargeScreen,
  menuTheme,
  isDarkModeOn,
  handleViewGame,
}) => {
  const [col1, col2, colBg] = [
    getColor(menuTheme, "recentGamesBackground", isDarkModeOn),
    getColor(menuTheme, "recentGamesAlternate", isDarkModeOn),
    getColor(menuTheme, "container", isDarkModeOn),
  ];
  const headEntryStyle = {
    position: "sticky",
    top: "0px",
    paddingTop: "0.15rem",
    paddingBottom: "0.15rem",
    borderRadius: "0",
    backgroundColor: colBg,
  };
  const entryStyle = {
    paddingTop: "0.15rem",
    paddingBottom: "0.15rem",
    borderRadius: "0",
  };
  if (isLargeScreen) {
    return (
      <div
        className={"center"}
        style={{
          overflowY: "scroll",
          display: "block",
          height: "100%",
          backgroundColor: getColor(
            menuTheme,
            "recentGamesBackground",
            isDarkModeOn
          ),
        }}
      >
        <Table centered style={{ width: "100%" }}>
          <thead>
            <tr>
              <th style={headEntryStyle}>Time</th>
              <th style={headEntryStyle}>Player 1</th>
              <th style={headEntryStyle}></th>
              <th style={headEntryStyle}>Player 2</th>
              <th style={headEntryStyle}>Distance</th>
              <th style={headEntryStyle}>Turns</th>
              <th style={headEntryStyle}>Date</th>
            </tr>
          </thead>
          <tbody>
            {recentGames &&
              recentGames.map((game, i) => {
                const [d1, d2] = finalDists(game);
                return (
                  <tr
                    onClick={() => handleViewGame(game._id)}
                    style={{
                      cursor: "pointer",
                      backgroundColor: i % 2 ? col1 : col2,
                    }}
                    className={hoverHighlight.hoveredGame}
                    key={i}
                  >
                    <td style={entryStyle}>
                      {timeControlToString(game.timeControl)}
                    </td>
                    <td style={entryStyle}>{game.playerNames[0]}</td>
                    <td style={entryStyle}>{winnerToString(game)}</td>
                    <td style={entryStyle}>{game.playerNames[1]}</td>
                    <td style={entryStyle}>{d1 + " - " + d2}</td>
                    <td style={entryStyle}>{game.moveHistory.length}</td>
                    <td style={entryStyle}>
                      {prettyDate(game.startDate, true)}
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </Table>
      </div>
    );
  } else {
    return (
      <div
        className={"center"}
        style={{
          overflowY: "scroll",
          display: "block",
          height: "100%",
        }}
      >
        <Table centered style={{ width: "100%" }}>
          <thead>
            <tr>
              <th style={headEntryStyle}>Time</th>
              <th style={headEntryStyle}>Player 1</th>
              <th style={headEntryStyle}>Win</th>
              <th style={headEntryStyle}>Player 2</th>
              <th style={headEntryStyle}>Date</th>
            </tr>
          </thead>
          <tbody>
            {recentGames &&
              recentGames.map((game, i) => {
                return (
                  <tr
                    onClick={() => handleViewGame(game._id)}
                    style={{
                      cursor: "pointer",
                      backgroundColor: i % 2 ? col1 : col2,
                    }}
                    className={hoverHighlight.hoveredGame}
                    key={i}
                  >
                    <td style={entryStyle}>
                      {timeControlToString(game.timeControl)}
                    </td>
                    <td style={entryStyle}>{game.playerNames[0]}</td>
                    <td style={entryStyle}>{winnerToString(game)}</td>
                    <td style={entryStyle}>{game.playerNames[1]}</td>
                    <td style={entryStyle}>
                      {prettyDate(game.startDate, false)}
                    </td>
                  </tr>
                );<commit_msg>Fix recent game history (commit 2)<commit_after>import React from "react";
import { Table } from "react-materialize";
import { timeControlToString } from "../shared/gameLogicUtils";
import { prettyDate } from "../shared/utils";
import { getColor } from "../shared/colorThemes";
import hoverHighlight from "../shared/hoverHighlight.module.css";

const winnerToString = (serverGame) => {
  if (serverGame.winner === "creator") return "<";
  else if (serverGame.winner === "draw") return "=";
  else return ">";
};

const RecentGameList = ({
  recentGameSummaries,
  isLargeScreen,
  menuTheme,
  isDarkModeOn,
  handleViewGame,
}) => {
  const [col1, col2, colBg] = [
    getColor(menuTheme, "recentGamesBackground", isDarkModeOn),
    getColor(menuTheme, "recentGamesAlternate", isDarkModeOn),
    getColor(menuTheme, "container", isDarkModeOn),
  ];
  const headEntryStyle = {
    position: "sticky",
    top: "0px",
    paddingTop: "0.15rem",
    paddingBottom: "0.15rem",
    borderRadius: "0",
    backgroundColor: colBg,
  };
  const entryStyle = {
    paddingTop: "0.15rem",
    paddingBottom: "0.15rem",
    borderRadius: "0",
  };
  if (isLargeScreen) {
    return (
      <div
        className={"center"}
        style={{
          overflowY: "scroll",
          display: "block",
          height: "100%",
          backgroundColor: getColor(
            menuTheme,
            "recentGamesBackground",
            isDarkModeOn
          ),
        }}
      >
        <Table centered style={{ width: "100%" }}>
          <thead>
            <tr>
              <th style={headEntryStyle}>Time</th>
              <th style={headEntryStyle}>Player 1</th>
              <th style={headEntryStyle}></th>
              <th style={headEntryStyle}>Player 2</th>
              <th style={headEntryStyle}>N</th>
              <th style={headEntryStyle}>Date</th>
            </tr>
          </thead>
          <tbody>
            {recentGameSummaries &&
              recentGameSummaries.map((gameSummary, i) => {
                const [r1, r2] = [
                  Math.round(gameSummary.ratings[0]),
                  Math.round(gameSummary.ratings[1]),
                ];
                return (
                  <tr
                    onClick={() => handleViewGame(gameSummary._id)}
                    style={{
                      cursor: "pointer",
                      backgroundColor: i % 2 ? col1 : col2,
                    }}
                    className={hoverHighlight.hoveredGame}
                    key={i}
                  >
                    <td style={entryStyle}>
                      {timeControlToString(gameSummary.timeControl)}
                    </td>
                    <td
                      style={entryStyle}
                    >{`${gameSummary.playerNames[0]} (${r1})`}</td>
                    <td style={entryStyle}>{winnerToString(gameSummary)}</td>
                    <td
                      style={entryStyle}
                    >{`${gameSummary.playerNames[1]} (${r2})`}</td>
                    <td style={entryStyle}>{gameSummary.numMoves}</td>
                    <td style={entryStyle}>
                      {prettyDate(gameSummary.startDate, true)}
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </Table>
      </div>
    );
  } else {
    return (
      <div
        className={"center"}
        style={{
          overflowY: "scroll",
          display: "block",
          height: "100%",
        }}
      >
        <Table centered style={{ width: "100%" }}>
          <thead>
            <tr>
              <th style={headEntryStyle}>Time</th>
              <th style={headEntryStyle}>Player 1</th>
              <th style={headEntryStyle}>Win</th>
              <th style={headEntryStyle}>Player 2</th>
              <th style={headEntryStyle}>Date</th>
            </tr>
          </thead>
          <tbody>
            {recentGameSummaries &&
              recentGameSummaries.map((gameSummary, i) => {
                return (
                  <tr
                    onClick={() => handleViewGame(gameSummary._id)}
                    style={{
                      cursor: "pointer",
                      backgroundColor: i % 2 ? col1 : col2,
                    }}
                    className={hoverHighlight.hoveredGame}
                    key={i}
                  >
                    <td style={entryStyle}>
                      {timeControlToString(gameSummary.timeControl)}
                    </td>
                    <td style={entryStyle}>{gameSummary.playerNames[0]}</td>
                    <td style={entryStyle}>{winnerToString(gameSummary)}</td>
                    <td style={entryStyle}>{gameSummary.playerNames[1]}</td>
                    <td style={entryStyle}>
                      {prettyDate(gameSummary.startDate, false)}
                    </td>
                  </tr>
                );
{'fraction_non_alphanumeric': 0.13745166635978642, 'fraction_numerical': 0.011600073651261278, 'mean_word_length': 1.5711242603550295, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 153, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4806293', 'n_tokens_mistral': 3163, 'n_tokens_neox': 2987, 'n_words': 568}