diff --git a/package.json b/package.json index 9ea8c8a..312657f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/World/IslandsWorld.css b/src/components/World/IslandsWorld.css index f51d760..e90ef67 100644 --- a/src/components/World/IslandsWorld.css +++ b/src/components/World/IslandsWorld.css @@ -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 { diff --git a/src/components/World/IslandsWorld.jsx b/src/components/World/IslandsWorld.jsx index 657d0b1..da2182b 100644 --- a/src/components/World/IslandsWorld.jsx +++ b/src/components/World/IslandsWorld.jsx @@ -333,6 +333,21 @@ export default function IslandsWorld({ theme, onIslandClick, onOpenMap, onOpenPl ))} + + {/* Floating create post button for island owner */} + {username && username.toLowerCase() === (zoomedIsland.username || '').toLowerCase() && ( + + )} )} @@ -370,6 +385,12 @@ function createIslandMarker(island, idx, t, currentUsername) { el.innerHTML = `
+ ${isOwner ? ` +
+ + Mon île +
+ ` : ''} ${islandSVG}
@${island.username}