2023-03-04

src/public/css/eventsheet.css

@@ -0,0 +1,762 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Pacifico");
+@import url("https://fonts.googleapis.com/css2?family=Oswald");
+@import url("https://fonts.googleapis.com/css2?family=Graduate");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900&display=swap");
+@import url("/font/helvetica-now/stylesheet.css");
+@font-face {
+  font-family: "Futura Now";
+  src: url("/font/futura-now/futura-now.ttf") format("truetype");
+  font-weight: 125 900;
+  font-stretch: 50% 150%;
+}
+@page {
+  margin: 0;
+}
+/** For Print **/
+@media print {
+  body .sheet {
+    size: B5;
+    padding: 0.2in;
+  }
+}
+/** For screen preview **/
+@media screen {
+  body .sheet {
+    padding: 0.2in;
+  }
+  body {
+    background: #e0e0e0;
+  }
+  .sheet {
+    background: white;
+    box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
+  }
+}
+.sheet {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  page-break-after: always;
+}
+
+/** Paper sizes **/
+body.B5 .sheet {
+  width: 176mm;
+  height: 250mm;
+}
+
+body.index-card .sheet {
+  width: 3.5in;
+  height: 5in;
+}
+
+:root {
+  --color-success: #b7e1cd;
+  --color-danger: #f4c7c3;
+  --color-neutral: #acc9fe;
+  --color-warning: rgb(249, 228, 180);
+  --color-grey-100: #f8f9fa;
+  --color-grey-200: #e9ecef;
+  --color-grey-300: #dee2e6;
+  --color-grey-400: #ced4da;
+  --color-grey-500: #adb5bd;
+  --color-grey-600: #6c757d;
+  --color-grey-700: #495057;
+  --color-grey-800: #343a40;
+  --color-grey-900: #212529;
+  --row-height: 14px;
+  --monospace-font: "Inconsolata", monospace;
+}
+
+body {
+  font-family: "Helvetica Now", "Helvetica", sans-serif;
+  position: relative;
+  font-size: 11px;
+}
+
+table {
+  position: inherit;
+  font-size: inherit;
+  border-collapse: collapse;
+  empty-cells: show;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  width: 100%;
+  border: 0.5px solid black;
+  display: inline-table;
+}
+table tr {
+  border-bottom-width: 0.5px;
+  border-color: grey;
+  border-bottom-style: solid;
+}
+table tr:nth-child(odd) {
+  background-color: rgba(242, 242, 242, 0.85);
+}
+table tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+table tr th {
+  font-stretch: extra-condensed;
+  width: 1em;
+  text-align: center;
+  text-transform: uppercase;
+}
+table tr td.player-name {
+  text-transform: uppercase;
+  font-stretch: 75%;
+}
+table tr td.position, table tr td.jersey-number {
+  font-family: var(--monospace-font);
+  width: 2ch;
+  text-align: right;
+  overflow: hidden;
+}
+table tr th, table tr td {
+  border-left: 0.5px solid grey;
+  border-right: 0.5px solid grey;
+  overflow: hidden;
+  padding: 0 2px 0 2px;
+}
+table tr th:empty::after, table tr td:empty::after {
+  content: " ";
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.B5 > .eventsheet {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  column-gap: 0.2in;
+  row-gap: 0.2in;
+  background-size: 100%;
+}
+
+.eventsheet > section {
+  box-sizing: content-box;
+  overflow: hidden;
+  /* outline: 0.5px dashed lightgrey; */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.eventsheet > section > div {
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+  height: auto;
+}
+
+.lineup-card th {
+  width: inherit;
+}
+
+#lineup-card-dugout div.grid-container,
+#lineup-card-dugout-blank div.grid-container {
+  display: grid;
+  grid-template-columns: 60% auto;
+  grid-template-rows: fit-content(16px) auto;
+  grid-template-areas: "header header" "sarting-lineup-table substitution-table";
+}
+
+#lineup-card-exchange div.grid-container,
+#lineup-card-exchange-blank div.grid-container {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: fit-content(16px) auto;
+  grid-template-areas: "header" "sarting-lineup-table";
+}
+
+#lineup-card-exchange .substitution,
+#lineup-card-exchange .homeaway,
+#lineup-card-exchange-blank .substitution,
+#lineup-card-exchange-blank .homeaway {
+  display: none;
+}
+
+.lineup-card div.grid-container > header {
+  grid-area: "header";
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.lineup-card div.grid-container > header:empty::after {
+  content: " ";
+}
+
+div.grid-container > .starting-lineup-table {
+  grid-area: "starting-lineup-table";
+}
+
+div.grid-container > .substitution-table {
+  grid-area: "substitution-table";
+}
+
+section.lineup-card {
+  counter-reset: lineup-sequence-counter 0;
+}
+section.lineup-card thead th {
+  color: var(--color-grey-600);
+  font-size: 0.7em;
+}
+section.lineup-card th.sequence {
+  counter-increment: lineup-sequence-counter 1;
+  color: var(--color-grey-600);
+  font-size: inherit;
+  width: 2ch;
+}
+section.lineup-card th.sequence.counter::before {
+  content: counter(lineup-sequence-counter);
+}
+
+.lineup-card table {
+  font-size: 22px;
+}
+
+.lineup-card td {
+  /* height: 34px; */
+}
+
+.lineup-card td.substitution {
+  width: 8ch;
+}
+
+.lineup-card td.substitution::after {
+  content: "";
+}
+
+#lineup-card-exchange tr,
+#lineup-card-exchange-blank tr,
+#lineup-card-dugout .starting-lineup-table tr,
+#lineup-card-dugout-blank .starting-lineup-table tr,
+#lineup-card-dugout .substitution-table tr:nth-child(odd) {
+  border-top: 1px solid black;
+}
+
+#lineup-card-exchange tr,
+#lineup-card-exchange-blank tr,
+#lineup-card-dugout .starting-lineup-table tr,
+#lineup-card-dugout-blank .starting-lineup-table tr,
+#lineup-card-dugout .substitution-table tr:nth-child(even) {
+  border-bottom: 1px solid black;
+}
+
+td.substitution {
+  border-left: 1px solid black;
+}
+
+#lineup-card-exchange td.player-name {
+  font-stretch: 100%;
+}
+
+#lineup-card-dugout td.player-name {
+  width: 10ch;
+}
+
+.lineup-card .position,
+.lineup-card .jersey-number {
+  width: 2ch;
+}
+
+#lineup-card-dugout .position,
+#lineup-card-dugout .jersey-number {
+  font-stretch: 75%;
+  padding-left: 2.5px;
+  padding-right: 2.5px;
+}
+
+.lineup-card header {
+  font-size: inherit;
+  text-transform: uppercase;
+  font-stretch: 85%;
+}
+
+#todays-game > div {
+  display: grid;
+  grid-template-columns: 110px auto;
+  grid-template-rows: auto auto;
+  grid-template-areas: "offense defense" "footer footer";
+}
+#todays-game table.notes th {
+  border-left: none;
+  border-right: none;
+  line-height: 1em;
+}
+#todays-game table.notes td:empty::after {
+  content: "";
+}
+
+#defense-pane {
+  position: relative;
+  grid-area: defense;
+  padding: 4px 4px 0px 4px; /* top right bottom left */
+  display: flex;
+  border-right: 0.5px solid grey;
+  border-bottom: 0.5px solid grey;
+}
+#defense-pane .field-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  grid-column-gap: 4px;
+  width: 100%;
+  z-index: 2;
+}
+#defense-pane img {
+  position: absolute;
+  z-index: -1;
+}
+#defense-pane .slot-set {
+  display: flex;
+  align-items: center;
+}
+#defense-pane .slot-set.pos-cf tr:first-child th.position:empty::after {
+  content: "cf";
+}
+#defense-pane .slot-set.pos-lf tr:first-child th.position:empty::after {
+  content: "lf";
+}
+#defense-pane .slot-set.pos-rf tr:first-child th.position:empty::after {
+  content: "rf";
+}
+#defense-pane .slot-set.pos-ss tr:first-child th.position:empty::after {
+  content: "ss";
+}
+#defense-pane .slot-set.pos-2b tr:first-child th.position:empty::after {
+  content: "2b";
+}
+#defense-pane .slot-set.pos-3b tr:first-child th.position:empty::after {
+  content: "3b";
+}
+#defense-pane .slot-set.pos-1b tr:first-child th.position:empty::after {
+  content: "1b";
+}
+#defense-pane .slot-set.pos-c tr:first-child th.position:empty::after {
+  content: "c";
+}
+#defense-pane .slot-set.pos-p tr:first-child th.position:empty::after {
+  content: "p";
+}
+#defense-pane .slot-set.pos-cf {
+  justify-content: center;
+  grid-area: 1/1/2/5;
+}
+#defense-pane .slot-set.pos-lf {
+  justify-content: flex-start;
+  grid-area: 2/1/3/3;
+}
+#defense-pane .slot-set.pos-rf {
+  justify-content: flex-end;
+  grid-area: 2/3/3/5;
+}
+#defense-pane .slot-set.pos-ss {
+  justify-content: flex-end;
+  grid-area: 3/1/4/3;
+}
+#defense-pane .slot-set.pos-2b {
+  justify-content: flex-start;
+  grid-area: 3/3/4/5;
+}
+#defense-pane .slot-set.pos-3b {
+  justify-content: flex-start;
+  grid-area: 4/1/5/3;
+}
+#defense-pane .slot-set.pos-1b {
+  justify-content: flex-end;
+  grid-area: 4/3/5/5;
+}
+#defense-pane .slot-set.pos-c {
+  justify-content: center;
+  grid-area: 5/1/6/5;
+}
+#defense-pane .slot-set.pos-p {
+  align-items: end;
+  margin-bottom: 4px;
+  grid-area: 6/1/7/5;
+}
+#defense-pane .slot-set.pos-p table {
+  width: 100%;
+}
+#defense-pane .slot-set.pos-p tr.substitute .position:empty::after {
+  content: "RP";
+}
+
+#offense-pane {
+  counter-reset: lineup-sequence-counter 0;
+  position: relative;
+  /* box-sizing: border-box; */
+  height: 100%;
+  grid-area: offense;
+  border-bottom: 0.5px solid black;
+  /* outline: 0.5px solid black; */
+}
+#offense-pane table {
+  height: 100%;
+  border: none;
+}
+#offense-pane th.sequence {
+  counter-increment: lineup-sequence-counter 1;
+}
+#offense-pane th.sequence.counter::before {
+  content: counter(lineup-sequence-counter);
+}
+
+.slot-set table {
+  width: 77px;
+}
+
+.slot-set.pos-slot-p table {
+  width: 100%;
+}
+
+.index-card .defense-slot-set {
+  width: 65px;
+}
+
+.index-card .defense-slot-set .player-name {
+  font-stretch: 70%;
+}
+
+.container .row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+header {
+  background-color: #cadcf9;
+  font-family: "Oswald";
+  /* font-size: 8.8px; */
+  /* outline: 1px solid black; */
+  /* height: var(--row-height); */
+  width: auto;
+  grid-area: header;
+  text-align: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  border: 0.5px solid black;
+  z-index: 1;
+}
+
+.footer {
+  /* height:var(--row-height); */
+  position: relative;
+  box-sizing: border-box;
+  grid-area: footer;
+  /* border: 1px solid black; */
+  height: 100%;
+  border-right: 0.5px solid grey;
+  border-left: 0.5px solid grey;
+}
+.footer table {
+  height: 100%;
+  outline: none;
+  border-style: none;
+}
+.footer table tr {
+  background-color: white;
+  outline: none;
+  border-bottom: 0.5px solid var(--color-grey-500);
+}
+.footer table tr :last-child {
+  background-color: white;
+  outline: none;
+  border-bottom-style: none;
+}
+.footer table th {
+  text-align: left;
+  color: var(--color-grey-600);
+}
+.footer table td {
+  height: var(--row-height);
+  border: none;
+}
+.footer table tdempty::after {
+  content: "";
+}
+
+.cell-checkbox {
+  font-size: 0.75em;
+}
+
+.in-starting-lineup {
+  font-weight: bold;
+}
+
+.gametitle {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-stretch: semi-condensed;
+}
+
+.homeaway {
+  text-transform: uppercase;
+  font-stretch: normal;
+  font-weight: bolder;
+  float: right;
+  text-transform: uppercase;
+}
+
+.cell-smalltext {
+  font-stretch: condensed;
+  font-size: 10px;
+}
+
+.statscell {
+  font-family: "m+1m";
+  text-align: center;
+  font-stretch: extra-condensed;
+  font-size: 9px;
+  width: 60px;
+}
+
+.condensedNameCell {
+  width: 70px;
+  text-transform: uppercase;
+  font-stretch: condensed;
+}
+
+.cell-square {
+  height: var(--row-height);
+  width: 14px;
+  text-align: center;
+}
+
+.cell-square.narrow {
+  width: 10px;
+}
+
+.cell-mono {
+  font-family: "m+1m";
+}
+
+.cell-condensed {
+  font-stretch: condensed;
+}
+
+.available-status-code-1 {
+  color: rgb(0, 85, 0);
+  background-color: #b7e1cd;
+}
+
+.available-status-code-0 {
+  color: rgb(170, 0, 0);
+  background-color: #f4c7c3;
+}
+
+.past.available-status-code-0,
+.past.available-status-code-null {
+  color: var(--color-grey-600);
+  background-color: inherit;
+}
+
+.past.available-status-code-1 {
+  color: inherit;
+  background-color: var(--color-warning);
+}
+
+.past.available-status-code-1.started {
+  color: inherit;
+  background-color: inherit;
+}
+
+.available-status-code-2 {
+  color: blue;
+  background-color: #acc9fe;
+}
+
+#roster-and-history .player-name {
+  font-stretch: 95%;
+}
+
+.starting {
+  font-weight: bold;
+}
+
+#roster-and-history > div > table {
+  /* font-size: 10.5px; */
+  padding: 0;
+  line-height: 1em;
+  /* outline: 0.5px black; */
+}
+#roster-and-history td, #roster-and-history th {
+  border-left: none;
+  border-right: none;
+  padding: 0.2em 0.1em 0.2em 0.1em; /* top right bottom left */
+}
+#roster-and-history td.availability-on-day, #roster-and-history th.availability-on-day {
+  font-family: var(--monospace-font);
+  font-stretch: 60%;
+  text-align: center;
+  max-width: 0.8em;
+  min-width: 0.8em;
+}
+#roster-and-history td.availability-on-day.future, #roster-and-history td.availability-on-day.past, #roster-and-history th.availability-on-day.future, #roster-and-history th.availability-on-day.past {
+  font-family: var(--monospace-font);
+  font-stretch: condensed;
+  font-weight: normal;
+  font-size: 0.8em;
+  padding: 0.1em;
+  text-transform: uppercase;
+}
+#roster-and-history td.position-capability, #roster-and-history th.position-capability {
+  font-size: 8px;
+  font-stretch: 50%;
+  width: 5px;
+  text-align: center;
+  padding: 0;
+}
+#roster-and-history td.player-stats, #roster-and-history th.player-stats {
+  display: none;
+  font-family: var(--monospace-font);
+  font-size: 1em;
+  font-stretch: 60%;
+  font-weight: 300;
+}
+#roster-and-history td.player-stats .delimiter,
+#roster-and-history td.player-stats .decimal-point, #roster-and-history th.player-stats .delimiter,
+#roster-and-history th.player-stats .decimal-point {
+  font-family: Helvetica Now;
+  font-stretch: expanded;
+  color: var(--color-grey-500);
+}
+#roster-and-history td.player-stats .decimal-point, #roster-and-history th.player-stats .decimal-point {
+  color: rgba(0, 0, 0, 0);
+}
+#roster-and-history td.player-stats .delimiter, #roster-and-history th.player-stats .delimiter {
+  color: var(--color-grey-500);
+}
+#roster-and-history td.player-name {
+  color: black;
+  text-align: left;
+  font-stretch: 95%;
+}
+#roster-and-history td.jersey-number {
+  color: black;
+  border-left: 0.5px solid lightgrey;
+}
+#roster-and-history colgroup {
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-left-color: black;
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-right-color: black;
+}
+#roster-and-history col.player-stats {
+  border: inherit;
+}
+#roster-and-history th {
+  background-color: #cadcf9;
+  color: black;
+  border: none;
+}
+#roster-and-history th.availability-on-day div {
+  transform: rotate(270deg);
+}
+#roster-and-history thead > tr, #roster-and-history tfoot > tr {
+  border-bottom: solid black 1px;
+}
+#roster-and-history tbody {
+  border-bottom: solid black 1px;
+}
+#roster-and-history tr.border-top {
+  border-top: 1px solid black;
+}
+
+td.position-capability:not(:empty) {
+  color: var(--color-grey-700);
+  background-color: var(--color-grey-200);
+}
+
+td.is-present-checkbox {
+  font-size: 0.5em;
+  text-align: center;
+  color: white;
+  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+    1px 1px 0 #000; */
+}
+
+td.is-present-checkbox.available-status-code-0 > span {
+  display: none;
+}
+
+td.is-present-checkbox.available-status-code-None > span {
+  display: none;
+}
+
+.game-number .label {
+  font-size: xx-small;
+}
+
+.game-number .label, .game-number .value {
+  display: none;
+}
+
+#front-cover {
+  border: solid 1px black;
+}
+#front-cover Header {
+  font-family: "Helvetica Now";
+  font-weight: 600;
+  line-height: 1.5em;
+  background-color: #323669;
+  color: white;
+  display: inline-flex;
+  border: none;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+#front-cover .game-number, #front-cover .homeaway {
+  display: grid;
+  font-size: xx-large;
+  align-content: center;
+  width: 1.4em;
+  font-weight: 800;
+}
+#front-cover .title {
+  display: grid;
+  font-size: small;
+  flex-grow: 1;
+  align-content: center;
+}
+#front-cover .head-to-head {
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+}
+#front-cover .opponent, #front-cover .team {
+  text-align: center;
+  font-weight: 800;
+  font-size: x-large;
+  align-items: center;
+  font-family: "Pacifico";
+  display: inline-flex;
+  width: 100%;
+  flex-grow: 1;
+}
+#front-cover .opponent img, #front-cover .team img {
+  height: 115px;
+}
+#front-cover .opponent div:has(.name), #front-cover .team div:has(.name) {
+  flex-grow: 1;
+}
+#front-cover .opponent name {
+  text-align: left;
+}
+#front-cover .team name {
+  text-align: right;
+}
+
+/*# sourceMappingURL=eventsheet.css.map */

src/public/css/eventsheet.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;;AAGF;EACE;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQN;EACE;;;AAGF;AACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA,qBACE;;AAMA;EACE;EACA;EACA;;AAEF;EACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAMI;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAUZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACI;;;AASV;EACE;EACA;AACA;EACA;EACA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAON;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;AACA;AACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AASA;AACE;EACA;EACA;AACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}

src/public/css/gamecard.css

@@ -1,661 +0,0 @@
-@import url("../css/paper.css");
-@import url("../fonts/vera/bitstreamvera.css");
-@import url("../fonts/verdana/verdanapro.css");
-@import url("../fonts/m+1m/m+1m.css");
-@import url("../fonts/helvetica-now/stylesheet.css");
-@import url("../fonts/futura-now/stylesheet.css");
-@import url("../fonts/inconsolata/stylesheet.css");
-
-:root {
-  --color-success: #b7e1cd;
-  --color-danger: #f4c7c3;
-  --color-neutral: #acc9fe;
-  --color-warning: rgb(249, 228, 180);
-  --color-grey-100: #f8f9fa;
-  --color-grey-200: #e9ecef;
-  --color-grey-300: #dee2e6;
-  --color-grey-400: #ced4da;
-  --color-grey-500: #adb5bd;
-  --color-grey-600: #6c757d;
-  --color-grey-700: #495057;
-  --color-grey-800: #343a40;
-  --color-grey-900: #212529;
-  --row-height: 14px;
-  --monospace-font: "Inconsolata";
-}
-
-body {
-  font-family: "Helvetica Now";
-  position: relative;
-  font-size: 11px;
-}
-
-table {
-  position: inherit;
-  font-size: inherit;
-  border-collapse: collapse;
-  empty-cells: show;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  width: 100%;
-  border: 0.5px solid black;
-  display: inline-table;
-}
-
-.bar-right {
-  float: right;
-}
-
-.bar-left {
-  float: left;
-}
-
-th,
-td {
-  /* vertical-align: middle; */
-  /* line-height: 1.3em; */
-  overflow: hidden;
-  padding: 0 2px 0 2px; /* top right bottom left */
-}
-
-tr {
-  border-bottom-width: 0.5px;
-  border-color: grey;
-  border-bottom-style: solid;
-}
-
-tr:last-child {
-  border-bottom-color: black;
-}
-
-tr:first-child {
-  border-top-color: black;
-}
-
-tr:nth-child(odd) {
-  background-color: rgb(242, 242, 242, 0.85);
-}
-
-tr:nth-child(even) {
-  background-color: rgb(256, 256, 256, 0.85);
-}
-
-td:not(:first-child) {
-  border-left: 0.5px solid grey;
-}
-
-th {
-  font-stretch: extra-condensed;
-  width: 1em;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-td:empty::after,
-th:empty::after {
-  content: "\00a0";
-}
-
-td.player-name {
-  text-transform: uppercase;
-  font-stretch: 80%;
-  /* font-family: var(--monospace-font); */
-}
-
-td.position,
-td.jersey-number {
-  font-family: var(--monospace-font);
-  width: 2ch;
-  text-align: right;
-  overflow: hidden;
-}
-
-.index-card .gamecard {
-  position: relative;
-}
-
-.B5 > .gamecard {
-  /* height: auto; */
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  /* padding: 0.15in; */
-  /* grid-gap: 0.25in 0.15in; */
-
-  /* background-image: url("../2023-G08-0523.png"); */
-  background-size: 100%;
-}
-
-.gamecard > section {
-  /* margin: 0.07in;  */
-  box-sizing: content-box;
-  /* border: 4px solid var(--color-grey-200); */
-  /* border-radius: 4px; */
-  overflow: hidden;
-  outline: 0.5px dashed lightgrey;
-  /* border-right: 1px dotted black; */
-  display: flex;
-  align-items: stretch;
-}
-
-.gamecard > section > div {
-  margin: 0.15in;
-  outline: 0.5px solid black;
-  display: flex;
-  flex: 1; /* consumes all free space (taking full height) */
-  align-items: stretch;
-  height: auto;
-}
-
-#lineup-card-dugout div.grid-container,
-#lineup-card-dugout-empty div.grid-container {
-  display: grid;
-  grid-template-columns: 60% auto;
-  grid-template-rows: fit-content(16px) auto;
-  grid-template-areas:
-    "header header"
-    "sarting-lineup-table substitution-table";
-}
-
-#lineup-card-exchange div.grid-container,
-#lineup-card-exchange-empty div.grid-container {
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows: fit-content(16px) auto;
-  grid-template-areas:
-    "header"
-    "sarting-lineup-table";
-}
-
-.lineup-card div.grid-container > .section-header {
-  grid-area: "header";
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.lineup-card div.grid-container > .section-header:empty::after {
-  content: "\00a0";
-}
-
-div.grid-container > .starting-lineup-table {
-  grid-area: "starting-lineup-table";
-}
-
-div.grid-container > .substitution-table {
-  grid-area: "substitution-table";
-}
-
-.lineup-card thead th {
-  color: var(--color-grey-600);
-  font-size: 0.7em;
-}
-
-.lineup-card th.sequence {
-  color: var(--color-grey-600);
-  font-size: inherit;
-}
-
-.lineup-card table {
-  font-size: 22px;
-}
-
-.lineup-card td {
-  height: 33.5px;
-}
-
-#lineup-card-exchange tr,
-#lineup-card-exchange-empty tr,
-#lineup-card-dugout .starting-lineup-table tr,
-#lineup-card-dugout .substitution-table tr:nth-child(odd) {
-  border-top: 1px solid black;
-}
-
-#lineup-card-exchange tr,
-#lineup-card-exchange-empty tr,
-#lineup-card-dugout .starting-lineup-table tr,
-#lineup-card-dugout .substitution-table tr:nth-child(even) {
-  border-bottom: 1px solid black;
-}
-
-#lineup-card-exchange td.player-name {
-  font-stretch: 100%;
-}
-
-#lineup-card-dugout td.player-name {
-  width: 10ch;
-}
-
-#lineup-card-dugout td.substitution,
-#lineup-card-dugout-empty td.substitution {
-  font-size: 11px;
-  height: 15px;
-}
-
-.lineup-card .position,
-.lineup-card .jersey-number {
-  width: 2ch;
-}
-
-#lineup-card-dugout .position,
-#lineup-card-dugout .jersey-number {
-  font-stretch: 75%;
-  padding-left: 2.5px;
-  padding-right: 2.5px;
-}
-
-.lineup-card .section-header {
-  padding-left: 1px;
-  padding-right: 1px;
-  font-size: inherit;
-  text-transform: uppercase;
-  font-stretch: 85%;
-}
-
-#todays-game > div {
-  display: grid;
-  /* gap: 0.5px; */
-  grid-template-columns: 110px auto;
-  grid-template-rows: calc(var(--row-height) * 1) auto auto;
-  grid-template-areas:
-    "header header"
-    "offense defense"
-    "footer footer";
-}
-
-#defense-pane {
-  position: relative;
-  /* box-sizing: border-box; */
-  padding: 4px 4px 0px 4px; /* top right bottom left */
-  display: flex;
-  grid-area: defense;
-  border-left: 0.5px solid black;
-  border-bottom: 0.5px solid black;
-}
-
-#offense-pane {
-  position: relative;
-  /* box-sizing: border-box; */
-  height: 100%;
-  grid-area: offense;
-  border-bottom: 0.5px solid black;
-  /* outline: 0.5px solid black; */
-}
-
-#offense-pane table {
-  height: 100%;
-  border: none;
-}
-
-#defense-pane .container {
-  width: 100%;
-  display: grid;
-  grid-template-rows: auto;
-}
-
-#defense-pane .pitching-container {
-  margin: auto 0 0 0; /* top right bottom left */
-}
-
-#defense-pane .field-container {
-  display: grid;
-  grid-template-rows: auto;
-  /* margin: top; */
-  width: 100%;
-  /* background: url("../baseball-diamond.svg"); */
-  background-size: 100%;
-  background-position: center 10px;
-  background-repeat: no-repeat;
-  gap: 6px;
-  z-index: 2;
-}
-
-#defense-pane img {
-  position: absolute;
-  z-index: -1;
-}
-
-.defense-slot-set {
-  width: 77px;
-}
-
-.index-card .defense-slot-set {
-  width: 65px;
-}
-
-.index-card .defense-slot-set .player-name {
-  font-stretch: 70%;
-}
-
-.pitching-container .defense-slot-set {
-  width: 100%;
-}
-
-.container .row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.section-header {
-  background-color: #cadcf9;
-  font-size: 8.8px;
-  /* outline: 1px solid black; */
-  /* height: var(--row-height); */
-  width: auto;
-  grid-area: header;
-  text-align: center;
-  padding-left: 10px;
-  padding-right: 10px;
-  border-bottom: 0.5px solid black;
-  z-index: 1;
-}
-
-.footer {
-  /* height:var(--row-height); */
-  position: relative;
-  box-sizing: border-box;
-  grid-area: footer;
-  /* border: 1px solid black; */
-  height: 100%;
-}
-
-.footer table {
-  height: 100%;
-  outline: none;
-  border-style: none;
-}
-
-.footer tr {
-  background-color: white;
-  outline: none;
-  border-bottom: 0.5px solid var(--color-grey-500);
-}
-
-.footer tr :last-child {
-  background-color: white;
-  outline: none;
-  border-bottom-style: none;
-}
-.footer th {
-  text-align: left;
-  color: var(--color-grey-600);
-}
-.footer td {
-  height: var(--row-height);
-
-  border: none;
-}
-
-.footer td:empty::after {
-  content: "";
-}
-
-.cell-checkbox {
-  font-size: 0.75em;
-}
-
-.in-starting-lineup {
-  font-weight: bold;
-}
-
-.gametitle {
-  font-weight: bold;
-  text-transform: uppercase;
-  font-stretch: semi-condensed;
-}
-
-.homeaway {
-  text-transform: uppercase;
-  font-stretch: normal;
-  font-weight: bolder;
-  float: right;
-  text-transform: uppercase;
-}
-
-.cell-smalltext {
-  font-stretch: condensed;
-  font-size: 10px;
-}
-
-.statscell {
-  font-family: "m+1m";
-  text-align: center;
-  font-stretch: extra-condensed;
-  font-size: 9px;
-  width: 60px;
-}
-
- {
-  text-transform: uppercase;
-}
-
-.condensedNameCell {
-  width: 70px;
-  text-transform: uppercase;
-  font-stretch: condensed;
-}
-
-.cell-square {
-  height: var(--row-height);
-  width: 14px;
-  text-align: center;
-}
-
-.cell-square.narrow {
-  width: 10px;
-}
-.cell-mono {
-  font-family: "m+1m";
-}
-
-.cell-condensed {
-  font-stretch: condensed;
-}
-
-.available-status-code-1 {
-  color: rgb(0, 85, 0);
-  background-color: #b7e1cd;
-}
-
-.available-status-code-0 {
-  color: rgb(170, 0, 0);
-  background-color: #f4c7c3;
-}
-
-.past.available-status-code-0,
-.past.available-status-code-null {
-  color: var(--color-grey-600);
-  background-color: inherit;
-}
-
-.past.available-status-code-1 {
-  color: inherit;
-  background-color: var(--color-warning);
-}
-
-.past.available-status-code-1.started {
-  color: inherit;
-  background-color: inherit;
-}
-
-.available-status-code-2 {
-  color: blue;
-  background-color: #acc9fe;
-}
-
-#roster-and-history .player-name,
-#roster-and-history .jersey-number {
-  color: black;
-}
-
-#roster-and-history .player-name {
-  font-stretch: normal;
-}
-
-.starting {
-  font-weight: bold;
-}
-
-#roster-and-history > div > table {
-  /* font-size: 10.5px; */
-  padding: 0;
-  line-height: 1em;
-  /* outline: 0.5px black; */
-}
-
-#roster-and-history td,
-#roster-and-history th {
-  border-left: none;
-  border-right: none;
-  padding: 0.2em 0.1em 0.2em 0.1em; /* top right bottom left */
-}
-
-#roster-and-history td.player-name {
-  text-align: left;
-}
-
-#roster-and-history th {
-  background-color: #cadcf9;
-  color: black;
-  border: none;
-}
-
-#roster-and-history thead > tr,
-#roster-and-history tfoot > tr {
-  border-bottom: solid black 1px;
-}
-
-#roster-and-history tbody {
-  border-bottom: solid black 1px;
-}
-
-#roster-and-history td[id^="avail"][id$="today-plus-1"],
-#roster-and-history .pitcher,
-#roster-and-history .player-stats,
-#roster-and-history td[id^="avail"][id$="today-minus-1"] {
-  border-left-width: 1px;
-  border-left-style: solid;
-  border-left-color: black;
-}
-
-#roster-and-history td.jersey-number {
-  border-left: 0.5px solid lightgrey;
-}
-
-#roster-and-history td.today-minus-4 {
-  border-right: 1px solid black;
-}
-
-#roster-and-history tr.border-top {
-  border-top: 1px solid black;
-}
-
-#roster-and-history #today-availability {
-  font-stretch: normal;
-  text-transform: uppercase;
-  font-size: 0.8em;
-}
-
-.player-stats {
-  font-family: var(--monospace-font);
-  font-size: 1em;
-  font-stretch: 60%;
-  font-weight: 300;
-}
-
-#roster-and-history td.position-capability,
-th.position-capability {
-  font-size: 8px;
-  font-stretch: 50%;
-  width: 5px;
-  text-align: center;
-  padding: 0;
-}
-
-#roster-and-history th.position-capability {
-  font-size: inherit;
-}
-
-td.position-capability:not(:empty) {
-  color: var(--color-grey-700);
-  background-color: var(--color-grey-200);
-}
-
-td.is-present-checkbox {
-  font-size: 0.5em;
-  text-align: center;
-  color: white;
-  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
-    1px 1px 0 #000; */
-}
-
-td.is-present-checkbox.available-status-code-0 > span {
-  display: none;
-}
-
-td.is-present-checkbox.available-status-code-None > span {
-  display: none;
-}
-
-td.availability {
-  font-family: var(--monospace-font);
-  font-stretch: condensed;
-  text-align: center;
-  max-width: 0.8em;
-  min-width: 0.8em;
-}
-
-.availability.future,
-.availability.past {
-  font-family: var(--monospace-font);
-  font-stretch: condensed;
-  font-weight: normal;
-  font-size: 0.8em;
-  padding: 0.1em;
-  text-transform: uppercase;
-}
-
-#roster-test .player-name {
-  font-weight: bold;
-  text-transform: uppercase;
-  grid-area: player-name;
-}
-
-#roster-test .jersey-number {
-  font-weight: bolder;
-  font-stretch: extra-condensed;
-  grid-area: jersey-number;
-}
-
-#roster-test .player-stats {
-  grid-area: player-stats;
-}
-
-#roster-test .diamond {
-  grid-area: diamond;
-  overflow: hidden;
-  display: inline-block;
-  height: 10px;
-  /* height:10px; */
-}
-
-.rotate {
-  transform: rotate(270deg);
-}
-
-.delimiter,
-.decimal-point {
-  font-family: Helvetica Now;
-  font-stretch: expanded;
-  color: var(--color-grey-500);
-}
-
-th .decimal-point {
-  color: rgb(0, 0, 0, 0);
-}
-
-th .delimiter {
-  color: var(--color-grey-500);
-}

src/public/css/project.css

@@ -1,6 +1,31 @@
 /* These styles are generated from project.scss. */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
 @import url("../fonts/helvetica-now/stylesheet.css");
+header.Header {
+  background: #323669;
+  padding: 8px 0;
+  box-shadow: 0 4px 0 rgba(0, 0, 25, 0.1);
+  border-bottom: 1px solid #d6d6d6;
+  color: white;
+}
+.Header-bannerLogo, .Header-bannerTitle {
+  margin: 0;
+  padding: 0;
+}
+
+.Header-bannerLogo img {
+  height: 36px;
+  width: auto;
+}
+
+.Header-bannerTitle {
+  font-family: "Helvetica", sans-serif;
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: left;
+  color: white;
+  font-size: 28px;
+}
 .alert-debug {
   color: black;
   background-color: white;

src/public/js/eventlineup.js

@@ -0,0 +1,490 @@
+/* Project specific Javascript goes here. */
+function onPositionSelectChange(elem) {
+  elem.querySelectorAll("option").forEach((option) => {
+    if (option.innerText.trim() == elem.value) {
+      option.setAttribute("selected", "selected");
+    } else {
+      option.removeAttribute("selected");
+    }
+  });
+  colorPositions();
+  refreshLineupOrder();
+}
+
+function togglePopup(el) {
+  el.querySelector(".Popup-container").classList.toggle("is-open");
+}
+
+function colorPositions() {
+  for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
+    selected_lineup_positions = Array.from(
+      bcLineup.querySelectorAll(".position-select-box option:checked")
+    ).map((el) => el.value);
+
+    for (position_status of bcLineup.querySelectorAll(".position-status")) {
+      for (class_name of ["u-colorNegative", "u-colorHighlight", "u-colorPositive"]) {
+        position_status.classList.remove(class_name);
+      }
+
+      occurrences = selected_lineup_positions.filter((s) => s == position_status.innerText).length;
+
+      if (occurrences == 1) {
+        position_status.classList.add("u-colorPositive");
+      } else if (occurrences > 1) {
+        position_status.classList.add("u-colorHighlight");
+      } else {
+        position_status.classList.add("u-colorNegative");
+      }
+    }
+  }
+}
+
+function refreshLineupOrder() {
+  Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
+    Array.from(
+      bcLineup.querySelectorAll(
+        ".starting .lineup-slot, \
+        .position-only .lineup-slot, \
+        .bench .lineup-slot"
+      )
+    ).forEach((slot, i) => {
+      slot.querySelector("input[name*=sequence]").value = i;
+      selected_position = slot.querySelector(".position-select-box option:checked");
+      if (selected_position && selected_position.text != "--") {
+        slot.querySelector("input[name*=label]").value = selected_position.text;
+      } else {
+        slot.querySelector("input[name*=label]").value = null;
+      }
+    });
+  });
+}
+
+for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
+  options = {
+    animation: 150,
+    handle: ".Panel-cell:has(.drag-handle), .Panel-cell:has(.sequence)",
+    ghostClass: "ghost",
+    group: {
+      name: bcLineup.id,
+      put: [bcLineup.id],
+      pull: [bcLineup.id],
+    },
+    onAdd: function (/**Event*/ evt) {
+      console.log("added to lineup");
+      // Add to Lineup
+      var itemEl = evt.item; // dragged HTMLElement
+
+      refreshLineupOrder();
+    },
+    onUpdate: function (/**Event*/ evt) {
+      console.log("update to lineup");
+      // var itemEl = evt.item; // dragged HTMLElement
+      // refresh_lineup_order(itemEl);
+      refreshLineupOrder();
+    },
+  };
+  new Sortable.create(bcLineup.querySelector("[id^=lineup-starting] .slot-set"), options);
+  new Sortable.create(bcLineup.querySelector("[id^=lineup-positiononly] .slot-set"), options);
+  options["sort"] = false;
+  new Sortable.create(bcLineup.querySelector("[id^=lineup-bench] .slot-set"), options);
+  new Sortable.create(bcLineup.querySelector("[id^=lineup-out] .slot-set"), {...options, group:{...options.group, put:[]}});
+}
+
+for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
+  console.log(lineup_slot)
+  const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box) ')
+  Array.from(cells).forEach(cell=>{
+    cell.classList.add('u-hidden')
+  })
+}
+
+function copyEmailTable(itemEl, subject, recipients) {
+  // Create container for the HTML
+  // [1]
+  let bcLineup = itemEl.closest(".benchcoach-lineup");
+  var container = document.createElement("div");
+  var tbl = document.createElement("table");
+
+  let thead = tbl.createTHead();
+  let thead_row = thead.insertRow();
+  let thead_row_cell = thead_row.insertCell();
+  thead_row_cell.appendChild(document.createElement("h3").appendChild(document.createTextNode("STARTING LINEUP")));
+  thead_row_cell.colSpan = 3;
+  thead_row_cell.classList.add("title-cell");
+  var tbody = tbl.createTBody();
+  for (row of bcLineup.querySelector(".table-benchcoach-startinglineup").rows) {
+    let tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.classList.add("sequence-cell");
+    cell.appendChild(document.createTextNode(parseInt(row.dataset.order) + 1));
+    cell = tr.insertCell();
+    cell.appendChild(document.createTextNode(row.dataset.playerName));
+    cell.classList.add("name-cell");
+    tr.insertCell().appendChild(document.createTextNode(row.dataset.position));
+  }
+
+  if (bcLineup.querySelector(".table-benchcoach-startingpositionalonly").rows.length > 0) {
+    var tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.colSpan = 3;
+    cell.appendChild(document.createTextNode("STARTING (POS. ONLY)"));
+    cell.classList.add("title-cell");
+
+    for (row of bcLineup.querySelector(".table-benchcoach-startingpositionalonly").rows) {
+      var tr = tbody.insertRow();
+      cell = tr.insertCell();
+      cell.classList.add("sequence-cell");
+      cell.appendChild(document.createTextNode(""));
+      cell = tr.insertCell();
+      cell.appendChild(document.createTextNode(row.dataset.playerName));
+      cell.classList.add("name-cell");
+      tr.insertCell().appendChild(document.createTextNode(row.dataset.position));
+    }
+  }
+
+  if (bcLineup.querySelector(".table-benchcoach-bench").rows.length > 0) {
+    var tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.colSpan = 3;
+    cell.appendChild(document.createTextNode("SUBS"));
+    cell.classList.add("title-cell");
+
+    for (row of bcLineup.querySelector(".table-benchcoach-bench").rows) {
+      var tr = tbody.insertRow();
+      cell = tr.insertCell();
+      cell.classList.add("sequence-cell");
+      availability_status = {
+        None: "UNK",
+        0: "NO",
+        2: "MAY",
+        1: "YES",
+      }[row.dataset.availabilityStatuscode];
+      cell.appendChild(document.createTextNode(availability_status));
+      cell = tr.insertCell();
+      cell.appendChild(document.createTextNode(row.dataset.playerName));
+      cell.classList.add("name-cell");
+      tr.insertCell().appendChild(document.createTextNode(""));
+    }
+  }
+
+  if (bcLineup.querySelector(".table-benchcoach-out").rows.length > 0) {
+    var tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.colSpan = 3;
+    cell.appendChild(document.createTextNode("OUT"));
+    cell.classList.add("title-cell");
+
+    for (row of bcLineup.querySelector(".table-benchcoach-out").rows) {
+      var tr = tbody.insertRow();
+      cell = tr.insertCell();
+      cell.classList.add("sequence-cell");
+      availability_status = {
+        None: "UNK",
+        0: "NO",
+        1: "MAY",
+        2: "YES",
+      }[row.dataset.availabilityStatuscode];
+      cell.appendChild(document.createTextNode(availability_status));
+      tr.insertCell().appendChild(document.createTextNode(row.dataset.playerName));
+      tr.insertCell().appendChild(document.createTextNode(""));
+    }
+  }
+
+  container.appendChild(tbl);
+  for (cell of container.getElementsByClassName("title-cell")) {
+    cell.setAttribute("style", "font-weight:bold;background-color:#323669;color:#fff;padding:2px 5px;");
+  }
+
+  for (cell of container.getElementsByClassName("sequence-cell")) {
+    cell.setAttribute("style", "font-weight:bold;padding:2px 5px;");
+  }
+
+  for (cell of container.getElementsByClassName("name-cell")) {
+    cell.setAttribute("style", "width:200px;");
+  }
+
+  // Detect all style sheets of the page
+  var activeSheets = Array.prototype.slice.call(document.styleSheets).filter(function (sheet) {
+    return !sheet.disabled;
+  });
+
+  // Mount the container to the DOM to make `contentWindow` available
+  // [3]
+  document.body.appendChild(container);
+
+  // Copy to clipboard
+  // [4]
+  window.getSelection().removeAllRanges();
+
+  var range = document.createRange();
+  range.selectNode(container);
+  window.getSelection().addRange(range);
+
+  // [5.1]
+  document.execCommand("copy");
+
+  // [5.2]
+  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = true;
+
+  // [5.3]
+  // document.execCommand('copy')
+
+  // [5.4]
+  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = false;
+
+  // Remove the container
+  // [6]
+  document.body.removeChild(container);
+  subject_encoded = encodeURIComponent(subject);
+  window.open("readdle-spark://compose?recipient=manager@chihounds.com&subject=" + subject + "&bcc=" + recipients);
+}
+
+function emailModal(el, url) {
+  form = el.closest("form");
+  data = new FormData(form);
+
+  email_modal = document.querySelector("#modal");
+
+  fetch(url, {
+    method: "POST",
+    body: data,
+    headers: {
+      'CSRF-Token': data.get('_csrf')
+    }
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.text();
+      } else {
+        return Promise.reject(response.text());
+      }
+    })
+    .then((html) => {
+  email_modal.classList.add("is-open");
+  email_modal.querySelector(".Modal-body").innerHTML = html;
+  });
+}
+
+async function onSubmit(form, event) {
+  event.preventDefault();
+  console.log(event)
+  teamsnap_icon = document.querySelector("#teamsnap-icon");
+  waiting_icon = document.querySelector("#waiting-icon");
+  success_icon = document.querySelector("#success-icon");
+  failure_icon = document.querySelector("#failure-icon");
+  data = new FormData(form);
+  console.log(form)
+  url = form.attributes.action.textContent;
+  teamsnap_icon.classList.add("u-hidden")
+  waiting_icon.classList.remove("u-hidden");
+  await fetch(url, {
+    method: "POST",
+    body: data,
+    headers: {
+      'CSRF-Token': data.get('_csrf')
+    }
+  })
+    .then((response) => {
+      waiting_icon.classList.add("u-hidden");
+      if (response.ok) {
+        return response.text();
+      } else {
+        return Promise.reject(response.text());
+      }
+    })
+    .then((text) => {
+      event.submitter.blur()
+      waiting_icon.classList.add("u-hidden");
+      success_icon.classList.remove("u-hidden");
+      // success_icon.querySelector("span.message").innerHTML = text;
+    })
+    .catch((error) => {
+      event.submitter.blur()
+      waiting_icon.classList.add("u-hidden");
+      failure_icon.classList.remove("u-hidden");
+      console.log(error);
+      // success_icon.querySelector("span.message").innerHTML = error;
+    });
+  setTimeout(() => {
+      [waiting_icon, success_icon, failure_icon].forEach(e=>e.classList.add('u-hidden'))
+      teamsnap_icon.classList.remove('u-hidden')
+    }, 3000)
+}
+
+function copyEmailTable(itemEl, subject, recipients) {
+  // Create container for the HTML
+  // [1]
+  let bcLineup = itemEl.closest(".event-lineup");
+  var container = document.createElement("div");
+  var tbl = document.createElement("table");
+
+  let thead = tbl.createTHead();
+  let thead_row = thead.insertRow();
+  let thead_row_cell = thead_row.insertCell();
+  thead_row_cell.appendChild(document.createElement("h3").appendChild(document.createTextNode("STARTING LINEUP")));
+  thead_row_cell.colSpan = 3;
+  thead_row_cell.classList.add("title-cell");
+  var tbody = tbl.createTBody();
+
+  lineup_slots_starting = bcLineup.querySelectorAll(".starting .slot-set .lineup-slot");
+
+  for (node of lineup_slots_starting) {
+    console.log("node", node);
+    let tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.classList.add("sequence-cell");
+    sequence = node.querySelector("input[name*='sequence']").value;
+    console.log(sequence);
+    cell.appendChild(document.createTextNode(parseInt(sequence) + 1));
+    name = node.querySelector("div:has(.lastname)");
+    cell = tr.insertCell();
+    cell.appendChild(document.createTextNode(name.textContent));
+    cell.classList.add("name-cell");
+    position_label = node.querySelector("input[name*='label']").value;
+    tr.insertCell().appendChild(document.createTextNode(position_label));
+  }
+
+  lineup_slots_position_only = bcLineup.querySelector(".position-only .slot-set .lineup-slot");
+  console.log("lineup slots position", lineup_slots_position_only);
+  if (lineup_slots_position_only.length > 0) {
+    var tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.colSpan = 3;
+    cell.appendChild(document.createTextNode("STARTING (POS. ONLY)"));
+    cell.classList.add("title-cell");
+
+    for (node of lineup_slots_position_only) {
+      var tr = tbody.insertRow();
+      cell = tr.insertCell();
+      cell.classList.add("sequence-cell");
+      cell.appendChild(document.createTextNode(""));
+      cell = tr.insertCell();
+      name = node.querySelector("div:has(.lastname)");
+      cell.appendChild(document.createTextNode(name.textCotent));
+      cell.classList.add("name-cell");
+      position_label = node.querySelector("input[name*='label']").value;
+      tr.insertCell().appendChild(document.createTextNode(position_label));
+    }
+  }
+
+  lineup_slots_bench = bcLineup.querySelector(".bench .slot-set .lineup-slot");
+  if (lineup_slots_bench > 0) {
+    var tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.colSpan = 3;
+    cell.appendChild(document.createTextNode("SUBS"));
+    cell.classList.add("title-cell");
+
+    for (node of lineup_slots_bench) {
+      var tr = tbody.insertRow();
+      cell = tr.insertCell();
+      cell.classList.add("sequence-cell");
+
+      div_avail_code = node.querySelector("div[class*='availability-status-code']");
+      if (div_with_avail_code.classList.includes("availability-status-code-1")) {
+        cell.appendChild(document.createTextNode("YES"));
+      } else if (div_with_avail_code.classList.includes("availability-status-code-2")) {
+        cell.appendChild(document.createTextNode("MAY"));
+      } else if (div_with_avail_code.classList.includes("availability-status-code-0")) {
+        cell.appendChild(document.createTextNode("NO"));
+      } else {
+        cell.appendChild(document.createTextNode("UNK"));
+      }
+      cell = tr.insertCell();
+      name = node.querySelector("div:has(.lastname)");
+      cell.appendChild(document.createTextNode(name.textCotent));
+      cell.classList.add("name-cell");
+      tr.insertCell().appendChild(document.createTextNode(""));
+    }
+  }
+
+  lineup_slots_out = bcLineup.querySelector(".out .slot-set .lineup-slot");
+  if (lineup_slots_out > 0) {
+    var tr = tbody.insertRow();
+    cell = tr.insertCell();
+    cell.colSpan = 3;
+    cell.appendChild(document.createTextNode("OUT"));
+    cell.classList.add("title-cell");
+
+    for (node of lineup_slots_out) {
+      var tr = tbody.insertRow();
+      cell = tr.insertCell();
+      cell.classList.add("sequence-cell");
+      div_avail_code = node.querySelector("div[class*='availability-status-code']");
+      if (div_with_avail_code.classList.includes("availability-status-code-1")) {
+        cell.appendChild(document.createTextNode("YES"));
+      } else if (div_with_avail_code.classList.includes("availability-status-code-2")) {
+        cell.appendChild(document.createTextNode("MAY"));
+      } else if (div_with_avail_code.classList.includes("availability-status-code-0")) {
+        cell.appendChild(document.createTextNode("NO"));
+      } else {
+        cell.appendChild(document.createTextNode("UNK"));
+      }
+      cell = tr.insertCell();
+      name = node.querySelector("div:has(.lastname)");
+      cell.appendChild(document.createTextNode(name.textCotent));
+      cell.classList.add("name-cell");
+      tr.insertCell().appendChild(document.createTextNode(""));
+    }
+  }
+
+  container.appendChild(tbl);
+  for (cell of container.getElementsByClassName("title-cell")) {
+    cell.setAttribute("style", "font-weight:bold;background-color:#323669;color:#fff;padding:2px 5px;");
+  }
+
+  for (cell of container.getElementsByClassName("sequence-cell")) {
+    cell.setAttribute("style", "font-weight:bold;padding:2px 5px;");
+  }
+
+  for (cell of container.getElementsByClassName("name-cell")) {
+    cell.setAttribute("style", "width:200px;");
+  }
+
+  // Detect all style sheets of the page
+  var activeSheets = Array.prototype.slice.call(document.styleSheets).filter(function (sheet) {
+    return !sheet.disabled;
+  });
+
+  // Mount the container to the DOM to make `contentWindow` available
+  // [3]
+  document.body.appendChild(container);
+
+  // Copy to clipboard
+  // [4]
+  window.getSelection().removeAllRanges();
+
+  var range = document.createRange();
+  range.selectNode(container);
+  window.getSelection().addRange(range);
+
+  // [5.1]
+  document.execCommand("copy");
+
+  // [5.2]
+  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = true;
+
+  // [5.3]
+  // document.execCommand('copy')
+
+  // [5.4]
+  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = false;
+
+  // Remove the container
+  // [6]
+  document.body.removeChild(container);
+  subject_encoded = encodeURIComponent(subject);
+  window.open("readdle-spark://compose?recipient=manager@chihounds.com&subject=" + subject + "&bcc=" + recipients);
+}
+
+function toggleChildSlots (element) {
+  console.log(element);
+  console.log(element.closest(".slot-set"))
+  for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
+    console.log(lineup_slot)
+    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box) ')
+    Array.from(cells).forEach(cell=>{
+      cell.classList.toggle('u-hidden')
+    })
+  }
+}

src/public/js/opponent.js

@@ -0,0 +1,31 @@
+// THIS DOESN'T WORK, CORS ERRORS!!
+// const form = document.querySelector("form[name=upload-opponent-logo]")
+
+// form.querySelector("button").addEventListener('click', function() {
+//   form.requestSubmit();
+// })
+
+// form.addEventListener('submit', async function(e) {
+//   e.preventDefault()
+//   console.log(e.target)
+//   data = new FormData(e.target)
+//   // file = new File(data.file.buffer, data.filename, {
+//   //   type: "image/png",
+//   // });
+//   teamsnap.TeamSnap("http://localhost:8080/https://apiv3.teamsnap.com")
+//   if (teamsnap.hasSession()) {
+//     const token = sessionStorage.getItem('teamsnap.authToken')
+//     teamsnap.auth(token);
+//     teamsnap.loadCollections(async function(err) {
+//       if (err) {
+//         console.log(err)
+//         alert('Error loading TeamSnap SDK');
+//         return;
+//       }
+//       const team_medium = await teamsnap.createTeamMedium(data)
+//       await teamsnap.uploadTeamMedium(team_medium)
+//       console.log('Uploaded')
+//     });
+//   }
+
+// })