codegirl007
/
theprimeagen-spire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix messages button styling

main
Stephanie Gredell 4 months ago
parent
764e86fb61
commit
82efa11d95
2 changed files with 84 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 149
      src/ui/render.js
  2. 23
      style.css

149
src/ui/render.js
Unescape View File

@ -1232,79 +1232,92 @@ function getEnemyType(enemyId) {
export function renderRelicSelection(root) { export function renderRelicSelection(root) {
import("../data/relics.js").then(({ RELICS, START_RELIC_CHOICES }) => { import("../data/relics.js").then(({ RELICS, START_RELIC_CHOICES }) => {
const relicChoices = START_RELIC_CHOICES.slice(0, 3); // Show first 3 relics import("../data/messages.js").then(({ getAllMessages }) => {
const relicChoices = START_RELIC_CHOICES.slice(0, 3); // Show first 3 relics
root.app.innerHTML = ` root.app.innerHTML = `
<div class="game-screen relic-select"> <div class="game-screen relic-select">
<div class="game-header"> <div class="game-header">
<div class="game-logo relic-title-logo"> <button class="messages-button" data-action="show-messages">
<svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg"> Inbox
<defs> <span class="message-count-badge">${getAllMessages().length}</span>
</button>
<linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <div class="game-logo relic-title-logo">
<stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" /> <svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
<stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" /> <defs>
</linearGradient>
<linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
<feGaussianBlur stdDeviation="2" result="coloredBlur"/> <stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
<feMerge> </linearGradient>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
</feMerge> <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
</filter> <feMerge>
<feMergeNode in="coloredBlur"/>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> <feMergeNode in="SourceGraphic"/>
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/> </feMerge>
<feOffset dx="1" dy="1" result="offsetblur"/> </filter>
<feComponentTransfer>
<feFuncA type="linear" slope="0.3"/> <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
</feComponentTransfer> <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feMerge> <feOffset dx="1" dy="1" result="offsetblur"/>
<feMergeNode/> <feComponentTransfer>
<feMergeNode in="SourceGraphic"/> <feFuncA type="linear" slope="0.3"/>
</feMerge> </feComponentTransfer>
</filter> <feMerge>
</defs> <feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<text x="300" y="80" text-anchor="middle" font-family="'Kreon', serif" font-size="55" font-weight="700" fill="url(#textGradient)" filter="url(#glow)"> </feMerge>
ThePrimeagen </filter>
</text> </defs>
<text x="300" y="170" text-anchor="middle" font-family="'Kreon', serif" font-size="85" font-weight="700" fill="url(#textGradient)" filter="url(#shadow) url(#glow)"> <text x="300" y="80" text-anchor="middle" font-family="'Kreon', serif" font-size="55" font-weight="700" fill="url(#textGradient)" filter="url(#glow)">
Spire ThePrimeagen
</text> </text>
</svg>
</div> <text x="300" y="170" text-anchor="middle" font-family="'Kreon', serif" font-size="85" font-weight="700" fill="url(#textGradient)" filter="url(#shadow) url(#glow)">
<h1>Choose a Starting Relic</h1> Spire
<p>Select one of the following relics to begin your run.</p> </text>
</div> </svg>
<div class="relic-options">
${relicChoices.map(relicId => {
const relic = RELICS[relicId];
return `
<div class="relic-option" data-relic="${relicId}">
<div class="relic-portrait">
<div class="relic-icon">${getRelicArt(relicId, RELICS)}</div>
</div>
<div class="relic-info">
<div class="relic-name">${relic.name}</div>
<div class="relic-description">${relic.text}</div>
</div>
</div> </div>
`; <h1>Choose a Starting Relic</h1>
}).join("")} <p>Select one of the following relics to begin your run.</p>
</div> </div>
</div> <div class="relic-options">
`; ${relicChoices.map(relicId => {
const relic = RELICS[relicId];
return `
<div class="relic-option" data-relic="${relicId}">
<div class="relic-portrait">
<div class="relic-icon">${getRelicArt(relicId, RELICS)}</div>
</div>
<div class="relic-info">
<div class="relic-name">${relic.name}</div>
<div class="relic-description">${relic.text}</div>
</div>
</div>
`;
}).join("")}
</div>
root.app.querySelectorAll("[data-relic]").forEach(btn => { </div>
btn.addEventListener("click", () => { `;
const relicId = btn.dataset.relic;
root.selectStartingRelic(relicId); // Set up relic selection event listeners
root.app.querySelectorAll("[data-relic]").forEach(btn => {
btn.addEventListener("click", () => {
const relicId = btn.dataset.relic;
root.selectStartingRelic(relicId);
});
}); });
// Add Messages button event listener
const messagesBtn = root.app.querySelector("[data-action='show-messages']");
if (messagesBtn) {
messagesBtn.addEventListener("click", () => showMessagesModal());
}
}); });
}); });
} }

23
style.css
Unescape View File

@ -2469,29 +2469,11 @@ h3 {
background-attachment: fixed; background-attachment: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 60px 40px 40px 40px;
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.game-screen.relic-select::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.game-screen.relic-select > * {
position: relative;
z-index: 2;
}
.game-header { .game-header {
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
@ -2759,7 +2741,6 @@ h3 {
.welcome-panel { .welcome-panel {
width: 500px; width: 500px;
margin-right: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 25px; gap: 25px;
@ -5418,8 +5399,8 @@ h3 {
/* Messages Button */ /* Messages Button */
.messages-button { .messages-button {
position: absolute; position: absolute;
top: 20px; top: 10px;
right: 20px; right: 10px;
background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%); background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
border: 2px solid var(--accent); border: 2px solid var(--accent);
border-radius: 12px; border-radius: 12px;

Write Preview
Loading…
Cancel
Save