nhl-schedule/dist/Game.js

A widget that will show past and upcoming games in the NHL.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = require("react");
require("./Game.css");
var _ICON_MAP = require("./team-logos/ICON_MAP.js");
var _jsxRuntime = require("react/jsx-runtime");
var Game = function Game(_ref) {
  var game = _ref.game,
    shouldScroll = _ref.shouldScroll,
    ImageComp = _ref.ImageComp;
  var ref = (0, _react.useRef)(null);
  var homeTeam = game.homeTeam;
  var awayTeam = game.awayTeam;
  var summary = function summary() {
    if (!(game !== null && game !== void 0 && game.seriesStatus)) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "summary",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: game.seriesStatus.homeTeamWins
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: "-"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: game.seriesStatus.awayTeamWins
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "Game ".concat(game.seriesStatus.gameNumberOfSeries)
      })]
    });
  };
  var isOver = function isOver(status) {
    return status.toLowerCase() === "off" || status.toLowerCase() === "final";
  };
  var renderImg = function renderImg(src, alt, className) {
    var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
    if (ImageComp) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageComp, {
        src: src,
        alt: alt,
        className: className
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      src: src,
      alt: alt,
      className: className,
      style: style
    });
  };
  (0, _react.useEffect)(function () {
    if (shouldScroll && ref) {
      ref.current.scrollIntoView({
        behavior: "smooth",
        inline: "end",
        block: "end"
      });
    }
  }, [ref, shouldScroll, game]);
  var isLive = game.gameState.toLowerCase() === "live";
  var getPeriodNumber = function getPeriodNumber(period) {
    if (period === 1) {
      return "1st";
    } else if (period === 2) {
      return "2nd";
    } else if (period === 3) {
      return "3rd";
    }
    return period;
  };
  var renderDate = function renderDate() {
    if (isLive) {
      var _game$periodDescripto, _game$clock;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "liveStatus",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: getPeriodNumber((_game$periodDescripto = game.periodDescriptor) === null || _game$periodDescripto === void 0 ? void 0 : _game$periodDescripto.number)
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: game === null || game === void 0 ? void 0 : (_game$clock = game.clock) === null || _game$clock === void 0 ? void 0 : _game$clock.timeRemaining
        })]
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "gameDate",
      children: new Date(game.startTimeUTC).toLocaleDateString("en-us", {
        weekday: "short",
        hour: "2-digit",
        minute: "2-digit"
      })
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      id: game.id,
      ref: ref,
      className: isOver(game.gameState) ? "gameContainerFinished" : isLive ? "liveContainer" : "gameContainer",
      children: [summary(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "gameWrapper",
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "gameBox",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "teamSection",
            children: [renderImg((0, _ICON_MAP.get)(awayTeam.abbrev), "team", "team-logo"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "teamName",
              children: awayTeam.abbrev
            }), isOver(game.gameState) || isLive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              children: awayTeam.score
            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})]
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "teamSection",
            children: [renderImg((0, _ICON_MAP.get)(homeTeam.abbrev), "team", "team-logo"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "teamName",
              children: homeTeam.abbrev
            }), isOver(game.gameState) || isLive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              children: homeTeam.score
            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})]
          })]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "gameBox",
        children: renderDate()
      })]
    })
  });
};
var _default = Game;
exports["default"] = _default;