VVER440/otrs-turbo
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

style: aggiunti effetti per le overperformance.

Browse Source
This commit is contained in:
Gabriele Cimaschi committed 2026-08-26 21:05:31 +02:00
1 parent a5401e35d8
commit 146d4ed661
11 files changed
+66 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/js/app.js
+56 -15
View File
@@ -23,7 +23,7 @@ const App = {
if (saved) this.tabs = JSON.parse(saved);
const savedDrafts = localStorage.getItem('otrs_turbo_drafts');
if (savedDrafts) this.drafts = JSON.parse(savedDrafts);
} catch (e) {}
} catch (e) { }
this.renderTabs();
},
@@ -80,7 +80,7 @@ const App = {
if (e) e.stopPropagation();
this.tabs = this.tabs.filter(t => String(t.id) !== String(id));
this.saveTabs();
// Clear drafts for closed tab
delete this.drafts[id];
localStorage.setItem('otrs_turbo_drafts', JSON.stringify(this.drafts));
@@ -104,9 +104,9 @@ const App = {
return;
}
bar.style.display = 'flex';
const currentHash = window.location.hash;
bar.innerHTML = this.tabs.map(t => {
const isActive = currentHash === `#/tickets/${t.id}`;
const hasEmailDraft = this.getDraft(t.id, 'email');
@@ -756,6 +756,32 @@ const App = {
}
}
const overDelta = Math.max(0, mathematicalPercentage - 100);
const visualBarWidth = hasOverperformance ? (100 + (overDelta * 3.5)) : percentage;
let overImgName = 'over9000.jpg';
let overPhraseText = '';
if (mathematicalPercentage > 150) {
overImgName = this.lookups?.config?.overperformanceImage || 'over9000.jpg';
overPhraseText = "IT'S OVER 9000! Il livello di consuntivazione ha superato ogni limite!";
} else if (mathematicalPercentage > 140) {
overImgName = 'over_150.jpg';
overPhraseText = 'Questo livello di consuntivazione è impossibile.';
} else if (mathematicalPercentage > 130) {
overImgName = 'over_140.jpg';
overPhraseText = 'Io sono il principe dei Saiyan, non glielo permetterò';
} else if (mathematicalPercentage > 120) {
overImgName = 'over_130.jpg';
overPhraseText = 'Sono un Saiyan, non può consuntivare più di me.';
} else if (mathematicalPercentage > 110) {
overImgName = 'over_120.jpg';
overPhraseText = 'Non è possibile! La sua consuntivazione continua ad aumentare.';
} else {
overImgName = 'over_110.jpg';
overPhraseText = "C'è qualcosa di sicuro nella vita. Il più forte è al di sopra di tutti e può consuntivare tutto!";
}
timerEl.innerHTML = `
<div class="timer-display" style="display:flex; justify-content:space-between; align-items:center; width:100%; font-size:0.75rem; font-weight:500;">
<span>⏱ ${todayTime} / ${targetTime} m</span>
@@ -764,21 +790,36 @@ const App = {
</div>
<div class="timer-tooltip">
<div class="timer-tooltip-border"></div>
<div style="font-size:0.75rem; font-weight:600; color:var(--text-primary); margin-bottom:4px; display:flex; justify-content:space-between;">
<div style="font-size:0.75rem; font-weight:600; color:var(--text-primary); margin-bottom:4px; display:flex; justify-content:space-between; align-items:center;">
<span>Progresso Giornaliero</span>
<strong>${mathematicalPercentage}%</strong>
<strong>${mathematicalPercentage}% ${hasOverperformance ? '<span style="animation: pulse 1.5s infinite; display:inline-block; margin-left:4px;">⚠️</span>' : ''}</strong>
</div>
<div style="background:var(--border-light); border-radius:var(--radius-full); height:10px; width:100%; overflow:hidden; border:1px solid var(--border-subtle);">
<div style="width:${percentage}%; background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); height:100%; border-radius:inherit; transition: width 0.3s ease;"></div>
<div style="background:var(--border-light); border-radius:var(--radius-full); height:10px; width:100%; position:relative; overflow:visible; border:1px solid var(--border-subtle);">
<div style="width:${visualBarWidth}%; background:${hasOverperformance ? 'linear-gradient(90deg, var(--accent-primary), #ef4444, #f59e0b, #ec4899)' : 'linear-gradient(90deg, var(--accent-primary), var(--accent-secondary))'}; height:100%; border-radius:var(--radius-full); transition: width 0.3s ease; ${hasOverperformance ? 'box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);' : ''}"></div>
</div>
${hasOverperformance ? `
<div style="font-size:0.72rem; color:var(--error); font-weight:700; line-height:1.3; text-transform:uppercase; margin-top:8px; border-top:1px solid var(--border-subtle); padding-top:8px; text-align:center; animation: pulse 1.5s infinite;">
⚠️ Rilevata una overperformance allontanarsi dalla postazione immediatamente
${hasOverperformance ? (() => {
const overImgSrc = (overImgName.startsWith('http://') || overImgName.startsWith('https://') || overImgName.startsWith('/')) ? overImgName : `img/${overImgName}`;
const imgWidth = Math.min(500, 180 + Math.round(overDelta * 10));
return `
<div style="font-size:0.72rem; color:var(--error); font-weight:700; line-height:1.3; text-transform:uppercase; margin-top:8px; border-top:1px solid var(--border-subtle); padding-top:8px; text-align:center; animation: pulse 1.5s infinite;">
Rilevata una overperformance allontanarsi <span style="font-size:1.4rem; display:block; font-weight:900; margin-top:2px;">IMMEDIATAMENTE</span>
</div>
<div style="margin-top:6px; text-align:center; position:relative; overflow:visible;">
<a href="${App.escapeHtml(overImgSrc)}" target="_blank" title="Apri immagine originale in una nuova scheda" style="display:inline-block; text-decoration:none;">
<img src="${App.escapeHtml(overImgSrc)}" alt="Overperformance Meme" style="width:${imgWidth}px; max-width:none; border-radius:var(--radius-md); box-shadow:var(--shadow-md); display:block; margin:0 auto; transition: width 0.3s ease; cursor:pointer;" />
</a>
</div>
${overPhraseText ? `
<div style="font-size:0.75rem; color:var(--text-primary); font-weight:600; line-height:1.35; font-style:italic; margin-top:8px; border-top:1px dashed var(--border-subtle); padding-top:6px; text-align:center;">
"${App.escapeHtml(overPhraseText)}"
</div>
` : ''}
`;
})() : `
<div style="font-size:0.72rem; color:var(--text-secondary); line-height:1.35; font-style:italic; margin-top:6px; border-top:1px solid var(--border-subtle); padding-top:6px; text-align:center;">
"${phrase}"
</div>
` : ''}
<div style="font-size:0.72rem; color:var(--text-secondary); line-height:1.35; font-style:italic; margin-top:6px; border-top:1px solid var(--border-subtle); padding-top:6px; text-align:center;">
"${phrase}"
</div>
`}
</div>
`;
// Update sidebar counts as well