team.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Team worksheet</title>
<link rel="icon" href="assets/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="wrap">

<header class="top">
  <div class="eyebrow" id="eyebrow">AD2102 · Problem 4B-5</div>
  <h1 id="title">Step-Down Method</h1>
  <p class="sub" id="blurb"></p>
  <div class="navlinks"><a href="index.html">Back to teams</a></div>
</header>

<div id="status" class="banner warn"><span class="dot"></span><span id="statustext">Connecting</span></div>

<section class="panel" id="teambar" style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
  <div>
    <div class="eyebrow">Your team</div>
    <div class="roster" id="roster" style="margin-top:6px"></div>
  </div>
  <button class="ghost" id="leave" style="margin-left:auto">Leave team</button>
</section>

<section class="panel" id="given"></section>

<h2 style="margin:30px 0 2px">Steps</h2>
<p class="note">Steps open one at a time.</p>
<div id="steps"></div>

<section class="panel">
  <h2>Worksheet</h2>
  <p class="note">Shared with your team. Names show who is in which box.</p>
  <div class="scroll">
  <table class="ws"><thead id="wshead"></thead><tbody id="wsbody"></tbody></table>
  </div>
</section>

<section class="panel final" id="final">
  <h2>Your totals</h2>
  <p class="note" id="totnote"></p>
  <div class="hero" id="hero"></div>
  <div id="ohrates"></div>
</section>

<div class="toolbar">
  <span class="prog" id="prog">Step 1 of 3</span>
  <button id="print">Print / PDF</button>
</div>

</div>

<script type="module">
import { DB } from "./assets/db.js";
import { mountExercise, renderGiven } from "./assets/exercise.js";
import { getProblem, money, plain, parseNum } from "./assets/data.js";
import { TEAM_NAMES } from "./assets/config.js";

var $ = function(id){ return document.getElementById(id); };
var params = new URLSearchParams(location.search);
var teamId = params.get("team") || DB.myTeam();
var observe = params.get("observe") === "1";
DB.observeOnly = observe;

/* storage-less browsers cannot carry the name across a navigation */
var urlName = (params.get("name") || "").trim().slice(0,40);
if(urlName && !DB.myName()) DB.rememberName(urlName);

if(!teamId || (!DB.myName() && !observe)){
  location.replace("index.html");
  throw new Error("redirecting to lobby");
}

var label = (TEAM_NAMES && TEAM_NAMES[teamId-1]) ? TEAM_NAMES[teamId-1] : "Team " + teamId;
$("title").textContent = label;

DB.onStatus(function(s){
  var b = $("status"), t = $("statustext");
  b.className = "banner " + (s.error ? "bad" : (s.connected ? "ok" : "warn"));
  b.querySelector(".dot").className = "dot" + (s.connected && !s.error ? " live" : "");
  if(s.error)                 t.textContent = s.error;
  else if(s.mode === "local") t.textContent = "Demo mode. This browser only.";
  else if(s.connected)        t.textContent = "Live";
  else                        t.textContent = "Connecting";
});

await DB.init();

/* Keep our seat. onDisconnect is per connection on a shared uid, so
   closing a second tab deletes the membership the first tab still needs,
   and the load-time join alone never notices. */
var seatTimer = null, claimed = false;

/* Opening this page is a deliberate claim on this team, so it wins over
   whatever another tab last stored, and DB.join drops the old team. */
async function claimSeat(){
  if(observe || !DB.myName() || DB.isBanned(DB.uid)) return;
  claimed = true;
  if(DB.teamOf(DB.uid) === String(teamId)) return;
  try{ await DB.join(teamId, DB.myName()); }catch(e){}
}

/* Afterwards we only put ourselves back if something dropped us, and we
   stand down if a newer tab has claimed a different team, so two tabs
   cannot re-add each other forever and leave one student on two rosters. */
function keepSeat(){
  if(!claimed || observe || !DB.myName() || DB.isBanned(DB.uid)) return;
  var stored = DB.storedTeam();
  if(stored && stored !== String(teamId)) return;
  if(DB.teamOf(DB.uid) === String(teamId)) return;
  if(seatTimer) return;
  seatTimer = setTimeout(async function(){
    seatTimer = null;
    if(DB.teamOf(DB.uid) === String(teamId)) return;
    try{ await DB.join(teamId, DB.myName()); }catch(e){}
  }, 400);
}
await claimSeat();
/* safety net: if nothing else is writing, no snapshot would arrive to
   tell us we had been dropped */
setInterval(keepSeat, 6000);

var ex = null, mountedFor = null, P = null;

function totalsFooter(){
  var hero = $("hero"); hero.innerHTML = "";
  var parts = P.parts || [{label:null}];
  var ops = P.depts.filter(function(d){ return !d.svc; });
  parts.forEach(function(part, pi){
    if(part.label){
      var h = document.createElement("div");
      h.className = "partlabel";
      h.textContent = part.label;
      hero.appendChild(h);
    }
    var row = document.createElement("div");
    row.className = "herorow";
    ops.forEach(function(d){
      var c = document.createElement("div"); c.className = "card";
      c.innerHTML = '<div class="t"></div><div class="v" id="f-'+pi+'-'+d.id+'">-</div>';
      c.querySelector(".t").textContent = d.name;
      row.appendChild(c);
    });
    var tc = document.createElement("div"); tc.className = "card";
    tc.style.background = "var(--accent-soft)"; tc.style.borderColor = "var(--accent)";
    tc.innerHTML = '<div class="t">Your total</div><div class="v" id="f-'+pi+'-tot">-</div>';
    row.appendChild(tc);
    hero.appendChild(row);
  });
}

function syncTotals(){
  var parts = P.parts || [{label:null}];
  var host = $("ohrates");
  host.innerHTML = "";
  var rates = {};

  parts.forEach(function(part, pi){
    P.depts.filter(function(d){ return !d.svc; }).forEach(function(d){
      var cell = document.getElementById("wsfinal-"+pi+"-"+d.id);
      var out  = document.getElementById("f-"+pi+"-"+d.id);
      if(cell && out) out.textContent = cell.textContent;
    });
    var t = document.getElementById("wsfinal-"+pi+"-total");
    var o = document.getElementById("f-"+pi+"-tot");
    if(t && o) o.textContent = t.textContent;

    if(!part.overheadRates) return;
    if(!host.firstChild){
      var h = document.createElement("h3");
      h.textContent = "Predetermined overhead rates";
      host.appendChild(h);
      var n = document.createElement("p"); n.className = "note";
      n.textContent = "Your department total divided by its activity base.";
      host.appendChild(n);
    }
    if(part.label){
      var pl = document.createElement("div");
      pl.className = "partlabel"; pl.textContent = part.label;
      host.appendChild(pl);
    }
    part.overheadRates.forEach(function(r){
      var cell = document.getElementById("wsfinal-"+pi+"-"+r.dept);
      var v = cell ? parseNum(cell.textContent) : NaN;
      (rates[r.dept] = rates[r.dept] || []).push(isNaN(v) ? null : v / r.base);
      var p2 = document.createElement("p");
      p2.style.margin = "0 0 6px";
      p2.innerHTML = "<b>" + r.label + "</b>: " +
        (isNaN(v) ? "-" : money(v) + " ÷ " + plain(r.base) + " " + r.baseLabel +
         " = <b>" + money(v / r.base, 2) + " " + r.unit + "</b>");
      host.appendChild(p2);
    });
  });

  /* both methods done: show what the choice of method actually cost */
  if(parts.length > 1 && P.compare){
    var lines = [];
    Object.keys(rates).forEach(function(d){
      var a = rates[d][0], b = rates[d][1];
      if(a == null || b == null) return;
      var dep = P.depts.filter(function(x){ return x.id === d; })[0];
      lines.push("<b>" + dep.name + "</b>: " + money(a,2) + " step-down against " +
                 money(b,2) + " direct, a gap of " + money(Math.abs(a-b),2) + ".");
    });
    if(lines.length){
      var h2 = document.createElement("h3");
      h2.textContent = "Compare";
      host.appendChild(h2);
      lines.forEach(function(l){
        var q = document.createElement("p"); q.style.margin = "0 0 6px"; q.innerHTML = l;
        host.appendChild(q);
      });
      var nn = document.createElement("p"); nn.className = "note";
      nn.style.marginTop = "10px"; nn.textContent = P.compare.note;
      host.appendChild(nn);
    }
  }
}

function mount(problemId){
  if(mountedFor === problemId) return;
  mountedFor = problemId;
  P = getProblem(problemId);
  if(ex) ex.destroy();

  document.title = label + " · " + P.label;
  $("eyebrow").textContent = "AD2102 · " + P.label + " · " + label;
  $("blurb").textContent = P.blurb;
  renderGiven($("given"), P);
  totalsFooter();
  $("totnote").textContent = "These are your numbers, not the answer. Each method should add back to "
    + money(P.grandTotal) + ".";

  ex = mountExercise({
    problem: P,
    worksheetBody: $("wsbody"),
    worksheetHead: $("wshead"),
    steps: $("steps"),
    progress: $("prog"),
    final: $("final"),
    teacherLed: true,
    sync: {
      onChange: function(stepId, payload){ DB.saveWork(teamId, P.id, stepId, payload); },
      onReady:  function(stepId, val){ DB.setReady(teamId, P.id, stepId, val); },
      onFocus:  function(field){ DB.setFocus(teamId, field, DB.myName()); },
      onBlur:   function(){ DB.setFocus(teamId, null); }
    },
    onTotals: syncTotals
  });
}

$("print").addEventListener("click", function(){ window.print(); });
if(observe){
  $("leave").style.display = "none";
  $("teambar").insertAdjacentHTML("afterbegin",
    '<div class="banner warn" style="width:100%;margin:0 0 4px"><span class="dot"></span>' +
    '<span>Previewing this team. You are not on their roster.</span></div>');
}
$("leave").addEventListener("click", async function(){
  await DB.leave(teamId);
  location.href = "index.html";
});

DB.onSession(function(snap){
  if(DB.isBanned(DB.uid)){ location.replace("index.html?kicked=1"); return; }

  mount(DB.currentProblem());

  keepSeat();

  var t = (snap.teams && snap.teams[teamId]) || {};
  ex.setUnlocked(DB.currentStep());
  ex.applyRemote((t.work || {})[P.id], (t.ready || {})[P.id]);

  var members = t.members || {};
  var r = $("roster");
  r.innerHTML = "";
  var uids = Object.keys(members);
  if(!uids.length){
    var e = document.createElement("span");
    e.className = "chip empty"; e.textContent = "just you";
    r.appendChild(e);
  }
  uids.forEach(function(u){
    var c = document.createElement("span");
    c.className = "chip" + (u === DB.uid ? " me" : "");
    c.textContent = members[u].name || "?";
    r.appendChild(c);
  });

  var focus = t.focus || {}, map = {};
  Object.keys(focus).forEach(function(u){
    if(u === DB.uid) return;
    var f = focus[u];
    if(!f || !f.field) return;
    (map[f.field] = map[f.field] || []).push(f.name || "?");
  });
  ex.setPresence(map);
});
</script>
</body>
</html>