mirror of
https://github.com/Team254/cheesy-arena-lite.git
synced 2026-03-09 13:46:44 -04:00
Style Changes to Alliance Station Displays
This commit is contained in:
Nick Eyre
@@ -6,12 +6,40 @@ html {
|
||||
body {
|
||||
background-color: #000;
|
||||
font-family: "FuturaLTBold";
|
||||
color: #fff;
|
||||
}
|
||||
#match {
|
||||
body[data-mode=logo] {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Switching Modes */
|
||||
.mode {
|
||||
display: none;
|
||||
}
|
||||
body[data-mode=displayId] .mode#displayId {
|
||||
display: block;
|
||||
}
|
||||
body[data-mode=logo] .mode#logo {
|
||||
display: block;
|
||||
}
|
||||
body[data-mode=match] .mode#match {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Logo Mode */
|
||||
#logo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 90%;
|
||||
margin: auto auto;
|
||||
}
|
||||
|
||||
/* Display ID Mode */
|
||||
#displayId {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -25,7 +53,56 @@ body {
|
||||
color: #ff0;
|
||||
font-size: 500px;
|
||||
}
|
||||
#preMatchTeamId {
|
||||
|
||||
/* Match Mode */
|
||||
#match {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#match[data-state=AUTO_PERIOD], #match[data-state=TELEOP_PERIOD], #match[data-state=ENDGAME_PERIOD] {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
#preMatch, #inMatch {
|
||||
display: none;
|
||||
}
|
||||
#match[data-state=PRE_MATCH] #preMatch, #match[data-state=POST_MATCH] #preMatch {
|
||||
display: block;
|
||||
}
|
||||
#match[data-state=AUTO_PERIOD] #inMatch, #match[data-state=TELEOP_PERIOD] #inMatch, #match[data-state=ENDGAME_PERIOD] #inMatch {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* In Match */
|
||||
#inMatch .datapoint {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
margin-top: -250px;
|
||||
height: 250px;
|
||||
top: 50%;
|
||||
font-size: 500px;
|
||||
line-height: 500px;
|
||||
text-align: center;
|
||||
}
|
||||
body[data-position=left] #inMatch #redScore {
|
||||
display: block;
|
||||
color: #f43;
|
||||
}
|
||||
body[data-position=middle] #inMatch #timeRemaining {
|
||||
display: block;
|
||||
}
|
||||
body[data-position=right] #inMatch #blueScore {
|
||||
display: block;
|
||||
color: #07f;
|
||||
}
|
||||
|
||||
/* Pre Match */
|
||||
#preMatch #teamNumber {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
@@ -34,21 +111,8 @@ body {
|
||||
font-size: 500px;
|
||||
line-height: 500px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
#inMatchTeamId {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
font-size: 200px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
-webkit-text-stroke-width: 5px;
|
||||
-webkit-text-stroke-color: #fff;
|
||||
}
|
||||
#teamName {
|
||||
#preMatch .databar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -61,78 +125,25 @@ body {
|
||||
font-size: 120px;
|
||||
color: #fff;
|
||||
}
|
||||
#matchTime {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto auto;
|
||||
height: 400px;
|
||||
line-height: 350px;
|
||||
text-align: center;
|
||||
font-size: 350px;
|
||||
color: #fff;
|
||||
#preMatch .databar#disabled {
|
||||
font-family: "FuturaLTBold";
|
||||
display: none;
|
||||
}
|
||||
#matchInfo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
height: 250px;
|
||||
line-height: 250px;
|
||||
text-align: center;
|
||||
font-size: 250px;
|
||||
color: #fff;
|
||||
#match[data-status=bypass] #disabled {
|
||||
display: block;
|
||||
}
|
||||
#redScore {
|
||||
color: #f00;
|
||||
-webkit-text-stroke-width: 5px;
|
||||
-webkit-text-stroke-color: #fff;
|
||||
}
|
||||
#blueScore {
|
||||
color: #00f;
|
||||
-webkit-text-stroke-width: 5px;
|
||||
-webkit-text-stroke-color: #fff;
|
||||
}
|
||||
#logoContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
#logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 90%;
|
||||
margin: auto auto;
|
||||
#match[data-status=bypass] #teamName {
|
||||
display: none;
|
||||
}
|
||||
[data-alliance-bg=R], [data-status=R] {
|
||||
background-color: #f00;
|
||||
background-color: #d00;
|
||||
}
|
||||
[data-alliance-bg=B], [data-status=B] {
|
||||
background-color: #00f;
|
||||
background-color: #00c;
|
||||
}
|
||||
[data-alliance=R], [data-status=R] {
|
||||
color: #f00;
|
||||
}
|
||||
[data-alliance=B], [data-status=B] {
|
||||
color: #00f;
|
||||
}
|
||||
[data-status=bypass] {
|
||||
background-color: #666;
|
||||
}
|
||||
#hotGoalLight {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
/* Hot Goal Mode */
|
||||
#match[data-hotgoal=active]{
|
||||
background-color: #ff0;
|
||||
}
|
||||
color: #000;
|
||||
}
|
||||
@@ -10,23 +10,20 @@ var websocket;
|
||||
|
||||
var handleSetAllianceStationDisplay = function(targetScreen) {
|
||||
currentScreen = targetScreen;
|
||||
|
||||
if (allianceStation == "") {
|
||||
// Don't show anything if this screen hasn't been assigned a position yet.
|
||||
targetScreen = "blank";
|
||||
}
|
||||
switch (targetScreen) {
|
||||
case "logo":
|
||||
$("#match").hide();
|
||||
$("#logoContainer").show();
|
||||
$('body').attr('data-mode', targetScreen);
|
||||
switch(allianceStation[1]){
|
||||
case '1':
|
||||
$('body').attr('data-position','right');
|
||||
break;
|
||||
case "blank":
|
||||
$("#match").hide();
|
||||
$("#logoContainer").hide();
|
||||
case '2':
|
||||
$('body').attr('data-position','middle');
|
||||
break;
|
||||
case "match":
|
||||
$("#match").show();
|
||||
$("#logoContainer").hide();
|
||||
case '3':
|
||||
$('body').attr('data-position','left');
|
||||
break;
|
||||
}
|
||||
};
|
||||
@@ -43,28 +40,10 @@ var handleSetMatch = function(data) {
|
||||
|
||||
if (allianceStation != "") {
|
||||
team = data.Teams[allianceStation];
|
||||
if (team == null) {
|
||||
$("#preMatchTeamId").text("");
|
||||
$("#inMatchTeamId").text("");
|
||||
$("#teamName").text("");
|
||||
$("#teamName").attr("data-alliance-bg", "");
|
||||
$("#inMatchTeamId").attr("data-alliance", "");
|
||||
} else {
|
||||
$("#teamName").attr("data-alliance-bg", allianceStation[0]);
|
||||
$("#inMatchTeamId").attr("data-alliance", allianceStation[0]);
|
||||
$("#preMatchTeamId").text(data.Teams[allianceStation].Id);
|
||||
$("#inMatchTeamId").text(data.Teams[allianceStation].Id);
|
||||
$("#teamName").text(data.Teams[allianceStation].Nickname);
|
||||
}
|
||||
$("#displayId").hide();
|
||||
$("#teamNumber").text(data.Teams[allianceStation].Id);
|
||||
$("#teamName").attr("data-alliance-bg", allianceStation[0]).text(data.Teams[allianceStation].Nickname);
|
||||
} else {
|
||||
// Show the display ID so that someone can assign it to a station from the configuration interface.
|
||||
$("#preMatchTeamId").text("");
|
||||
$("#inMatchTeamId").text("");
|
||||
$("#teamName").text("");
|
||||
$("#displayId").show();
|
||||
$("#preMatch").hide();
|
||||
$("#inMatch").hide();
|
||||
$('body').attr('data-mode', 'displayId');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -102,15 +81,8 @@ var handleMatchTime = function(data) {
|
||||
countdownString = "0" + countdownString;
|
||||
}
|
||||
countdownString = Math.floor(countdownSec / 60) + ":" + countdownString;
|
||||
$("#matchTime").text(countdownString);
|
||||
|
||||
if (matchState == "PRE_MATCH" || matchState == "POST_MATCH") {
|
||||
$("#preMatch").show();
|
||||
$("#inMatch").hide();
|
||||
} else {
|
||||
$("#preMatch").hide();
|
||||
$("#inMatch").show();
|
||||
}
|
||||
$("#timeRemaining").text(countdownString);
|
||||
$('#match').attr('data-state', matchState);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -120,11 +92,10 @@ var handleRealtimeScore = function(data) {
|
||||
};
|
||||
|
||||
var handleHotGoalLight = function(side) {
|
||||
if (allianceStation != "" &&
|
||||
(side == "left" && allianceStation[1] == "3" || side == "right" && allianceStation[1] == "1")) {
|
||||
$("#hotGoalLight").show();
|
||||
if (allianceStation != "" && (side == "left" && allianceStation[1] == "3" || side == "right" && allianceStation[1] == "1")) {
|
||||
$("#match").attr('data-hotgoal','active');
|
||||
} else {
|
||||
$("#hotGoalLight").hide();
|
||||
$("#match").attr('data-hotgoal','');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -8,25 +8,22 @@
|
||||
<link rel="stylesheet" href="/static/css/alliance_station_display.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="displayId" style="display: none;"></div>
|
||||
<div id="match" style="display: none;">
|
||||
<div id="preMatch" style="display: none;">
|
||||
<div id="preMatchTeamId"></div>
|
||||
<div id="teamName"></div>
|
||||
<div id="displayId" class="mode"></div>
|
||||
<div id="match" class="mode">
|
||||
<div id="preMatch">
|
||||
<div id="teamNumber"></div>
|
||||
<div id="teamName" class='databar'></div>
|
||||
<div id="disabled" class='databar'>DISABLED</div>
|
||||
</div>
|
||||
<div id="inMatch" style="display: none;">
|
||||
<div id="inMatchTeamId"></div>
|
||||
<div id="matchTime"></div>
|
||||
<div class="row" id="matchInfo">
|
||||
<div class="col-lg-6 text-center" id="redScore"></div>
|
||||
<div class="col-lg-6 text-center" id="blueScore"></div>
|
||||
</div>
|
||||
<div id="inMatch">
|
||||
<div id="redScore" class="datapoint"></div>
|
||||
<div id="blueScore" class="datapoint"></div>
|
||||
<div id="timeRemaining" class="datapoint"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="logoContainer" style="display: none;">
|
||||
<div id="logo" class="mode">
|
||||
<img id="logo" src="/static/img/logo-white.svg" />
|
||||
</div>
|
||||
<div id="hotGoalLight" style="display: none;"></div>
|
||||
<script>
|
||||
// A unique id to differentiate this station's display from its peers.
|
||||
var displayId = "{{.DisplayId}}";
|
||||
|
||||
Reference in New Issue
Block a user