Skip to content

Commit

Permalink
main: update emojis
Browse files Browse the repository at this point in the history
  • Loading branch information
@SomeHats
SomeHats committed Apr 27, 2024
1 parent 21229c8 commit e69fbcf
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 73 deletions.
27 changes: 13 additions & 14 deletions src/emoji/Emoji.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
import { useDrawEmoji } from "@/emoji/drawEmoji";
import { DebugCanvas } from "@/lib/react/DebugCanvasComponent";
import { tailwindColors } from "@/lib/theme";
import { CSSProperties } from "react";

export const characters = ["blob", "yeti"] as const;
export const emotions = [0, 1, 2, 3, 4] as const;
export const colors = {
auto: null,
red: tailwindColors.cyberRed,
orange: tailwindColors.cyberOrange,
yellow: tailwindColors.cyberYellow,
green: tailwindColors.cyberGreen,
blue: tailwindColors.cyberBlue,
purple: tailwindColors.cyberPurple,
pink: tailwindColors.cyberPink,
};
export const characters = ["yeti", "cat", "tree"] as const;
export const emotions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;
// export const colors = {
// auto: null,
// red: tailwindColors.cyberRed,
// orange: tailwindColors.cyberOrange,
// yellow: tailwindColors.cyberYellow,
// green: tailwindColors.cyberGreen,
// blue: tailwindColors.cyberBlue,
// purple: tailwindColors.cyberPurple,
// pink: tailwindColors.cyberPink,
// };

export interface Emoji {
character: (typeof characters)[number];
emotion: (typeof emotions)[number];
color: { name: keyof typeof colors; level: 30 | 40 | 50 | 70 };
// color: { name: keyof typeof colors; level: 30 | 40 | 50 | 70 };
}

export function Emoji({
Expand Down
58 changes: 29 additions & 29 deletions src/emoji/EmojiListing.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { Emoji, characters, colors, emotions } from "@/emoji/Emoji";
import { keys } from "@/lib/utils";
import { Emoji, characters, emotions } from "@/emoji/Emoji";
import { RadioGroup } from "@headlessui/react";
import classNames from "classnames";
import { Fragment, useState } from "react";
import { useState } from "react";

export function EmojiListing() {
const [emoji, setEmoji] = useState<Emoji>({
character: "blob",
character: "yeti",
emotion: 0,
color: { name: "auto", level: 40 },
// color: { name: "auto", level: 40 },
});

return (
Expand All @@ -29,7 +28,7 @@ export function EmojiListing() {
</RadioGroup.Option>
))}
</RadioGroup>
<RadioGroup
{/* <RadioGroup
value={emoji.color.name}
onChange={(color) =>
setEmoji({
Expand All @@ -48,7 +47,7 @@ export function EmojiListing() {
{color}
</RadioGroup.Option>
))}
</RadioGroup>
</RadioGroup> */}
<RadioGroup
value={emoji.emotion}
onChange={(emotion) =>
Expand All @@ -72,32 +71,33 @@ export function EmojiListing() {
</div>
<CrossFade
value={emoji}
render={(emoji) => <Emoji sizePx={256} emoji={emoji} />}
render={(emoji) => (
<Emoji sizePx={256} emoji={emoji} className="!w-32 !h-32" />
)}
/>
<div className="flex">
{[...keys(colors)].map((color, index) => (
<div key={index} className="flex flex-col">
{characters.map((character, index) => (
<Fragment key={index}>
{emotions.map((emotion, index) => (
<div key={index}>
<Emoji
sizePx={128}
emoji={{
color: {
name: color,
level: 40,
},
character,
emotion,
}}
/>
</div>
))}
</Fragment>
<div className="flex flex-col">
{/* {[...keys(colors)].map((color, index) => ( */}

{characters.map((character, index) => (
<div className="flex" key={index}>
{emotions.map((emotion, index) => (
<div key={index}>
<Emoji
sizePx={128}
emoji={{
// color: {
// name: color,
// level: 40,
// },
character,
emotion,
}}
/>
</div>
))}
</div>
))}
{/* ))} */}
</div>
</>
);
Expand Down
16 changes: 8 additions & 8 deletions src/emoji/PostDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ const TRIGGER_SIZE = 32;
const PICKER_SIZE = 160;

const CHARACTERS = [
{ character: "yeti", emotion: 0, color: { name: "blue", level: 30 } },
{ character: "yeti", emotion: 1, color: { name: "blue", level: 30 } },
{ character: "yeti", emotion: 2, color: { name: "blue", level: 30 } },
{ character: "yeti", emotion: 3, color: { name: "blue", level: 30 } },
{ character: "yeti", emotion: 4, color: { name: "blue", level: 30 } },
{ character: "blob", emotion: 0, color: { name: "blue", level: 30 } },
{ character: "blob", emotion: 1, color: { name: "blue", level: 30 } },
{ character: "blob", emotion: 2, color: { name: "blue", level: 30 } },
{ character: "yeti", emotion: 0 },
{ character: "yeti", emotion: 1 },
{ character: "yeti", emotion: 2 },
{ character: "yeti", emotion: 3 },
{ character: "yeti", emotion: 4 },
{ character: "yeti", emotion: 5 },
{ character: "yeti", emotion: 6 },
{ character: "yeti", emotion: 7 },
] as const satisfies Emoji[];

export function PostDemo() {
Expand Down
Binary file removed src/emoji/assets/emoji-masked.png
View file
Binary file not shown.
Binary file removed src/emoji/assets/emoji.png
View file
Binary file not shown.
Binary file added src/emoji/assets/emojis.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 22 additions & 22 deletions src/emoji/drawEmoji.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { Emoji, characters, colors } from "@/emoji/Emoji";
import { Emoji, characters } from "@/emoji/Emoji";
import { loadImage } from "@/lib/load";
import { lazy } from "@/lib/utils";
import { use, useMemo } from "react";

interface Assets {
emoji: HTMLImageElement;
emojiMasked: HTMLImageElement;
// emojiMasked: HTMLImageElement;
}

const ASSET_TILE_SIZE_PX = 256;

export type DrawEmoji = Awaited<ReturnType<typeof createDrawEmoji>>;

const loadAssets = lazy(async (): Promise<Assets> => {
const [emoji, emojiMasked] = await Promise.all([
loadImage(new URL("./assets/emoji.png", import.meta.url)),
loadImage(new URL("./assets/emoji-masked.png", import.meta.url)),
const [emoji] = await Promise.all([
loadImage(new URL("./assets/emojis.png", import.meta.url)),
// loadImage(new URL("./assets/emoji-masked.png", import.meta.url)),
]);
return { emoji, emojiMasked };
return { emoji };
});

export async function createDrawEmoji() {
Expand Down Expand Up @@ -48,22 +48,22 @@ function drawEmoji(
sizePx,
);

if (emoji.color.name === "auto") return;
// if (emoji.color.name === "auto") return;

ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = colors[emoji.color.name](emoji.color.level);
ctx.fillRect(0, 0, sizePx, sizePx);
// ctx.globalCompositeOperation = "source-in";
// ctx.fillStyle = colors[emoji.color.name](emoji.color.level);
// ctx.fillRect(0, 0, sizePx, sizePx);

ctx.globalCompositeOperation = "source-over";
ctx.drawImage(
assets.emojiMasked,
emoji.emotion * ASSET_TILE_SIZE_PX,
characters.indexOf(emoji.character) * ASSET_TILE_SIZE_PX,
ASSET_TILE_SIZE_PX,
ASSET_TILE_SIZE_PX,
0,
0,
sizePx,
sizePx,
);
// ctx.globalCompositeOperation = "source-over";
// ctx.drawImage(
// assets.emojiMasked,
// emoji.emotion * ASSET_TILE_SIZE_PX,
// characters.indexOf(emoji.character) * ASSET_TILE_SIZE_PX,
// ASSET_TILE_SIZE_PX,
// ASSET_TILE_SIZE_PX,
// 0,
// 0,
// sizePx,
// sizePx,
// );
}

0 comments on commit e69fbcf

Please sign in to comment.