Skip to content

Commit

Permalink
feat(sidebar/credits): was created credits dialog with template, adde…
Browse files Browse the repository at this point in the history
…d translates, style and links
  • Loading branch information
SouOWendel committed Mar 30, 2024
1 parent e91bafa commit 32f12db
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 77 deletions.
34 changes: 29 additions & 5 deletions module/ordemparanormal_fvtt.mjs
Expand Up @@ -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();
Expand All @@ -339,13 +339,18 @@ Hooks.on('renderSettings', (app, [html]) => {
<h2>${game.i18n.localize('WORLD.GameSystem')}</h2>
<ul class="links">
<li>
<a href="https://github.com/foundryvtt/dnd5e/wiki" target="_blank">
<a class="credits" href="javascript:void(0)" target="_blank">
${game.i18n.localize('ordemparanormal.Credits')}</a>
</li>
<li>
<a href="https://discord.com/channels/170995199584108546/670336046164213761" target="_blank">
<a href="https://discord.gg/G8AwJwJXa5" target="_blank">
${game.i18n.localize('ordemparanormal.Discord')}
</a>
</li>
<li>
<a href="href="javascript:void(0)" target="_blank" data-tooltip="ordemparanormal.soon">
${game.i18n.localize('ordemparanormal.Wiki')}
</a>
</li>
</ul>
`;
Expand All @@ -354,9 +359,28 @@ Hooks.on('renderSettings', (app, [html]) => {
const badge = document.createElement('div');
badge.classList.add('op', 'system-badge');
badge.innerHTML = `
<img src="systems/ordemparanormal/media/op-logo.png" data-tooltip="${game.system.title}" alt="${game.system.title}">
<span class="system-info">Um sistema não-oficial na versão <strong>${game.system.version}</strong> </span>
<img src="systems/ordemparanormal/media/op-logo.png"
data-tooltip="${game.i18n.localize('ordemparanormal.op')}" alt="${game.system.title}">
<span class="system-info">${game.i18n.localize('ordemparanormal.sidebar.updateNotes')}
<strong>${game.system.version}</strong> </span>
<p><span class="system-info" data-tooltip="${game.i18n.localize('ordemparanormal.sidebar.discord')}">
<i class="fa-brands fa-discord"></i> souowendel</span>&nbsp;&nbsp;
<a href="https://twitter.com/EuSouOWendel" target="_blank"
data-tooltip="${game.i18n.localize('ordemparanormal.sidebar.twitter')}">
<span class="system-info"><i class="fa-brands fa-twitter"></i> eusouowendel</span></p>
`;
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);
});
});
170 changes: 101 additions & 69 deletions 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;
}
}
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;
}
}
17 changes: 14 additions & 3 deletions scss/components/_sidebar.scss
Expand Up @@ -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);
Expand All @@ -23,10 +31,13 @@
.links {
list-style: none;
display: flex;
gap: 5px;
gap: 8px;
margin: 0;
}

h2 {
background-color: initial;
border: initial;
margin: 0;
}
}
Expand Down
36 changes: 36 additions & 0 deletions templates/dialog/credits.html
@@ -0,0 +1,36 @@
<div class="dialog-credits">
<p>
A seguir a lista de algumas das pessoas que participaram do desenvolvimento do sistema para o Ordem Paranormal RPG no
Foundry Virtual Tabletop.
</p>
<p>
Não deixando de citar os devidos créditos a
<a href="https://twitter.com/cellbit" target="_blank">Rafael Lange (Cellbit)</a> e toda a equipe da
<a href="https://jamboeditora.com.br/" target="_blank">Jambô</a> pelo desenvolvimento do universo e livro de regras.
</p>
<ul>
<li>
<strong
>Wendel Henrique (<i class="fa-brands fa-twitter"></i>
<a href="https://twitter.com/EuSouOWendel" target="_blank">souowendel</a>): </strong
>principal programador, diagramador e desenvolvedor do sistema de Ordem Paranormal RPG para o Foundry;
</li>
</ul>
<h4><strong>Colaboradores</strong></h4>
<ul>
<li>
<strong
>Jojo (<i class="fa-brands fa-twitter"></i>
<a href="https://twitter.com/ciconiaborns" target="_blank">ciconiaborns</a>): </strong
>tradução parcial do sistema para o Inglês;
</li>
<li>
<strong>Marcos Miranda (<i class="fa-brands fa-discord"></i> .nyazi): </strong>vetorização e criação de ícones para
compêndio.
</li>
<i
>Alguns ícones do sistema foram feitos por Delapouite e Lorc. Disponíveis em
<a href="https://game-icons.net/" target="_blank">game-icons</a>.</i
>
</ul>
</div>

0 comments on commit 32f12db

Please sign in to comment.