82 |
86 | {React.string("Personas")}
84 | {React.string("Avatar Generator")} 85 |
87 |
91 | 88 | {React.string("A playful avatar generator for the modern age.")} 89 |
90 |
111 |
112 |
113 |
53 |
112 | }
113 |
--------------------------------------------------------------------------------
/src/components/Button.css:
--------------------------------------------------------------------------------
1 | .Button {
2 | padding: 16px;
3 | border: none;
4 | border-radius: 8px;
5 | box-shadow: 0 2px 3px 0 rgba(16, 22, 64, 0.12);
6 | background-color: #ffffff;
7 | text-decoration: none;
8 | }
9 |
10 | @media (min-width: 768px) {
11 | .Button--github {
12 | position: absolute;
13 | top: 20px;
14 | right: 20px;
15 | }
16 | }
17 |
18 | .Button-icon {
19 | margin-right: 12px;
20 | display: inline-block;
21 | vertical-align: middle;
22 | }
23 |
24 | .Button-label {
25 | font-family: "CerebriSans-Medium";
26 | font-size: 14px;
27 | font-weight: 500;
28 | font-style: normal;
29 | font-stretch: normal;
30 | line-height: normal;
31 | letter-spacing: normal;
32 | color: #73859d;
33 | vertical-align: middle;
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/Button.res:
--------------------------------------------------------------------------------
1 | %raw(`require('./Button.css')`)
2 |
3 | @react.component
4 | let make = (~style=?, ~label, ~href) =>
5 |
6 | {React.array(pngImage)}
54 | {React.array(faceFeatures)}
55 |
59 |
60 | {Belt.Array.map(settings, o =>
61 | {
70 | let key: Types.key = switch o.id {
71 | | #Skin => #SkinColor
72 | | #Hair => #HairColor
73 | | #FacialHair => #FacialHairColor
74 | | #Body => #BodyColor
75 | | #Background => #BackgroundColor
76 | | _ => Js.Exn.raiseError("ColorNotFound: " ++ Types.idToJs(o.id))
77 | }
78 |
79 | onChange(key, color)
80 | }}
81 | onSelectStyle={style => {
82 | let key: Types.key = switch o.id {
83 | | #Skin => #SkinStyle
84 | | #Hair => #HairStyle
85 | | #FacialHair => #FacialHairStyle
86 | | #Body => #BodyStyle
87 | | #Eyes => #EyesStyle
88 | | #Mouth => #MouthStyle
89 | | #Nose => #NoseStyle
90 | | _ => Js.Exn.raiseError("StyleNotFound: " ++ Types.idToJs(o.id))
91 | }
92 | onChange(key, style)
93 | }}
94 | />
95 | )->React.array}
96 |
97 |
100 |
101 | 
102 |
111 |
102 |
103 | {React.string("Want to make your own?")}
104 |
105 | 106 | {React.string("Get the Sketch file on Gumroad.")} 107 | 108 |
109 | 105 | 106 | {React.string("Get the Sketch file on Gumroad.")} 107 | 108 |
7 | {React.string(label)}
8 |
9 |
--------------------------------------------------------------------------------
/src/components/ColorSwatch.css:
--------------------------------------------------------------------------------
1 | .ColorSwatch {
2 | width: 20px;
3 | height: 20px;
4 | border-radius: 4px;
5 | border: none;
6 | background: #eee;
7 | box-shadow: 0 1px 3px 0 rgba(16, 22, 64, 0.16);
8 | cursor: pointer;
9 | margin-left: 6px;
10 | margin-right: 6px;
11 | margin-bottom: 12px;
12 | padding: 0;
13 | }
14 |
15 | .ColorSwatch-disabled {
16 | width: 20px;
17 | height: 20px;
18 | border-radius: 4px;
19 | background: #EEEFF5;
20 | margin-left: 6px;
21 | margin-right: 6px;
22 | margin-bottom: 12px;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/ColorSwatch.res:
--------------------------------------------------------------------------------
1 | %raw(`require('./ColorSwatch.css')`)
2 |
3 | @react.component
4 | let make = (~value, ~selected, ~disabled=false, ~onSelect) =>
5 | disabled
6 | ?
7 | :
13 |
--------------------------------------------------------------------------------
/src/components/Helmet.res:
--------------------------------------------------------------------------------
1 | @deriving(abstract)
2 | type finalMetaItem = {
3 | @optional
4 | name: string,
5 | @optional
6 | property: string,
7 | @optional
8 | content: string,
9 | }
10 |
11 | type link = {
12 | rel: string,
13 | href: string,
14 | }
15 |
16 | @module("react-helmet") @react.component
17 | external make: (
18 | ~async: bool=?,
19 | ~base: 'a=?,
20 | ~bodyAttributes: 'a=?,
21 | ~defaultTitle: string=?,
22 | ~defer: bool=?,
23 | ~encodeSpecialCharacters: bool=?,
24 | ~htmlAttributes: 'a=?,
25 | ~onChangeClientState: 'a=?,
26 | ~link: array=?,
27 | ~style: string=?,
28 | ~titleTemplate: string=?,
29 | ~meta: array
10 |
13 |
40 |
41 |
--------------------------------------------------------------------------------
/src/components/Styler.css:
--------------------------------------------------------------------------------
1 | .Styler-container {
2 | text-align: center;
3 | width: 140px;
4 | margin-top: 32px;
5 | }
6 |
7 | .Styler-label {
8 | font-family: "CerebriSans-Regular";
9 | font-size: 12px;
10 | font-weight: normal;
11 | font-style: normal;
12 | font-stretch: normal;
13 | line-height: normal;
14 | letter-spacing: 2.6px;
15 | color: #7c7f91;
16 | text-transform: uppercase;
17 | margin-bottom: 14px;
18 | display: inline-block;
19 | }
20 |
21 | .Styler-model {
22 | overflow: hidden;
23 | width: 64px;
24 | height: 64px;
25 | margin-bottom: 14px;
26 | }
27 |
28 | .Styler-model.svg-Background {
29 | border-radius: 32px;
30 | }
31 |
32 | .Styler-colors {
33 | width: 130px;
34 | display: flex;
35 | flex-wrap: wrap;
36 | justify-content: space-between;
37 | }
38 |
39 | .Styler-picker {
40 | display: flex;
41 | justify-content: space-between;
42 | }
43 |
44 | .Styler-arrow--right {
45 | transform: rotate(180deg);
46 | }
47 |
48 | .Styler-btn {
49 | cursor: pointer;
50 | background: transparent;
51 | border: none;
52 | padding: 0 10px;
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/Styler.res:
--------------------------------------------------------------------------------
1 | %raw(`require('./Styler.css')`)
2 |
3 | type state = {index: int}
4 |
5 | type action =
6 | | Increment
7 | | Decrement
8 |
9 | @react.component
10 | let make = (
11 | ~id,
12 | ~label,
13 | ~colors,
14 | ~styles,
15 | ~selectedColor,
16 | ~selectedStyle,
17 | ~onSelectColor,
18 | ~onSelectStyle,
19 | ) => {
20 | let (_, dispatch) = React.useReducer((state, action) =>
21 | switch action {
22 | | Increment =>
23 | let inc = Belt.Array.length(styles) - 1 > state.index ? 1 : -Belt.Array.length(styles) + 1
24 | let index = state.index + inc
25 | let style = styles[index]
26 | onSelectStyle(j`$style`)
27 | {index: index}
28 | | Decrement =>
29 | let inc = state.index > 0 ? 1 : -Belt.Array.length(styles) + 1
30 | let index = state.index - inc
31 | let style = styles[index]
32 | onSelectStyle(j`$style`)
33 | {index: index}
34 | }
35 | , {index: 0})
36 |
37 | let colorSwatches = switch id {
38 | | #Eyes
39 | | #Nose
40 | | #Mouth => React.null
41 | | _ =>
42 | Belt.Array.map(colors, color =>
43 | {React.string("Enjoy your avatar!")}
14 | 15 | {React.string( 16 | "Share it with your friends and see what ridiculousness they come up with!", 17 | )} 18 | 19 | 39 |
26 | 
36 | image
71 | }
72 |
73 |
74 | {React.string(label)}
75 |
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/SvgLoader.res:
--------------------------------------------------------------------------------
1 | let getBackground = (fill, size) =>
2 | j``
3 | let getBeardMustache = (fill, size) =>
4 | j`
5 |
6 |
21 | `
22 | let getSkin = (fill, size) =>
23 | j`
24 |
26 | `
27 | let getMustache = (fill, size) =>
28 | j``
29 | let getGoatee = (fill, size) =>
30 | j``
31 | let getShadow = (fill, size) =>
32 | j``
33 | let getSoulpatch = (fill, size) =>
34 | j``
35 | let getWalrus = (fill, size) =>
36 | j``
37 |
38 | let getEyesGlasses = (_, size) =>
39 | j``
40 | let getEyesHappy = (_, size) =>
41 | j``
42 | let getEyesOpen = (_, size) =>
43 | j``
44 | let getEyesSleepy = (fill, size) =>
45 | j``
46 | let getEyesSunglasses = (fill, size) =>
47 | j``
48 | let getEyesWink = (fill, size) =>
49 | j``
50 |
51 | let getMouthBigsmile = (_, size) =>
52 | j``
53 | let getMouthFrown = (_, size) =>
54 | j``
55 | let getMouthLips = (_, size) =>
56 | j``
57 | let getMouthPacifier = (_, size) =>
58 | j``
59 | let getMouthSmile = (_, size) =>
60 | j``
61 | let getMouthSmirk = (_, size) =>
62 | j``
63 | let getMouthSurprise = (_, size) =>
64 | j``
65 |
66 | let getNoseMediumround = (fill, size) =>
67 | j`
68 | `
70 |
71 | let getNoseSmallround = (fill, size) =>
72 | j``
74 |
75 | let getNoseWrinkles = (fill, size) =>
76 | j``
78 |
79 | let getCheckered = (fill, size) =>
80 | j`
81 |
86 | `
87 | let getBodyOval = (fill, size) =>
88 | j``
89 | let getBodyRound = (fill, size) =>
90 | j``
91 | let getBodySquare = (fill, size) =>
92 | j``
93 |
94 | let getBald = (_, size) =>
95 | j``
96 | let getBalding = (fill, size) =>
97 | j``
98 | let getBigcurls = (fill, size) =>
99 | j``
100 | let getBobbangs = (fill, size) =>
101 | j``
102 | let getBobcut = (fill, size) =>
103 | j``
104 | let getBuncurls = (fill, size) =>
105 | j``
106 | let getBuzzcut = (fill, size) =>
107 | j``
108 | let getCurlybun = (_, size) =>
109 | j``
110 | let getCurlyhightop = (fill, size) =>
111 | j``
112 | let getHightopcurly = (fill, size) =>
113 | j`
114 |
123 | `
124 |
125 | let getLong = (fill, size) =>
126 | j``
127 | let getPigtails = (fill, size) =>
128 | j``
129 | let getShortcombover = (fill, size) =>
130 | j``
131 |
132 | let getBeanie = (fill, size) =>
133 | j``
134 | let getBunundercut = (fill, size) =>
135 | j`
136 |
146 | `
147 |
148 | let getExtralong = (fill, size) =>
149 | j``
150 | let getFade = (fill, size) =>
151 | j`
152 | `
158 | let getHat = (fill, size) =>
159 | j`
160 |
167 | `
168 | let getMohawk = (fill, size) =>
169 | j``
170 | let getShortcomboverchops = (fill, size) =>
171 | j``
172 | let getSidebuzz = (fill, size) =>
173 | j`
174 | `
178 | let getStraightbun = (fill, size) =>
179 | j``
180 |
181 | @react.component
182 | let make = (~style=?, ~className="", ~name, ~fill="#000", ~size="64") => {
183 | let getHtml = name =>
184 | switch name {
185 | | "Skin" => getSkin(fill, size)
186 | | "Mustache" => getMustache(fill, size)
187 | | "BeardMustache" => getBeardMustache(fill, size)
188 | | "Goatee" => getGoatee(fill, size)
189 | | "Shadow" => getShadow(fill, size)
190 | | "Soulpatch" => getSoulpatch(fill, size)
191 | | "Walrus" => getWalrus(fill, size)
192 | | "Glasses" => getEyesGlasses(fill, size)
193 | | "Happy" => getEyesHappy(fill, size)
194 | | "Open" => getEyesOpen(fill, size)
195 | | "Sleepy" => getEyesSleepy(fill, size)
196 | | "Sunglasses" => getEyesSunglasses(fill, size)
197 | | "Wink" => getEyesWink(fill, size)
198 | | "Bigsmile" => getMouthBigsmile(fill, size)
199 | | "Frown" => getMouthFrown(fill, size)
200 | | "Lips" => getMouthLips(fill, size)
201 | | "Pacifier" => getMouthPacifier(fill, size)
202 | | "Smile" => getMouthSmile(fill, size)
203 | | "Smirk" => getMouthSmirk(fill, size)
204 | | "Surprise" => getMouthSurprise(fill, size)
205 | | "Mediumround" => getNoseMediumround(fill, size)
206 | | "Smallround" => getNoseSmallround(fill, size)
207 | | "Wrinkles" => getNoseWrinkles(fill, size)
208 | | "Oval" => getBodyOval(fill, size)
209 | | "Checkered" => getCheckered(fill, size)
210 | | "Round" => getBodyRound(fill, size)
211 | | "Square" => getBodySquare(fill, size)
212 | | "Bald" => getBald(fill, size)
213 | | "Balding" => getBalding(fill, size)
214 | | "Bigcurls" => getBigcurls(fill, size)
215 | | "Bobbangs" => getBobbangs(fill, size)
216 | | "Bobcut" => getBobcut(fill, size)
217 | | "Buncurls" => getBuncurls(fill, size)
218 | | "Buzzcut" => getBuzzcut(fill, size)
219 | | "Curlybun" => getCurlybun(fill, size)
220 | | "Hightopcurly" => getCurlyhightop(fill, size)
221 | | "Long" => getLong(fill, size)
222 | | "Pigtails" => getPigtails(fill, size)
223 | | "Shortcombover" => getShortcombover(fill, size)
224 | | "Hat" => getHat(fill, size)
225 | | "Beanie" => getBeanie(fill, size)
226 | | "Bunundercut" => getBunundercut(fill, size)
227 | | "Extralong" => getExtralong(fill, size)
228 | | "Fade" => getFade(fill, size)
229 | | "Mohawk" => getMohawk(fill, size)
230 | | "Shortcomboverchops" => getShortcomboverchops(fill, size)
231 | | "Sidebuzz" => getSidebuzz(fill, size)
232 | | "Straightbun" => getStraightbun(fill, size)
233 | | "Background" => getBackground(fill, size)
234 | | _ => ""
235 | }
236 |
237 | getHtml(name) == ""
238 | ? React.null
239 | :
240 | }
241 |
--------------------------------------------------------------------------------
/src/components/Types.res:
--------------------------------------------------------------------------------
1 | @deriving(jsConverter)
2 | type id = [
3 | | @as("Skin") #Skin
4 | | @as("Hair") #Hair
5 | | @as("FacialHair") #FacialHair
6 | | @as("Body") #Body
7 | | @as("Eyes") #Eyes
8 | | @as("Mouth") #Mouth
9 | | @as("Nose") #Nose
10 | | @as("Background") #Background
11 | | @as("Head") #Head
12 | ]
13 |
14 | type color = [
15 | | #SkinColor
16 | | #HairColor
17 | | #FacialHairColor
18 | | #BodyColor
19 | | #BackgroundColor
20 | ]
21 |
22 | type style = [
23 | | #SkinStyle
24 | | #HairStyle
25 | | #FacialHairStyle
26 | | #BodyStyle
27 | | #EyesStyle
28 | | #MouthStyle
29 | | #NoseStyle
30 | ]
31 |
32 | type key = [color | style]
33 |
34 | type styles = {
35 | skin: string,
36 | skinColor: string,
37 | hair: string,
38 | hairColor: string,
39 | facialHair: string,
40 | facialHairColor: string,
41 | body: string,
42 | bodyColor: string,
43 | eyes: string,
44 | mouth: string,
45 | nose: string,
46 | bgColor: string,
47 | head: string,
48 | }
49 |
50 | type setting = {
51 | id: id,
52 | label: string,
53 | colors: array showLeftArrow showImage showRightArrow
76 | colorSwatches
77 | {React.string("NOT FOUND")}
5 |{React.string("You just hit a route that doesn't exist... the sadness.")}
6 |