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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
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 Icon from "@/components/Icon";
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 <Icon name="emoji" size={20} className="react-img no-react" />;
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, addNotification } = useLocalState((s) => ({
api: s.api,
addNotification: s.addNotification,
}));
const our = api!.airlock.our!;
async function sendReact(s: string) {
const result = await api!.addReact(poast.host, poast.id, s);
// Only add notification if reacting to someone else's post
if (result && poast.author !== our) {
addNotification({
type: "react",
from: our,
message: `You reacted to ${poast.author}'s post`,
reaction: s,
postId: poast.id,
});
}
return result;
}
return <ReactModal send={sendReact} />;
}
|
