mregosar/place_maxlan
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add the official r/place color palette for pixel art creation

Browse Source 
Update the client-side color palette component and configuration file to include the 32 official colors from r/place, adjusting grid layout and selected color defaults.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/cRSBTLz
This commit is contained in:
freesemar93
2025-08-18 12:23:36 +00:00
parent 59eb9e4040
commit a97355ee03
3 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/color-palette.tsx
View File

@@ -37,14 +37,14 @@ export function ColorPalette({
</div>
</div>
{/* Color Grid */}
<div className="grid grid-cols-8 gap-2 mb-4">
{/* Color Grid - 8x4 layout for 32 colors */}
<div className="grid grid-cols-8 gap-1 mb-4">
{COLORS.map((color) => (
<button
key={color}
className={cn(
"w-8 h-8 rounded hover:scale-110 transition-transform border-2",
selectedColor === color ? "border-white" : "border-transparent hover:border-white"
"w-7 h-7 rounded hover:scale-110 transition-transform border-2",
selectedColor === color ? "border-white border-2" : "border-gray-600 hover:border-white"
)}
style={{ backgroundColor: color }}
onClick={() => onColorSelect(color)}

49
client/src/lib/config.ts
View File

@@ -1,23 +1,40 @@
// Official r/place 2022 color palette (32 colors)
export const COLORS = [
"#FF0000", // Red
"#FFA500", // Orange
"#FFFF00", // Yellow
"#00FF00", // Green
"#0000FF", // Blue
"#800080", // Purple
"#FFC0CB", // Pink
"#A52A2A", // Brown
"#6d001a", // Dark Red
"#be0039", // Red
"#ff4500", // Orange
"#ffa800", // Yellow Orange
"#ffd635", // Yellow
"#fff8b8", // Pale Yellow
"#00a368", // Dark Green
"#00cc78", // Green
"#7eed56", // Light Green
"#00756f", // Dark Teal
"#009eaa", // Teal
"#00ccc0", // Light Teal
"#2450a4", // Dark Blue
"#3690ea", // Blue
"#51e9f4", // Light Blue
"#493ac1", // Indigo
"#6a5cff", // Periwinkle
"#94b3ff", // Lavender
"#811e9f", // Dark Purple
"#b44ac0", // Purple
"#e4abff", // Pale Purple
"#de107f", // Magenta
"#ff3881", // Pink
"#ff99aa", // Light Pink
"#6d482f", // Dark Brown
"#9c6926", // Brown
"#ffb470", // Beige
"#000000", // Black
"#404040", // Dark Gray
"#808080", // Gray
"#C0C0C0", // Light Gray
"#FFFFFF", // White
"#00FFFF", // Cyan
"#00FF80", // Lime
"#4B0082", // Indigo
"#515252", // Dark Gray
"#898d90", // Gray
"#d4d7d9", // Light Gray
"#ffffff", // White
] as const;
export const DEFAULT_SELECTED_COLOR = "#FF0000";
export const DEFAULT_SELECTED_COLOR = "#be0039"; // Official r/place red
export function generateUserId(): string {
const stored = localStorage.getItem("r-place-user-id");