Scoreboard/HTML/HomePageScoreboard/scoreboardViewModel.js

function MatchEvent(event){
  var self = this;
  self.id = ko.observable(event.id);
  self.eventType = ko.observable(event.EventType);
  self.eventTimeStamp = ko.observable(event.TimeStamp);
  self.eventPoint = ko.observable(event.Points);
}
function Team (team){
  var self = this;
  self.name = ko.observable(team.name);
  self.points = ko.observable(team.points);
  self.eventHistory = ko.observableArray(team.EventHistory.map((evt) => new MatchEvent(evt)));
}

function ScoreboardViewModel() {
  const apiKey = '396A62D6-0192-4738-8F45-8AAF7BCFA3EC'; // Replace with your actual API key
  const apiUrl = 'https://localhost:7005/api/Score'; // Replace with your API endpoint URL

  var self = this;
  //API poll variables
  var INTERVAL = 5000;
  var timeout = null;
  var currentReq = null;
  
  //knockout variables
  this.gameState = ko.observable("");
  this.half = ko.observable("Pre");
  this.kickOffTime = ko.observable(new Date());

  this.gameOn = ko.observable(false);
  this.eventList = ko.observableArray([]);

  this.homeTeamName = ko.observable("Uckfield RFC");
  this.homeTeamColor = ko.observable("#ff0000");
  this.homeTeamPoints = ko.observable(0);
  this.homeTeamLogo = ko.observable("");

  this.awayTeamName = ko.observable("Away team");
  this.awayTeamColor = ko.observable("#0000ff");
  this.awayTeamPoints = ko.observable(0);
  this.awayTeamLogo = ko.observable("");

  self.calculateRemainingTime = ko.computed(function () {
    if (self.half() === 'Pre') { return "---"; }
    if (self.gameState() === 'HalfTime') { return '40:00'; }
    if (self.gameState() === 'Finished') { return '80:00'; }
    return calc();
  });
  var isSecondHalfEvent=function(matchEvts){
    return !!matchEvts.find(e=>e.eventType === 'SecondHalfStart');
  };
  var calc = function (eventId = 0, minsOnly=false) {
    var matchEvts = self.eventList().filter(x => (x.category === 'Match' && x.id <= eventId) || x.id === eventId);
    var initialTime = self.kickOffTime(); //IF FIRST HALF, WORK OUT FOR IF SECOND HALF
    var halfStart = self.kickOffTime();
    var offsetMins = 0;

    if ((eventId != 0 &&isSecondHalfEvent(matchEvts)) 
        || (eventId == 0 && self.half() === 'Second')) {
      var secondHalfEvent = self.eventList().find(x => x.eventType === 'SecondHalfStart');
      if (!secondHalfEvent) {
        throw 'Invalid System Event State, Second Half without Second Half Event';
      }
      halfStart = new Date(secondHalfEvent.timeStamp);
      initialTime = new Date(secondHalfEvent.timeStamp);
      offsetMins = 40;
      matchEvts = self.eventList().filter(x=>x.id >= secondHalfEvent.id && (x.category === 'Match' || x.id === eventId)) 
    }

    if (!matchEvts || matchEvts.length <= 1) {
      const diff = calcDiff(initialTime, new Date());
      return `${String(diff.mins + offsetMins).padStart(2, "0")}:${String(diff.secs).padStart(2, "0")}`
    }

    var totalMins = offsetMins;
    var totalSecs = 0;

    matchEvts.forEach((evt, idx, src) => {
      if (eventId === 0 || evt.id <= eventId) {
        if (evt.eventType === 'TimeOff') {
          var t = calcDiff(initialTime, new Date(evt.timeStamp));
          totalMins += t.mins;
          totalSecs += t.secs;
        }
        if (evt.eventType === 'TimeOn') {
          initialTime = new Date(evt.timeStamp);
          if(idx === (src.length-1)){
            var t = calcDiff(new Date(evt.timeStamp), new Date());
            totalMins += t.mins;
            totalSecs += t.secs;
          }          
        }
        if (eventId != 0 && eventId === evt.id) {
          var t = calcDiff(initialTime, new Date(evt.timeStamp));
          totalMins += t.mins;
          totalSecs += t.secs;
        }
      }
    });
    if (totalSecs >= 60) {
      totalMins += 1;
      totalSecs = totalSecs % 60;
    }
    if(minsOnly){
      return `${String(totalMins).padStart(2, "0")}`;
    }
    return `${String(totalMins).padStart(2, "0")}:${String(totalSecs).padStart(2, "0")}`;
  }

  self.halfIndicator = ko.computed(function () {
    const gameState = self.gameState();
    if (gameState === "WaitingForStart") {
      var dt = self.kickOffTime();
      return `${String(dt.getHours()).padStart(2, "0")}:${String(dt.getMinutes()).padStart(2, "0")} KO`;
    }
    if (gameState === "FirstHalf") {
      return "1st Half";
    }
    if (gameState === "SecondHalf") {
      return "2nd Half";
    }
    if (gameState === "TimeOff") {
      return "Time Off";
    }
  });

  var fetchNewData = function() {
    currentReq = fetch(apiUrl, {
      method: 'GET',
      headers: {
        'x-api-key': apiKey
      },
    });
    
    currentReq
      .then(processResponse)
      .then(processJson)
      .catch((error)=>console.log(`Error Occurred retrieving data ${error}`))
      .then(scheduleNewDataFetch);
  };

  var processResponse = function(response) {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    if(response.status === 204){
      self.gameOn(false);
      INTERVAL = 60000;
      return Promise.reject('no game');
    }
    INTERVAL = 5000;
    return response.json();
  };

  var processJson = function(data) {
    self.eventList(data.eventHistory);
    self.gameOn(true);
    self.gameState(data.state);
    self.half(data.half);
    self.kickOffTime(new Date(data.startedAt));

    self.homeTeamName(data.home.name);
    self.awayTeamName(data.away.name);

    self.homeTeamPoints(data.home.points);
    self.awayTeamPoints(data.away.points);
  };
  
  var scheduleNewDataFetch = function() {    
    if (timeout) {
      clearTimeout(timeout);  
    }
    timeout = setTimeout(fetchNewData, INTERVAL);
  };

  fetchNewData(); // Starts the update loop
}

ko.applyBindings(new ScoreboardViewModel());