Fixed secondary Get Started button. Copy overlay and dock link now functional.

web/pages/twitch.tsx

@@ -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 { user, privateUser, buttonClass, spinnerClass } = props
-
-  const twitchUser = privateUser?.twitchInfo?.twitchName
 
   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"
+            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>
+        ) : (
+          <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">
+          <Link href="/charity">
-            donated to a 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 }) {
+function SetUpBot(props: {
-  const { privateUser } = 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
+          <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">
           <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} />
+      <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} />
         <TwitchChatCommands />
         <SetUpBot privateUser={privateUser} />