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);
|
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 {
|
.initiative-roll {
|
||||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||||
border: 1px solid #e94560;
|
border: 1px solid #e94560;
|
||||||
|
|||||||
+12
-13
@@ -325,13 +325,12 @@ $(document).on("click", "[data-action='sousTension']", async function () {
|
|||||||
deckManager.addToDiscard(card)
|
deckManager.addToDiscard(card)
|
||||||
await deckManager.saveDeckState()
|
await deckManager.saveDeckState()
|
||||||
|
|
||||||
const success = totalJoueur >= valeurMJ
|
const content = await foundry.applications.handlebars.renderTemplate(
|
||||||
ChatMessage.create({
|
"systems/fvtt-hamalron/templates/chat-tension.hbs",
|
||||||
content: `<div class="fvtt-hamalron"><h3>${game.i18n.localize("HAMALRON.Label.sousTension")}</h3>
|
{ cssClass: "fvtt-hamalron tension-roll", icon: "fa-bolt", label: game.i18n.localize("HAMALRON.Label.sousTension"),
|
||||||
<p><strong>${actorName}</strong>: ${totalJoueur} vs <strong>MJ</strong>: ${card.name} (${valeurMJ})</p>
|
joueurName: actorName, joueurScore: totalJoueur, mjCard: `${card.name} (${valeurMJ})`, mjScore: valeurMJ,
|
||||||
<p>${success ? game.i18n.localize("HAMALRON.Label.success") : game.i18n.localize("HAMALRON.Label.failure")}</p></div>`,
|
isSuccess: success, isMJ: totalJoueur < valeurMJ, isSousTension: true })
|
||||||
style: CONST.CHAT_MESSAGE_STYLES.OTHER,
|
ChatMessage.create({ content, style: CONST.CHAT_MESSAGE_STYLES.OTHER })
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
$(document).on("click", "[data-action='oppose']", async function () {
|
$(document).on("click", "[data-action='oppose']", async function () {
|
||||||
@@ -356,12 +355,12 @@ $(document).on("click", "[data-action='oppose']", async function () {
|
|||||||
await deckManager.saveDeckState()
|
await deckManager.saveDeckState()
|
||||||
|
|
||||||
const success = totalJoueur >= valeurOpposant
|
const success = totalJoueur >= valeurOpposant
|
||||||
ChatMessage.create({
|
const content = await foundry.applications.handlebars.renderTemplate(
|
||||||
content: `<div class="fvtt-hamalron"><h3>${game.i18n.localize("HAMALRON.Label.oppose")}</h3>
|
"systems/fvtt-hamalron/templates/chat-tension.hbs",
|
||||||
<p><strong>${actorName}</strong>: ${totalJoueur} vs <strong>Opposant</strong>: ${card.name} (${valeurOpposant})</p>
|
{ cssClass: "fvtt-hamalron tension-roll", icon: "fa-shield-halved", label: game.i18n.localize("HAMALRON.Label.oppose"),
|
||||||
<p>${success ? game.i18n.localize("HAMALRON.Label.success") : game.i18n.localize("HAMALRON.Label.failure")}</p></div>`,
|
joueurName: actorName, joueurScore: totalJoueur, mjCard: `${card.name} (${valeurOpposant})`, mjScore: valeurOpposant,
|
||||||
style: CONST.CHAT_MESSAGE_STYLES.OTHER,
|
isSuccess: success, isMJ: totalJoueur < valeurOpposant, isSousTension: false })
|
||||||
})
|
ChatMessage.create({ content, style: CONST.CHAT_MESSAGE_STYLES.OTHER })
|
||||||
})
|
})
|
||||||
|
|
||||||
Hooks.on("hotbarDrop", (bar, data, slot) => {
|
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 {
|
.initiative-roll {
|
||||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||||
border: 1px solid #e94560;
|
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