Fixed secondary Get Started button. Copy overlay and dock link now functional.
This commit is contained in:
Phil
parent
d4c4b77e0e
commit
d1b714b301
|
|
@ -1,6 +1,8 @@
|
|||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import clsx from 'clsx'
|
||||
import { PrivateUser, User } from 'common/user'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { MouseEventHandler, ReactNode, useState } from 'react'
|
||||
|
||||
import toast from 'react-hot-toast'
|
||||
import { Button } from 'web/components/button'
|
||||
|
|
@ -18,14 +20,15 @@ import { usePrivateUser, useUser } from 'web/hooks/use-user'
|
|||
import { firebaseLogin, getUserAndPrivateUser } from 'web/lib/firebase/users'
|
||||
import { track } from 'web/lib/service/analytics'
|
||||
import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
|
||||
import { copyToClipboard } from 'web/lib/util/copy'
|
||||
|
||||
function TwitchPlaysManifoldMarkets(props: {
|
||||
function ButtonGetStarted(props: {
|
||||
user?: User | null
|
||||
privateUser?: PrivateUser | null
|
||||
buttonClass?: string
|
||||
spinnerClass?: string
|
||||
}) {
|
||||
const { user, privateUser } = props
|
||||
|
||||
const twitchUser = privateUser?.twitchInfo?.twitchName
|
||||
const { user, privateUser, buttonClass, spinnerClass } = props
|
||||
|
||||
const [isLoading, setLoading] = useState(false)
|
||||
|
||||
|
|
@ -55,6 +58,29 @@ function TwitchPlaysManifoldMarkets(props: {
|
|||
setLoading(false)
|
||||
}
|
||||
}
|
||||
return isLoading ? (
|
||||
<LoadingIndicator
|
||||
spinnerClassName={clsx('!w-11 !h-11 my-4', spinnerClass)}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
size="xl"
|
||||
color="gradient"
|
||||
className={clsx('my-4 self-center !px-16', buttonClass)}
|
||||
onClick={getStarted}
|
||||
>
|
||||
Start playing
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function TwitchPlaysManifoldMarkets(props: {
|
||||
user?: User | null
|
||||
privateUser?: PrivateUser | null
|
||||
}) {
|
||||
const { user, privateUser } = props
|
||||
|
||||
const twitchUser = privateUser?.twitchInfo?.twitchName
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -83,26 +109,21 @@ function TwitchPlaysManifoldMarkets(props: {
|
|||
</div>
|
||||
Start playing now by logging in with Google and typing commands in chat!
|
||||
{twitchUser ? (
|
||||
<Button size="xl" color="green" className="btn-disabled self-center">
|
||||
Account connected: {twitchUser}
|
||||
</Button>
|
||||
) : isLoading ? (
|
||||
<LoadingIndicator spinnerClassName="!w-11 !h-11" />
|
||||
) : (
|
||||
<Button
|
||||
size="xl"
|
||||
color="gradient"
|
||||
className="my-4 self-center !px-16"
|
||||
onClick={getStarted}
|
||||
color="green"
|
||||
className="btn-disabled my-4 self-center !border-none"
|
||||
>
|
||||
Start playing
|
||||
Account connected: {twitchUser}
|
||||
</Button>
|
||||
) : (
|
||||
<ButtonGetStarted user={user} privateUser={privateUser} />
|
||||
)}
|
||||
<div>
|
||||
Instead of Twitch channel points we use our play money, mana (m$). All
|
||||
Instead of Twitch channel points we use our play money, Mana (M$). All
|
||||
viewers start with M$1000 and more can be earned for free and then{' '}
|
||||
<Link href="/charity" className="underline">
|
||||
donated to a charity
|
||||
<Link href="/charity">
|
||||
<a className="underline">donated to a charity</a>
|
||||
</Link>{' '}
|
||||
of their choice at no cost!
|
||||
</div>
|
||||
|
|
@ -167,28 +188,55 @@ function TwitchChatCommands() {
|
|||
function BotSetupStep(props: {
|
||||
stepNum: number
|
||||
buttonName?: string
|
||||
text: string
|
||||
buttonOnClick?: MouseEventHandler
|
||||
children: ReactNode
|
||||
}) {
|
||||
const { stepNum, buttonName, text } = props
|
||||
const { stepNum, buttonName, buttonOnClick, children } = props
|
||||
return (
|
||||
<Col className="flex-1">
|
||||
{buttonName && (
|
||||
<>
|
||||
<Button color="green">{buttonName}</Button>
|
||||
<Button
|
||||
size={'md'}
|
||||
color={'green'}
|
||||
className="!border-none"
|
||||
onClick={buttonOnClick}
|
||||
>
|
||||
{buttonName}
|
||||
</Button>
|
||||
<Spacer h={4} />
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<p className="inline font-bold">Step {stepNum}. </p>
|
||||
{text}
|
||||
{children}
|
||||
</div>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function SetUpBot(props: { privateUser?: PrivateUser | null }) {
|
||||
const { privateUser } = props
|
||||
function SetUpBot(props: {
|
||||
user?: User | null
|
||||
privateUser?: PrivateUser | null
|
||||
}) {
|
||||
const { user, privateUser } = props
|
||||
const twitchLinked = privateUser?.twitchInfo?.twitchName
|
||||
const controlToken = privateUser?.twitchInfo?.controlToken
|
||||
|
||||
const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
|
||||
const copyOverlayLink = async () => {
|
||||
copyToClipboard(`http://localhost:1000/overlay?t=${controlToken}`) //!!!TODO: Fix link
|
||||
toast.success('Overlay link copied!', {
|
||||
icon: linkIcon,
|
||||
})
|
||||
}
|
||||
const copyDockLink = async () => {
|
||||
copyToClipboard(`http://localhost:1000/dock?t=${controlToken}`) //!!!TODO: Fix link
|
||||
toast.success('Dock link copied!', {
|
||||
icon: linkIcon,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title
|
||||
|
|
@ -197,37 +245,48 @@ function SetUpBot(props: { privateUser?: PrivateUser | null }) {
|
|||
/>
|
||||
<Col className="gap-4">
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/PhilBladen/ManifoldTwitchIntegration/master/docs/OBS.png"
|
||||
src="https://raw.githubusercontent.com/PhilBladen/ManifoldTwitchIntegration/master/docs/OBS.png" // TODO: Copy this into the Manifold codebase public folder
|
||||
className="!-my-2"
|
||||
></img>
|
||||
To add the bot to your stream make sure you have logged in then follow
|
||||
the steps below.
|
||||
{!twitchLinked && (
|
||||
<Button
|
||||
size="xl"
|
||||
color="gradient"
|
||||
className="my-4 self-center !px-16"
|
||||
// onClick={getStarted}
|
||||
>
|
||||
Start playing
|
||||
</Button>
|
||||
<ButtonGetStarted
|
||||
user={user}
|
||||
privateUser={privateUser}
|
||||
buttonClass={'!my-0'}
|
||||
spinnerClass={'!my-0'}
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col gap-6 sm:flex-row">
|
||||
<BotSetupStep
|
||||
stepNum={1}
|
||||
buttonName={twitchLinked && 'Add bot to channel'}
|
||||
text="Use the button above to add the bot to your channel. Then mod it by typing in your Twitch chat: /mod ManifoldBot (or whatever you named the bot) If the bot is modded it will not work properly on the backend."
|
||||
/>
|
||||
>
|
||||
Use the button above to add the bot to your channel. Then mod it by
|
||||
typing in your Twitch chat: <b>/mod ManifoldBot</b>
|
||||
<br />
|
||||
If the bot is not modded it will not be able to respond to commands
|
||||
properly.
|
||||
</BotSetupStep>
|
||||
<BotSetupStep
|
||||
stepNum={2}
|
||||
buttonName={twitchLinked && 'Overlay link'}
|
||||
text="Create a new browser source in your streaming software such as OBS. Paste in the above link and resize it to your liking. We recommend setting the size to 400x400."
|
||||
/>
|
||||
buttonOnClick={copyOverlayLink}
|
||||
>
|
||||
Create a new browser source in your streaming software such as OBS.
|
||||
Paste in the above link and resize it to your liking. We recommend
|
||||
setting the size to 400x400.
|
||||
</BotSetupStep>
|
||||
<BotSetupStep
|
||||
stepNum={3}
|
||||
buttonName={twitchLinked && 'Control dock link'}
|
||||
text="The bot can be controlled entirely through chat. But we made an easy to use control panel. Share the link with your mods or embed it into your OBS as a custom dock."
|
||||
/>
|
||||
buttonOnClick={copyDockLink}
|
||||
>
|
||||
The bot can be controlled entirely through chat. But we made an easy
|
||||
to use control panel. Share the link with your mods or embed it into
|
||||
your OBS as a custom dock.
|
||||
</BotSetupStep>
|
||||
</div>
|
||||
</Col>
|
||||
</>
|
||||
|
|
@ -250,61 +309,8 @@ export default function TwitchLandingPage() {
|
|||
<div className="px-4 pt-2 md:mt-0 lg:hidden">
|
||||
<ManifoldLogo />
|
||||
</div>
|
||||
{/* <Col className="items-center">
|
||||
<Col className="max-w-3xl">
|
||||
<Col className="mb-6 rounded-xl sm:m-12 sm:mt-0">
|
||||
<Row className="self-center">
|
||||
<img height={200} width={200} src="/twitch-logo.png" />
|
||||
<img height={200} width={200} src="/flappy-logo.gif" />
|
||||
</Row>
|
||||
<div className="m-4 max-w-[550px] self-center">
|
||||
<h1 className="text-3xl sm:text-6xl xl:text-6xl">
|
||||
<div className="font-semibold sm:mb-2">
|
||||
<span className="bg-gradient-to-r from-indigo-500 to-blue-500 bg-clip-text font-bold text-transparent">
|
||||
Bet
|
||||
</span>{' '}
|
||||
on your favorite streams
|
||||
</div>
|
||||
</h1>
|
||||
<Spacer h={6} />
|
||||
<div className="mb-4 px-2 ">
|
||||
Get more out of Twitch with play-money betting markets.{' '}
|
||||
{!twitchUser &&
|
||||
'Click the button below to link your Twitch account.'}
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spacer h={6} />
|
||||
|
||||
{twitchUser ? (
|
||||
<div className="mt-3 self-center rounded-lg bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 p-4 ">
|
||||
<div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
|
||||
<div className="truncate text-sm font-medium text-gray-500">
|
||||
Twitch account linked
|
||||
</div>
|
||||
<div className="mt-1 text-2xl font-semibold text-gray-900">
|
||||
{twitchUser}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<LoadingIndicator spinnerClassName="!w-16 !h-16" />
|
||||
) : (
|
||||
<Button
|
||||
size="2xl"
|
||||
color="gradient"
|
||||
className="self-center"
|
||||
onClick={getStarted}
|
||||
>
|
||||
Get started
|
||||
</Button>
|
||||
)}
|
||||
</Col>
|
||||
</Col>
|
||||
</Col> */}
|
||||
|
||||
<Col className="max-w-3xl gap-8 rounded bg-white p-10 text-gray-600 shadow-md sm:mx-auto">
|
||||
<Col className="max-w-3xl gap-8 rounded bg-white p-4 text-gray-600 shadow-md sm:mx-auto sm:p-10">
|
||||
<TwitchPlaysManifoldMarkets user={user} privateUser={privateUser} />
|
||||
<TwitchChatCommands />
|
||||
<SetUpBot privateUser={privateUser} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user