131 lines
3.0 KiB
Svelte
131 lines
3.0 KiB
Svelte
<script>
|
|
import { mapStore } from '$lib/stores/mapStore.js';
|
|
import { getDecayInfo } from '$lib/utils/time.js';
|
|
import { echoMessage } from '$lib/firebase/messages.js'
|
|
|
|
let { message } = $props();
|
|
|
|
let decay = $derived(
|
|
message ? getDecayInfo(message.createdAt, message.lastEchoAt) : null
|
|
);
|
|
|
|
let echoed = $state(false);
|
|
|
|
async function handleEcho() {
|
|
await echoMessage(message.id);
|
|
echoed = true;
|
|
}
|
|
</script>
|
|
|
|
<div class = "panel">
|
|
{#if message}
|
|
<div class="content">
|
|
{#if message.imageUrl}
|
|
<img class="message-img" src={message.imageUrl} alt="message attachment" />
|
|
{/if}
|
|
<p class="message-text">{message.text}</p>
|
|
{#if decay}
|
|
<p class="meta">left {decay.daysAgo} days ago. fading in {decay.daysLeft} days.</p>
|
|
{/if}
|
|
<div class="actions">
|
|
<button class="echo-button"
|
|
class:echoed={echoed}
|
|
onclick={handleEcho}
|
|
disabled={echoed}>
|
|
{echoed ? 'Echoed' : 'Echo'}
|
|
</button>
|
|
<button class="letgo-button" onclick={() => mapStore.set(
|
|
{selectedMessage: null, composing: false})}>
|
|
Let go
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="empty">
|
|
<p>Tap a pin to read a message</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.panel {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 320px;
|
|
height: 100vh;
|
|
background: white;
|
|
box-shadow: 2px 0 12px rgba(0,0,0,0.1);
|
|
padding: 2rem 1.5rem;
|
|
z-index: 100;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.message-text{
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: #111;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.meta {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: #111;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.echo-button {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
background: #111;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.letgo-button {
|
|
flex: 1;
|
|
padding: 0..75rem;
|
|
background: transparent;
|
|
color: #111;
|
|
border: 1.5px solid #ddd;
|
|
border-radius: 10px;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.empty {
|
|
color: #999;
|
|
font-size: 0.9rem;
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.echo-button.echoed {
|
|
background: #4ecdc4;
|
|
animation: pulsate 1.5s ease-in-out 3;
|
|
}
|
|
|
|
.message-img{
|
|
width: 100%;
|
|
max-height: 220px;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
@keyframes pulsate {
|
|
0%, 100% {box-shadow: 0 0 0 0 rgba(78,205,196,0.4); }
|
|
50% {box-shadow: 0 0 0 12px rgba(78, 205, 196, 0);}
|
|
}
|
|
</style>
|
|
|