Chat Messages:
+
{messages.map((message) => (
+
{badges.map(({ set_id, id }) => (
![]()
-
+
{minutes > 0 ? `⧗ ${minutes.toString()}m` : "just now!"}
diff --git a/src/components/MentionSegment.tsx b/src/components/MentionSegment.tsx
index 56710b2..fd5aff2 100644
--- a/src/components/MentionSegment.tsx
+++ b/src/components/MentionSegment.tsx
@@ -15,8 +15,8 @@ export default function MentionSegment({
{text}
diff --git a/src/components/Message.css b/src/components/Message.css
deleted file mode 100644
index 8371871..0000000
--- a/src/components/Message.css
+++ /dev/null
@@ -1,239 +0,0 @@
-.message {
- display: flex;
- flex-direction: row;
- margin: 0 0.3rem 0.3rem 0.3rem;
-
- &.first-message .profile-picture,
- &.first-message .container {
- font-weight: bold;
- box-shadow: 0rem 0rem 1rem 0.5rem
- var(--vscode-list-focusHighlightForeground);
- }
-
- &.highlighted .profile-picture,
- &.highlighted .container {
- border-color: var(--vscode-list-focusHighlightForeground);
- border-style: solid;
- border-width: 3px;
- font-weight: bold;
- }
-
- .profile-picture {
- aspect-ratio: 1;
- border-radius: 12px;
- height: 58px;
- margin-right: 0.3rem;
-
- img {
- border-radius: 10px;
- position: relative;
- }
- }
-
- .container {
- border-radius: 0.3rem;
- flex: 1;
- overflow: hidden;
- }
-
- header {
- align-items: center;
- background-color: rgba(0, 0, 0, 0.25);
- border-radius: 0.3rem 0.3rem 0rem 0rem;
- display: flex;
- font-weight: bold;
- height: 1.5rem;
- padding: 0 0.5rem;
-
- .badges {
- display: inline-block;
- height: 0.8rem;
- text-wrap: nowrap;
-
- img {
- margin-right: 0.2rem;
- }
- }
-
- p {
- flex-grow: 1;
- height: 100%;
- line-height: 1.5rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- .display-name {
- font-weight: bold;
- }
-
- .username,
- .pronoun {
- font-weight: normal;
- margin-left: 0.3rem;
- }
- }
-
- .timer {
- color: var(--vscode-disabledForeground);
- flex-grow: 0;
- font-size: small;
- font-weight: normal;
- margin-left: 0.3rem;
- white-space: nowrap;
- }
- }
-
- .reply {
- header {
- background-color: rgba(0, 0, 0, 0.25);
- font-size: 0.7rem;
- padding: 0.2rem 0.3rem;
- }
-
- .body {
- background-color: rgba(0, 0, 0, 0.25);
- font-size: 0.7rem;
- font-style: italic;
- line-height: 0.9rem;
- padding: 0.2rem 0.5rem 0.3rem 0.5rem;
- word-break: break-word;
- }
- }
-
- .body {
- background-color: var(--vscode-sideBar-border);
- color: var(--vscode-sideBar-foreground);
- line-height: 1.1rem;
- padding: 0.5rem;
- word-break: break-word;
-
- &.cursive {
- font-style: italic;
- }
-
- &.cursive img {
- transform: skew(-15deg);
- }
-
- img {
- margin: -0.5rem 0;
- position: relative;
- vertical-align: middle;
-
- &.gigantic {
- display: block;
- margin: 0 0 -0.5rem 0;
- }
-
- &.flipx {
- transform: scaleX(-1);
- }
-
- &.flipy {
- transform: scaleY(-1);
- }
-
- &.wide {
- height: 28px;
- width: 114px;
- }
-
- &.rotate {
- transform: rotate(90deg);
- }
-
- &.rotateLeft {
- transform: rotate(-90deg);
- }
-
- &.zeroSpace {
- margin-left: -0.3rem;
- }
-
- &.cursed {
- filter: brightness(0.75) contrast(2.5) grayscale(1);
- }
-
- &.party {
- animation: partying 1.5s linear infinite;
- }
-
- &.shake {
- animation: shaking 0.5s step-start infinite;
- }
-
- &.shake.party {
- animation: partying 1.5s linear infinite,
- shaking 0.5s step-start infinite;
- }
- }
-
- figure {
- display: inline-block;
-
- .zeroWidth {
- margin-left: -32px;
- }
- }
-
- figure.big {
- .zeroWidth {
- margin-left: -128px;
- }
- }
-
- .mention {
- color: var(--vscode-sideBar-background);
- background-color: var(--vscode-sideBar-foreground);
- font-weight: bold;
- padding: 2px;
- border-radius: 2px;
- }
- }
-}
-
-@keyframes partying {
- 0% {
- filter: sepia(0.5) hue-rotate(0deg) saturate(2.5);
- }
- to {
- filter: sepia(0.5) hue-rotate(1turn) saturate(2.5);
- }
-}
-
-@keyframes shaking {
- 0% {
- translate: 0 1px;
- }
- 10% {
- translate: 2px 0;
- }
- 20% {
- translate: 1px -2px;
- }
- 30% {
- translate: -2px 1px;
- }
- 40% {
- translate: 0 -1px;
- }
- 50% {
- translate: 2px 2px;
- }
- 60% {
- translate: -1px -1px;
- }
- 70% {
- translate: -2px 2px;
- }
- 80% {
- translate: 2px 1px;
- }
- 90% {
- translate: -1px -2px;
- }
- to {
- translate: 1px 0;
- }
-}
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index b2cfb5d..a79faa3 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -8,7 +8,6 @@ import Reply from "./Reply";
import TextSegment from "./TextSegment";
import TwitchEmote from "./TwitchEmote";
import UserName from "./UserName";
-import "./Message.css";
import UserProfileProvider from "../contexts/UserProfileProvider";
interface Props {
@@ -49,16 +48,19 @@ function fragmentToComponent(
export default function Message({ message }: Props): React.ReactElement {
return (
-
+
-
+
+
{message.reply &&
+
{message.message.fragments.map((fragment, index) =>
fragmentToComponent(fragment, index)
)}
diff --git a/src/components/MessageContainer.tsx b/src/components/MessageContainer.tsx
new file mode 100644
index 0000000..1f5c8e7
--- /dev/null
+++ b/src/components/MessageContainer.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+import type { ChatMessage } from "../hooks/useTwitchChat";
+
+export default function MessageContainer({
+ children,
+ messages,
+}: {
+ children: React.ReactNode;
+ messages: ChatMessage[];
+}): React.ReactElement {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ if (!ref.current) {
+ return;
+ }
+
+ ref.current.scroll(0, ref.current.scrollHeight);
+ }, [messages]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/ProfilePicture.tsx b/src/components/ProfilePicture.tsx
index 6056725..b5b3244 100644
--- a/src/components/ProfilePicture.tsx
+++ b/src/components/ProfilePicture.tsx
@@ -1,23 +1,14 @@
import { useContext } from "react";
import { UserProfileContext } from "../contexts/UserProfileContext";
-export default function ProfilePicture({
- size = 70,
-}: {
- size?: number;
-}): React.ReactElement {
+export default function ProfilePicture(): React.ReactElement {
const userData = useContext(UserProfileContext);
- if (!userData) {
- return ;
- }
-
return (
-
- 
+
+ {userData?.profile_image_url && (
+
+ )}
);
}
diff --git a/src/components/Reply.tsx b/src/components/Reply.tsx
index 026671d..bbdc856 100644
--- a/src/components/Reply.tsx
+++ b/src/components/Reply.tsx
@@ -12,12 +12,12 @@ export default function Reply({
message: MessageReply;
}): React.ReactElement {
return (
-
-
- ↳ Replying to: @{message.parent_user_login} (
- {hasLocalizedName(message) && message.parent_user_login})
+
+
+ ↳ Replying to: @{message.parent_user_login}
+ {hasLocalizedName(message) && `(${message.parent_user_login})`}
- {message.parent_message_body}
+ {message.parent_message_body}
);
}
diff --git a/src/components/TwitchEmote.tsx b/src/components/TwitchEmote.tsx
index 8c07a7b..a73408e 100644
--- a/src/components/TwitchEmote.tsx
+++ b/src/components/TwitchEmote.tsx
@@ -17,5 +17,11 @@ export default function TwitchEmote({
const url = `https://static-cdn.jtvnw.net/emoticons/v2/${fragment.emote.id}/${emoteFormat}/${theme}/${scale}`;
// TODO: Add fixed sizes?
- return 
;
+ return (
+
+ );
}
diff --git a/src/components/UserName.tsx b/src/components/UserName.tsx
index f8410ee..882e083 100644
--- a/src/components/UserName.tsx
+++ b/src/components/UserName.tsx
@@ -10,10 +10,10 @@ export default function UserName({
message: ChatMessage;
}): React.ReactElement {
return (
-
- {message.chatter_user_name} +
+ {message.chatter_user_name} {hasLocalizedName(message) && ( - ({message.chatter_user_login}) + ({message.chatter_user_login}) )}
); diff --git a/src/index.css b/src/index.css index 6119ad9..ca7dd25 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +1,104 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; +@tailwind base; +@tailwind components; +@tailwind utilities; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +@layer base { + body { + @apply bg-slate-900 text-slate-300; + } } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} +@layer components { + .emote { + &.gigantic { + display: block; + margin: 0 0 -0.5rem 0; + } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} + &.flipx { + transform: scaleX(-1); + } -h1 { - font-size: 3.2em; - line-height: 1.1; -} + &.flipy { + transform: scaleY(-1); + } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; + &.wide { + height: 28px; + width: 114px; + } + + &.rotate { + transform: rotate(90deg); + } + + &.rotateLeft { + transform: rotate(-90deg); + } + + &.zeroSpace { + margin-left: -0.3rem; + } + + &.cursed { + filter: brightness(0.75) contrast(2.5) grayscale(1); + } + + &.party { + animation: partying 1.5s linear infinite; + } + + &.shake { + animation: shaking 0.5s step-start infinite; + } + + &.shake.party { + animation: partying 1.5s linear infinite, shaking 0.5s step-start infinite; + } + } } -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; +@keyframes shaking { + 0% { + translate: 0 1px; + } + 10% { + translate: 2px 0; + } + 20% { + translate: 1px -2px; + } + 30% { + translate: -2px 1px; + } + 40% { + translate: 0 -1px; + } + 50% { + translate: 2px 2px; } - a:hover { - color: #747bff; + 60% { + translate: -1px -1px; + } + 70% { + translate: -2px 2px; + } + 80% { + translate: 2px 1px; + } + 90% { + translate: -1px -2px; + } + to { + translate: 1px 0; + } +} + +@keyframes partying { + 0% { + filter: sepia(0.5) hue-rotate(0deg) saturate(2.5); } - button { - background-color: #f9f9f9; + to { + filter: sepia(0.5) hue-rotate(1turn) saturate(2.5); } } diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..614c86b --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +};