{"id":770,"date":"2026-03-29T22:28:32","date_gmt":"2026-03-29T22:28:32","guid":{"rendered":"https:\/\/loja.clautecmaq.com.br\/?page_id=770"},"modified":"2026-04-05T14:16:57","modified_gmt":"2026-04-05T14:16:57","slug":"tabuleiro","status":"publish","type":"page","link":"https:\/\/loja.clautecmaq.com.br\/?page_id=770","title":{"rendered":"Tabuleiro"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"770\" class=\"elementor elementor-770\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20ef24b e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"20ef24b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37c665e elementor-widget elementor-widget-html\" data-id=\"37c665e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-app-compat.js\"><\/script>\r\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-database-compat.js\"><\/script>\r\n\r\n<div id=\"monopoly-wrapper\">\r\n    <div id=\"interface-fixa\">\r\n        <h2 style=\"margin:0; font-size: 20px;\">MONOPOLY MISSION\u00c1RIO<\/h2>\r\n        <div id=\"status-turno\">Iniciando sistema...<\/div>\r\n        \r\n        <div id=\"controles-selecao\" style=\"margin: 10px 0;\">\r\n            <button onclick=\"tentarEntrar(1)\" class=\"btn-p1\">Entrar J1 (Vermelho)<\/button>\r\n            <button onclick=\"tentarEntrar(2)\" class=\"btn-p2\">Entrar J2 (Azul)<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"controles-jogo\" style=\"display:none; margin: 10px 0;\">\r\n            <button onclick=\"rollDice()\" class=\"btn-roll\">\ud83c\udfb2 ROLAR DADO<\/button>\r\n            <div id=\"dice-display\">-<\/div>\r\n        <\/div>\r\n        <div id=\"money-display\">Saldo: $0<\/div>\r\n    <\/div>\r\n\r\n    <div id=\"zoom-container\">\r\n        <div id=\"canvas-tabuleiro\">\r\n            <img decoding=\"async\" id=\"img-tabuleiro\" src=\"https:\/\/loja.clautecmaq.com.br\/wp-content\/uploads\/2026\/04\/tabuleiro.jpg\" onclick=\"descobrirCoordenadas(event)\">\r\n            <div id=\"p1-token\" class=\"peao p1\"><\/div>\r\n            <div id=\"p2-token\" class=\"peao p2\"><\/div>\r\n        <\/div>\r\n        <div class=\"zoom-btns\">\r\n            <button onclick=\"mudarZoom(0.1)\">\u2795<\/button>\r\n            <button onclick=\"mudarZoom(-0.1)\">\u2796<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* Faz o jogo ocupar a tela inteira de ponta a ponta *\/\r\n    #monopoly-wrapper { \r\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        width: 100vw !important; \r\n        position: relative;\r\n        left: 50%;\r\n        right: 50%;\r\n        margin-left: -50vw !important;\r\n        margin-right: -50vw !important;\r\n        background: #1a1a1a;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    #interface-fixa { \r\n        background: white; \r\n        padding: 15px; \r\n        text-align: center; \r\n        border-bottom: 2px solid #ddd; \r\n        position: sticky; \r\n        top: 0; \r\n        z-index: 1000;\r\n        width: 100%;\r\n    }\r\n\r\n    #zoom-container { \r\n        width: 100%; \r\n        height: 85vh; \r\n        overflow: auto; \r\n        background: #333; \r\n        position: relative;\r\n        scrollbar-width: none; \r\n    }\r\n    #zoom-container::-webkit-scrollbar { display: none; }\r\n\r\n    #canvas-tabuleiro { \r\n        width: 2500px; \r\n        height: 2500px; \r\n        position: relative; \r\n        transform-origin: 0 0; \r\n        transform: scale(0.35); \r\n        transition: transform 0.2s ease;\r\n    }\r\n\r\n    #img-tabuleiro { \r\n        width: 2500px; \r\n        height: 2500px; \r\n        display: block; \r\n        user-select: none;\r\n    }\r\n\r\n    .peao { \r\n        width: 60px; \r\n        height: 60px; \r\n        border-radius: 50%; \r\n        position: absolute; \r\n        border: 5px solid white; \r\n        z-index: 99; \r\n        display: none; \r\n        transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n        box-shadow: 0 0 20px rgba(0,0,0,0.8);\r\n    }\r\n    \r\n    .p1 { background: #ff3333; } \r\n    .p2 { background: #3333ff; }\r\n\r\n    .zoom-btns { \r\n        position: fixed; \r\n        right: 20px; \r\n        bottom: 20px; \r\n        display: flex; \r\n        flex-direction: column; \r\n        gap: 10px; \r\n        z-index: 2000; \r\n    }\r\n    \r\n    .zoom-btns button { \r\n        width: 55px; \r\n        height: 55px; \r\n        border-radius: 50%; \r\n        border: none; \r\n        background: white; \r\n        font-size: 24px; \r\n        cursor: pointer; \r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.5); \r\n    }\r\n<\/style>\r\n\r\n<script>\r\n\/\/ USAR UM ESCOPO FECHADO PARA EVITAR ERROS DE \"J\u00c1 DECLARADO\"\r\n(function() {\r\n    const config = {\r\n        apiKey: \"AIzaSy...\", \r\n        authDomain: \"jogo-tabuleiro-30f50.firebaseapp.com\",\r\n        databaseURL: \"https:\/\/jogo-tabuleiro-30f50-default-rtdb.firebaseio.com\",\r\n        projectId: \"jogo-tabuleiro-30f50\"\r\n    };\r\n\r\n    let db;\r\n    let meuId = null;\r\n    let zoomAtual = 0.3;\r\n\r\n    const casasData = [\r\n        { nome: \"Partida\", x: 601, y: 606 }, { nome: \"Sel\u00eaucia\", x: 762, y: 597 },\r\n        { nome: \"Milagre\", x: 872, y: 596 }, { nome: \"Salamina\", x: 997, y: 598 },\r\n        { nome: \"Tributo\", x: 1132, y: 603 }, { nome: \"Navio Antioquia\", x: 1241, y: 604 },\r\n        { nome: \"Pafos\", x: 1365, y: 604 }, { nome: \"Desafio\", x: 1490, y: 600 },\r\n        { nome: \"Perge\", x: 1612, y: 603 }, { nome: \"At\u00e1lia\", x: 1733, y: 606 },\r\n        { nome: \"Pris\u00e3o\", x: 1888, y: 601 }, { nome: \"Antioquia Pisidia\", x: 1884, y: 751 },\r\n        { nome: \"Igreja Antioquia\", x: 1893, y: 874 }, { nome: \"Ic\u00f4nio\", x: 1889, y: 994 },\r\n        { nome: \"Listra\", x: 1889, y: 1113 }, { nome: \"Navio Tr\u00f4ade\", x: 1888, y: 1247 },\r\n        { nome: \"Derbe\", x: 1897, y: 1364 }, { nome: \"Milagre\", x: 1895, y: 1490 },\r\n        { nome: \"Tarso\", x: 1896, y: 1610 }, { nome: \"Tr\u00f4ade\", x: 1896, y: 1734 },\r\n        { nome: \"Descanso\", x: 1889, y: 1895 }, { nome: \"Filipos\", x: 1734, y: 1898 },\r\n        { nome: \"Desafio\", x: 1620, y: 1895 }, { nome: \"Tessal\u00f4nica\", x: 1489, y: 1896 },\r\n        { nome: \"Bereia\", x: 1362, y: 1903 }, { nome: \"Navio Ne\u00e1polis\", x: 1241, y: 1900 },\r\n        { nome: \"Atena\", x: 1120, y: 1897 }, { nome: \"Corinto\", x: 1000, y: 1900 },\r\n        { nome: \"Igreja Jerusal\u00e9m\", x: 875, y: 1898 }, { nome: \"C\u00eancreia\", x: 758, y: 1899 },\r\n        { nome: \"Pris\u00e3o\", x: 605, y: 1895 }, { nome: \"\u00c9feso\", x: 599, y: 1730 },\r\n        { nome: \"Mileto\", x: 596, y: 1609 }, { nome: \"Milagre\", x: 593, y: 1498 },\r\n        { nome: \"Esmirna\", x: 591, y: 1368 }, { nome: \"Navio Malta\", x: 590, y: 1249 },\r\n        { nome: \"Desafio\", x: 600, y: 1123 }, { nome: \"Malta\", x: 597, y: 1000 },\r\n        { nome: \"Tributo\", x: 594, y: 874 }, { nome: \"Roma\", x: 599, y: 756 }\r\n    ];\r\n\r\n    function inicializar() {\r\n        if (!window.firebase || !window.firebase.apps) {\r\n            setTimeout(inicializar, 500);\r\n            return;\r\n        }\r\n        if (!firebase.apps.length) firebase.initializeApp(config);\r\n        db = firebase.database();\r\n        document.getElementById(\"status-turno\").innerText = \"Conectado. Escolha seu pe\u00e3o!\";\r\n        conectarEventos();\r\n    }\r\n\r\n    function conectarEventos() {\r\n        db.ref(\"multiplayer\").on(\"value\", (snap) => {\r\n            const data = snap.val();\r\n            if (!data) return;\r\n            moverPeao(1, data.p1Pos || 0);\r\n            moverPeao(2, data.p2Pos || 0);\r\n            document.getElementById(\"status-turno\").innerText = data.turno === meuId ? \"SUA VEZ!\" : \"Vez do oponente...\";\r\n            document.getElementById(\"money-display\").innerText = `Saldo: $${meuId === 1 ? data.p1Money : data.p2Money}`;\r\n        });\r\n    }\r\n\r\n    window.tentarEntrar = (id) => {\r\n        meuId = id;\r\n        document.getElementById(\"controles-selecao\").style.display = \"none\";\r\n        document.getElementById(\"controles-jogo\").style.display = \"block\";\r\n    };\r\n\r\n    window.rollDice = () => {\r\n        db.ref(\"multiplayer\").once(\"value\").then(snap => {\r\n            const data = snap.val();\r\n            if (data.turno !== meuId) return;\r\n            const dado = Math.floor(Math.random() * 6) + 1;\r\n            document.getElementById(\"dice-display\").innerText = \"\ud83c\udfb2 \" + dado;\r\n            let posAntiga = meuId === 1 ? data.p1Pos : data.p2Pos;\r\n            let novaPos = (posAntiga + dado) % 40;\r\n            db.ref(\"multiplayer\").update({\r\n                [`p${meuId}Pos`]: novaPos,\r\n                turno: meuId === 1 ? 2 : 1\r\n            });\r\n        });\r\n    };\r\n\r\n   function moverPeao(player, num) {\r\n    const p = document.getElementById(`p${player}-token`);\r\n    const container = document.getElementById(\"zoom-container\");\r\n    const c = casasData[num] || casasData[0];\r\n\r\n    if (p && c) {\r\n        p.style.display = \"block\";\r\n        \r\n        \/\/ Coordenadas reais no mapa de 2500px\r\n        const posX = (player === 1 ? c.x - 25 : c.x + 15);\r\n        const posY = c.y - 25;\r\n        \r\n        p.style.left = posX + \"px\";\r\n        p.style.top = posY + \"px\";\r\n\r\n        \/\/ Segue o jogador ativo\r\n        \/\/ Se for o turno do jogador 1 e ele se mover, a c\u00e2mera foca nele\r\n        setTimeout(() => {\r\n            const centroX = (posX * zoomAtual) - (container.offsetWidth \/ 2);\r\n            const centroY = (posY * zoomAtual) - (container.offsetHeight \/ 2);\r\n\r\n            container.scrollTo({\r\n                top: centroY,\r\n                left: centroX,\r\n                behavior: 'smooth'\r\n            });\r\n        }, 300);\r\n    }\r\n}\r\n\r\n    window.mudarZoom = (d) => {\r\n        zoomAtual = Math.min(Math.max(0.15, zoomAtual + d), 1.2);\r\n        document.getElementById('canvas-tabuleiro').style.transform = `scale(${zoomAtual})`;\r\n    };\r\n\r\n    window.descobrirCoordenadas = (e) => {\r\n        const rect = document.getElementById('img-tabuleiro').getBoundingClientRect();\r\n        const x = Math.round((e.clientX - rect.left) \/ zoomAtual);\r\n        const y = Math.round((e.clientY - rect.top) \/ zoomAtual);\r\n        console.log(`x: ${x}, y: ${y}`);\r\n        alert(`Coordenada: x: ${x}, y: ${y}`);\r\n    };\r\n\r\n    inicializar();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MONOPOLY MISSION\u00c1RIO Iniciando sistema&#8230; Entrar J1 (Vermelho) Entrar J2 (Azul) \ud83c\udfb2 ROLAR DADO &#8211; Saldo: $0 \u2795 \u2796<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-770","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=\/wp\/v2\/pages\/770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=770"}],"version-history":[{"count":580,"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=\/wp\/v2\/pages\/770\/revisions"}],"predecessor-version":[{"id":1492,"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=\/wp\/v2\/pages\/770\/revisions\/1492"}],"wp:attachment":[{"href":"https:\/\/loja.clautecmaq.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}