[improvement] Multiplayer cursors (#458)

* bump versions, improve cursors

* Spline cursors

* Update useCursorAnimation.ts

* Update useCursorAnimation.ts

* Add improved cursors

* Update MultiplayerEditor.tsx

* Update [id].tsx

apps/www/components/MultiplayerEditor.tsx

@@ -52,7 +52,7 @@ function Editor({
       <Tldraw
         autofocus
         showPages={false}
-        showSponsorLink={isSponsor}
+        showSponsorLink={!isSponsor}
         onSignIn={isSponsor ? undefined : onSignIn}
         onSignOut={isUser ? onSignOut : undefined}
         {...fileSystemEvents}

apps/www/pages/r/[id].tsx

@@ -21,7 +21,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     props: {
       id,
       isUser: session?.user ? true : false,
-      isSponsor: session.isSponsor,
+      isSponsor: session?.isSponsor,
     },
   }
 }

packages/core/src/components/User/User.tsx

@@ -10,16 +10,29 @@ interface UserProps {
 }
 
 export function User({ user }: UserProps) {
-  const rCursor = React.useRef<HTMLDivElement>(null)
+  const rCursor = React.useRef<SVGSVGElement>(null)
   useCursorAnimation(rCursor, user.point)
   return (
-    <div
+    <svg
       ref={rCursor}
-      className="tl-absolute tl-user"
-      style={{
-        backgroundColor: user.color,
-        willChange: 'transform',
-      }}
-    />
+      className="tl-absolute tl-user tl-counter-scaled"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 35 35"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g fill="rgba(0,0,0,.2)" transform="translate(1,1)">
+        <path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" />
+        <path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" />
+      </g>
+      <g fill="white">
+        <path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" />
+        <path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" />
+      </g>
+      <g fill={user.color}>
+        <path d="m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z" />
+        <path d="m13 10.814v11.188l2.969-2.866.428-.139h4.768z" />
+      </g>
+    </svg>
   )
 }

packages/core/src/hooks/useCursorAnimation.ts

@@ -57,6 +57,7 @@ export function useCursorAnimation(ref: any, point: number[]) {
     const spline = rSpline.current
     if (rState.current === 'stopped') {
       rTimestamp.current = now
+      rPrevPoint.current = point
       spline.clear()
     }
     spline.addPoint(point)
@@ -67,7 +68,7 @@ export function useCursorAnimation(ref: any, point: number[]) {
       from: rPrevPoint.current,
       to: point,
       timeStamp: now,
-      duration: Math.min(now - rTimestamp.current, 500),
+      duration: Math.min(now - rTimestamp.current, 300),
     }
     rPrevPoint.current = point
     rTimestamp.current = now

packages/core/src/hooks/useStyle.tsx

@@ -289,12 +289,13 @@ const tlcss = css`
   }
 
   .tl-user {
-    left: -4px;
-    top: -4px;
-    height: 8px;
-    width: 8px;
-    border-radius: 100%;
+    left: calc(-15px * var(--tl-scale));
+    top: calc(-15px * var(--tl-scale));
+    height: calc(35px * var(--tl-scale));
+    width: calc(35px * var(--tl-scale));
+    transform: scale(var(--tl-scale));
     pointer-events: none;
+    will-change: transform;
   }
 
   .tl-indicator {