twemoji for pose picker
This commit is contained in:
Matt Dunn-Rankin
parent
4954d4adcf
commit
295a7ec8ba
6 changed files with 55 additions and 36 deletions
|
|
@ -14,6 +14,13 @@ import {
|
||||||
|
|
||||||
import { safeImageUrl } from "./util";
|
import { safeImageUrl } from "./util";
|
||||||
|
|
||||||
|
// From https://twemoji.twitter.com/, thank you!
|
||||||
|
import twemojiSmile from "../images/twemoji/smile.svg";
|
||||||
|
import twemojiCry from "../images/twemoji/cry.svg";
|
||||||
|
import twemojiSick from "../images/twemoji/sick.svg";
|
||||||
|
import twemojiMasc from "../images/twemoji/masc.svg";
|
||||||
|
import twemojiFem from "../images/twemoji/fem.svg";
|
||||||
|
|
||||||
function PosePicker({ onLockFocus, onUnlockFocus }) {
|
function PosePicker({ onLockFocus, onUnlockFocus }) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
|
|
@ -33,26 +40,28 @@ function PosePicker({ onLockFocus, onUnlockFocus }) {
|
||||||
d="flex"
|
d="flex"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
border="2px solid transparent"
|
|
||||||
_focus={{ borderColor: "gray.50" }}
|
_focus={{ borderColor: "gray.50" }}
|
||||||
_hover={{ borderColor: "gray.50" }}
|
_hover={{ borderColor: "gray.50" }}
|
||||||
outline="initial"
|
outline="initial"
|
||||||
className={cx(
|
className={cx(
|
||||||
css`
|
css`
|
||||||
border: 2px solid transparent;
|
border: 1px solid transparent !important;
|
||||||
|
transition: border-color 0.2s !important;
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-open {
|
&.is-open {
|
||||||
border-color: ${theme.colors.gray["50"]};
|
border-color: ${theme.colors.gray["50"]} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
border-width: 2px !important;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
isOpen && "is-open"
|
isOpen && "is-open"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span role="img" aria-label="Choose a pose">
|
<EmojiImage src={twemojiSmile} aria-label="Choose a pose" />
|
||||||
😊
|
|
||||||
</span>
|
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent>
|
<PopoverContent>
|
||||||
|
|
@ -61,45 +70,45 @@ function PosePicker({ onLockFocus, onUnlockFocus }) {
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th />
|
<th />
|
||||||
<Box as="th" textAlign="center">
|
<Cell as="th">
|
||||||
😊
|
<EmojiImage src={twemojiSmile} aria-label="Happy" />
|
||||||
</Box>
|
</Cell>
|
||||||
<Box as="th" textAlign="center">
|
<Cell as="th">
|
||||||
😢
|
<EmojiImage src={twemojiCry} aria-label="Sad" />
|
||||||
</Box>
|
</Cell>
|
||||||
<Box as="th" textAlign="center">
|
<Cell as="th">
|
||||||
🤒
|
<EmojiImage src={twemojiSick} aria-label="Sick" />
|
||||||
</Box>
|
</Cell>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<Box as="th" textAlign="right">
|
<Cell as="th">
|
||||||
🙍♂️
|
<EmojiImage src={twemojiMasc} aria-label="Masculine" />
|
||||||
</Box>
|
</Cell>
|
||||||
<PoseCell>
|
<Cell as="td">
|
||||||
<PoseButton src="http://pets.neopets.com/cp/42j5q3zx/1/1.png" />
|
<PoseButton src="http://pets.neopets.com/cp/42j5q3zx/1/1.png" />
|
||||||
</PoseCell>
|
</Cell>
|
||||||
<PoseCell>
|
<Cell as="td">
|
||||||
<PoseButton src="http://pets.neopets.com/cp/42j5q3zx/2/1.png" />
|
<PoseButton src="http://pets.neopets.com/cp/42j5q3zx/2/1.png" />
|
||||||
</PoseCell>
|
</Cell>
|
||||||
<PoseCell>
|
<Cell as="td">
|
||||||
<PoseButton src="http://pets.neopets.com/cp/42j5q3zx/4/1.png" />
|
<PoseButton src="http://pets.neopets.com/cp/42j5q3zx/4/1.png" />
|
||||||
</PoseCell>
|
</Cell>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<Box as="th" textAlign="right">
|
<Cell as="th">
|
||||||
🙍♀️
|
<EmojiImage src={twemojiFem} aria-label="Feminine" />
|
||||||
</Box>
|
</Cell>
|
||||||
<PoseCell>
|
<Cell as="td">
|
||||||
<PoseButton src="http://pets.neopets.com/cp/xgnghng7/1/1.png" />
|
<PoseButton src="http://pets.neopets.com/cp/xgnghng7/1/1.png" />
|
||||||
</PoseCell>
|
</Cell>
|
||||||
<PoseCell>
|
<Cell as="td">
|
||||||
<PoseButton src="http://pets.neopets.com/cp/xgnghng7/2/1.png" />
|
<PoseButton src="http://pets.neopets.com/cp/xgnghng7/2/1.png" />
|
||||||
</PoseCell>
|
</Cell>
|
||||||
<PoseCell>
|
<Cell as="td">
|
||||||
<PoseButton src="http://pets.neopets.com/cp/xgnghng7/4/1.png" />
|
<PoseButton src="http://pets.neopets.com/cp/xgnghng7/4/1.png" />
|
||||||
</PoseCell>
|
</Cell>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -112,13 +121,14 @@ function PosePicker({ onLockFocus, onUnlockFocus }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function PoseCell({ children }) {
|
function Cell({ children, as }) {
|
||||||
|
const Tag = as;
|
||||||
return (
|
return (
|
||||||
<td>
|
<Tag>
|
||||||
<Flex justify="center" p="1">
|
<Flex justify="center" p="1">
|
||||||
{children}
|
{children}
|
||||||
</Flex>
|
</Flex>
|
||||||
</td>
|
</Tag>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,4 +154,8 @@ function PoseButton({ src }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function EmojiImage({ src, "aria-label": ariaLabel }) {
|
||||||
|
return <Image src={src} aria-label={ariaLabel} width="16px" height="16px" />;
|
||||||
|
}
|
||||||
|
|
||||||
export default PosePicker;
|
export default PosePicker;
|
||||||
|
|
|
||||||
1
src/images/twemoji/cry.svg
Normal file
1
src/images/twemoji/cry.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="#664500" cx="11.5" cy="17" rx="2.5" ry="3.5"/><ellipse fill="#664500" cx="24.5" cy="17" rx="2.5" ry="3.5"/><path fill="#664500" d="M5.999 13.5c-.208 0-.419-.065-.599-.2-.442-.331-.531-.958-.2-1.4 3.262-4.35 7.616-4.4 7.8-4.4.552 0 1 .448 1 1 0 .551-.445.998-.996 1-.155.002-3.568.086-6.204 3.6-.196.262-.497.4-.801.4zm24.002 0c-.305 0-.604-.138-.801-.4-2.641-3.521-6.061-3.599-6.206-3.6-.55-.006-.994-.456-.991-1.005.003-.551.447-.995.997-.995.184 0 4.537.05 7.8 4.4.332.442.242 1.069-.2 1.4-.18.135-.39.2-.599.2zm-6.516 14.879C23.474 28.335 22.34 24 18 24s-5.474 4.335-5.485 4.379c-.053.213.044.431.232.544.188.112.433.086.596-.06C13.352 28.855 14.356 28 18 28c3.59 0 4.617.83 4.656.863.095.09.219.137.344.137.084 0 .169-.021.246-.064.196-.112.294-.339.239-.557z"/><path fill="#5DADEC" d="M16 31c0 2.762-2.238 5-5 5s-5-2.238-5-5 4-10 5-10 5 7.238 5 10z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
1
src/images/twemoji/fem.svg
Normal file
1
src/images/twemoji/fem.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFAC33" d="M14 0c-1.721 0-3.343.406-4.793 1.111C8.814 1.043 8.412 1 8 1 4.134 1 1 4.134 1 8v12h.018C1.201 26.467 6.489 31.656 13 31.656c6.511 0 11.799-5.189 11.982-11.656H25v-9c0-6.075-4.925-11-11-11z"/><path fill="#9268CA" d="M22 27H4c-2.209 0-4 1.791-4 4v5h26v-5c0-2.209-1.791-4-4-4z"/><path fill="#7450A8" d="M21 32h1v4h-1zM4 32h1v4H4z"/><path fill="#FFDC5D" d="M10 22v6c0 1.657 1.343 3 3 3s3-1.343 3-3v-6h-6z"/><path fill="#FFDC5D" d="M9 5s-.003 5.308-5 5.936V17c0 4.971 4.029 9 9 9s9-4.029 9-9v-5.019C10.89 11.605 9 5 9 5z"/><path fill="#DF1F32" d="M17 22H9s1 2 4 2 4-2 4-2z"/><path fill="#9268CA" d="M29 36h-7l1-17h6z"/><path fill="#F9CA55" d="M31.541 15.443c-.144-.693-.822-1.139-1.517-.997L27.35 15H25c-1.104 0-2 .896-2 2v2h5c1.079 0 1.953-.857 1.992-1.927l.355-.073H31c0-.074-.028-.144-.045-.216.444-.276.698-.799.586-1.341z"/><path fill="#FFDC5D" d="M36 16c0-.552-.447-1-1-1l-6 1h-5c-.553 0-1 .448-1 1v2h6l6-2s1-.447 1-1z"/><path fill="#C1694F" d="M14 19.5h-2c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path fill="#662113" d="M9 16c-.552 0-1-.448-1-1v-1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zm8 0c-.552 0-1-.448-1-1v-1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
src/images/twemoji/masc.svg
Normal file
1
src/images/twemoji/masc.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#4289C1" d="M22 27H4c-2.209 0-4 1.791-4 4v5h26v-5c0-2.209-1.791-4-4-4z"/><path fill="#2A6797" d="M21 32h1v4h-1zM4 32h1v4H4z"/><path fill="#FFDC5D" d="M10 22v6c0 1.657 1.343 3 3 3s3-1.343 3-3v-6h-6z"/><path fill="#4289C1" d="M29 36h-7l1-17h6z"/><path fill="#F9CA55" d="M31.541 15.443c-.144-.693-.822-1.139-1.517-.997L27.35 15H25c-1.104 0-2 .896-2 2v2h5c1.079 0 1.953-.857 1.992-1.927l.355-.073H31c0-.074-.028-.144-.045-.216.444-.276.698-.799.586-1.341z"/><path fill="#FFDC5D" d="M36 16c0-.552-.447-1-1-1l-6 1h-5c-.553 0-1 .448-1 1v2h6l6-2s1-.447 1-1zM4 5.938V17c0 4.971 4.029 9 9 9s9-4.029 9-9V6.25L4 5.938z"/><path fill="#C1694F" d="M9 22h8s-1 2-4 2-4-2-4-2z"/><path fill="#662113" d="M9 16c-.552 0-1-.448-1-1v-1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zm8 0c-.552 0-1-.448-1-1v-1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1z"/><path fill="#C1694F" d="M14 19.5h-2c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path fill="#FFDC5D" d="M5.847 13.715c0 1.58-.801 2.861-1.788 2.861s-1.788-1.281-1.788-2.861c0-1.58.801-2.861 1.788-2.861s1.788 1.281 1.788 2.861zm17.882 0c0 1.58-.8 2.861-1.788 2.861s-1.788-1.281-1.788-2.861c0-1.58.8-2.861 1.788-2.861s1.788 1.281 1.788 2.861z"/><path fill="#FFAC33" d="M13 .823C5.981.823 2.861 5.507 2.861 9.411c0 3.903 1.343 4.986 1.56 3.903.78-3.903 3.12-5.101 3.12-5.101 4.68 3.904 3.9.781 3.9.781 4.679 4.684 2.34 0 2.34 0 1.56 1.562 6.239 1.562 6.239 1.562s.78 1.198 1.559 2.759c.78 1.562 1.56 0 1.56-3.903 0-3.905-3.9-8.589-10.139-8.589z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/images/twemoji/sick.svg
Normal file
1
src/images/twemoji/sick.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle fill="#FFCC4D" cx="18" cy="18" r="18"/><ellipse fill="#664500" cx="12.5" cy="16.5" rx="2.5" ry="3.5"/><ellipse fill="#664500" cx="23.5" cy="16.5" rx="2.5" ry="3.5"/><path fill="#664500" d="M29 12c-5.554 0-7.802-4.367-7.895-4.553-.247-.494-.047-1.095.447-1.342.492-.247 1.092-.048 1.34.443C22.967 6.694 24.713 10 29 10c.553 0 1 .448 1 1 0 .553-.447 1-1 1zm-22-.006c-.552 0-1-.448-1-1s.448-1 1-1c5.083 0 5.996-3.12 6.033-3.253.145-.528.69-.848 1.219-.709.53.139.851.673.718 1.205-.049.194-1.266 4.757-7.97 4.757z"/><path fill="#FFAC33" d="M35.968 17.068l-4.005.813-16.187 10.508 7.118.963 11.685-7.211c.703-.431.994-.835 1.198-1.747s.191-3.326.191-3.326z"/><path fill="#664500" d="M23.485 29.379C23.474 29.335 22.34 26.5 18 26.5s-5.474 2.835-5.485 2.879c-.053.213.044.431.232.544.188.112.433.086.596-.06C13.352 29.855 14.356 29 18 29c3.59 0 4.617.83 4.656.863.095.09.219.137.344.137.084 0 .169-.021.246-.064.196-.112.294-.339.239-.557z"/><path fill="#CCD6DD" d="M35.474 15.729c-.829-1.104-2.397-1.328-3.501-.5L14.767 28.137c.646-.242 1.51-.444 2.615-.522.256-.018 2.66-.627 2.66-.627l1.293 1.036s.911.367 1.197.539l12.444-9.335c1.103-.827 1.326-2.395.498-3.499z"/><path fill="#DA2F47" d="M28.686 20.87c-.448-.596-.787-1.145-1.383-.698l-9.922 7.443c.256-.018.5-.042.783-.044 1.36-.009 2.4.195 3.17.452l7.588-5.692c.596-.447.211-.864-.236-1.461z"/><path fill="#67757F" d="M18.599 25.228l1.234 1.598.741-.595-1.197-1.587zm2.223-1.661l1.235 1.598.741-.595-1.197-1.587zm2.184-1.619l1.234 1.598.741-.595-1.197-1.587zm2.181-1.66l1.235 1.597.741-.594-1.197-1.587zm2.238-1.641l1.235 1.598.74-.595-1.196-1.587zm2.14-1.618l1.235 1.598.74-.595-1.196-1.587z"/><path fill="#452E04" d="M22.531 28.563l.805.522s-.197-.362-.526-.726l-.279.204z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
1
src/images/twemoji/smile.svg
Normal file
1
src/images/twemoji/smile.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="#664500" d="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.145.591.175.142.426.147.61.014.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.177-.142.238-.386.145-.594zm-12 0c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.144.591.176.142.427.147.61.014.013-.009 1.262-.902 3.703-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.178-.142.237-.386.145-.594zM18 22c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/></svg>
|
||||||
|
After Width: | Height: | Size: 920 B |
Loading…
Reference in a new issue