As a solo developer, I usually spend my time optimizing service workers or refactoring JSON structures. But today, while watching the news about the escalating conflict, I realized that my project — nihaoo.app, a Chinese learning PWA — could be more than just a language tool. It could be a small bridge for global connection.
"Panda Planet" 🐼
Inside my app, there is a module called Panda Planet. It’s an interactive 3D experience built with Three.js. Players rotate a virtual Earth to find hidden pandas in different cities, learning their Chinese names and local greetings along the way.
The Tehran Update
To reflect our current global reality and send a message of harmony, I manually injected Tehran into the game's coordinate system today.
Using standard spherical coordinates, I mapped the city at 35.6°N, 51.3°E:
{
name: "Tehran",
lat: 35.6,
lon: 51.3,
chinese: "德黑兰",
pinyin: "dé hēi lán",
greeting: "سلام (Salam)!",
pandaTalk: "May there be peace here, and peace in the world."
}
Technical Implementation: Scrolling for Harmony
Beyond adding the city, I implemented a scrolling "Peace Marquee" at the bottom of the game screen.
By using a simple CSS animation, I ensured that every player, regardless of which city they are exploring, sees a constant reminder: "🌍 Wish for world peace. 🕊️"
/* The Marquee Logic */
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
Check out the Panda Planet Game to find the peace message.🕊️
Top comments (0)