Browse Source

tests and messages

main
Stephanie Gredell 4 months ago
parent
commit
764e86fb61
  1. 84
      src/data/messages.js
  2. 66
      src/ui/render.js
  3. 272
      style.css
  4. 2
      tests/run-tests.js

84
src/data/messages.js

@ -0,0 +1,84 @@ @@ -0,0 +1,84 @@
// Personal birthday messages for Prime
// Add your real messages here - this is just the data structure
export const BIRTHDAY_MESSAGES = [
{
from: "codegirl007",
message: `Happy birthday Prime! Can’t believe I kept this domain from your last birthday and renewed it for another year. But here we are, right? Haha. I think I've outdone myself this year though.
I made you a game. Itll probably remind you of some other game. I promise it was made with care and love but I dont promise it to be bug free. I built it in a week (give or take) so like any software engineer, my estimations were off and planning was poor and there was way more to it than I thought. Feature creep was at the utmost max. But I had a ton of fun making this.
I tried my best with reaching out to people I don't know to write you some ooey gooey messages but I'm a shy person still and I reached my limit. Haha.
Anyways, I hope you have a good birthday with your family and friends. Youll always have my support in whatever you do.
Stephanie (Codegirl)`
},
{
from: "nilpointerr",
message: "from feeling shitty to loving to program. prime's helped me a lot (indirectly). all the witty dad jokes , serious hot takes to skill issuing i just related to them all. thanks for streaming content, bringing great minds in TheStandup, sharing your own personal stories. hope you get well soon. yayayayayayayayayay "
},
{
from: "ShadowCaster",
message: "Happy Birthday Prime! Hope you have a blazing birthday, fast fingers and even faster moves. Keep on trucking, you one mullet of a beast!"
},
{
from: "LowKeyAbu",
message: `Why male models?
Two years ago, I tuned into your stream after seeing a post about addiction on Twitter. Before then, I knew you as the Vim guy on YouTube. I wasn't sure what to expect. But tuning in for the first time to find you sticking something in your earholes while all of chat was freaking out had me sold :P
At the time, life was a mess, and I was not in a great place, which led to me dealing with severe mania and psychosis. I spammed nonsense in chat, got banned, and honestly, I deserved it. But six months later, after being hospitalized, diagnosed with bipolar disorder and recovering from my episode, I was let back in. Getting unbanned probably felt small on your end, but for me it was huge.
I love that you are open and candid about your own struggles. It made me feel less alone and seen in a world where people keep such things to themselves in fear of being judged. You don't sugarcoat, and you give it to us raw which is so damn refreshing to experience. No shit sandwiches served! Over time, I became part of your community. I made an incredible set of friends who I learn from every day while sharing laughs, KEKWs, and KEKWaits
Your streams have become my escape after long days at the office. The unhinged humor, your relentlessness, and unexpected tangents were exactly what I needed after corpo life sucked the passion and fun out of me. I've learned about your journey, not just as a coder or streamer, but as a person. I'm in awe of you.
You inspired me to start streaming myself, I've been really enjoying it and am glad to be doing something outside of work that feels fulfilling. I should've started sooner! That spark you carry and the enthusiasm you exude is hella contagious man. You're proof that hard work, consistency, and embracing the chaos makes life worth living. And even now, as you take a break to care for your voice and your family, I admire your decision. It shows strength, not weakness. You're antifragile AF and will come back stronger than ever.
Meeting you at TwitchCon and having that 1-on-1 was surreal. I'm very grateful for being invited to come on stream while I was there. It made my TwitchCon experience so much more awesome! Also, it has been scientifically proven that you give the best hugs. This is true and factual.
So, happy birthday Prime, you avocado toast eatin millennial!
I appreciate you so much. You've impacted my life more than you know.
Anyway,
But why male models?`
},
{
from: "Shreyas",
message: "love you brother!! take care of your throat, we can't afford to lose prime anime noises :) Happy Birthday 🎈"
},
{
from: "dingmana",
message: "Happy Birthday you filthy animal! You’ve made my life better. Thank you for that and I hope you can continue making your impact in whatever way you are able."
},
{
from: "grimmacez",
message: "With the greatest Go comes the greatest Pher. Pher deez nutz in yo Elixir"
},
{
from: "rodrigolj",
message: "I liked programming, but you made me love it. The day is yours, and the gift is our hearts. Congratulations!"
},
];
// Simple helper function to get all messages
export function getAllMessages() {
return BIRTHDAY_MESSAGES;
}
// Helper function to get a random message
export function getRandomMessage() {
return BIRTHDAY_MESSAGES[Math.floor(Math.random() * BIRTHDAY_MESSAGES.length)];
}
// Helper function to get a message by index
export function getMessageByIndex(index) {
return BIRTHDAY_MESSAGES[index] || null;
}

66
src/ui/render.js

@ -10,6 +10,61 @@ function playSound(soundFile) { @@ -10,6 +10,61 @@ function playSound(soundFile) {
}
}
async function showMessagesModal() {
const { getAllMessages } = await import("../data/messages.js");
const messages = getAllMessages();
const modal = document.createElement('div');
modal.className = 'messages-modal-overlay';
modal.innerHTML = `
<div class="messages-modal">
<div class="messages-modal-header">
<h2>Messages for Prime</h2>
<button class="messages-close-btn" aria-label="Close">×</button>
</div>
<div class="messages-modal-content">
${messages.length > 0 ? messages.map((msg, index) => `
<div class="message-item">
<div class="message-from">From: ${msg.from}</div>
<div class="message-text">${msg.message}</div>
</div>
`).join('') : `
<div class="no-messages-placeholder">
<p>No messages added yet!</p>
<p>Add your birthday messages to <code>src/data/messages.js</code></p>
</div>
`}
</div>
</div>
`;
// Close functionality
const closeModal = () => {
modal.remove();
};
const closeBtn = modal.querySelector('.messages-close-btn');
closeBtn.addEventListener('click', closeModal);
// Close on overlay click
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
// Close on Escape key
const handleEscape = (e) => {
if (e.key === 'Escape') {
closeModal();
document.removeEventListener('keydown', handleEscape);
}
};
document.addEventListener('keydown', handleEscape);
// Add to DOM
document.body.appendChild(modal);
}
export function showDamageNumber(damage, target, isPlayer = false) {
const targetElement = isPlayer ?
document.querySelector('.player-battle-zone') :
@ -322,6 +377,7 @@ export async function renderMap(root) { @@ -322,6 +377,7 @@ export async function renderMap(root) {
const { CARDS } = await import("../data/cards.js");
const { ENEMIES } = await import("../data/enemies.js");
const { RELICS } = await import("../data/relics.js");
const { getAllMessages } = await import("../data/messages.js");
const m = root.map;
const currentId = root.nodeId;
@ -382,6 +438,10 @@ export async function renderMap(root) { @@ -382,6 +438,10 @@ export async function renderMap(root) {
root.app.innerHTML = `
<div class="map-screen">
<div class="map-header-section">
<button class="messages-button" data-action="show-messages">
Inbox
<span class="message-count-badge">${getAllMessages().length}</span>
</button>
<div class="game-logo">
<svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
<defs>
@ -627,6 +687,12 @@ May this birthday bring joy in each moment you’ve got. </em></p> @@ -627,6 +687,12 @@ May this birthday bring joy in each moment you’ve got. </em></p>
el.addEventListener("click", () => root.go(el.dataset.node));
});
// Add Messages button event listener
const messagesBtn = root.app.querySelector("[data-action='show-messages']");
if (messagesBtn) {
messagesBtn.addEventListener("click", () => showMessagesModal());
}
window.showTooltip = function(event) {
const tooltip = document.getElementById('custom-tooltip');
const node = event.target.closest('.spire-node');

272
style.css

@ -2771,7 +2771,7 @@ h3 { @@ -2771,7 +2771,7 @@ h3 {
linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
border: 3px solid #d4af37;
border-radius: 16px;
padding: 25px;
padding: 25px 13px;
text-align: center;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
@ -5410,3 +5410,273 @@ h3 { @@ -5410,3 +5410,273 @@ h3 {
letter-spacing: 10px;
}
}
/* =================================
MESSAGES BUTTON & MODAL STYLES
================================= */
/* Messages Button */
.messages-button {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
border: 2px solid var(--accent);
border-radius: 12px;
color: white;
font-size: 16px;
font-weight: bold;
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
font-family: inherit;
z-index: 10;
}
.messages-button:hover {
background: linear-gradient(135deg, #A0522D 0%, #F4A460 50%, #DEB887 100%);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.messages-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Message Count Badge */
.message-count-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: white;
font-size: 12px;
font-weight: bold;
min-width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.messages-button:hover .message-count-badge {
animation: none;
transform: scale(1.05);
}
/* Messages Modal */
.messages-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.messages-modal {
background: var(--panel);
border: 3px solid var(--accent);
border-radius: 16px;
max-width: 700px;
width: 90%;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.messages-modal-header {
background: linear-gradient(135deg, var(--accent) 0%, #B8860B 100%);
color: var(--bg);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 12px 12px 0 0;
}
.messages-modal-header h2 {
margin: 0;
font-size: 1.5em;
font-weight: bold;
}
.messages-close-btn {
background: none;
border: none;
color: var(--bg);
font-size: 24px;
font-weight: bold;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.messages-close-btn:hover {
background: rgba(0, 0, 0, 0.2);
}
.messages-modal-content {
padding: 20px;
max-height: 60vh;
overflow-y: auto;
}
/* Individual Message Items */
.message-item {
background: var(--bg2);
border: 2px solid var(--border);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.message-item:hover {
border-color: var(--accent);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.message-item:last-child {
margin-bottom: 0;
}
.message-from {
color: var(--accent);
font-weight: bold;
font-size: 1.1em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.message-text {
color: var(--text);
line-height: 1.6;
font-size: 1.05em;
white-space: pre-wrap; /* Preserve line breaks */
}
/* No Messages Placeholder */
.no-messages-placeholder {
text-align: center;
padding: 40px 20px;
color: var(--text);
}
.no-messages-placeholder p {
font-size: 1.1em;
margin-bottom: 15px;
opacity: 0.8;
}
.no-messages-placeholder code {
background: var(--bg);
padding: 4px 8px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
}
/* Scrollbar Styling for Modal Content */
.messages-modal-content::-webkit-scrollbar {
width: 8px;
}
.messages-modal-content::-webkit-scrollbar-track {
background: var(--bg);
border-radius: 4px;
}
.messages-modal-content::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
.messages-modal-content::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
/* Responsive Design for Messages Modal */
@media (max-width: 768px) {
.messages-button {
top: 10px;
right: 10px;
padding: 10px 16px;
font-size: 14px;
}
.message-count-badge {
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
font-size: 11px;
}
.messages-modal {
width: 95%;
margin: 20px;
max-height: 85vh;
}
.messages-modal-header {
padding: 15px;
}
.messages-modal-header h2 {
font-size: 1.3em;
}
.messages-modal-content {
padding: 15px;
max-height: 65vh;
}
.message-item {
padding: 15px;
}
}

2
tests/run-tests.js

@ -523,7 +523,7 @@ const tests = { @@ -523,7 +523,7 @@ const tests = {
// If we get here, the card was played successfully
// But curse cards should be blocked at the game level, not in the effect
// So this test just verifies the effect exists and doesn't crash
return { success: true, message: 'Curse effect executed (should be blocked by game)' };
return { success: true, message: 'Curse effect executed' };
} catch (error) {
throw new Error(`Unexpected error in curse effect: ${error.message}`);
}

Loading…
Cancel
Save