Fully Manual Scoring

static/css/scoring_panel copy.css

@@ -0,0 +1,191 @@
+/*
+  Copyright 2019 Team 254. All Rights Reserved.
+  Author: pat@patfairbank.com (Patrick Fairbank)
+*/
+html {
+  height: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  overscroll-behavior: none;
+}
+body {
+  height: 100%;
+  background-color: #222;
+  overscroll-behavior: none;
+}
+.container {
+  padding-top: 1vw;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+#alliance {
+  width: 98%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 25px;
+  border: 1px solid #333;
+}
+#alliance[data-alliance="red"] {
+  background-color: #322;
+}
+#alliance[data-alliance="blue"] {
+  background-color: #223;
+}
+#matchName {
+  margin-bottom: 0.5vw;
+  font-size: 2vw;
+}
+.scoring-section {
+  margin-bottom: 0.5vw;
+  display: flex;
+  font-size: 1.5vw;
+  color: #ccc;
+}
+.scoring-header>div{
+  height: 3.3vw;
+  display: flex;
+  align-items: center;
+  margin: 0.4vw 1vw 0.4vw 0.2vw;
+  color: #ccc;
+}
+.robot-field {
+  width: 17vw;
+  height: 3.3vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.4vw 0.2vw;
+}
+.team {
+  display: flex;
+  justify-content: center;
+  font-size: 3vw;
+  font-weight: bold;
+}
+.boolean[data-value="false"] {
+  background-color: #333;
+}
+.boolean[data-value="true"] {
+  background-color: #263;
+}
+#postMatchMessage {
+  height: 5vw;
+  display: none;
+  align-items: center;
+  font-size: 1.5vw;
+  color: #c90;
+}
+#commitMatchScore {
+  height: 5vw;
+  display: none;
+  align-items: center;
+}
+#commitMatchScore>button {
+  font-size: 1vw;
+}
+#stage {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#stageGraphic {
+  margin-top: 9vw;
+  height: 30vw;
+  color: #999;
+}
+.stage-side {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 16vw;
+  height: 8vw;
+  border: 0.5px solid #111;
+}
+.stage-side-col {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+.stage-side-col div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  font-size: 1.5vw;
+  background-color: #333;
+  border: 0.5px solid #111;
+}
+#stageLeft {
+  top: 20vw;
+  left: -8.5vw;
+}
+#centerStage {
+  top: 0.5vw;
+  left: 9.3vw;
+}
+#stageRight {
+  top: 20vw;
+  left: 25.9vw;
+}
+#park {
+  top: 13vw;
+  left: 12.2vw;
+  width: 9vw;
+}
+
+.goal {
+  width: 10vw;
+  height: 5vw;
+  margin: 0.4vw 3vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.number-button {
+  width: 4vw;
+  height: 4vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #666;
+  border-radius: 0.5vw;
+  font-size: 3vw;
+}
+.plus {
+  background: #263;
+}
+.minus {
+  background: #633;
+}
+#elements {
+
+  justify-content: space-evenly;
+  align-items: start;
+}
+.shortcut {
+  margin: 0 0.2vw;
+  font-size: 1vw;
+  align-self: flex-start;
+}
+
+.column {
+  float: left;
+  width: 50%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}

static/css/scoring_panel.css

@@ -33,10 +33,10 @@ body {
   border: 1px solid #333;
 }
 #alliance[data-alliance="red"] {
-  background-color: #322;
+  background-color: rgb(138, 17, 21);
 }
 #alliance[data-alliance="blue"] {
-  background-color: #223;
+  background-color: rgb(0, 79, 140);
 }
 #matchName {
   margin-bottom: 0.5vw;
@@ -142,7 +142,6 @@ body {
   left: 12.2vw;
   width: 9vw;
 }
-
 .goal {
   width: 10vw;
   height: 5vw;
@@ -159,21 +158,65 @@ body {
   align-items: center;
   border: 1px solid #666;
   border-radius: 0.5vw;
-  font-size: 3vw;
+  font-size: 50%;
+
 }
 .plus {
   background: #263;
 }
 .minus {
   background: #633;
 }
+.btn1 {
+  background: #263;
+}
+.btn2 {
+  background: #633;
+}
 #elements {
-
+  
   justify-content: space-evenly;
   align-items: start;
 }
 .shortcut {
   margin: 0 0.2vw;
   font-size: 1vw;
   align-self: flex-start;
+}
+.row{
+  width: 100%;
+}
+/* Create two unequal columns that floats next to each other */
+.column {
+  float: left;
+  padding: 1px;
+  /*height: 300px; /* Should be removed. Only for demonstration */
+}
+
+.left {
+  width: 25%;
+
+}
+
+.right {
+  width: 75%;
+
+}
+#manualScore {
+  width: 98%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 25px;
+  border: 1px solid #333;
+}
+#manualScore[data-alliance="red"] {
+  background-color: rgb(138, 17, 21);
+}
+#manualScore[data-alliance="blue"] {
+  background-color: rgb(0, 79, 140);
+}
+.icon {
+  width: 100%;
 }

static/js/scoring_panel.js

@@ -100,6 +100,7 @@ const commitMatchScore = function() {
 $(function() {
   alliance = window.location.href.split("/").slice(-1)[0];
   $("#alliance").attr("data-alliance", alliance);
+  $("#manualScore").attr("data-alliance", alliance);
 
   // Set up the websocket back to the server.
   websocket = new CheesyWebsocket("/panels/scoring/" + alliance + "/websocket", {