{"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 class=\"tr-players\" id=\"trPlayers\"><\/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\">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                <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{border:1px solid #e5e7eb;background:#f9fafb;border-radius:14px;padding:14px 12px;font-size:16px;text-align:left}\n        .tr-toggle.is-on{background:#1a73e8;color:#fff;border-color:#1a73e8}\n        .tr-toggle .tr-badge{float:right;font-size:12px;opacity:.9}\n\n        .tr-search{width:100%;margin-top:10px;padding:12px;border:1px solid #e5e7eb;border-radius:14px;font-size:16px}\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        .tr-control{border:1px solid #f0f0f0;border-radius:14px;padding:10px;background:#fcfcfd}\n        .tr-label{display:block;font-size:12px;color:#555;margin-bottom:6px}\n        .tr-input{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px}\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{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0;background:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,.85))}\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    <\/style>\n\n    \n\n\n\n<p><\/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}]}}