Fixed secondary Get Started button. Copy overlay and dock link now functional.
This commit is contained in:
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 { PrivateUser, User } from 'common/user'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
import { MouseEventHandler, ReactNode, useState } from 'react'
|
||||||
|
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import { Button } from 'web/components/button'
|
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 { firebaseLogin, getUserAndPrivateUser } from 'web/lib/firebase/users'
|
||||||
import { track } from 'web/lib/service/analytics'
|
import { track } from 'web/lib/service/analytics'
|
||||||
import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
|
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
|
user?: User | null
|
||||||
privateUser?: PrivateUser | null
|
privateUser?: PrivateUser | null
|
||||||
|
buttonClass?: string
|
||||||
|
spinnerClass?: string
|
||||||
}) {
|
}) {
|
||||||
const { user, privateUser } = props
|
const { user, privateUser, buttonClass, spinnerClass } = props
|
||||||
|
|
||||||
const twitchUser = privateUser?.twitchInfo?.twitchName
|
|
||||||
|
|
||||||
const [isLoading, setLoading] = useState(false)
|
const [isLoading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
@ -55,6 +58,29 @@ function TwitchPlaysManifoldMarkets(props: {
|
||||||
setLoading(false)
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -83,26 +109,21 @@ function TwitchPlaysManifoldMarkets(props: {
|
||||||
</div>
|
</div>
|
||||||
Start playing now by logging in with Google and typing commands in chat!
|
Start playing now by logging in with Google and typing commands in chat!
|
||||||
{twitchUser ? (
|
{twitchUser ? (
|
||||||
<Button size="xl" color="green" className="btn-disabled self-center">
|
|
||||||
Account connected: {twitchUser}
|
|
||||||
</Button>
|
|
||||||
) : isLoading ? (
|
|
||||||
<LoadingIndicator spinnerClassName="!w-11 !h-11" />
|
|
||||||
) : (
|
|
||||||
<Button
|
<Button
|
||||||
size="xl"
|
size="xl"
|
||||||
color="gradient"
|
color="green"
|
||||||
className="my-4 self-center !px-16"
|
className="btn-disabled my-4 self-center !border-none"
|
||||||
onClick={getStarted}
|
|
||||||
>
|
>
|
||||||
Start playing
|
Account connected: {twitchUser}
|
||||||
</Button>
|
</Button>
|
||||||
|
) : (
|
||||||
|
<ButtonGetStarted user={user} privateUser={privateUser} />
|
||||||
)}
|
)}
|
||||||
<div>
|
<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{' '}
|
viewers start with M$1000 and more can be earned for free and then{' '}
|
||||||
<Link href="/charity" className="underline">
|
<Link href="/charity">
|
||||||
donated to a charity
|
<a className="underline">donated to a charity</a>
|
||||||
</Link>{' '}
|
</Link>{' '}
|
||||||
of their choice at no cost!
|
of their choice at no cost!
|
||||||
</div>
|
</div>
|
||||||
|
@ -167,28 +188,55 @@ function TwitchChatCommands() {
|
||||||
function BotSetupStep(props: {
|
function BotSetupStep(props: {
|
||||||
stepNum: number
|
stepNum: number
|
||||||
buttonName?: string
|
buttonName?: string
|
||||||
text: string
|
buttonOnClick?: MouseEventHandler
|
||||||
|
children: ReactNode
|
||||||
}) {
|
}) {
|
||||||
const { stepNum, buttonName, text } = props
|
const { stepNum, buttonName, buttonOnClick, children } = props
|
||||||
return (
|
return (
|
||||||
<Col className="flex-1">
|
<Col className="flex-1">
|
||||||
{buttonName && (
|
{buttonName && (
|
||||||
<>
|
<>
|
||||||
<Button color="green">{buttonName}</Button>
|
<Button
|
||||||
|
size={'md'}
|
||||||
|
color={'green'}
|
||||||
|
className="!border-none"
|
||||||
|
onClick={buttonOnClick}
|
||||||
|
>
|
||||||
|
{buttonName}
|
||||||
|
</Button>
|
||||||
<Spacer h={4} />
|
<Spacer h={4} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div>
|
<div>
|
||||||
<p className="inline font-bold">Step {stepNum}. </p>
|
<p className="inline font-bold">Step {stepNum}. </p>
|
||||||
{text}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function SetUpBot(props: { privateUser?: PrivateUser | null }) {
|
function SetUpBot(props: {
|
||||||
const { privateUser } = props
|
user?: User | null
|
||||||
|
privateUser?: PrivateUser | null
|
||||||
|
}) {
|
||||||
|
const { user, privateUser } = props
|
||||||
const twitchLinked = privateUser?.twitchInfo?.twitchName
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Title
|
<Title
|
||||||
|
@ -197,37 +245,48 @@ function SetUpBot(props: { privateUser?: PrivateUser | null }) {
|
||||||
/>
|
/>
|
||||||
<Col className="gap-4">
|
<Col className="gap-4">
|
||||||
<img
|
<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"
|
className="!-my-2"
|
||||||
></img>
|
></img>
|
||||||
To add the bot to your stream make sure you have logged in then follow
|
To add the bot to your stream make sure you have logged in then follow
|
||||||
the steps below.
|
the steps below.
|
||||||
{!twitchLinked && (
|
{!twitchLinked && (
|
||||||
<Button
|
<ButtonGetStarted
|
||||||
size="xl"
|
user={user}
|
||||||
color="gradient"
|
privateUser={privateUser}
|
||||||
className="my-4 self-center !px-16"
|
buttonClass={'!my-0'}
|
||||||
// onClick={getStarted}
|
spinnerClass={'!my-0'}
|
||||||
>
|
/>
|
||||||
Start playing
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-6 sm:flex-row">
|
<div className="flex flex-col gap-6 sm:flex-row">
|
||||||
<BotSetupStep
|
<BotSetupStep
|
||||||
stepNum={1}
|
stepNum={1}
|
||||||
buttonName={twitchLinked && 'Add bot to channel'}
|
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
|
<BotSetupStep
|
||||||
stepNum={2}
|
stepNum={2}
|
||||||
buttonName={twitchLinked && 'Overlay link'}
|
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
|
<BotSetupStep
|
||||||
stepNum={3}
|
stepNum={3}
|
||||||
buttonName={twitchLinked && 'Control dock link'}
|
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>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</>
|
</>
|
||||||
|
@ -250,61 +309,8 @@ export default function TwitchLandingPage() {
|
||||||
<div className="px-4 pt-2 md:mt-0 lg:hidden">
|
<div className="px-4 pt-2 md:mt-0 lg:hidden">
|
||||||
<ManifoldLogo />
|
<ManifoldLogo />
|
||||||
</div>
|
</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} />
|
<Col className="max-w-3xl gap-8 rounded bg-white p-4 text-gray-600 shadow-md sm:mx-auto sm:p-10">
|
||||||
|
|
||||||
{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">
|
|
||||||
<TwitchPlaysManifoldMarkets user={user} privateUser={privateUser} />
|
<TwitchPlaysManifoldMarkets user={user} privateUser={privateUser} />
|
||||||
<TwitchChatCommands />
|
<TwitchChatCommands />
|
||||||
<SetUpBot privateUser={privateUser} />
|
<SetUpBot privateUser={privateUser} />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user