v114: Add owner badge on islands + floating create post button

- "Mon île" badge appears on user's own island with home icon
- Floating FAB button to create post when viewing own island
- Badge has pulse animation to stand out
- FAB positioned bottom-right with pop animation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-01-24 23:06:33 +00:00
parent e1956b1383
commit 717e5f64a1
3 changed files with 94 additions and 1 deletions

View File

@ -1,7 +1,7 @@
{
"name": "sociowire-frontend",
"private": true,
"version": "0.0.113",
"version": "0.0.114",
"type": "module",
"scripts": {
"dev": "vite --host 0.0.0.0",

View File

@ -117,6 +117,36 @@
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Owner badge on island */
.island-owner-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #10b981, #059669);
padding: 6px 12px;
border-radius: 20px;
color: white;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
z-index: 10;
animation: badgePulse 2s ease-in-out infinite;
}
.island-owner-badge i {
font-size: 12px;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5); }
50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.8); }
}
.island-marker:hover {
transform: scale(1.15) translateY(-8px);
z-index: 100;
@ -614,6 +644,48 @@
margin-right: 4px;
}
/* Floating create post button */
.island-create-post-fab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 800;
display: flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
background: linear-gradient(135deg, #10b981, #059669);
border: none;
border-radius: 50px;
color: white;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.5);
transition: all 0.3s ease;
animation: fabPop 0.4s ease;
}
@keyframes fabPop {
from {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.island-create-post-fab:hover {
transform: scale(1.08);
box-shadow: 0 12px 40px rgba(16, 185, 129, 0.6);
}
.island-create-post-fab i {
font-size: 18px;
}
/* Responsive */
@media (max-width: 768px) {
.islands-world-title {

View File

@ -333,6 +333,21 @@ export default function IslandsWorld({ theme, onIslandClick, onOpenMap, onOpenPl
<IslandPost key={post.id || idx} post={post} index={idx} islandSeed={zoomedIsland.seed || 0} />
))}
</div>
{/* Floating create post button for island owner */}
{username && username.toLowerCase() === (zoomedIsland.username || '').toLowerCase() && (
<button
className="island-create-post-fab"
onClick={() => {
window.dispatchEvent(new CustomEvent('sociowire:create-post', {
detail: { island: zoomedIsland.username }
}));
}}
>
<i className="fa-solid fa-plus" />
<span>{t('worlds.newPost')}</span>
</button>
)}
</div>
)}
@ -370,6 +385,12 @@ function createIslandMarker(island, idx, t, currentUsername) {
el.innerHTML = `
<div class="island-marker-inner" style="animation-delay: ${(idx % 12) * 0.25}s;">
${isOwner ? `
<div class="island-owner-badge">
<i class="fa-solid fa-home"></i>
<span>Mon île</span>
</div>
` : ''}
${islandSVG}
<div class="island-marker-label">
<span class="island-marker-name" style="color: ${color}">@${island.username}</span>