Add tutorial (#137)

scripts/default_auth.sh

@@ -4,6 +4,7 @@ pushd $(dirname "$0")/..
 
 #export RPC_URL="http://localhost:5050";
 export RPC_URL="https://api.cartridge.gg/x/rollyourown/katana";
+
 export WORLD_ADDRESS="0x3c3dfeb374720dfd73554dc2b9e0583cb9668efb3055d07d1533afa5d219fd5";
 
 # enable system -> component authorizations

src/constants.cairo

@@ -3,7 +3,8 @@ const SCALING_FACTOR: u128 = 10_000;
 const TRAVEL_RISK: u8 = 30; // 30% chance of mugged
 const RUN_CHANCE: u8 = 50; // 50% chance of successfully getting away
 
-const BASE_PAYMENT: u128 = 500_0000; // base payment is $500
+
+const BASE_PAYMENT: u128 = 400_0000; // base payment is $400
 
 // starting stats
 const STARTING_CASH: u128 = 4000_0000; // $4000

web/src/components/Button.tsx

@@ -11,8 +11,8 @@ import { playSound, Sounds } from "@/hooks/sound";
 // so we do it here on text...
 const Button = ({
   children,
-  hoverSound = Sounds.HoverClick,
-  clickSound = undefined,
+  hoverSound = undefined,
+  clickSound = Sounds.HoverClick,
   ...props
 }: { children: ReactNode } & { hoverSound?: Sounds | undefined } & {
   clickSound?: Sounds | undefined;

web/src/components/Dot.tsx

@@ -0,0 +1,33 @@
+import { StyleProps, Box } from "@chakra-ui/react";
+
+const Dot = ({
+  active,
+  onClick,
+  ...props
+}: { active: boolean; onClick: () => void } & StyleProps) => (
+  <Box onClick={onClick} cursor={"pointer"} {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {active ? (
+        <Box
+          as="path"
+          d="M5.99667 2V2.99917H3.99833V3.99833H2.99917V5.99667H2V10.0033H2.99917V12.0017H3.99833V13.0008H5.99667V14H10.0033V13.0008H12.0017V12.0017H13.0008V10.0033H14V5.99667H13.0008V3.99833H12.0017V2.99917H10.0033V2H5.99667Z"
+          fill="neon.200"
+        />
+      ) : (
+        <Box
+          as="path"
+          d="M6.66445 4V4.66611H5.33222V5.33222H4.66611V6.66445H4V9.33555H4.66611V10.6678H5.33222V11.3339H6.66445V12H9.33555V11.3339H10.6678V10.6678H11.3339V9.33555H12V6.66445H11.3339V5.33222H10.6678V4.66611H9.33555V4H6.66445Z"
+          fill="neon.500"
+        />
+      )}
+    </svg>
+  </Box>
+);
+
+export default Dot;

web/src/components/Header.tsx

@@ -73,7 +73,7 @@ const Header = ({ back }: HeaderProps) => {
         <HStack flex="1" justify="center">
           <HStack
             h={["80px", "40px"]}
-            w="full"
+            w="auto"
             px="20px"
             spacing={["10px", "30px"]}
             bg="neon.700"
@@ -133,22 +133,24 @@ const Header = ({ back }: HeaderProps) => {
         {!isMobile && (
           <>
             <MediaPlayer />
-            <Button
-              variant="pixelated"
-              isLoading={isBurnerDeploying}
-              onClick={() => {
-                if (!account) {
-                  createBurner();
-                }
-              }}
-            >
-              {account
-                ? formatAddress(account.address.toUpperCase())
-                : "Create Burner"}
-            </Button>
           </>
         )}
 
+        {(!isMobile || (!account && isMobile)) && (
+          <Button
+            variant="pixelated"
+            isLoading={isBurnerDeploying}
+            onClick={() => {
+              if (!account) {
+                createBurner();
+              }
+            }}
+          >
+            {account
+              ? formatAddress(account.address.toUpperCase())
+              : "Create Burner"}
+          </Button>
+        )}
         {isMobile && <MobileMenu />}
       </HStack>
     </HStack>

web/src/components/HomeLeftPanel.tsx

@@ -0,0 +1,233 @@
+import {
+  Text,
+  VStack,
+  HStack,
+  Divider,
+  Card,
+  Heading,
+  Image,
+  Box,
+  Link as ChakraLink,
+  keyframes,
+} from "@chakra-ui/react";
+import Layout from "@/components/Layout";
+import Button from "@/components/Button";
+import { ScrollDown } from "@/components/icons/ScrollDown";
+import { Cartridge } from "@/components/icons/branding/Cartridge";
+import { Dojo } from "@/components/icons/branding/Dojo";
+
+const floatAnim = keyframes`  
+  0% {transform: translateY(0%);}
+  25% {transform: translateY(-6px);}
+  50% {transform: translateY(0%);}
+  70% {transform: translateY(8px);}
+`;
+
+const steps = [
+  {
+    step: 1,
+    title: "Buy Low",
+    desc: "A short description of this step, maybe one to two sentences. Here is one.",
+  },
+  {
+    step: 2,
+    title: "Sell High",
+    desc: "A short description of this step, maybe one to two sentences. Here is one.",
+  },
+  {
+    step: 3,
+    title: "???",
+    desc: "A short description of this step, maybe one to two sentences. Here is one.",
+  },
+  {
+    step: 4,
+    title: "Profit",
+    desc: "A short description of this step, maybe one to two sentences. Here is one.",
+  },
+];
+
+const HomeStep = ({
+  step,
+}: {
+  step: { step: number; title: string; desc: string };
+}) => {
+  return (
+    <>
+      <HStack
+        flexDirection={step.step % 2 == 1 ? "row" : "row-reverse"}
+        gap="20px"
+      >
+        <Image
+          src={`/images/landing/step${step.step}.png`}
+          alt={`step${step.step}`}
+          w="42%"
+        />
+
+        <VStack w="58%" alignItems="flex-start" py="100px">
+          <HStack>
+            <Image
+              src={`/images/landing/step${step.step}-icon.png`}
+              alt={`step${step.step}`}
+              w="92px"
+            />
+            <VStack alignItems="flex-start">
+              <Text
+                fontSize="11px"
+                fontFamily="broken-console"
+                backgroundColor="#174127"
+                padding="0.5rem 0.5rem 0.25rem"
+              >
+                Step {step.step}
+              </Text>
+              <Heading
+                fontFamily={"ppneuebit"}
+                fontSize="44px"
+                lineHeight={"1"}
+              >
+                {step.title}
+              </Heading>
+            </VStack>
+          </HStack>
+          {/* <Text p="10px">{step.desc}</Text> */}
+        </VStack>
+      </HStack>
+    </>
+  );
+};
+
+const onScrollDown = () => {
+  let steps = document.getElementById("steps");
+
+  setTimeout(() => {
+    steps &&
+      steps.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest",
+      });
+  }, 10);
+};
+
+const HomeLeftPanel = () => {
+  return (
+    <>
+      <VStack
+        my="auto"
+        flex={["auto", "1"]}
+        position="relative"
+        maxH={["80px", "800px"]}
+        overflow="hidden"
+        overflowY="auto"
+        sx={{
+          "::-webkit-scrollbar": {
+            display: "none",
+          },
+          "scrollbar-width": "none",
+        }}
+      >
+        <VStack zIndex="2">
+          <Text textStyle="subheading" fontSize="11px">
+            DOPE WARS
+          </Text>
+          <Heading fontSize={["40px", "48px"]} fontWeight="normal">
+            Roll your Own
+          </Heading>
+        </VStack>
+
+        <VStack position="relative" top="-160px" display={["none", "flex"]}>
+          <Image
+            src={"/images/landing/main.png"}
+            maxH="75vh"
+            display={["none", "block"]}
+            alt="context"
+          />
+
+          <Box
+            id="steps"
+            style={{ marginTop: "30px" }}
+            position="relative"
+            onClick={() => onScrollDown()}
+            animation={`${floatAnim} infinite 3s linear`}
+            cursor={"pointer"}
+          >
+            <ScrollDown width="40px" height="40px" />
+          </Box>
+
+          <Box>
+            {steps.map((step) => {
+              return <HomeStep step={step} key={step.step} />;
+            })}
+          </Box>
+
+          <HStack py="100px">
+            <Card
+              display="flex"
+              flexDirection="row"
+              p="2"
+              alignItems="center"
+              variant="pixelated"
+              px="5"
+            >
+              <ChakraLink
+                href="https://cartridge.gg/"
+                target="_blank"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                textDecoration="none"
+                _hover={{
+                  color: "cartridgeYellow",
+                }}
+              >
+                BUILT BY <Cartridge ml="2" />
+              </ChakraLink>
+
+              <Text px="2" fontSize="xl">
+                |
+              </Text>
+              <ChakraLink
+                href="https://dojoengine.org/"
+                target="_blank"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                textDecoration="none"
+                _hover={{
+                  color: "dojoRed",
+                }}
+              >
+                BUILT WITH <Dojo ml="2" />
+              </ChakraLink>
+            </Card>
+          </HStack>
+        </VStack>
+      </VStack>
+
+      <HStack
+        w="calc((100% - 100px) / 2)"
+        h="200px"
+        position="absolute"
+        display={["none", "block"]}
+        top="0px"
+        marginTop="-80px"
+        zIndex={1}
+        background="linear-gradient(#172217, #172217, transparent)"
+        pointerEvents="none"
+      ></HStack>
+
+      <HStack
+        w="calc((100% - 100px) / 2)"
+        h="200px"
+        position="absolute"
+        display={["none", "block"]}
+        bottom="0px"
+        marginBottom="-80px"
+        zIndex={1}
+        background="linear-gradient(transparent, #172217, #172217)"
+        pointerEvents="none"
+      ></HStack>
+    </>
+  );
+};
+
+export default HomeLeftPanel;

web/src/components/Toast.tsx

@@ -1,7 +1,7 @@
 import { cardPixelatedStyle } from "@/theme/styles";
 import { HStack, Link, Text } from "@chakra-ui/react";
 import { ReactNode } from "react";
-import { Alert, ExternalLink } from "./icons";
+import { Alert, Close, ExternalLink } from "./icons";
 
 export const Toast = ({
   message,
@@ -32,11 +32,12 @@ export const Toast = ({
           <Text>{message}</Text>
         </>
       </HStack>
-      {link && (
+      <Close onClick={onClose} cursor="pointer" />
+      {/* {link && (
         <Link href={link} isExternal>
           <ExternalLink />
         </Link>
-      )}
+      )} */}
     </HStack>
   );
 };