mirror of
https://github.com/Team254/cheesy-arena-lite.git
synced 2026-03-09 21:56:50 -04:00
Tidy up realtime scoring inputs on match play
This commit is contained in:
Ken Schenke
@@ -108,3 +108,8 @@ td[data-plc-value="true"] {
|
||||
input[data-changed="true"], select[data-changed="true"] {
|
||||
border: 2px solid #f00;
|
||||
}
|
||||
.score-block {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@@ -70,6 +70,13 @@ var updateRealtimeScore = function() {
|
||||
})
|
||||
};
|
||||
|
||||
var scoreKeyHandler = function(e) {
|
||||
var keycode = (event.keyCode ? event.keyCode : event.which);
|
||||
if (keycode == 13) {
|
||||
$('#' + $(event.target).attr("data-next")).focus().select();
|
||||
}
|
||||
};
|
||||
|
||||
var confirmCommit = function(isReplay) {
|
||||
if (isReplay) {
|
||||
// Show the appropriate message(s) in the confirmation dialog.
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
// Copyright 2014 Team 254. All Rights Reserved.
|
||||
// Author: pat@patfairbank.com (Patrick Fairbank)
|
||||
//
|
||||
// Client-side logic for the referee interface.
|
||||
|
||||
var websocket;
|
||||
var foulTeamButton;
|
||||
var foulRuleButton;
|
||||
var firstMatchLoad = true;
|
||||
|
||||
// Handles a click on a team button.
|
||||
var setFoulTeam = function(teamButton) {
|
||||
if (foulTeamButton) {
|
||||
foulTeamButton.attr("data-selected", false);
|
||||
}
|
||||
foulTeamButton = $(teamButton);
|
||||
foulTeamButton.attr("data-selected", true);
|
||||
|
||||
$("#commit").prop("disabled", !(foulTeamButton && foulRuleButton));
|
||||
};
|
||||
|
||||
// Handles a click on a rule button.
|
||||
var setFoulRule = function(ruleButton) {
|
||||
if (foulRuleButton) {
|
||||
foulRuleButton.attr("data-selected", false);
|
||||
}
|
||||
foulRuleButton = $(ruleButton);
|
||||
foulRuleButton.attr("data-selected", true);
|
||||
|
||||
$("#commit").prop("disabled", !(foulTeamButton && foulRuleButton));
|
||||
};
|
||||
|
||||
// Resets the buttons to their default selections.
|
||||
var clearFoul = function() {
|
||||
if (foulTeamButton) {
|
||||
foulTeamButton.attr("data-selected", false);
|
||||
foulTeamButton = null;
|
||||
}
|
||||
if (foulRuleButton) {
|
||||
foulRuleButton.attr("data-selected", false);
|
||||
foulRuleButton = null;
|
||||
}
|
||||
$("#commit").prop("disabled", true);
|
||||
};
|
||||
|
||||
// Sends the foul to the server to add it to the list.
|
||||
var commitFoul = function() {
|
||||
websocket.send("addFoul", {Alliance: foulTeamButton.attr("data-alliance"),
|
||||
TeamId: parseInt(foulTeamButton.attr("data-team")), RuleId: parseInt(foulRuleButton.attr("data-rule-id"))});
|
||||
};
|
||||
|
||||
// Removes the foul with the given parameters from the list.
|
||||
var deleteFoul = function(alliance, team, ruleId, timeSec) {
|
||||
websocket.send("deleteFoul", {Alliance: alliance, TeamId: parseInt(team), RuleId: parseInt(ruleId),
|
||||
TimeInMatchSec: timeSec});
|
||||
};
|
||||
|
||||
// Cycles through no card, yellow card, and red card.
|
||||
var cycleCard = function(cardButton) {
|
||||
var newCard = "";
|
||||
if ($(cardButton).attr("data-card") === "") {
|
||||
newCard = "yellow";
|
||||
} else if ($(cardButton).attr("data-card") === "yellow") {
|
||||
newCard = "red";
|
||||
}
|
||||
websocket.send("card", {Alliance: $(cardButton).attr("data-alliance"),
|
||||
TeamId: parseInt($(cardButton).attr("data-card-team")), Card: newCard});
|
||||
$(cardButton).attr("data-card", newCard);
|
||||
};
|
||||
|
||||
// Signals to the volunteers that they may enter the field.
|
||||
var signalVolunteers = function() {
|
||||
websocket.send("signalVolunteers");
|
||||
};
|
||||
|
||||
// Signals to the teams that they may enter the field.
|
||||
var signalReset = function() {
|
||||
websocket.send("signalReset");
|
||||
};
|
||||
|
||||
// Signals the scorekeeper that foul entry is complete for this match.
|
||||
var commitMatch = function() {
|
||||
websocket.send("commitMatch");
|
||||
};
|
||||
|
||||
// Handles a websocket message to update the teams for the current match.
|
||||
var handleMatchLoad = function(data) {
|
||||
// Since the server always sends a matchLoad message upon establishing the websocket connection, ignore the first one.
|
||||
if (!firstMatchLoad) {
|
||||
location.reload();
|
||||
}
|
||||
firstMatchLoad = false;
|
||||
};
|
||||
|
||||
$(function() {
|
||||
// Activate tooltips above the rule buttons.
|
||||
$("[data-toggle=tooltip]").tooltip({"placement": "top"});
|
||||
|
||||
// Set up the websocket back to the server.
|
||||
websocket = new CheesyWebsocket("/panels/referee/websocket", {
|
||||
matchLoad: function(event) { handleMatchLoad(event.data) }
|
||||
});
|
||||
|
||||
clearFoul();
|
||||
});
|
||||
@@ -1,159 +0,0 @@
|
||||
// Copyright 2014 Team 254. All Rights Reserved.
|
||||
// Author: pat@patfairbank.com (Patrick Fairbank)
|
||||
//
|
||||
// Client-side logic for the scoring interface.
|
||||
|
||||
var websocket;
|
||||
var alliance;
|
||||
|
||||
// Handles a websocket message to update the teams for the current match.
|
||||
var handleMatchLoad = function(data) {
|
||||
$("#matchName").text(data.MatchType + " " + data.Match.DisplayName);
|
||||
if (alliance === "red") {
|
||||
$("#team1").text(data.Match.Red1);
|
||||
$("#team2").text(data.Match.Red2);
|
||||
$("#team3").text(data.Match.Red3);
|
||||
} else {
|
||||
$("#team1").text(data.Match.Blue1);
|
||||
$("#team2").text(data.Match.Blue2);
|
||||
$("#team3").text(data.Match.Blue3);
|
||||
}
|
||||
};
|
||||
|
||||
// Handles a websocket message to update the match status.
|
||||
var handleMatchTime = function(data) {
|
||||
switch (matchStates[data.MatchState]) {
|
||||
case "PRE_MATCH":
|
||||
// Pre-match message state is set in handleRealtimeScore().
|
||||
$("#postMatchMessage").hide();
|
||||
$("#commitMatchScore").hide();
|
||||
break;
|
||||
case "POST_MATCH":
|
||||
$("#postMatchMessage").hide();
|
||||
$("#commitMatchScore").css("display", "flex");
|
||||
break;
|
||||
default:
|
||||
$("#postMatchMessage").hide();
|
||||
$("#commitMatchScore").hide();
|
||||
}
|
||||
};
|
||||
|
||||
// Handles a websocket message to update the realtime scoring fields.
|
||||
var handleRealtimeScore = function(data) {
|
||||
var realtimeScore;
|
||||
if (alliance === "red") {
|
||||
realtimeScore = data.Red;
|
||||
} else {
|
||||
realtimeScore = data.Blue;
|
||||
}
|
||||
var score = realtimeScore.Score;
|
||||
var summary = realtimeScore.ScoreSummary;
|
||||
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var i1 = i + 1;
|
||||
$("#exitedInitiationLine" + i1 + ">.value").text(score.ExitedInitiationLine[i] ? "Yes" : "No");
|
||||
$("#exitedInitiationLine" + i1).attr("data-value", score.ExitedInitiationLine[i]);
|
||||
$("#endgameStatus" + i1 + ">.value").text(getEndgameStatusText(score.EndgameStatuses[i]));
|
||||
$("#endgameStatus" + i1).attr("data-value", score.EndgameStatuses[i]);
|
||||
setGoalValue($("#autoCellsInner"), score.AutoCellsInner);
|
||||
setGoalValue($("#autoCellsOuter"), score.AutoCellsOuter);
|
||||
setGoalValue($("#autoCellsBottom"), score.AutoCellsBottom);
|
||||
setGoalValue($("#teleopCellsInner"), score.TeleopCellsInner);
|
||||
setGoalValue($("#teleopCellsOuter"), score.TeleopCellsOuter);
|
||||
setGoalValue($("#teleopCellsBottom"), score.TeleopCellsBottom);
|
||||
}
|
||||
|
||||
if (score.ControlPanelStatus >= 1) {
|
||||
$("#rotationControl>.value").text("Yes");
|
||||
$("#rotationControl").attr("data-value", true);
|
||||
} else if (summary.StagePowerCellsRemaining[1] === 0) {
|
||||
$("#rotationControl>.value").text("Unlocked");
|
||||
$("#rotationControl").attr("data-value", false);
|
||||
} else {
|
||||
$("#rotationControl>.value").text("Disabled (" + summary.StagePowerCellsRemaining[1] + " left)");
|
||||
$("#rotationControl").attr("data-value", "disabled");
|
||||
}
|
||||
if (score.ControlPanelStatus === 2) {
|
||||
$("#positionControl>.value").text("Yes");
|
||||
$("#positionControl").attr("data-value", true);
|
||||
} else if (summary.StagePowerCellsRemaining[2] === 0) {
|
||||
$("#positionControl>.value").text("Unlocked");
|
||||
$("#positionControl").attr("data-value", false);
|
||||
} else {
|
||||
$("#positionControl>.value").text("Disabled (" + summary.StagePowerCellsRemaining[2] + " left)");
|
||||
$("#positionControl").attr("data-value", "disabled");
|
||||
}
|
||||
$("#rungIsLevel>.value").text(score.RungIsLevel ? "Yes" : "No");
|
||||
$("#rungIsLevel").attr("data-value", score.RungIsLevel);
|
||||
$("#controlPanelColor>.value").text(getControlPanelColorText(realtimeScore.ControlPanel.CurrentColor));
|
||||
$("#controlPanelColor").attr("data-value", realtimeScore.ControlPanel.CurrentColor);
|
||||
$("#controlPanelColor").attr("data-control-panel-status", score.ControlPanelStatus)
|
||||
};
|
||||
|
||||
// Handles a keyboard event and sends the appropriate websocket message.
|
||||
var handleKeyPress = function(event) {
|
||||
websocket.send(String.fromCharCode(event.keyCode));
|
||||
};
|
||||
|
||||
// Handles an element click and sends the appropriate websocket message.
|
||||
var handleClick = function(shortcut) {
|
||||
websocket.send(shortcut);
|
||||
};
|
||||
|
||||
// Sends a websocket message to indicate that the score for this alliance is ready.
|
||||
var commitMatchScore = function() {
|
||||
websocket.send("commitMatch");
|
||||
$("#postMatchMessage").css("display", "flex");
|
||||
$("#commitMatchScore").hide();
|
||||
};
|
||||
|
||||
// Returns the display text corresponding to the given integer endgame status value.
|
||||
var getEndgameStatusText = function(level) {
|
||||
switch (level) {
|
||||
case 1:
|
||||
return "Park";
|
||||
case 2:
|
||||
return "Hang";
|
||||
default:
|
||||
return "None";
|
||||
}
|
||||
};
|
||||
|
||||
// Returns the display text corresponding to the given integer Control Panel color value.
|
||||
var getControlPanelColorText = function(level) {
|
||||
switch (level) {
|
||||
case 1:
|
||||
return "Red";
|
||||
case 2:
|
||||
return "Green";
|
||||
case 3:
|
||||
return "Blue";
|
||||
case 4:
|
||||
return "Yellow";
|
||||
default:
|
||||
return "Unknown";
|
||||
}
|
||||
};
|
||||
|
||||
// Updates the power cell count for a goal, given the element and score values.
|
||||
var setGoalValue = function(element, powerCells) {
|
||||
var total = 0;
|
||||
$.each(powerCells, function(k, v) {
|
||||
total += v;
|
||||
});
|
||||
element.text(total);
|
||||
};
|
||||
|
||||
$(function() {
|
||||
alliance = window.location.href.split("/").slice(-1)[0];
|
||||
$("#alliance").attr("data-alliance", alliance);
|
||||
|
||||
// Set up the websocket back to the server.
|
||||
websocket = new CheesyWebsocket("/panels/scoring/" + alliance + "/websocket", {
|
||||
matchLoad: function(event) { handleMatchLoad(event.data); },
|
||||
matchTime: function(event) { handleMatchTime(event.data); },
|
||||
realtimeScore: function(event) { handleRealtimeScore(event.data); },
|
||||
});
|
||||
|
||||
$(document).keypress(handleKeyPress);
|
||||
});
|
||||
@@ -116,40 +116,57 @@
|
||||
<div class="col-lg-3">
|
||||
<p>Scoring</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">Blue</div>
|
||||
<div class="col-lg-6">Red</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">Auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input id="blueAutoScore" class="form-control input-sm" value="{{.BlueScore.AutoPoints}}" disabled onblur="updateRealtimeScore();"/>
|
||||
<div class="col-lg-6 well-blue score-block">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 blue-text">Auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<input id="blueAutoScore" class="form-control input-sm" value="{{.BlueScore.AutoPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="blueTeleopScore"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 blue-text">Teleop</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<input id="blueTeleopScore" class="form-control input-sm" value="{{.BlueScore.TeleopPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="blueEndgameScore"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 blue-text">Endgame</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<input id="blueEndgameScore" class="form-control input-sm" value="{{.BlueScore.EndgamePoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="redAutoScore"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<input id="redAutoScore" class="form-control input-sm" value="{{.RedScore.AutoPoints}}" disabled onblur="updateRealtimeScore();"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">Teleop</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input id="blueTeleopScore" class="form-control input-sm" value="{{.BlueScore.TeleopPoints}}" disabled onblur="updateRealtimeScore();"/>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<input id="redTeleopScore" class="form-control input-sm" value="{{.RedScore.TeleopPoints}}" disabled onblur="updateRealtimeScore();"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">Endgame</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input id="blueEndgameScore" class="form-control input-sm" value="{{.BlueScore.EndgamePoints}}" disabled onblur="updateRealtimeScore();"/>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<input id="redEndgameScore" class="form-control input-sm" value="{{.RedScore.EndgamePoints}}" disabled onblur="updateRealtimeScore();"/>
|
||||
<div class="col-lg-6 well-red score-block">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 red-text">Auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<input id="redAutoScore" class="form-control input-sm" value="{{.RedScore.AutoPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="redTeleopScore"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 red-text">Teleop</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<input id="redTeleopScore" class="form-control input-sm" value="{{.RedScore.TeleopPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="redEndgameScore"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 red-text">Endgame</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<input id="redEndgameScore" class="form-control input-sm" value="{{.RedScore.EndgamePoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="blueAutoScore"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if .PlcIsEnabled}}
|
||||
|
||||
Reference in New Issue
Block a user