breakout components of sheet use full card defense

src/app.js

@@ -35,6 +35,7 @@ app.set("views", path.join(__dirname, "views"));
 hbs.registerPartials(require("./routes/index").partials)
 hbs.registerPartials(require("./controllers/event").partials)
 hbs.registerPartials(require("./controllers/eventlineup").partials)
+hbs.registerPartials(require("./controllers/eventsheet").partials)
 
 hbs.registerHelper('dateFormat', require('handlebars-dateformat'));
 hbs.registerHelper('section', (name, options) => {

src/controllers/eventsheet.js

@@ -1,9 +1,27 @@
 const tsUtils = require('../lib/utils')
+const path = require('path')
+
+exports.partials = path.join(__dirname, "../views/eventsheet/partials")
 
 exports.getEventSheet = async (req,res) =>{
+  req.promises.push(
+    teamsnap.loadOpponents(req.team.id, (err, opponents)=>{
+      if (err) console.log("error in route/opponent.js", err);
+    }).then(opponents => {req.opponent=opponents.find(o=>o.id==req.event.opponentId);})
+  )
   await Promise.all(req.promises)
-  const {user, team, team_preferences, members, event, event_lineup, event_lineup_entries, availabilities, availabilitySummary, timeline, recent_events, upcoming_events} = req
+  req.promises.push(
-  res.render('eventsheet/sheet', {user, team, team_preferences, members, event, event_lineup, event_lineup_entries, availabilities, availabilitySummary, timeline, recent_events, upcoming_events})
+    teamsnap.loadTeamMedia(req.team.id, (err, team_media)=>{
+      if (err) console.log("error in route/opponent.js", err);
+    })
+    .then(team_media => {
+      req.opponent_logo = team_media.find(tm=>tm.description==`opponent-logo-${req.event.opponentId}.png`)
+    }
+    ) 
+  )
+  await Promise.all(req.promises)
+  const {user, team, team_preferences, members, event, event_lineup, event_lineup_entries, availabilities, availabilitySummary, timeline, recent_events, opponent_logo, upcoming_events} = req
+  res.render('eventsheet/sheet', {user, team, team_preferences, members, event, event_lineup, event_lineup_entries, availabilities, availabilitySummary, timeline, recent_events, opponent_logo,upcoming_events})
 }
 
 exports.getLineupCard = (req, res, next) => {

src/helpers/eventsheet.js

@@ -1,9 +1,9 @@
 const { parsePositionLabel, teamsnapMembersSortLineupAvailabilityLastName, teamsnapMembersSortAvailabilityLastName } = require('../lib/utils')
 const {attachBenchcoachPropertiesToMember} = require('../controllers/eventlineup')
 
-exports.offenseLineup = (number_of_slots, options) => {
+exports.offenseLineup = (number_of_slots, event_lineup_entries, members, options) => {
     var results = ""
-    const {event_lineup_entries, members} = options.data.root
+    // const {event_lineup_entries, members} = options.data.root
     
     for (let i = 0; i < number_of_slots; i++){
       const event_lineup_entry = event_lineup_entries ? event_lineup_entries[i] : null
@@ -25,9 +25,9 @@ exports.offenseLineup = (number_of_slots, options) => {
     return results
   }
 
-exports.defenseLineup = (options) => {
+exports.defenseLineup = (event_lineup_entries, members, options) => {
     var results = ""
-    const {event_lineup_entries, members} = options.data.root
+    // const {event_lineup_entries, members} = options.data.root
     const positions = ["C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "P"]
     positions.forEach(position=>{
       const event_lineup_entry = event_lineup_entries ? event_lineup_entries.find(e=>parsePositionLabel(e.label).positionLabelWithoutFlags == position) : null
@@ -55,9 +55,9 @@ exports.rosterHistoryHeader = (options) => {
   return results;
 }
 
-exports.rosterHistory = (options) => {
+exports.rosterHistory = (event, event_lineup_entries, members, availabilities, options) => {
   var results = ""
-  const {event, event_lineup_entries, members, availabilities} = options.data.root
+  // const {event, event_lineup_entries, members, availabilities} = options.data.root
   const players = members.filter(m=>!m.isNonPlayer)
   attachBenchcoachPropertiesToMember(players, event_lineup_entries ? event_lineup_entries.filter(i=>i.eventId==event.id) : [], availabilities.filter(i=>i.eventId==event.id))
   players.sort(teamsnapMembersSortAvailabilityLastName)

src/public/css/eventsheet.css

@@ -288,6 +288,48 @@ td.substitution {
   grid-template-rows: auto auto;
   grid-template-areas: "offense defense" "footer footer";
 }
+#todays-game #offense-pane {
+  grid-area: offense;
+}
+#todays-game #defense-pane {
+  grid-area: defense;
+}
+#todays-game .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;
+}
+#todays-game .footer table {
+  height: 100%;
+  outline: none;
+  border-style: none;
+}
+#todays-game .footer table tr {
+  background-color: white;
+  outline: none;
+  border-bottom: 0.5px solid var(--color-grey-500);
+}
+#todays-game .footer table tr :last-child {
+  background-color: white;
+  outline: none;
+  border-bottom-style: none;
+}
+#todays-game .footer table th {
+  text-align: left;
+  color: var(--color-grey-600);
+}
+#todays-game .footer table td {
+  height: var(--row-height);
+  border: none;
+}
+#todays-game .footer table tdempty::after {
+  content: "";
+}
 #todays-game table.notes th {
   border-left: none;
   border-right: none;
@@ -297,6 +339,32 @@ td.substitution {
   content: "";
 }
 
+#defense-card #defense-pane {
+  width: 100%;
+}
+#defense-card .footer {
+  display: none;
+}
+#defense-card .slot-set table {
+  font-size: 14px;
+  width: 120px;
+}
+#defense-card .slot-set.pos-c {
+  grid-area: 6/1/7/5 !important;
+}
+#defense-card .slot-set.pos-p {
+  justify-content: center !important;
+  align-items: center;
+  margin-bottom: inherit !important;
+  grid-area: 5/1/6/5 !important;
+}
+#defense-card .slot-set.pos-p table {
+  width: 120px !important;
+}
+#defense-card .slot-set.pos-p table tbody > tr:last-child {
+  display: table-row;
+}
+
 #defense-pane {
   position: relative;
   grid-area: defense;
@@ -393,12 +461,11 @@ td.substitution {
 }
 
 #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;
+  counter-reset: lineup-sequence-counter 0;
   /* outline: 0.5px solid black; */
 }
 #offense-pane table {
@@ -441,7 +508,6 @@ header {
   /* outline: 1px solid black; */
   /* height: var(--row-height); */
   width: auto;
-  grid-area: header;
   text-align: center;
   padding-left: 10px;
   padding-right: 10px;
@@ -449,43 +515,6 @@ header {
   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;
 }

src/public/css/eventsheet.css.map

@@ -1 +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"}
+{"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;;AAIJ;EACE;;AAGF;EACE;;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;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAeV;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;AACA;EACA;EAEA;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;EAEA;EACA;EACA;EACA;EACA;;;AAKF;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/scss/eventsheet.scss

@@ -325,6 +325,56 @@ td.substitution {
       "footer footer";
   }
 
+  #offense-pane {
+    grid-area: offense;
+  }
+
+  #defense-pane {
+    grid-area: defense;
+  }
+
+  .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;
+  
+    table {
+      height: 100%;
+      outline: none;
+      border-style: none;
+  
+      tr {
+        background-color: white;
+        outline: none;
+        border-bottom: 0.5px solid var(--color-grey-500);
+  
+        :last-child {
+          background-color: white;
+          outline: none;
+          border-bottom-style: none;
+        }
+      }
+  
+      th {
+        text-align: left;
+        color: var(--color-grey-600);
+      }
+  
+      td {
+        height: var(--row-height);
+        border: none;
+        &empty::after {
+          content: "";
+        }
+      }
+    }
+  }
+
   table {
     &.notes {
       th {
@@ -339,6 +389,47 @@ td.substitution {
   }
 }
 
+#defense-card {
+  #defense-pane {
+    width: 100%;
+  }
+
+  .footer {
+    display: none;
+  }
+
+  .slot-set {
+    table {
+      font-size: 14px;
+      width: 120px;
+      tbody > tr:last-child { 
+        // display: none; 
+      }
+      }
+
+    &.pos-c {
+      grid-area: 6 / 1 / 7 / 5 !important;
+    }
+    
+    &.pos-p {
+      table {
+        width: 120px !important;
+        tbody > tr:last-child { 
+          display: table-row; 
+        }
+      }
+      justify-content: center !important;
+      align-items: center;
+      margin-bottom: inherit !important;
+      grid-area: 5 / 1 / 6 / 5 !important;
+    }
+    
+  }
+
+
+}
+
+
 #defense-pane {
   position: relative;
   grid-area: defense;
@@ -434,12 +525,12 @@ td.substitution {
 }
 
 #offense-pane {
-  counter-reset: lineup-sequence-counter 0;
   position: relative;
   /* box-sizing: border-box; */
   height: 100%;
-  grid-area: offense;
+  // grid-area: offense;
   border-bottom: 0.5px solid black;
+  counter-reset: lineup-sequence-counter 0;
   /* outline: 0.5px solid black; */
 
   table {
@@ -486,7 +577,7 @@ header {
   /* outline: 1px solid black; */
   /* height: var(--row-height); */
   width: auto;
-  grid-area: header;
+  // grid-area: header;
   text-align: center;
   padding-left: 10px;
   padding-right: 10px;
@@ -494,47 +585,7 @@ header {
   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;
 
-  table {
-    height: 100%;
-    outline: none;
-    border-style: none;
-
-    tr {
-      background-color: white;
-      outline: none;
-      border-bottom: 0.5px solid var(--color-grey-500);
-
-      :last-child {
-        background-color: white;
-        outline: none;
-        border-bottom-style: none;
-      }
-    }
-
-    th {
-      text-align: left;
-      color: var(--color-grey-600);
-    }
-
-    td {
-      height: var(--row-height);
-      border: none;
-      &empty::after {
-        content: "";
-      }
-    }
-  }
-}
 
 .cell-checkbox {
   font-size: 0.75em;

src/views/eventsheet/partials/defense_pane.hbs

@@ -0,0 +1,22 @@
+<div class="field-container">
+  <img src="/media/baseball-diamond.svg" />
+  {{#defenseLineup event_lineup_entries members}}
+  <div class="slot-set pos-{{this.position}}">
+    <table>
+      <tbody>
+        <tr class="slot">
+          <th class="position"></th>
+          <td class="player-name">{{this.member.lastName}}</td>
+        </tr>
+        <tr class="slot substitute">
+          <th class="position"></th>
+          <td></td>
+        </tr>
+        <tr class="slot substitute">
+          <th class="position"></th><td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  {{/defenseLineup}}
+</div>

src/views/eventsheet/partials/offense_pane.hbs

@@ -0,0 +1,20 @@
+<table>
+  <tbody>
+    <div class="slot-set">
+      {{!-- <% offensive_lineup_entries = by_member.select{|m,d| d[:event_lineup_entry] and d[:event_lineup_entry].label.exclude?("[PO]")}.sort_by{|m,d| d[:event_lineup_entry].sequence}.each_with_index do |(member, d), i| if i < 11%> --}}
+      {{#offenseLineup 11 event_lineup_entries members}}
+      <tr class="slot">
+        <th class="sequence counter" rowspan="2"></th>
+        <td class="player-name">{{this.member.lastName}}</td>
+        <td class="jersey-number">{{this.member.jerseyNumber}}</td>
+        <td class="position">{{positionLabelWithoutFlags this.label}}</td>
+      </tr>
+      <tr class="slot substitute">
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      {{/offenseLineup}}
+    </div>
+  </tbody>
+</table>

src/views/eventsheet/partials/roster_and_history.hbs

@@ -0,0 +1,80 @@
+<table>
+  <colgroup><col span="3" class="player"></colgroup>
+  {{!-- <colgroup><col span="0" class="player-stats"></colgroup> --}}
+  <colgroup><col span="4" class="position-capability"></colgroup>
+  <colgroup><col span="4" class="availability-on-day future"></colgroup>
+  <colgroup><col span="4" class="availability-on-day past"></colgroup>
+  <thead>
+    <tr>
+      <th colspan="3" id="today-availability">
+      Available ({{availabilitySummary.playerGoingCount}}|{{availabilitySummary.playerMaybeCount}})
+      </th>
+      <th class="player-stats">
+        <span class="decimal-point">.</span>AVG 
+        <span class="delimiter">/</span>
+        <span class="decimal-point">.</span>OBP 
+        <span class="delimiter">/</span>
+        <span class="decimal-point">.</span>SLG 
+        <span class="delimiter">:</span>PA 
+      </th>
+      <th class="position-capability pitcher">P</th>
+      <th class="position-capability catcher">C</th>
+      <th class="position-capability infield">I</th>
+      <th class="position-capability outfield">O</th>
+      {{!-- <% for timepoint, i in timeline.select{|tp| tp[:comparison_to_selected]>0}.sort{|tp| -tp[:comparison_to_selected]}.each_with_index do%> --}}
+
+      {{#loopEvents upcoming_events}}
+        <th class="availability-on-day avail-today-plus-{{@index}}" date="{{this.startDate}}"><div>{{dateFormat this.startDate "ddd" }}</div></th>
+      {{/loopEvents}}
+      {{#loopEvents recent_events}}
+        <th class="availability-on-day avail-today-minus-{{@index}}" date="{{this.startDate}}"><div>{{dateFormat this.startDate "ddd" }}</div></th>
+      {{/loopEvents}}
+    </tr>
+  </thead>
+  <tbody>
+  {{!-- <% by_member.select{|m,d| !m.is_non_player}.each_with_index do |(member, d), i|%> --}}
+  {{#rosterHistory event event_lineup_entries members availabilities}}
+  <tr id="roster-history-slot-<%= ::Temple::Utils.escape_html((i)) %>">
+    <td class="is-present-checkbox available-status-code-{{this.benchcoach.availability.statusCode}}">
+      <span>■</span>
+    </td>
+    <td class="jersey-number available-status-code-{{this.benchcoach.availability.statusCode}}{{#if (isStarting this)}} starting{{/if}}">
+      {{this.jerseyNumber}}
+    </td>
+    <td class="player-name available-status-code-{{this.benchcoach.availability.statusCode}}{{#if (isStarting this)}} starting{{/if}}">
+      {{this.lastName}}
+    </td>
+    <td class="player-stats border-left border-right">
+      <span class="decimal-point">.</span>
+      <span class="avg">000</span>
+      <span class="delimiter">/</span>
+      <span class="decimal-point">.</span>
+      <span class="obp">000</span>
+      <span class="delimiter">/</span>
+      <span class="decimal-point">.</span>
+      <span class="slg">000</span>
+      <span class="delimiter">:</span>
+      <span class="pa">00</span>
+    </td>
+    <td class="position-capability pitcher">{{positionCapabilityFor this "P"}}</td>
+    <td class="position-capability catcher">{{positionCapabilityFor this "C"}}</td>
+    <td class="position-capability infield">{{positionCapabilityFor this "IF"}}</td>
+    <td class="position-capability outfield">{{positionCapabilityFor this "OF"}}</td>
+    {{#loopEvents ../upcoming_events}}
+      {{#timepointForMember ../this ../../timeline this}}
+      <td class="availability-on-day future available-status-code-{{this.availability.statusCode}}">
+        {{this.value}}
+      </td>
+      {{/timepointForMember}}
+    {{/loopEvents}}
+    {{#loopEvents ../recent_events}}
+      {{#timepointForMember ../this ../../timeline this}}
+      <td class="availability-on-day past available-status-code-{{this.availability.statusCode}}">
+        {{this.value}}
+      </td>
+      {{/timepointForMember}}
+    {{/loopEvents}}
+    </tr>
+  {{/rosterHistory}}
+  </tbody>
+</table>