1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
import type { Poast } from "@/types/trill";
import yeschad from "@/assets/reacts/yeschad.png";
import cringe from "@/assets/reacts/cringe.png";
import cry from "@/assets/reacts/cry.png";
import doom from "@/assets/reacts/doom.png";
import galaxy from "@/assets/reacts/galaxy.png";
import gigachad from "@/assets/reacts/gigachad.png";
import pepechin from "@/assets/reacts/pepechin.png";
import pepeeyes from "@/assets/reacts/pepeeyes.png";
import pepegmi from "@/assets/reacts/pepegmi.png";
import pepesad from "@/assets/reacts/pepesad.png";
import pink from "@/assets/reacts/pink.png";
import soy from "@/assets/reacts/soy.png";
import chad from "@/assets/reacts/chad.png";
import pika from "@/assets/reacts/pika.png";
import facepalm from "@/assets/reacts/facepalm.png";
import emoji from "@/assets/icons/emoji.svg";
import emojis from "@/logic/emojis.json";
import Modal from "../modals/Modal";
import useLocalState from "@/state/state";
export function ReactModal({ send }: { send: (s: string) => Promise<number> }) {
const { setModal } = useLocalState();
async function sendReact(e: React.MouseEvent, s: string) {
e.stopPropagation();
const res = await send(s);
if (res) setModal(null);
}
// todo one more meme
return (
<Modal>
<div id="react-list">
<span onMouseUp={(e) => sendReact(e, "❤️")}>️️❤️</span>
<span onMouseUp={(e) => sendReact(e, "🤔")}>🤔</span>
<span onMouseUp={(e) => sendReact(e, "😅")}>😅</span>
<span onMouseUp={(e) => sendReact(e, "🤬")}>🤬</span>
<span onMouseUp={(e) => sendReact(e, "😂")}>😂️</span>
<span onMouseUp={(e) => sendReact(e, "🫡")}>🫡️</span>
<span onMouseUp={(e) => sendReact(e, "🤢")}>🤢</span>
<span onMouseUp={(e) => sendReact(e, "😭")}>😭</span>
<span onMouseUp={(e) => sendReact(e, "😱")}>😱</span>
<img
onMouseUp={(e) => sendReact(e, "facepalm")}
src={facepalm}
alt=""
/>
<span onMouseUp={(e) => sendReact(e, "👍")}>👍️</span>
<span onMouseUp={(e) => sendReact(e, "👎")}>👎️</span>
<span onMouseUp={(e) => sendReact(e, "☝")}>☝️</span>
<span onMouseUp={(e) => sendReact(e, "🤝")}>🤝</span>️
<span onMouseUp={(e) => sendReact(e, "🙏")}>🙏</span>
<span onMouseUp={(e) => sendReact(e, "🤡")}>🤡</span>
<span onMouseUp={(e) => sendReact(e, "👀")}>👀</span>
<span onMouseUp={(e) => sendReact(e, "🎤")}>🎤</span>
<span onMouseUp={(e) => sendReact(e, "💯")}>💯</span>
<span onMouseUp={(e) => sendReact(e, "🔥")}>🔥</span>
<img onMouseUp={(e) => sendReact(e, "yeschad")} src={yeschad} alt="" />
<img
onMouseUp={(e) => sendReact(e, "gigachad")}
src={gigachad}
alt=""
/>
<img onMouseUp={(e) => sendReact(e, "pika")} src={pika} alt="" />
<img onMouseUp={(e) => sendReact(e, "cringe")} src={cringe} alt="" />
<img onMouseUp={(e) => sendReact(e, "pepegmi")} src={pepegmi} alt="" />
<img onMouseUp={(e) => sendReact(e, "pepesad")} src={pepesad} alt="" />
<img onMouseUp={(e) => sendReact(e, "galaxy")} src={galaxy} alt="" />
<img onMouseUp={(e) => sendReact(e, "pink")} src={pink} alt="" />
<img onMouseUp={(e) => sendReact(e, "soy")} src={soy} alt="" />
<img onMouseUp={(e) => sendReact(e, "cry")} src={cry} alt="" />
<img onMouseUp={(e) => sendReact(e, "doom")} src={doom} alt="" />
</div>
</Modal>
);
}
export function stringToReact(s: string) {
const em = (emojis as Record<string, string>)[s.replace(/\:/g, "")];
if (s === "yeschad")
return <img className="react-img" src={yeschad} alt="" />;
if (s === "facepalm")
return <img className="react-img" src={facepalm} alt="" />;
if (s === "yes.jpg")
return <img className="react-img" src={yeschad} alt="" />;
if (s === "gigachad")
return <img className="react-img" src={gigachad} alt="" />;
if (s === "pepechin")
return <img className="react-img" src={pepechin} alt="" />;
if (s === "pepeeyes")
return <img className="react-img" src={pepeeyes} alt="" />;
if (s === "pepegmi")
return <img className="react-img" src={pepegmi} alt="" />;
if (s === "pepesad")
return <img className="react-img" src={pepesad} alt="" />;
if (s === "")
return <img className="react-img no-react" src={emoji} alt="" />;
if (s === "cringe") return <img className="react-img" src={cringe} alt="" />;
if (s === "cry") return <img className="react-img" src={cry} alt="" />;
if (s === "crywojak") return <img className="react-img" src={cry} alt="" />;
if (s === "doom") return <img className="react-img" src={doom} alt="" />;
if (s === "galaxy") return <img className="react-img" src={galaxy} alt="" />;
if (s === "pink") return <img className="react-img" src={pink} alt="" />;
if (s === "pinkwojak") return <img className="react-img" src={pink} alt="" />;
if (s === "soy") return <img className="react-img" src={soy} alt="" />;
if (s === "chad") return <img className="react-img" src={chad} alt="" />;
if (s === "pika") return <img className="react-img" src={pika} alt="" />;
if (em) return <span className="react-icon">{em}</span>;
else if (s.length > 2) return <span className="react-icon"></span>;
else return <span className="react-icon">{s}</span>;
}
export function TrillReactModal({ poast }: { poast: Poast }) {
const { api } = useLocalState();
async function sendReact(s: string) {
return await api!.addReact(poast.host, poast.id, s);
}
return <ReactModal send={sendReact} />;
}
|
