From ae9990cf019a3a61dd33c447526aa2a042cfbf5c Mon Sep 17 00:00:00 2001
From: Mateus Elias <mateuseap@mateuseap.com>
Date: Sat, 25 Jul 2026 20:58:55 -0300
Subject: [PATCH] docs: use a real gameplay screenshot instead of the abstract
 SVG

Logged in as a player, sent a chat message so the speech bubble shows,
and captured the actual running game (chat panel hidden) instead of a
hand-drawn illustration.
---
 README.md               |   2 +-
 docs/assets/preview.png | Bin 0 -> 4644 bytes
 docs/assets/preview.svg | 123 ----------------------------------------
 3 files changed, 1 insertion(+), 124 deletions(-)
 create mode 100644 docs/assets/preview.png
 delete mode 100644 docs/assets/preview.svg

diff --git a/README.md b/README.md
index 546b253..af0f885 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
 [![stars](https://badgen.net/github/stars/mateuseap/pixelhub)](https://github.com/mateuseap/pixelhub/stargazers)
 [![visitors](https://visitor-badge.laobi.icu/badge?page_id=mateuseap.pixelhub)](https://github.com/mateuseap/pixelhub)
 
-<img src="docs/assets/preview.svg" width="720" alt="PixelHub: a walkable 2D pixel world with proximity chat" />
+<img src="docs/assets/preview.png" width="720" alt="PixelHub: a walkable 2D pixel world with proximity chat" />
 
 <br />
 
diff --git a/docs/assets/preview.png b/docs/assets/preview.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cdfd7d2ca250b33f1a33b08fe6e3105c115cf3f
GIT binary patch
literal 4644
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
BN;d!i

literal 0
HcmV?d00001

diff --git a/docs/assets/preview.svg b/docs/assets/preview.svg
deleted file mode 100644
index 5f23cea..0000000
--- a/docs/assets/preview.svg
+++ /dev/null
@@ -1,123 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="720" height="400" viewBox="0 0 720 400">
-  <title>PixelHub: a walkable 2D pixel world with proximity chat</title>
-  <defs>
-    <clipPath id="roomClip">
-      <rect x="40" y="30" width="640" height="340" rx="14"/>
-    </clipPath>
-    <pattern id="floorPattern" width="40" height="40" patternUnits="userSpaceOnUse">
-      <rect x="0" y="0" width="20" height="20" fill="#8c6a4f"/>
-      <rect x="20" y="0" width="20" height="20" fill="#84634a"/>
-      <rect x="0" y="20" width="20" height="20" fill="#84634a"/>
-      <rect x="20" y="20" width="20" height="20" fill="#8c6a4f"/>
-      <rect x="0" y="0" width="40" height="1" fill="#84634a" opacity="0.5"/>
-      <rect x="0" y="20" width="40" height="1" fill="#84634a" opacity="0.5"/>
-      <rect x="4" y="6" width="4" height="2" fill="#96755a"/>
-      <rect x="27" y="9" width="3" height="2" fill="#96755a"/>
-      <rect x="9" y="27" width="4" height="2" fill="#96755a"/>
-      <rect x="30" y="31" width="3" height="2" fill="#96755a"/>
-    </pattern>
-    <g id="plantIcon">
-      <ellipse cx="6" cy="-22" rx="7" ry="10" fill="#4c7d49"/>
-      <ellipse cx="-6" cy="-20" rx="7" ry="9" fill="#6fa864"/>
-      <ellipse cx="0" cy="-27" rx="6" ry="8" fill="#6fa864"/>
-      <ellipse cx="-2" cy="-15" rx="5" ry="6" fill="#4c7d49"/>
-      <polygon points="-9,-10 9,-10 6,2 -6,2" fill="#a06a48"/>
-      <rect x="-9" y="-11" width="18" height="3" fill="#84543a"/>
-    </g>
-    <g id="avatar">
-      <ellipse class="shadow" cx="0" cy="16" rx="11" ry="4" fill="#000000" opacity="0.25"/>
-      <rect x="-7" y="12" width="5" height="4" fill="#2a2233"/>
-      <rect x="2" y="12" width="5" height="4" fill="#2a2233"/>
-      <rect class="body" x="-8" y="-4" width="16" height="18" rx="7"/>
-      <circle cx="0" cy="-14" r="9" fill="#f2c9a2"/>
-      <path d="M -9,-14 A 9 9 0 0 1 9,-14 L 9,-17 A 9 6 0 0 0 -9,-17 Z" fill="#4a3628"/>
-      <circle cx="-3" cy="-13" r="1" fill="#2a2233"/>
-      <circle cx="3" cy="-13" r="1" fill="#2a2233"/>
-    </g>
-  </defs>
-
-  <!-- void: the space beyond the walkable room -->
-  <rect x="0" y="0" width="720" height="400" fill="#17131d"/>
-
-  <g clip-path="url(#roomClip)">
-    <!-- wall shell: flat top-down wall tiles all around the room -->
-    <rect x="40" y="30" width="640" height="340" fill="#6d5d7d"/>
-
-    <!-- back wall face + base edge (the wall row the floor sits south of) -->
-    <rect x="40" y="96" width="640" height="21" fill="#51445e"/>
-    <rect x="40" y="117" width="640" height="3" fill="#3a3145"/>
-    <rect x="98" y="101" width="3" height="7" fill="#3a3145"/>
-    <rect x="212" y="104" width="3" height="7" fill="#3a3145"/>
-    <rect x="356" y="101" width="3" height="7" fill="#3a3145"/>
-    <rect x="497" y="104" width="3" height="7" fill="#3a3145"/>
-    <rect x="601" y="101" width="3" height="7" fill="#3a3145"/>
-
-    <!-- floor -->
-    <rect x="60" y="120" width="600" height="230" fill="url(#floorPattern)"/>
-    <rect x="58" y="120" width="2" height="230" fill="#3a3145"/>
-    <rect x="660" y="120" width="2" height="230" fill="#3a3145"/>
-    <rect x="60" y="348" width="600" height="2" fill="#3a3145"/>
-
-    <!-- soft shadow cast by the back wall onto the floor -->
-    <rect x="60" y="120" width="600" height="8" fill="#2a2233" opacity="0.18"/>
-
-    <!-- rugs -->
-    <g>
-      <rect x="100" y="165" width="200" height="130" fill="#8f434b"/>
-      <rect x="106" y="171" width="188" height="118" fill="#a8545c"/>
-      <rect x="116" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="140" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="164" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="188" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="212" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="236" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="260" y="175" width="4" height="4" fill="#8f434b"/>
-      <rect x="116" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="140" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="164" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="188" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="212" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="236" y="281" width="4" height="4" fill="#8f434b"/>
-      <rect x="260" y="281" width="4" height="4" fill="#8f434b"/>
-    </g>
-    <g>
-      <rect x="410" y="215" width="200" height="115" fill="#416a62"/>
-      <rect x="416" y="221" width="188" height="103" fill="#4f7d74"/>
-      <rect x="428" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="452" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="476" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="500" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="524" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="548" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="572" y="225" width="4" height="4" fill="#416a62"/>
-      <rect x="428" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="452" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="476" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="500" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="524" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="548" y="316" width="4" height="4" fill="#416a62"/>
-      <rect x="572" y="316" width="4" height="4" fill="#416a62"/>
-    </g>
-
-    <!-- potted plants -->
-    <use href="#plantIcon" transform="translate(80,320)"/>
-    <use href="#plantIcon" transform="translate(628,155)"/>
-
-    <!-- avatars -->
-    <use href="#avatar" transform="translate(185,258)" fill="#e0a458"/>
-
-    <!-- speaking avatar: green proximity-voice ring + speech bubble -->
-    <ellipse cx="345" cy="212" rx="14" ry="6" fill="#6fbf8f" fill-opacity="0.15" stroke="#6fbf8f" stroke-width="1.6" stroke-opacity="0.9"/>
-    <use href="#avatar" transform="translate(345,196)" fill="#5a8fc2"/>
-    <g transform="translate(345,196)">
-      <path d="M -5,-33 5,-33 0,-26 Z" fill="#efe6d2" stroke="#2a2233" stroke-width="1.5"/>
-      <rect x="-22" y="-59" width="44" height="26" rx="6" fill="#efe6d2" stroke="#2a2233" stroke-width="1.5"/>
-      <rect x="-9" y="-50" width="3" height="10" fill="#2a2233"/>
-      <rect x="-3" y="-53" width="3" height="16" fill="#2a2233"/>
-      <rect x="3" y="-48" width="3" height="8" fill="#2a2233"/>
-      <rect x="9" y="-51" width="3" height="14" fill="#2a2233"/>
-    </g>
-
-    <use href="#avatar" transform="translate(505,300)" fill="#9b7bc9"/>
-  </g>
-</svg>