diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..5288d5e --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,18 @@ +# Version 1.0.0 🎉 +* New `accessory` values were added: `faceMask`, `hoopEarrings` +* New `clothing` values were added: `denimJacket`, `hoodie`, `chequeredShirt`, `chequeredShirtDark` +* New `eyes` values were added: `crazy`, `cute`, `dollars`, `stars`, `cyborg`, `simplePatch`, `piratePatch` +* New `facialHair` value was added: `goatee` +* New `graphic` values were added: `donut`, `rainbow` +* New `hair` value was added: `mohawk` +* New `hat` values were added: `party`, `hijab` +* New `mouth` values were added: `piercedTongue`, `vomitingRainbow` +* `bgShape` prop was introduced, its possible values are: `square`, `circle`, `squircle` +* `bgColor` prop was introduced, its possible values are: `blue`, `green`, `red`, `orange`, `yellow`, `turqoise`, `pink`, `purple` + +*These new values and props were inspired by [vue-bigheads](https://github.com/DerpyScripts/vue-bigheads)* + +## Breaking changes ⚠️ +* `mask` prop was renamed to `showBackground` +* `circleColor` prop was renamed to `bgColor` +* `heart` value was renamed to `hearts` in the `eyes` prop diff --git a/README.md b/README.md index d1f88d2..59a1b7c 100644 --- a/README.md +++ b/README.md @@ -46,10 +46,10 @@ use the `BigHead` component like this: ```jsx ``` @@ -71,8 +72,9 @@ use the `BigHead` component like this: ### Props - [`accessory`](#accessory) +- [`bgColor`](#bgcolor) +- [`bgShape`](#bgshape) - [`body`](#body) -- [`circleColor`](#circlecolor) - [`clothing`](#clothing) - [`clothingColor`](#clothingcolor) - [`containerProps`](#containerprops) @@ -80,12 +82,15 @@ use the `BigHead` component like this: - [`eyebrows`](#eyebrows) - [`eyes`](#eyes) - [`facialHair`](#facialhair) -- [`graphics`](#graphics) +- [`graphic`](#graphic) - [`hair`](#hair) - [`hairColor`](#haircolor) - [`hat`](#hat) +- [`hatColor`](#hatcolor) +- [`lashes`](#lashes) - [`lipColor`](#lipcolor) - [`mouth`](#mouth) +- [`showBackground`](#showbackground) - [`size`](#size) - [`skinTone`](#skinTone) @@ -97,29 +102,39 @@ use the `BigHead` component like this: Type of accessory -| Type | Required | -| -------- | -------- | -| enum('none', 'roundGlasses', 'tinyGlasses', 'shades') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('none', 'roundGlasses', 'tinyGlasses', 'shades', 'faceMask', 'hoopEarrings') | No | Random | --- -### `body` +### `bgColor` -Type of body +The color of the background -| Type | Required | -| -------- | -------- | -| enum('chest', 'breasts') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('blue', 'green', 'red', 'orange', 'yellow', 'turqoise', 'pink', 'purple') | No | Random | --- -### `circleColor` +### `bgShape` -The color of the circular background +The shape of the background -| Type | Required | -| -------- | -------- | -| enum('blue') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('circle', 'square', 'squircle') | No | Random | + +--- + +### `body` + +Type of body + +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('chest', 'breasts') | No | Random | --- @@ -127,9 +142,9 @@ The color of the circular background Type of cloth -| Type | Required | -| -------- | -------- | -| enum('naked', 'shirt', 'dressShirt', 'vneck', 'tankTop', 'dress') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('naked', 'shirt', 'dressShirt', 'vneck', 'tankTop', 'dress', 'denimJacket', 'hoodie', 'chequeredShirt', 'chequeredShirtDark') | No | Random | --- @@ -137,9 +152,9 @@ Type of cloth The color of the clothes -| Type | Required | -| -------- | -------- | -| enum('white', 'blue', 'black', 'green', 'red') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('white', 'blue', 'black', 'green', 'red') | No | Random | --- @@ -167,9 +182,9 @@ Styles to be applied to the container element ([View](https://reactnative.dev/do Type of eyebrows -| Type | Required | -| -------- | -------- | -| enum('raised', 'leftLowered', 'serious', 'angry', 'concerned') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('raised', 'leftLowered', 'serious', 'angry', 'concerned') | No | Random | --- @@ -177,9 +192,9 @@ Type of eyebrows Type of eyes -| Type | Required | -| -------- | -------- | -| enum('normal', 'leftTwitch', 'happy', 'content', 'squint', 'simple', 'dizzy', 'wink', 'heart') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('normal', 'leftTwitch', 'happy', 'content', 'squint', 'simple', 'dizzy', 'wink', 'hearts', 'crazy', 'cute', 'dollars', 'stars', 'cyborg', 'simplePatch', 'piratePatch') | No | Random | --- @@ -187,19 +202,19 @@ Type of eyes Type of facial hair -| Type | Required | -| -------- | -------- | -| enum('none', 'none2', 'none3', 'stubble', 'mediumBeard') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('none', 'stubble', 'mediumBeard', 'goatee') | No | Random | --- -### `graphics` +### `graphic` -Type of graphics over the t-shirts +Type of graphic over the t-shirts -| Type | Required | -| -------- | -------- | -| enum('none', 'redwood', 'gatsby', 'vue', 'react', 'graphQL') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('none', 'redwood', 'gatsby', 'vue', 'react', 'graphQL', 'donut', 'rainbow') | No | Random | --- @@ -207,9 +222,9 @@ Type of graphics over the t-shirts Type of hair -| Type | Required | -| -------- | -------- | -| enum('none', 'long', 'bun', 'short', 'pixie', 'balding', 'buzz', 'afro', 'bob') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('none', 'long', 'bun', 'short', 'pixie', 'balding', 'buzz', 'afro', 'bob', 'mohawk') | No | Random | --- @@ -217,9 +232,9 @@ Type of hair The color of the hair -| Type | Required | -| -------- | -------- | -| enum('blonde', 'orange', 'black', 'white', 'brown', 'blue', 'pink') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('blonde', 'orange', 'black', 'white', 'brown', 'blue', 'pink') | No | Random | ---- @@ -227,9 +242,29 @@ The color of the hair Type of hat -| Type | Required | -| -------- | -------- | -| enum('none', 'none2', 'none3', 'none4', 'none5', 'beanie', 'turban') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('none', 'beanie', 'turban', 'party', 'hijab') | No | Random | + +--- + +### `hatColor` + +The color of the hat + +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('white', 'blue', 'black', 'green', 'red') | No | Random | + +--- + +### `lashes` + +Show lashes + +| Type | Required | Default | +| -------- | -------- | ------- | +| boolean | No | Random | --- @@ -237,9 +272,9 @@ Type of hat The color of the lips -| Type | Required | -| -------- | -------- | -| enum('red', 'purple', 'pink', 'turqoise', 'green') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('red', 'purple', 'pink', 'turqoise', 'green') | No | Random | --- @@ -247,9 +282,21 @@ The color of the lips Type of mouth -| Type | Required | -| -------- | -------- | -| enum('grin', 'sad', 'openSmile', 'lips', 'open', 'serious', 'tongue') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('grin', 'sad', 'openSmile', 'lips', 'open', 'serious', 'tongue', 'piercedTongue', 'vomitingRainbow') | No | Random | + +--- + +### `showBackground` + +Whether or not to display the background color + +When `true` it cuts off everything below the avatar otherwise it won't clip off any of the avatar + +| Type | Required | Default | +| -------- | -------- | ------- | +| boolean | No | true | --- @@ -267,9 +314,9 @@ Size of the avatar The color of the skin -| Type | Required | -| -------- | -------- | -| enum('light', 'yellow', 'brown', 'dark', 'red', 'black') | No | +| Type | Required | Default | +| -------- | -------- | ------- | +| enum('light', 'yellow', 'brown', 'dark', 'red', 'black') | No | Random | --- @@ -277,6 +324,9 @@ The color of the skin - Some portions of this code belong to the [Big Heads authors](https://github.com/RobertBroersma/bigheads) which are distributed under the [MIT License](https://github.com/RobertBroersma/bigheads/blob/main/LICENSE) - [Felipe Céspedes](https://felipecespedes.github.io/) Big Head +# Changelog +[Learn about the latest improvements](https://github.com/felipecespedes/react-native-bigheads/blob/master/CHANGELOG.md) + # License This project is licensed under the MIT License - see the [LICENSE](https://github.com/felipecespedes/react-native-bigheads/blob/master/LICENSE) file for details diff --git a/package.json b/package.json index e944b79..d889b7e 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.0", + "version": "1.0.0", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/screenshots/screenshot.gif b/screenshots/screenshot.gif index 4824fe2..9152dfa 100644 Binary files a/screenshots/screenshot.gif and b/screenshots/screenshot.gif differ diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index fe8de7d..61b0a10 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -63,6 +63,33 @@ import { GraphQLGraphic } from './clothingGraphic/GraphQL' import { Tongue } from './mouths/Tongue' import { DressShirt } from './clothing/DressShirt' import { StyleSheet, ViewProps } from 'react-native' +import { FaceMask } from './accessories/FaceMask' +import { HoopEarrings } from './accessories/HoopEarrings' +import { Hoodie } from './clothing/Hoodie' +import { DenimJacket } from './clothing/DenimJacket' +import * as ChequeredShirt from './clothing/ChequeredShirt' +import * as ChequeredShirtDark from './clothing/ChequeredShirtDark' +import { Crazy } from './eyes/Crazy' +import { Cute } from './eyes/Cute' +import { Dollars } from './eyes/Dollars' +import { Stars } from './eyes/Stars' +import { Cyborg } from './eyes/Cyborg' +import { SimplePatch } from './eyes/SimplePatch' +import { PiratePatch } from './eyes/PiratePatch' +import { Goatee } from './facialHair/Goatee' +import { Donut } from './clothingGraphic/Donut' +import { Rainbow } from './clothingGraphic/Rainbow' +import * as Mohawk from './hair/Mohawk' +import * as Party from './hats/Party' +import * as Hijab from './hats/Hijab' +import { PiercedTongue } from './mouths/PiercedTongue' +import { VomitingRainbow } from './mouths/VomitingRainbow' +import { BgCircle } from './backgrounds/BgCircle' +import { BgSquare } from './backgrounds/BgSquare' +import { BgSquircle } from './backgrounds/BgSquircle' +import { BgCircleMask } from './backgrounds/BgCircleMask' +import { BgSquareMask } from './backgrounds/BgSquareMask' +import { BgSquircleMask } from './backgrounds/BgSquircleMask' export const eyesMap = { normal: NormalEyes, @@ -73,7 +100,14 @@ export const eyesMap = { simple: SimpleEyes, dizzy: DizzyEyes, wink: WinkEyes, - heart: HeartEyes, + hearts: HeartEyes, + crazy: Crazy, + cute: Cute, + dollars: Dollars, + stars: Stars, + cyborg: Cyborg, + simplePatch: SimplePatch, + piratePatch: PiratePatch } export const eyebrowsMap = { @@ -92,6 +126,8 @@ export const mouthsMap = { open: OpenMouth, serious: SeriousMouth, tongue: Tongue, + piercedTongue: PiercedTongue, + vomitingRainbow: VomitingRainbow } export const hairMap = { @@ -104,6 +140,7 @@ export const hairMap = { buzz: BuzzCut, afro: Afro, bob: BobCut, + mohawk: Mohawk } export const facialHairMap = { @@ -112,6 +149,7 @@ export const facialHairMap = { none3: Noop, stubble: StubbleBeard, mediumBeard: MediumBeard, + goatee: Goatee } export const clothingMap = { @@ -121,6 +159,10 @@ export const clothingMap = { vneck: { Back: VNeck, Front: Noop }, tankTop: { Back: TankTop, Front: Noop }, dress: Dress, + denimJacket: { Back: DenimJacket, Front: Noop }, + hoodie: { Back: Hoodie, Front: Noop }, + chequeredShirt: ChequeredShirt, + chequeredShirtDark: ChequeredShirtDark } export const accessoryMap = { @@ -128,6 +170,8 @@ export const accessoryMap = { roundGlasses: RoundGlasses, tinyGlasses: TinyGlasses, shades: Shades, + faceMask: FaceMask, + hoopEarrings: HoopEarrings } export const graphicsMap = { @@ -137,6 +181,8 @@ export const graphicsMap = { vue: VueGraphics, react: ReactGraphic, graphQL: GraphQLGraphic, + donut: Donut, + rainbow: Rainbow } export const hatMap = { @@ -147,6 +193,8 @@ export const hatMap = { none5: { Front: Noop, Back: Noop }, beanie: Beanie, turban: Turban, + party: Party, + hijab: Hijab } export const bodyMap = { @@ -154,6 +202,12 @@ export const bodyMap = { breasts: Breasts, } +export const bgShapeMap = { + circle: { Shape: BgCircle, Mask: BgCircleMask }, + square: { Shape: BgSquare, Mask: BgSquareMask }, + squircle: { Shape: BgSquircle, Mask: BgSquircleMask } +} + function selectRandomKey(object: T) { return (Object.keys(object) as Array)[ Math.floor(Math.random() * Object.keys(object).length) @@ -175,11 +229,12 @@ export interface AvatarProps { hairColor?: keyof typeof colors.hair clothingColor?: keyof typeof colors.clothing - circleColor?: keyof typeof colors.bgColors + bgShape?: keyof typeof bgShapeMap + bgColor?: keyof typeof colors.bgColors lipColor?: keyof typeof colors.lipColors hatColor?: keyof typeof colors.clothing - mask?: boolean + showBackground?: boolean lashes?: boolean size: number @@ -202,11 +257,12 @@ export const Avatar = ({ hairColor = selectRandomKey(colors.hair), clothingColor = selectRandomKey(colors.clothing), - circleColor = selectRandomKey(colors.bgColors), + bgShape = selectRandomKey(bgShapeMap), + bgColor = selectRandomKey(colors.bgColors), lipColor = selectRandomKey(colors.lipColors), hatColor = selectRandomKey(colors.clothing), - mask = true, + showBackground = true, lashes = Math.random() > 0.5, size = 100, @@ -227,6 +283,7 @@ export const Avatar = ({ const Graphic = graphicsMap[graphic] const Hat = hatMap[hat] const Body = bodyMap[body] + const BgShape = bgShapeMap[bgShape] return ( @@ -244,9 +301,10 @@ export const Avatar = ({ hatColor={hatColor} hairColor={hairColor} clothingColor={clothingColor} - circleColor={circleColor} + bgShape={BgShape} + bgColor={bgColor} lipColor={lipColor} - mask={mask} + showBackground={showBackground} lashes={lashes} size={size} containerStyles={containerStyles} diff --git a/src/components/Base.tsx b/src/components/Base.tsx index 6f181d5..bb172ab 100644 --- a/src/components/Base.tsx +++ b/src/components/Base.tsx @@ -5,8 +5,6 @@ import { Noop } from '../utils/Noop' import { FacialHairProps } from './facialHair/types' import { HairProps } from './hair/types' import { ClothingProps } from './clothing/types' -import { Mask } from './Mask' -import { BgCircle } from './BgCircle' import { MouthProps } from './mouths/types' import { BodyProps } from './bodies/types' import { HatProps } from './hats/types' @@ -14,7 +12,7 @@ import { EyeProps } from './eyes/types' import { DressShirt } from './clothing/DressShirt' import { Svg, G, Path } from 'react-native-svg' import { View, ViewProps, StyleSheet } from 'react-native' - +import { BgShapeProps, BgMaskProps } from './backgrounds/types' interface BaseProps { eyes: React.ComponentType eyebrows: React.ComponentType @@ -34,6 +32,7 @@ interface BaseProps { body: { Front: React.ComponentType Back: React.ComponentType + hasBreasts: boolean } clothing: { Front: React.ComponentType @@ -43,11 +42,15 @@ interface BaseProps { clothingColor: keyof typeof colors.clothing hairColor: keyof typeof colors.hair - circleColor: keyof typeof colors.bgColors + bgShape: { + Shape: React.ComponentType, + Mask: React.ComponentType + } + bgColor: keyof typeof colors.bgColors lipColor: keyof typeof colors.lipColors hatColor: keyof typeof colors.clothing - mask: boolean + showBackground: boolean lashes: boolean size: number @@ -69,11 +72,12 @@ export const Base = ({ hairColor, clothingColor, - circleColor, + bgShape = { Shape: Noop, Mask: Noop }, + bgColor, lipColor, hatColor, - mask, + showBackground, lashes, size = 100, containerStyles = {}, @@ -85,12 +89,13 @@ export const Base = ({ const { Front: FrontHair, Back: BackHair, hatScale } = hair const { Front: FrontHat, Back: BackHat } = hat - const { Front: FrontBody, Back: BackBody } = body + const { Front: FrontBody, Back: BackBody, hasBreasts } = body const { Front: ClothingFront, Back: ClothingBack, braStraps = true, } = clothing + const { Shape: BgShape, Mask: BgMask } = bgShape return ( - {mask && } + {showBackground && } - {mask && } + {showBackground && } - + {!(ClothingFront === Noop && ClothingBack === Noop) && ( )} - - + + + - diff --git a/src/components/BgCircle.tsx b/src/components/BgCircle.tsx deleted file mode 100644 index 8e1afcb..0000000 --- a/src/components/BgCircle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { useTheme } from '../themeContext' -import { colors } from '../theme' -import { Circle } from 'react-native-svg' - -export interface BgCircleProps { - circleColor: keyof typeof colors.bgColors -} - -export const BgCircle = ({ circleColor }: BgCircleProps) => { - const { colors } = useTheme() - - const color = colors.bgColors[circleColor] - - return -} diff --git a/src/components/accessories/FaceMask.tsx b/src/components/accessories/FaceMask.tsx new file mode 100644 index 0000000..0d757dd --- /dev/null +++ b/src/components/accessories/FaceMask.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' + +export const FaceMask = () => { + const { colors } = useTheme() + + return ( + + + + + ) +} diff --git a/src/components/accessories/HoopEarrings.tsx b/src/components/accessories/HoopEarrings.tsx new file mode 100644 index 0000000..efe9d5d --- /dev/null +++ b/src/components/accessories/HoopEarrings.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' + +export const HoopEarrings = () => { + const { colors } = useTheme() + + return ( + + + + + ) +} diff --git a/src/components/backgrounds/BgCircle.tsx b/src/components/backgrounds/BgCircle.tsx new file mode 100644 index 0000000..4a6f2d2 --- /dev/null +++ b/src/components/backgrounds/BgCircle.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Circle } from 'react-native-svg' +import { BgShapeProps } from './types' + +export const BgCircle = ({ bgColor }: BgShapeProps) => { + const { colors } = useTheme() + + const color = colors.bgColors[bgColor] + + return +} diff --git a/src/components/Mask.tsx b/src/components/backgrounds/BgCircleMask.tsx similarity index 52% rename from src/components/Mask.tsx rename to src/components/backgrounds/BgCircleMask.tsx index c6d9210..f35de78 100644 --- a/src/components/Mask.tsx +++ b/src/components/backgrounds/BgCircleMask.tsx @@ -1,13 +1,14 @@ import React from 'react' -import { Mask as SvgMask, Path } from 'react-native-svg' +import { Mask, Path } from 'react-native-svg' +import { BgMaskProps } from './types' -export const Mask = ({ id }: { id: string }) => { +export const BgCircleMask = ({ id }: BgMaskProps) => { return ( - + - + ) } diff --git a/src/components/backgrounds/BgSquare.tsx b/src/components/backgrounds/BgSquare.tsx new file mode 100644 index 0000000..625a996 --- /dev/null +++ b/src/components/backgrounds/BgSquare.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Path } from 'react-native-svg' +import { BgShapeProps } from './types' + +export const BgSquare = ({ bgColor }: BgShapeProps) => { + const { colors } = useTheme() + + const color = colors.bgColors[bgColor] + + return +} diff --git a/src/components/backgrounds/BgSquareMask.tsx b/src/components/backgrounds/BgSquareMask.tsx new file mode 100644 index 0000000..267b89f --- /dev/null +++ b/src/components/backgrounds/BgSquareMask.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Mask, Path } from 'react-native-svg' +import { BgMaskProps } from './types' + +export const BgSquareMask = ({ id }: BgMaskProps) => { + return ( + + + + ) +} diff --git a/src/components/backgrounds/BgSquircle.tsx b/src/components/backgrounds/BgSquircle.tsx new file mode 100644 index 0000000..d08f010 --- /dev/null +++ b/src/components/backgrounds/BgSquircle.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Path } from 'react-native-svg' +import { BgShapeProps } from './types' + +export const BgSquircle = ({ bgColor }: BgShapeProps) => { + const { colors } = useTheme() + + const color = colors.bgColors[bgColor] + + return +} diff --git a/src/components/backgrounds/BgSquircleMask.tsx b/src/components/backgrounds/BgSquircleMask.tsx new file mode 100644 index 0000000..d2ba2fc --- /dev/null +++ b/src/components/backgrounds/BgSquircleMask.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Mask, Path } from 'react-native-svg' +import { BgMaskProps } from './types' + +export const BgSquircleMask = ({ id }: BgMaskProps) => { + return ( + + + + ) +} diff --git a/src/components/backgrounds/types.ts b/src/components/backgrounds/types.ts new file mode 100644 index 0000000..22b79a0 --- /dev/null +++ b/src/components/backgrounds/types.ts @@ -0,0 +1,9 @@ +import { colors } from 'theme' + +export interface BgShapeProps { + bgColor: keyof typeof colors.bgColors +} + +export interface BgMaskProps { + id: string +} diff --git a/src/components/bodies/Breasts.tsx b/src/components/bodies/Breasts.tsx index db19e81..d9ed409 100644 --- a/src/components/bodies/Breasts.tsx +++ b/src/components/bodies/Breasts.tsx @@ -150,3 +150,5 @@ export const Back = ({ clothingColor, braStraps }: BodyProps) => { ) } + +export const hasBreasts = true diff --git a/src/components/bodies/Chest.tsx b/src/components/bodies/Chest.tsx index ae6ef62..8030490 100644 --- a/src/components/bodies/Chest.tsx +++ b/src/components/bodies/Chest.tsx @@ -36,3 +36,5 @@ export const Back = () => { ) } + +export const hasBreasts = false diff --git a/src/components/clothing/ChequeredShirt.tsx b/src/components/clothing/ChequeredShirt.tsx new file mode 100644 index 0000000..1a3ad1d --- /dev/null +++ b/src/components/clothing/ChequeredShirt.tsx @@ -0,0 +1,573 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { ClothingProps } from './types' +import { G, Path } from 'react-native-svg' + +export const Front = ({ color, hasBreasts }: ClothingProps) => { + const { colors } = useTheme() + + const { base } = colors.clothing[color] + + if (!hasBreasts) { + return null + } + + return ( + + + + + + + + + + + + + + + + + + + + ) +} + +export const Back = ({ color }: ClothingProps) => { + const { colors, skin } = useTheme() + + const { base } = colors.clothing[color] + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/clothing/ChequeredShirtDark.tsx b/src/components/clothing/ChequeredShirtDark.tsx new file mode 100644 index 0000000..58b8e92 --- /dev/null +++ b/src/components/clothing/ChequeredShirtDark.tsx @@ -0,0 +1,573 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { ClothingProps } from './types' +import { G, Path } from 'react-native-svg' + +export const Front = ({ color, hasBreasts }: ClothingProps) => { + const { colors } = useTheme() + + const { base } = colors.clothing[color] + + if (!hasBreasts) { + return null + } + + return ( + + + + + + + + + + + + + + + + + + + + ) +} + +export const Back = ({ color }: ClothingProps) => { + const { colors, skin } = useTheme() + + const { base } = colors.clothing[color] + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/clothing/DenimJacket.tsx b/src/components/clothing/DenimJacket.tsx new file mode 100644 index 0000000..23dce86 --- /dev/null +++ b/src/components/clothing/DenimJacket.tsx @@ -0,0 +1,155 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { ClothingProps } from './types' +import { Path, G, Circle } from 'react-native-svg' + +export const DenimJacket = ({ color }: ClothingProps) => { + const { colors, skin } = useTheme() + + const { base, shadow } = colors.clothing[color] + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/clothing/Hoodie.tsx b/src/components/clothing/Hoodie.tsx new file mode 100644 index 0000000..2c704ec --- /dev/null +++ b/src/components/clothing/Hoodie.tsx @@ -0,0 +1,136 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { ClothingProps } from './types' +import { Path, G } from 'react-native-svg' + +export const Hoodie = ({ color }: ClothingProps) => { + const { colors, skin } = useTheme() + + const { base, shadow } = colors.clothing[color] + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/clothing/types.ts b/src/components/clothing/types.ts index ee42a05..9a11efa 100644 --- a/src/components/clothing/types.ts +++ b/src/components/clothing/types.ts @@ -3,4 +3,5 @@ import { colors } from '../../theme' export interface ClothingProps { color: keyof typeof colors.clothing graphic?: React.ComponentType + hasBreasts?: boolean } diff --git a/src/components/clothingGraphic/Donut.tsx b/src/components/clothingGraphic/Donut.tsx new file mode 100644 index 0000000..263bbb0 --- /dev/null +++ b/src/components/clothingGraphic/Donut.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export const Donut = () => { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/clothingGraphic/Rainbow.tsx b/src/components/clothingGraphic/Rainbow.tsx new file mode 100644 index 0000000..68e06f1 --- /dev/null +++ b/src/components/clothingGraphic/Rainbow.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export const Rainbow = () => { + return ( + + + + + + + + + + + ) +} diff --git a/src/components/eyes/Crazy.tsx b/src/components/eyes/Crazy.tsx new file mode 100644 index 0000000..0fb1f92 --- /dev/null +++ b/src/components/eyes/Crazy.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { RightLash, LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const Crazy = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + {withLashes && ( + + + + + )} + + ) +} diff --git a/src/components/eyes/Cute.tsx b/src/components/eyes/Cute.tsx new file mode 100644 index 0000000..139712e --- /dev/null +++ b/src/components/eyes/Cute.tsx @@ -0,0 +1,68 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { RightLash, LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const Cute = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + + + + + {withLashes && ( + + + + + )} + + ) +} diff --git a/src/components/eyes/Cyborg.tsx b/src/components/eyes/Cyborg.tsx new file mode 100644 index 0000000..5ea10aa --- /dev/null +++ b/src/components/eyes/Cyborg.tsx @@ -0,0 +1,77 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const Cyborg = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + + + + + + {withLashes && ( + + )} + + ) +} diff --git a/src/components/eyes/Dollars.tsx b/src/components/eyes/Dollars.tsx new file mode 100644 index 0000000..1d02d60 --- /dev/null +++ b/src/components/eyes/Dollars.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { RightLash, LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const Dollars = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + {withLashes && ( + + + + + )} + + ) +} diff --git a/src/components/eyes/PiratePatch.tsx b/src/components/eyes/PiratePatch.tsx new file mode 100644 index 0000000..5275799 --- /dev/null +++ b/src/components/eyes/PiratePatch.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const PiratePatch = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + {withLashes && ( + + )} + + ) +} diff --git a/src/components/eyes/SimplePatch.tsx b/src/components/eyes/SimplePatch.tsx new file mode 100644 index 0000000..db9beb5 --- /dev/null +++ b/src/components/eyes/SimplePatch.tsx @@ -0,0 +1,71 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const SimplePatch = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + + + + {withLashes && ( + + )} + + ) +} diff --git a/src/components/eyes/Stars.tsx b/src/components/eyes/Stars.tsx new file mode 100644 index 0000000..f2822a9 --- /dev/null +++ b/src/components/eyes/Stars.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' +import { useTheme } from '../../themeContext' +import { RightLash, LeftLash } from './Lashes' +import { EyeProps } from './types' + +export const Stars = ({ withLashes }: EyeProps) => { + const { colors } = useTheme() + + return ( + + + + + + + + {withLashes && ( + + + + + )} + + ) +} diff --git a/src/components/facialHair/Goatee.tsx b/src/components/facialHair/Goatee.tsx new file mode 100644 index 0000000..6c5169b --- /dev/null +++ b/src/components/facialHair/Goatee.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { FacialHairProps } from './types' +import { Path, G } from 'react-native-svg' + +export const Goatee = ({ color }: FacialHairProps) => { + const { colors } = useTheme() + const { base } = colors.hair[color] + + return ( + + + + ) +} diff --git a/src/components/hair/Mohawk.tsx b/src/components/hair/Mohawk.tsx new file mode 100644 index 0000000..06662e9 --- /dev/null +++ b/src/components/hair/Mohawk.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { HairProps } from './types' +import { Path, G } from 'react-native-svg' + +export const Back = () => <> + +export const Front = ({ hairColor }: HairProps) => { + const { colors } = useTheme() + + const { base, shadow } = colors.hair[hairColor] + + return ( + + + + + + + ) +} diff --git a/src/components/hats/Hijab.tsx b/src/components/hats/Hijab.tsx new file mode 100644 index 0000000..d13f13a --- /dev/null +++ b/src/components/hats/Hijab.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Noop } from '../../utils/Noop' +import { Path, G } from 'react-native-svg' +import { HatProps } from './types' +import { ClothingProps } from '../clothing/types' + +export const Front = ({ color }: ClothingProps & HatProps) => { + const { colors } = useTheme() + + const { base } = colors.clothing[color] + + return ( + + + + + + + + + + ) +} + +export const Back = Noop diff --git a/src/components/hats/Party.tsx b/src/components/hats/Party.tsx new file mode 100644 index 0000000..f3844e7 --- /dev/null +++ b/src/components/hats/Party.tsx @@ -0,0 +1,71 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Noop } from '../../utils/Noop' +import { Path, G } from 'react-native-svg' + +export const Front = () => { + const { colors } = useTheme() + + return ( + + + + + + + + + + + + + + ) +} + +export const Back = Noop diff --git a/src/components/mouths/PiercedTongue.tsx b/src/components/mouths/PiercedTongue.tsx new file mode 100644 index 0000000..28a6f71 --- /dev/null +++ b/src/components/mouths/PiercedTongue.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Path, Circle, Rect, G } from 'react-native-svg' + +export const PiercedTongue = () => { + const { colors } = useTheme() + + return ( + + + + + + + + + + + ) +} diff --git a/src/components/mouths/VomitingRainbow.tsx b/src/components/mouths/VomitingRainbow.tsx new file mode 100644 index 0000000..ba43600 --- /dev/null +++ b/src/components/mouths/VomitingRainbow.tsx @@ -0,0 +1,166 @@ +import React from 'react' +import { useTheme } from '../../themeContext' +import { Path, G } from 'react-native-svg' + +export const VomitingRainbow = () => { + const { colors } = useTheme() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/theme.ts b/src/theme.ts index ea31b0f..9b84c87 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -101,8 +101,13 @@ export const colors = { }, bgColors: { blue: '#85c5e5', - // green: '#89D86F', - // red: '#ED9191', + green: '#89D86F', + red: '#ED9191', + orange: "#F6AD55", + yellow: "#F6E05E", + turqoise: "#4FD1C5", + pink: "#F687B3", + purple: "#B794F4" }, outline: '#592d3d', white: '#ffffff',