{"id":2418,"date":"2026-07-05T15:21:45","date_gmt":"2026-07-05T15:21:45","guid":{"rendered":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/brackets\/"},"modified":"2026-08-07T07:03:56","modified_gmt":"2026-08-07T07:03:56","slug":"brackets","status":"publish","type":"page","link":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/brackets\/","title":{"rendered":"\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19"},"content":{"rendered":"\r\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">    <style>\n        .ruts-brackets-wrapper {\n            font-family: 'Sarabun', sans-serif;\n            background: #f8f9fa;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n        }\n        .ruts-bracket-filters {\n            display: flex;\n            gap: 10px;\n            margin-bottom: 20px;\n            flex-wrap: wrap;\n        }\n        .ruts-bracket-filters select, .ruts-bracket-filters button {\n            padding: 8px 12px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            font-size: 16px;\n        }\n        .ruts-bracket-filters button {\n            background: #ff5722;\n            color: #fff;\n            border: none;\n            cursor: pointer;\n            font-weight: bold;\n        }\n        .ruts-bracket-filters button:hover {\n            background: #e64a19;\n        }\n        \n        .ruts-bracket-container {\n            display: flex;\n            flex-direction: row;\n            overflow-x: auto;\n            padding: 20px 0;\n            gap: 40px;\n            min-height: 400px;\n        }\n        .ruts-bracket-col {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-around;\n            min-width: 220px;\n            position: relative;\n        }\n        .ruts-bracket-col-title {\n            text-align: center;\n            font-weight: bold;\n            margin-bottom: 20px;\n            color: #333;\n            background: #e0e0e0;\n            padding: 5px;\n            border-radius: 4px;\n        }\n        .ruts-bracket-match {\n            background: #fff;\n            border: 1px solid #ddd;\n            border-radius: 6px;\n            margin: 10px 0;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n            position: relative;\n            overflow: hidden;\n        }\n        .ruts-bracket-team {\n            display: flex;\n            justify-content: space-between;\n            padding: 8px 12px;\n            border-bottom: 1px solid #f0f0f0;\n            font-size: 0.9em;\n        }\n        .ruts-bracket-team:last-child {\n            border-bottom: none;\n        }\n        .ruts-bracket-score {\n            background: #eee;\n            padding: 2px 8px;\n            border-radius: 4px;\n            font-weight: bold;\n        }\n        .ruts-bracket-team.winner .ruts-bracket-score {\n            background: #4caf50;\n            color: white;\n        }\n        \n        \/* Basic connectors *\/\n        .ruts-bracket-match::after {\n            content: \"\";\n            position: absolute;\n            right: -20px;\n            top: 50%;\n            width: 20px;\n            height: 2px;\n            background: #ccc;\n        }\n        .ruts-bracket-col:last-child .ruts-bracket-match::after {\n            display: none;\n        }\n        .ruts-bracket-empty {\n            text-align: center;\n            color: #888;\n            padding: 40px;\n            width: 100%;\n        }\n    <\/style>\n\n    <div class=\"ruts-brackets-wrapper\">\n        <h3 style=\"margin-top:0; color:#ff5722;\">\ud83c\udfc6 \u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19 (Tournament Brackets)<\/h3>\n        \n        <div class=\"ruts-bracket-filters\">\n            <select id=\"ruts-bracket-sport\">\n                                    <option value=\"\">-- \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e35\u0e2c\u0e32 --<\/option>\n                                                    <option value=\"29\" >\n                        \u0e1a\u0e32\u0e2a\u0e40\u0e01\u0e15\u0e1a\u0e2d\u0e25 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"30\" >\n                        \u0e1a\u0e32\u0e2a\u0e40\u0e01\u0e15\u0e1a\u0e2d\u0e25 (\u0e2b\u0e0d\u0e34\u0e07)                    <\/option>\n                                    <option value=\"31\" >\n                        \u0e1f\u0e38\u0e15\u0e1a\u0e2d\u0e25 - \u0e1f\u0e38\u0e15\u0e1a\u0e2d\u0e25 11 \u0e04\u0e19 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"126\" >\n                        \u0e27\u0e2d\u0e25\u0e40\u0e25\u0e22\u0e4c\u0e1a\u0e2d\u0e25 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"127\" >\n                        \u0e27\u0e2d\u0e25\u0e40\u0e25\u0e22\u0e4c\u0e1a\u0e2d\u0e25 (\u0e2b\u0e0d\u0e34\u0e07)                    <\/option>\n                                    <option value=\"43\" >\n                        \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d - \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d \u0e17\u0e35\u0e21\u0e0a\u0e38\u0e14 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"45\" >\n                        \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d - \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d \u0e17\u0e35\u0e21\u0e40\u0e14\u0e35\u0e48\u0e22\u0e27 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"46\" >\n                        \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d - \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d \u0e17\u0e35\u0e21\u0e40\u0e14\u0e35\u0e48\u0e22\u0e27 (\u0e2b\u0e0d\u0e34\u0e07)                    <\/option>\n                                    <option value=\"47\" >\n                        \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d - \u0e40\u0e0b\u0e1b\u0e31\u0e01\u0e15\u0e30\u0e01\u0e23\u0e49\u0e2d \u0e17\u0e35\u0e21\u0e04\u0e39\u0e48 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"92\" >\n                        \u0e1f\u0e38\u0e15\u0e0b\u0e2d\u0e25 (\u0e0a\u0e32\u0e22)                    <\/option>\n                                    <option value=\"93\" >\n                        \u0e1f\u0e38\u0e15\u0e0b\u0e2d\u0e25 (\u0e2b\u0e0d\u0e34\u0e07)                    <\/option>\n                            <\/select>\n            <button id=\"ruts-bracket-load-btn\">\u0e14\u0e39\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19<\/button>\n        <\/div>\n\n        <div id=\"ruts-bracket-view\">\n            <div class=\"ruts-bracket-empty\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e35\u0e2c\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19<\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    jQuery(document).ready(function($) {\n        if ($('#ruts-bracket-sport').val()) {\n            setTimeout(function() {\n                $('#ruts-bracket-load-btn').trigger('click');\n            }, 100);\n        }\n\n        $('#ruts-bracket-load-btn').on('click', function() {\n            let sub_id = $('#ruts-bracket-sport').val();\n            if(!sub_id) {\n                Swal.fire('\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19', '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e35\u0e2c\u0e32\u0e01\u0e48\u0e2d\u0e19\u0e04\u0e23\u0e31\u0e1a', 'warning');\n                return;\n            }\n\n            $('#ruts-bracket-view').html('<div class=\"ruts-bracket-empty\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/div>');\n\n            $.post(ruts_ajax.ajax_url, {\n                action: 'ruts_get_bracket_data',\n                nonce: ruts_ajax.nonce,\n                sub_id: sub_id\n            }, function(response) {\n                if(response.success) {\n                    renderBracket(response.data);\n                } else {\n                    $('#ruts-bracket-view').html('<div class=\"ruts-bracket-empty\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e35\u0e2c\u0e32\u0e19\u0e35\u0e49<\/div>');\n                }\n            }).fail(function() {\n                $('#ruts-bracket-view').html('<div class=\"ruts-bracket-empty\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/div>');\n            });\n        });\n\n        function renderBracket(data) {\n            if((!data.quarter || data.quarter.length == 0) && \n               (!data.semi || data.semi.length == 0) && \n               (!data.final || data.final.length == 0)) {\n                $('#ruts-bracket-view').html('<div class=\"ruts-bracket-empty\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e35\u0e2c\u0e32\u0e19\u0e35\u0e49<\/div>');\n                return;\n            }\n\n            let html = '<div class=\"ruts-bracket-container\">';\n            \n            \/\/ Quarter Finals\n            if(data.quarter && data.quarter.length > 0) {\n                html += '<div class=\"ruts-bracket-col\">';\n                html += '<div class=\"ruts-bracket-col-title\">\u0e23\u0e2d\u0e1a 8 \u0e17\u0e35\u0e21<\/div>';\n                html += renderMatches(data.quarter);\n                html += '<\/div>';\n            }\n\n            \/\/ Semi Finals\n            if(data.semi && data.semi.length > 0) {\n                html += '<div class=\"ruts-bracket-col\">';\n                html += '<div class=\"ruts-bracket-col-title\">\u0e23\u0e2d\u0e1a\u0e23\u0e2d\u0e07\u0e0a\u0e19\u0e30\u0e40\u0e25\u0e34\u0e28<\/div>';\n                html += renderMatches(data.semi);\n                html += '<\/div>';\n            }\n\n            \/\/ Finals\n            if(data.final && data.final.length > 0) {\n                html += '<div class=\"ruts-bracket-col\">';\n                html += '<div class=\"ruts-bracket-col-title\">\u0e23\u0e2d\u0e1a\u0e0a\u0e34\u0e07\u0e0a\u0e19\u0e30\u0e40\u0e25\u0e34\u0e28<\/div>';\n                html += renderMatches(data.final);\n                html += '<\/div>';\n            }\n\n            html += '<\/div>';\n            $('#ruts-bracket-view').html(html);\n        }\n\n        function renderMatches(matches) {\n            let html = '';\n            matches.forEach(m => {\n                let score1 = m.score_one !== '' ? parseInt(m.score_one) : null;\n                let score2 = m.score_two !== '' ? parseInt(m.score_two) : null;\n                \n                let t1_class = (score1 !== null && score2 !== null && score1 > score2) ? 'winner' : '';\n                let t2_class = (score1 !== null && score2 !== null && score2 > score1) ? 'winner' : '';\n\n                let team1 = m.team1 ? m.team1 : '\u0e23\u0e2d\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19';\n                let team2 = m.team2 ? m.team2 : '\u0e23\u0e2d\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19';\n                \n                let s1_display = m.score_one !== '' ? m.score_one : '-';\n                let s2_display = m.score_two !== '' ? m.score_two : '-';\n\n                html += `\n                <div class=\"ruts-bracket-match\">\n                    <div class=\"ruts-bracket-team ${t1_class}\">\n                        <span class=\"ruts-bracket-name\">${team1}<\/span>\n                        <span class=\"ruts-bracket-score\">${s1_display}<\/span>\n                    <\/div>\n                    <div class=\"ruts-bracket-team ${t2_class}\">\n                        <span class=\"ruts-bracket-name\">${team2}<\/span>\n                        <span class=\"ruts-bracket-score\">${s2_display}<\/span>\n                    <\/div>\n                <\/div>\n                `;\n            });\n            return html;\n        }\n    });\n    <\/script>\n    \n<\/div><\/div>\r\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":{"_acf_changed":false,"footnotes":""},"class_list":["post-2418","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/pages\/2418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/comments?post=2418"}],"version-history":[{"count":1,"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/pages\/2418\/revisions"}],"predecessor-version":[{"id":3092,"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/pages\/2418\/revisions\/3092"}],"wp:attachment":[{"href":"https:\/\/srivijayagames.rmutsv.ac.th\/17\/wp-json\/wp\/v2\/media?parent=2418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}