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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 151
      src/ui/render.js
  2. 23
      style.css

151
src/ui/render.js
Unescape View File

@ -1232,79 +1232,92 @@ function getEnemyType(enemyId) { @@ -1232,79 +1232,92 @@ function getEnemyType(enemyId) {
export function renderRelicSelection(root) {
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 = `
<div class="game-screen relic-select">
<div class="game-header">
<div class="game-logo relic-title-logo">
<svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="1" dy="1" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.3"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="300" y="80" text-anchor="middle" font-family="'Kreon', serif" font-size="55" font-weight="700" fill="url(#textGradient)" filter="url(#glow)">
ThePrimeagen
</text>
<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)">
Spire
</text>
</svg>
</div>
<h1>Choose a Starting Relic</h1>
<p>Select one of the following relics to begin your run.</p>
</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>
root.app.innerHTML = `
<div class="game-screen relic-select">
<div class="game-header">
<button class="messages-button" data-action="show-messages">
Inbox
<span class="message-count-badge">${getAllMessages().length}</span>
</button>
<div class="game-logo relic-title-logo">
<svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="1" dy="1" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.3"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="300" y="80" text-anchor="middle" font-family="'Kreon', serif" font-size="55" font-weight="700" fill="url(#textGradient)" filter="url(#glow)">
ThePrimeagen
</text>
<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)">
Spire
</text>
</svg>
</div>
`;
}).join("")}
</div>
</div>
`;
<h1>Choose a Starting Relic</h1>
<p>Select one of the following relics to begin your run.</p>
</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>
</div>
`;
root.app.querySelectorAll("[data-relic]").forEach(btn => {
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 { @@ -2469,29 +2469,11 @@ h3 {
background-attachment: fixed;
display: flex;
flex-direction: column;
padding: 60px 40px 40px 40px;
font-family: 'Arial', sans-serif;
position: relative;
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 {
text-align: center;
margin-bottom: 50px;
@ -2759,7 +2741,6 @@ h3 { @@ -2759,7 +2741,6 @@ h3 {
.welcome-panel {
width: 500px;
margin-right: 20px;
display: flex;
flex-direction: column;
gap: 25px;
@ -5418,8 +5399,8 @@ h3 { @@ -5418,8 +5399,8 @@ h3 {
/* Messages Button */
.messages-button {
position: absolute;
top: 20px;
right: 20px;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
border: 2px solid var(--accent);
border-radius: 12px;

Write Preview
Loading…
Cancel
Save