{"id":7,"date":"2026-05-19T11:16:05","date_gmt":"2026-05-19T18:16:05","guid":{"rendered":"https:\/\/games.deepcovetennisclub.ca\/?page_id=7"},"modified":"2026-05-19T11:33:53","modified_gmt":"2026-05-19T18:33:53","slug":"organize-the-match","status":"publish","type":"page","link":"https:\/\/games.deepcovetennisclub.ca\/","title":{"rendered":"Organize the Match!"},"content":{"rendered":"    <div id=\"trApp\" class=\"tr-app\" data-storage-key=\"tr:v2:state\">\n        <header class=\"tr-header\">\n            <div class=\"tr-title\">\n                <div class=\"tr-emoji\">\ud83c\udfbe<\/div>\n                <div>\n                    <div class=\"tr-h1\">Tennis Round Generator<\/div>\n                    <div class=\"tr-sub\" id=\"trSub\">Ready<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"tr-pillbar\">\n                <div class=\"tr-pill\" id=\"trPillPlayers\">Players: 0<\/div>\n                <div class=\"tr-pill\" id=\"trPillCourts\">Courts: 0<\/div>\n                <div class=\"tr-pill\" id=\"trPillGames\">Games: 0<\/div>\n            <\/div>\n        <\/header>\n\n        <section class=\"tr-card\">\n            <div class=\"tr-card-head\">\n                <h3>Courts available<\/h3>\n                <div class=\"tr-mini-actions\">\n                    <button class=\"tr-mini\" type=\"button\" data-action=\"courts-all\">All<\/button>\n                    <button class=\"tr-mini\" type=\"button\" data-action=\"courts-none\">None<\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"tr-courts\" id=\"trCourts\">\n                                    <button type=\"button\" class=\"tr-toggle\" data-kind=\"court\" data-value=\"1\">\n                        Court 1                    <\/button>\n                                    <button type=\"button\" class=\"tr-toggle\" data-kind=\"court\" data-value=\"2\">\n                        Court 2                    <\/button>\n                                    <button type=\"button\" class=\"tr-toggle\" data-kind=\"court\" data-value=\"3\">\n                        Court 3                    <\/button>\n                                    <button type=\"button\" class=\"tr-toggle\" data-kind=\"court\" data-value=\"4\">\n                        Court 4                    <\/button>\n                            <\/div>\n        <\/section>\n\n        <section class=\"tr-card\">\n            <div class=\"tr-card-head\">\n                <h3>Players checked in<\/h3>\n                <div class=\"tr-mini-actions\">\n                    <button class=\"tr-mini\" type=\"button\" data-action=\"players-all\">All<\/button>\n                    <button class=\"tr-mini\" type=\"button\" data-action=\"players-none\">None<\/button>\n                <\/div>\n            <\/div>\n\n            <input class=\"tr-search\" id=\"trSearch\" type=\"search\" placeholder=\"Search players\u2026\" autocomplete=\"off\">\n\n            <div id=\"trPlayers\" class=\"tr-players\"><\/div>\n            <div id=\"trPlayerCount\" class=\"tr-player-count\">Selected: 0 \/ 0 players<\/div>\n        <\/section>\n\n        <section class=\"tr-card\">\n            <div class=\"tr-card-head\">\n                <h3>Round controls<\/h3>\n            <\/div>\n\n            <div class=\"tr-controls\">\n                <div class=\"tr-control\">\n                    <label class=\"tr-label\" for=\"trMinutes\">Round length (minutes)<\/label>\n                    <input class=\"tr-input\" id=\"trMinutes\" type=\"number\" min=\"5\" max=\"120\" step=\"5\" value=\"30\">\n                <\/div>\n\n                <div class=\"tr-control\">\n                    <label class=\"tr-label\">Round<\/label>\n                    <div class=\"tr-roundline\">\n                        <div class=\"tr-roundnum\" id=\"trRoundNum\">0<\/div>\n                        <div class=\"tr-roundmeta\" id=\"trRoundMeta\">Not started<\/div>\n                    <\/div>\n                <\/div>\n\n\t\t\t\t<div class=\"tr-control\">\n  \t\t\t\t\t<label class=\"tr-label\">Pairing Mode<\/label>\n\n  \t\t\t\t\t<div class=\"tr-mode-toggle\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t  type=\"button\"\n\t\t\t\t\t\t  class=\"tr-mode-btn is-on\"\n\t\t\t\t\t\t  id=\"trModeBalanced\"\n\t\t\t\t\t\t  data-mode=\"balanced\">\n\t\t\t\t\t\t  Balanced\n\t\t\t\t\t\t<\/button>\n\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t  type=\"button\"\n\t\t\t\t\t\t  class=\"tr-mode-btn\"\n\t\t\t\t\t\t  id=\"trModeCompetitive\"\n\t\t\t\t\t\t  data-mode=\"competitive\">\n\t\t\t\t\t\t  Competitive\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t  <\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\n                <div class=\"tr-timer\" id=\"trTimer\">\n                    <div class=\"tr-timer-label\">Next round in<\/div>\n                    <div class=\"tr-timer-time\" id=\"trCountdown\">\u2014:\u2014<\/div>\n                    <div class=\"tr-timer-actions\">\n                        <button class=\"tr-mini\" type=\"button\" data-action=\"timer-start\">Start<\/button>\n                        <button class=\"tr-mini\" type=\"button\" data-action=\"timer-pause\">Pause<\/button>\n                        <button class=\"tr-mini\" type=\"button\" data-action=\"timer-reset\">Reset<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section class=\"tr-card\">\n            <div class=\"tr-card-head\">\n                <h3>Matches<\/h3>\n                <div class=\"tr-mini-actions\">\n                    <button class=\"tr-mini\" type=\"button\" data-action=\"undo\">Undo last round<\/button>\n                <\/div>\n            <\/div>\n\n            <div id=\"trMatches\" class=\"tr-matches\"><\/div>\n            <div id=\"trSitouts\" class=\"tr-sitouts\" style=\"display:none;\"><\/div>\n        <\/section>\n\n        <section class=\"tr-card\">\n            <div class=\"tr-card-head\">\n                <h3>Recent rounds<\/h3>\n                <div class=\"tr-mini-actions\">\n                    <button class=\"tr-mini tr-danger\" type=\"button\" data-action=\"reset-event\">Reset event<\/button>\n                <\/div>\n            <\/div>\n\n            <div id=\"trHistory\" class=\"tr-history\"><\/div>\n        <\/section>\n\n        <footer class=\"tr-sticky\">\n            <button type=\"button\" class=\"tr-btn tr-secondary\" data-action=\"clear-output\">Clear output<\/button>\n            <button type=\"button\" class=\"tr-btn tr-primary\" data-action=\"generate\">Generate round<\/button>\n        <\/footer>\n    <\/div>\n\n    <style>\n        .tr-app{max-width:760px;margin:0 auto;padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}\n        .tr-header{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}\n        .tr-title{display:flex;gap:10px;align-items:center}\n        .tr-emoji{font-size:28px}\n        .tr-h1{font-size:20px;font-weight:800;line-height:1.1}\n        .tr-sub{font-size:13px;color:#555}\n\n        .tr-pillbar{display:flex;gap:8px;flex-wrap:wrap}\n        .tr-pill{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:13px}\n\n        .tr-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin:12px 0}\n        .tr-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}\n        .tr-card h3{margin:0;font-size:16px}\n        .tr-mini-actions{display:flex;gap:8px;flex-wrap:wrap}\n        .tr-mini{border:1px solid #e5e7eb;background:#f9fafb;border-radius:10px;padding:8px 10px;font-size:13px}\n        .tr-mini:active{transform:scale(0.99)}\n        .tr-danger{background:#fff5f5;border-color:#fecaca}\n\n        .tr-courts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}\n        .tr-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}\n        @media (max-width:560px){\n            .tr-courts,.tr-players{grid-template-columns:1fr}\n        }\n\n        .tr-toggle{\n            display:flex;\n            justify-content:space-between;\n            align-items:center;\n            border:1px solid #e5e7eb;\n            background:#f9fafb;\n            border-radius:14px;\n            padding:12px 14px;\n            font-size:16px;\n            text-align:left;\n            gap:8px;\n        }\n\n        .tr-toggle.is-on{\n            background:#1a73e8;\n            color:#fff;\n            border-color:#1a73e8;\n        }\n\n        .tr-name{flex:1}\n\n        .tr-right{\n            display:flex;\n            align-items:center;\n            gap:6px;\n        }\n\n        .tr-skill {\n  \t\t\tdisplay: inline-block;\n  \t\t\twidth: 12px;\n  \t\t\theight: 12px;\n  \t\t\tborder-radius: 50%;\n\t\t}\n\t\t\n\t\t.tr-skill.L { background: #16a34a; }  \/* green *\/\n\t\t.tr-skill.M {\n  \t\t\tbackground: #facc15;       \/* yellow *\/\n  \t\t\tborder: 1px solid #ca8a04; \/* darker edge so it stands out *\/\n\t\t\t}\n\t\t.tr-skill.S { background: #dc2626; }  \/* red *\/\n\n        .tr-badge{\n            font-size:12px;\n            padding:2px 8px;\n            border-radius:999px;\n            background:rgba(255,255,255,0.25);\n            border:1px solid rgba(255,255,255,0.35);\n        }\n\n        .tr-toggle.is-priority{\n            border-color:#f59e0b;\n            box-shadow:0 0 0 2px rgba(245,158,11,0.18);\n        }\n\n        .tr-toggle.is-priority:not(.is-on){\n            background:#fffbeb;\n        }\n\n        .tr-search{\n            width:100%;\n            margin-top:10px;\n            padding:12px;\n            border:1px solid #e5e7eb;\n            border-radius:14px;\n            font-size:16px;\n        }\n\n        .tr-player-count{\n            margin-top:10px;\n            font-size:14px;\n            color:#444;\n            text-align:center;\n            font-weight:600;\n        }\n\n        .tr-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}\n        @media (max-width:560px){.tr-controls{grid-template-columns:1fr}}\n\n        .tr-control{\n            border:1px solid #f0f0f0;\n            border-radius:14px;\n            padding:10px;\n            background:#fcfcfd;\n            display:flex;\n            flex-direction:column;\n            align-items:flex-start;\n        }\n\n        .tr-label{display:block;font-size:12px;color:#555;margin-bottom:6px}\n        .tr-input{\n            width:auto;\n            max-width:120px;\n            padding:10px;\n            border:1px solid #e5e7eb;\n            border-radius:12px;\n            font-size:16px;\n        }\n\n        .tr-roundline{display:flex;gap:10px;align-items:center}\n        .tr-roundnum{font-size:28px;font-weight:900;min-width:28px}\n        .tr-roundmeta{font-size:13px;color:#555}\n\n        .tr-timer{border:1px solid #e5e7eb;border-radius:14px;padding:10px;background:#f9fafb;grid-column:1\/-1}\n        .tr-timer-label{font-size:12px;color:#555}\n        .tr-timer-time{font-size:28px;font-weight:900;margin:4px 0}\n        .tr-timer-actions{display:flex;gap:8px;flex-wrap:wrap}\n\n        .tr-matches{display:flex;flex-direction:column;gap:10px;margin-top:10px}\n        .tr-match{border:1px solid #e5e7eb;border-radius:14px;padding:12px}\n        .tr-match-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}\n        .tr-match-title{font-weight:800}\n        .tr-match-body{font-size:16px;line-height:1.35}\n        .tr-vs{opacity:.75;margin:4px 0}\n\n        .tr-sitouts{margin-top:12px;border:1px solid #fde68a;background:#fffbeb;border-radius:14px;padding:10px}\n\n        .tr-history{display:flex;flex-direction:column;gap:10px;margin-top:10px}\n        details.tr-h-item{border:1px solid #e5e7eb;border-radius:14px;padding:10px;background:#fff}\n        details.tr-h-item summary{cursor:pointer;font-weight:700}\n\n        .tr-sticky{\n            position:sticky;\n            bottom:0;\n            display:grid;\n            grid-template-columns:1fr 1fr;\n            gap:10px;\n            padding:10px 0;\n            background:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,.85));\n        }\n\n        .tr-btn{border:none;border-radius:14px;padding:14px 12px;font-size:17px}\n        .tr-primary{background:#1a73e8;color:#fff}\n        .tr-secondary{background:#eef2ff;color:#111}\n        .tr-btn:active{transform:scale(0.99)}\n\t\t\n\t\t.tr-mode-toggle {\n\t\t  display: flex;\n\t\t  gap: 8px;\n\t\t  width: 100%;\n\t\t}\n\n\t\t.tr-mode-btn {\n\t\t  flex: 1;\n\t\t  border: 1px solid #d1d5db;\n\t\t  background: #f9fafb;\n\t\t  border-radius: 12px;\n\t\t  padding: 16px 12px;\n\t\t  min-height: 52px;\n\t\t  \n\t\t  font-size: 16px;\n\t\t  font-weight: 600;\n\t\t  \n\t\t  cursor: pointer;\n\t\t}\n\n\t\t.tr-mode-btn.is-on {\n\t\t  background: #1a73e8;\n\t\t  color: white;\n\t\t  border-color: #1a73e8;\n\t\t}\n    <\/style>\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/games.deepcovetennisclub.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}