From 19285f04a37340f70df3d56c8bdf10c6bcf481f7 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 13 Feb 2024 17:14:12 -0800 Subject: [PATCH] canvas drawing for web --- src/components/icons/Emoji.tsx | 2 +- src/components/icons/Explosion.tsx | 4 +- .../StepProfile/SelectImageButton.web.tsx | 32 ++--- src/screens/Onboarding/StepProfile/types.ts | 114 +++++++++++++++--- 4 files changed, 116 insertions(+), 36 deletions(-) diff --git a/src/components/icons/Emoji.tsx b/src/components/icons/Emoji.tsx index 00421d6e49..445b34091a 100644 --- a/src/components/icons/Emoji.tsx +++ b/src/components/icons/Emoji.tsx @@ -25,7 +25,7 @@ export const EmojiHeartEyes_Stroke2_Corner0_Rounded = createSinglePathSVG({ path: emojiHeartEyesPath, }) -const emojiSmilePath = +export const emojiSmilePath = 'M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z' export const EmojiSmile_Stroke2_Corner0_Rounded = createSinglePathSVG({ path: emojiSmilePath, diff --git a/src/components/icons/Explosion.tsx b/src/components/icons/Explosion.tsx index 2306eed232..e0fe2065c9 100644 --- a/src/components/icons/Explosion.tsx +++ b/src/components/icons/Explosion.tsx @@ -1,5 +1,7 @@ import {createSinglePathSVG} from './TEMPLATE' +export const path = + 'M12 2a1 1 0 0 1 .889.542l1.679 3.259 3.491-1.117a1 1 0 0 1 1.257 1.257L18.2 9.432l3.259 1.679a1 1 0 0 1 0 1.778l-3.124 1.61 2.609 5.098a1 1 0 0 1-1.346 1.346l-5.098-2.61-1.61 3.125a1 1 0 0 1-1.778 0l-1.679-3.259-3.491 1.117a1 1 0 0 1-1.257-1.257L5.8 14.568l-3.259-1.679a1 1 0 0 1 0-1.778l3.124-1.61-2.609-5.098a1 1 0 0 1 1.346-1.346l5.098 2.61-.455.89.455-.89 1.61-3.125A1 1 0 0 1 12 2Zm0 3.183-.72 1.4a2 2 0 0 1-2.69.864L6.248 6.248 7.447 8.59a2 2 0 0 1-.865 2.69L5.183 12l1.534.79a2 2 0 0 1 .989 2.387L7.18 16.82l1.643-.526a2 2 0 0 1 2.387.99l.79 1.533.72-1.4a2 2 0 0 1 2.69-.864l2.342 1.199-1.199-2.342a2 2 0 0 1 .864-2.69l1.4-.72-1.534-.79a2 2 0 0 1-.989-2.387l.526-1.643-1.643.526a2 2 0 0 1-2.387-.99L12 5.184Z' export const Explosion_Stroke2_Corner0_Rounded = createSinglePathSVG({ - path: 'M12 2a1 1 0 0 1 .889.542l1.679 3.259 3.491-1.117a1 1 0 0 1 1.257 1.257L18.2 9.432l3.259 1.679a1 1 0 0 1 0 1.778l-3.124 1.61 2.609 5.098a1 1 0 0 1-1.346 1.346l-5.098-2.61-1.61 3.125a1 1 0 0 1-1.778 0l-1.679-3.259-3.491 1.117a1 1 0 0 1-1.257-1.257L5.8 14.568l-3.259-1.679a1 1 0 0 1 0-1.778l3.124-1.61-2.609-5.098a1 1 0 0 1 1.346-1.346l5.098 2.61-.455.89.455-.89 1.61-3.125A1 1 0 0 1 12 2Zm0 3.183-.72 1.4a2 2 0 0 1-2.69.864L6.248 6.248 7.447 8.59a2 2 0 0 1-.865 2.69L5.183 12l1.534.79a2 2 0 0 1 .989 2.387L7.18 16.82l1.643-.526a2 2 0 0 1 2.387.99l.79 1.533.72-1.4a2 2 0 0 1 2.69-.864l2.342 1.199-1.199-2.342a2 2 0 0 1 .864-2.69l1.4-.72-1.534-.79a2 2 0 0 1-.989-2.387l.526-1.643-1.643.526a2 2 0 0 1-2.387-.99L12 5.184Z', + path, }) diff --git a/src/screens/Onboarding/StepProfile/SelectImageButton.web.tsx b/src/screens/Onboarding/StepProfile/SelectImageButton.web.tsx index a37990af2d..653047c71e 100644 --- a/src/screens/Onboarding/StepProfile/SelectImageButton.web.tsx +++ b/src/screens/Onboarding/StepProfile/SelectImageButton.web.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Pressable, StyleSheet, Text} from 'react-native' +import {Pressable, StyleSheet} from 'react-native' import {Camera_Stroke2_Corner0_Rounded as Camera} from '#/components/icons/Camera' import {useAvatar, useSetAvatar} from '#/screens/Onboarding/StepProfile/index' import {useTheme} from '#/alf' @@ -57,20 +57,24 @@ export function SelectImageButton() { function Canvas() { const avatar = useAvatar() const canvasRef = React.useRef(null) - React.useEffect(() => {}, []) - return ( - - ) + React.useEffect(() => { + // @ts-ignore web only + const path = new Path2D(avatar.placeholder.path) + // @ts-ignore web only + const ctx = canvasRef.current?.getContext('2d') + ctx?.reset() + ctx.fillStyle = avatar.backgroundColor + ctx?.moveTo(0, 0) + ctx?.fillRect(0, 0, 24 * 10, 24 * 10) + ctx.fillStyle = '#fff' + ctx.lineWidth = 0.1 + ctx?.translate(24 * 1.5, 24 * 1.5) + ctx?.scale(7, 7) + ctx?.fill(path) + }, [avatar.backgroundColor, avatar.placeholder.path]) + + return } const styles = StyleSheet.create({ diff --git a/src/screens/Onboarding/StepProfile/types.ts b/src/screens/Onboarding/StepProfile/types.ts index 686db9f0c2..0a64a61d09 100644 --- a/src/screens/Onboarding/StepProfile/types.ts +++ b/src/screens/Onboarding/StepProfile/types.ts @@ -4,15 +4,38 @@ import { EmojiAlt_Stroke2_Corner0_Rounded as EmojiAlt, EmojiArc_Stroke2_Corner0_Rounded as EmojiArc, EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes, + emojiSmilePath, + emojiSadPath, + emojiAltPath, + emojiArcPath, + emojiHeartEyesPath, } from '#/components/icons/Emoji' -import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien' -import {Bubbles_Stroke2_Corner0_Rounded as Bubbles} from '#/components/icons/Bubbles' -import {Explosion_Stroke2_Corner0_Rounded as Explosion} from '#/components/icons/Explosion' -import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab' -import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank' -import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop' +import { + Alien_Stroke2_Corner0_Rounded as Alien, + path as alienPath, +} from '#/components/icons/Alien' +import { + Bubbles_Stroke2_Corner0_Rounded as Bubbles, + path as bubblesPath, +} from '#/components/icons/Bubbles' +import { + Explosion_Stroke2_Corner0_Rounded as Explosion, + path as explosionPath, +} from '#/components/icons/Explosion' +import { + Lab_Stroke2_Corner0_Rounded as Lab, + path as labPath, +} from '#/components/icons/Lab' +import { + PiggyBank_Stroke2_Corner0_Rounded as PiggyBank, + path as piggyBankPath, +} from '#/components/icons/PiggyBank' +import { + Poop_Stroke2_Corner0_Rounded as Poop, + path as poopPath, +} from '#/components/icons/Poop' -export const emojis = [ +export const emojiNames = [ 'camera', 'smile', 'sad', @@ -26,17 +49,68 @@ export const emojis = [ 'piggyBank', 'poop', ] as const -export type Emoji = (typeof emojis)[number] -export const emojiItems: Record = { - smile: EmojiSmile, - sad: EmojiSad, - alt: EmojiAlt, - arc: EmojiArc, - heartEyes: EmojiHeartEyes, - alien: Alien, - bubbles: Bubbles, - explosion: Explosion, - lab: Lab, - piggyBank: PiggyBank, - poop: Poop, +export type EmojiName = (typeof emojiNames)[number] + +export interface Emoji { + name: EmojiName + component: typeof EmojiSmile + path: string +} +export const emojiItems: Record = { + camera: {}, + smile: { + name: 'smile', + component: EmojiSmile, + path: emojiSmilePath, + }, + sad: { + name: 'sad', + component: EmojiSad, + path: emojiSadPath, + }, + alt: { + name: 'alt', + component: EmojiAlt, + path: emojiAltPath, + }, + arc: { + name: 'arc', + component: EmojiArc, + path: emojiArcPath, + }, + heartEyes: { + name: 'heartEyes', + component: EmojiHeartEyes, + path: emojiHeartEyesPath, + }, + alien: { + name: 'alien', + component: Alien, + path: alienPath, + }, + bubbles: { + name: 'bubbles', + component: Bubbles, + path: bubblesPath, + }, + explosion: { + name: 'explosion', + component: Explosion, + path: explosionPath, + }, + lab: { + name: 'lab', + component: Lab, + path: labPath, + }, + piggyBank: { + name: 'piggyBank', + component: PiggyBank, + path: piggyBankPath, + }, + poop: { + name: 'poop', + component: Poop, + path: poopPath, + }, }