feat: messages Sous tension/Opposé stylisés (template chat-tension.hbs)
Affiche les scores du joueur et du MJ/opposant côte à côte avec un séparateur VS, résultat coloré, badges et icônes.
This commit is contained in:
@@ -2997,6 +2997,79 @@ i.fvtt-hamalron {
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
|
||||
}
|
||||
}
|
||||
.tension-roll {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border: 1px solid #e94560;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tension-roll .tension-header {
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
background: rgba(233, 69, 96, 0.15);
|
||||
border-bottom: 1px solid rgba(233, 69, 96, 0.3);
|
||||
}
|
||||
.tension-roll .tension-header .tension-badge {
|
||||
color: #e94560;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.tension-roll .tension-players {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.tension-roll .tension-players .tension-side {
|
||||
text-align: center;
|
||||
}
|
||||
.tension-roll .tension-players .tension-side .tension-side-label {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.tension-roll .tension-players .tension-side .tension-side-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #f0e6d3;
|
||||
}
|
||||
.tension-roll .tension-players .tension-side .tension-side-name {
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.tension-roll .tension-players .tension-side.tension-winner .tension-side-value {
|
||||
color: #4caf50;
|
||||
}
|
||||
.tension-roll .tension-players .tension-vs {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #e94560;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.tension-roll .tension-result {
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-top: 1px solid rgba(233, 69, 96, 0.2);
|
||||
}
|
||||
.tension-roll .tension-result.result-success {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
}
|
||||
.tension-roll .tension-result.result-failure {
|
||||
background: rgba(244, 67, 54, 0.15);
|
||||
color: #f44336;
|
||||
}
|
||||
.initiative-roll {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border: 1px solid #e94560;
|
||||
|
||||
+12
-13
@@ -325,13 +325,12 @@ $(document).on("click", "[data-action='sousTension']", async function () {
|
||||
deckManager.addToDiscard(card)
|
||||
await deckManager.saveDeckState()
|
||||
|
||||
const success = totalJoueur >= valeurMJ
|
||||
ChatMessage.create({
|
||||
content: `<div class="fvtt-hamalron"><h3>${game.i18n.localize("HAMALRON.Label.sousTension")}</h3>
|
||||
<p><strong>${actorName}</strong>: ${totalJoueur} vs <strong>MJ</strong>: ${card.name} (${valeurMJ})</p>
|
||||
<p>${success ? game.i18n.localize("HAMALRON.Label.success") : game.i18n.localize("HAMALRON.Label.failure")}</p></div>`,
|
||||
style: CONST.CHAT_MESSAGE_STYLES.OTHER,
|
||||
})
|
||||
const content = await foundry.applications.handlebars.renderTemplate(
|
||||
"systems/fvtt-hamalron/templates/chat-tension.hbs",
|
||||
{ cssClass: "fvtt-hamalron tension-roll", icon: "fa-bolt", label: game.i18n.localize("HAMALRON.Label.sousTension"),
|
||||
joueurName: actorName, joueurScore: totalJoueur, mjCard: `${card.name} (${valeurMJ})`, mjScore: valeurMJ,
|
||||
isSuccess: success, isMJ: totalJoueur < valeurMJ, isSousTension: true })
|
||||
ChatMessage.create({ content, style: CONST.CHAT_MESSAGE_STYLES.OTHER })
|
||||
})
|
||||
|
||||
$(document).on("click", "[data-action='oppose']", async function () {
|
||||
@@ -356,12 +355,12 @@ $(document).on("click", "[data-action='oppose']", async function () {
|
||||
await deckManager.saveDeckState()
|
||||
|
||||
const success = totalJoueur >= valeurOpposant
|
||||
ChatMessage.create({
|
||||
content: `<div class="fvtt-hamalron"><h3>${game.i18n.localize("HAMALRON.Label.oppose")}</h3>
|
||||
<p><strong>${actorName}</strong>: ${totalJoueur} vs <strong>Opposant</strong>: ${card.name} (${valeurOpposant})</p>
|
||||
<p>${success ? game.i18n.localize("HAMALRON.Label.success") : game.i18n.localize("HAMALRON.Label.failure")}</p></div>`,
|
||||
style: CONST.CHAT_MESSAGE_STYLES.OTHER,
|
||||
})
|
||||
const content = await foundry.applications.handlebars.renderTemplate(
|
||||
"systems/fvtt-hamalron/templates/chat-tension.hbs",
|
||||
{ cssClass: "fvtt-hamalron tension-roll", icon: "fa-shield-halved", label: game.i18n.localize("HAMALRON.Label.oppose"),
|
||||
joueurName: actorName, joueurScore: totalJoueur, mjCard: `${card.name} (${valeurOpposant})`, mjScore: valeurOpposant,
|
||||
isSuccess: success, isMJ: totalJoueur < valeurOpposant, isSousTension: false })
|
||||
ChatMessage.create({ content, style: CONST.CHAT_MESSAGE_STYLES.OTHER })
|
||||
})
|
||||
|
||||
Hooks.on("hotbarDrop", (bar, data, slot) => {
|
||||
|
||||
@@ -1 +1 @@
|
||||
MANIFEST-000002
|
||||
MANIFEST-000006
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@@ -788,6 +788,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tension-roll {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border: 1px solid #e94560;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.tension-header {
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
background: rgba(233, 69, 96, 0.15);
|
||||
border-bottom: 1px solid rgba(233, 69, 96, 0.3);
|
||||
|
||||
.tension-badge {
|
||||
color: #e94560;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tension-players {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 12px 8px;
|
||||
|
||||
.tension-side {
|
||||
text-align: center;
|
||||
|
||||
.tension-side-label {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tension-side-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #f0e6d3;
|
||||
}
|
||||
|
||||
.tension-side-name {
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.tension-winner .tension-side-value {
|
||||
color: #4caf50;
|
||||
}
|
||||
}
|
||||
|
||||
.tension-vs {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #e94560;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.tension-result {
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-top: 1px solid rgba(233, 69, 96, 0.2);
|
||||
|
||||
&.result-success { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
|
||||
&.result-failure { background: rgba(244, 67, 54, 0.15); color: #f44336; }
|
||||
}
|
||||
}
|
||||
|
||||
.initiative-roll {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border: 1px solid #e94560;
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="{{cssClass}}">
|
||||
<div class="tension-header">
|
||||
<div class="tension-badge">
|
||||
<i class="fas {{icon}}"></i>
|
||||
<span>{{label}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tension-players">
|
||||
<div class="tension-side">
|
||||
<div class="tension-side-label">{{localize "HAMALRON.Label.player"}}</div>
|
||||
<div class="tension-side-value">{{joueurScore}}</div>
|
||||
<div class="tension-side-name">{{joueurName}}</div>
|
||||
</div>
|
||||
<div class="tension-vs">VS</div>
|
||||
<div class="tension-side {{#if isMJ}}tension-winner{{/if}}">
|
||||
<div class="tension-side-label">{{localize "HAMALRON.Label.gm"}}</div>
|
||||
<div class="tension-side-value">{{mjScore}}</div>
|
||||
<div class="tension-side-name">{{mjCard}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tension-result {{#if isSuccess}}result-success{{else}}result-failure{{/if}}">
|
||||
<i class="fas {{#if isSuccess}}fa-check-circle{{else}}fa-times-circle{{/if}}"></i>
|
||||
{{#if isSuccess}}{{localize "HAMALRON.Label.success"}}{{else}}{{localize "HAMALRON.Label.failure"}}{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user