From 32f12dbcbaae6e07d6a6da0f8a9fa806f039d9b8 Mon Sep 17 00:00:00 2001 From: "Wendel Henrique (SouOWendel)" Date: Sat, 30 Mar 2024 19:03:04 -0300 Subject: [PATCH] feat(sidebar/credits): was created credits dialog with template, added translates, style and links --- module/ordemparanormal_fvtt.mjs | 34 ++++++- scss/components/_dialog.scss | 170 +++++++++++++++++++------------- scss/components/_sidebar.scss | 17 +++- templates/dialog/credits.html | 36 +++++++ 4 files changed, 180 insertions(+), 77 deletions(-) create mode 100644 templates/dialog/credits.html diff --git a/module/ordemparanormal_fvtt.mjs b/module/ordemparanormal_fvtt.mjs index 89e42bb..b18d82a 100644 --- a/module/ordemparanormal_fvtt.mjs +++ b/module/ordemparanormal_fvtt.mjs @@ -328,7 +328,7 @@ Hooks.on('preCreateActor', function (actor, data) { } }); -Hooks.on('renderSettings', (app, [html]) => { +Hooks.on('renderSettings', async (app, [html]) => { const details = html.querySelector('#game-details'); const pip = details.querySelector('.system-info .update'); details.querySelector('.system').remove(); @@ -339,13 +339,18 @@ Hooks.on('renderSettings', (app, [html]) => {

${game.i18n.localize('WORLD.GameSystem')}

`; @@ -354,9 +359,28 @@ Hooks.on('renderSettings', (app, [html]) => { const badge = document.createElement('div'); badge.classList.add('op', 'system-badge'); badge.innerHTML = ` - ${game.system.title} - Um sistema não-oficial na versão ${game.system.version} + ${game.system.title} + ${game.i18n.localize('ordemparanormal.sidebar.updateNotes')} + ${game.system.version} +

+ souowendel   + + eusouowendel

`; if (pip) badge.querySelector('.system-info').insertAdjacentElement('beforeend', pip); heading.insertAdjacentElement('afterend', badge); + + const credits = html.querySelector('.credits'); + credits.addEventListener('click', async function (ev) { + const content = await renderTemplate('systems/ordemparanormal/templates/dialog/credits.html'); + new Dialog({ + title: 'Créditos no Desenvolvimento do Sistema', + content: content, + buttons: {}, + render: (html) => console.log('Janela (dialog) de créditos foi renderizada corretamente.'), + close: (html) => console.log('Janela (dialog) foi fechada com sucesso!'), + }).render(true); + }); }); diff --git a/scss/components/_dialog.scss b/scss/components/_dialog.scss index b586a25..7bd7bef 100644 --- a/scss/components/_dialog.scss +++ b/scss/components/_dialog.scss @@ -1,94 +1,126 @@ .teste { - background-color: black; + background-color: black; } .no-scroll { - overflow: hidden !important; + overflow: hidden !important; } .scroll { - overflow: auto !important; + overflow: auto !important; } .no-orange-hyperlink { - color: initial; - text-decoration: none; + color: initial; + text-decoration: none; } .content-dialog { - height: 500px; - padding: 0 2px; - line-height: 1.3; - - li { - padding-top: 2px; - padding-bottom: 2px; - } - - a { - &:hover, - &:focus { - color: #000; - text-shadow: 0 0 10px rgb(255, 255, 255); - cursor: pointer; - } - - h1, h2, h3, h4 { - border: 0; - text-decoration: none; - font-weight: 700; - } - - .discord { - color: white; - font-family: 'PT Sans', 'Roboto', 'sans-serif'; - - p { - font-size: medium; - font-weight: 700; - } - } - } + height: 500px; + padding: 0 2px; + line-height: 1.3; + + li { + padding-top: 2px; + padding-bottom: 2px; + } + + a { + &:hover, + &:focus { + color: #000; + text-shadow: 0 0 10px rgb(255, 255, 255); + cursor: pointer; + } + + h1, + h2, + h3, + h4 { + border: 0; + text-decoration: none; + font-weight: 700; + } + + .discord { + color: white; + font-family: 'PT Sans', 'Roboto', 'sans-serif'; + + p { + font-size: medium; + font-weight: 700; + } + } + } } .content-dialog::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.13); - border: 0; + background: rgba(0, 0, 0, 0.13); + border: 0; } .announcement { - position: relative; - width: 100%; - height: 156px; - margin: 8px 0; - border-radius: 5px; - display: flex; - - background: { - position: center !important; - size: 100% 100% !important; - repeat: no-repeat !important; - } - - p { - width: 100%; - } + position: relative; + width: 100%; + height: 156px; + margin: 8px 0; + border-radius: 5px; + display: flex; + + background: { + position: center !important; + size: 100% 100% !important; + repeat: no-repeat !important; + } + + p { + width: 100%; + } } .content-dialog a:first-child .adverts { - margin: 0; + margin: 0; } .dialog-buttons { - display: flex; - - button { - height: 36px; - opacity: .4; - transition: all 0.2s ease-in; - }; - - button:hover { - opacity: 1; - } -} \ No newline at end of file + display: flex; + + button { + height: 36px; + opacity: 0.4; + transition: all 0.2s ease-in; + } + + button:hover { + opacity: 1; + } +} + +.dialog-credits { + li { + padding-top: 2px; + padding-bottom: 2px; + } + + a { + &:hover, + &:focus { + color: #000; + text-shadow: 0 0 10px rgb(255, 255, 255); + cursor: pointer; + } + + h1, + h2, + h3, + h4 { + border: 0; + text-decoration: none; + font-weight: 700; + } + } + + a[href] { + color: #464646; + } +} diff --git a/scss/components/_sidebar.scss b/scss/components/_sidebar.scss index a57c97e..b5374fd 100644 --- a/scss/components/_sidebar.scss +++ b/scss/components/_sidebar.scss @@ -4,16 +4,24 @@ flex-direction: column; align-items: center; gap: 0.5rem; - padding: 0.25rem; img { border: 0; } + + p { + margin: 0; + } + + a[href] { + color: var(--color-text-light-highlight); + text-decoration: none; + } } &.sidebar-heading { margin: 6px 0; - padding: 3px 8px; + margin-bottom: 0 !important; border-top: 1px solid var(--color-border-dark-4); border-bottom: 1px solid var(--color-border-dark-4); background: rgba(255, 255, 255, 0.1); @@ -23,10 +31,13 @@ .links { list-style: none; display: flex; - gap: 5px; + gap: 8px; + margin: 0; } h2 { + background-color: initial; + border: initial; margin: 0; } } diff --git a/templates/dialog/credits.html b/templates/dialog/credits.html new file mode 100644 index 0000000..d143a01 --- /dev/null +++ b/templates/dialog/credits.html @@ -0,0 +1,36 @@ +
+

+ A seguir a lista de algumas das pessoas que participaram do desenvolvimento do sistema para o Ordem Paranormal RPG no + Foundry Virtual Tabletop. +

+

+ Não deixando de citar os devidos créditos a + Rafael Lange (Cellbit) e toda a equipe da + Jambô pelo desenvolvimento do universo e livro de regras. +

+ +

Colaboradores

+ +