feat(collab): more unique cursor colours

Projects/MathlibDemo/MathlibDemo/Logic.lean

@@ -1,4 +1,4 @@
-import Mathlib.Logic.Basic -- basic facts in logic
+import Mathlib.Basic.Logic.Basic -- basic facts in logic
 -- theorems in Lean's mathematics library
 
 -- Let P and Q be true-false statements

Projects/MathlibDemo/lake-manifest.json

@@ -5,7 +5,7 @@
    "type": "git",
    "subDir": null,
    "scope": "leanprover-community",
-   "rev": "0cd048027c8b0239cdfe206691bbf2c0a0970078",
+   "rev": "a49839b4695c40f137b63ea78b8f85662c3442ca",
    "name": "mathlib",
    "manifestFile": "lake-manifest.json",
    "inputRev": "master",

client/src/App.tsx

@@ -484,15 +484,15 @@ export function App() {
       const name = (state?.user?.name || 'Anonymous').replace(/"/g, '\\"')
       css += `
           .yRemoteSelection-${clientId} {
-            background-color: color-mix(in srgb, var(${color}) 25%, transparent);
-            border-color: var(${color});
+            background-color: color-mix(in srgb, ${color} 25%, transparent);
+            border-color: ${color};
           }
           .yRemoteSelectionHead-${clientId} {
-            border-color: var(${color});
+            border-color: ${color};
           }
           .yRemoteSelectionHead-${clientId}::after {
-            border-color: var(${color});
-            background-color: var(${color});
+            border-color: ${color};
+            background-color: ${color};
           }
           .view-line:hover .yRemoteSelectionHead-${clientId}::after {
             content: "${name}";

client/src/Popups/LeaveCollaboration.tsx

@@ -35,7 +35,7 @@ function LeaveCollaborationPopup({
                 className="user-tag"
                 key={clientId}
                 style={{
-                  backgroundColor: `var(${getCollaboratorColor(clientId)})`,
+                  backgroundColor: getCollaboratorColor(clientId),
                 }}
               >
                 {state.user.name}

client/src/utils/collabColors.ts

@@ -7,6 +7,30 @@ const cursorColors = [
   '--vscode-charts-purple',
 ]
 
+/** Mix two base colours with some randomness to get more unique colours */
 export function getCollaboratorColor(n: number) {
-  return cursorColors[n % cursorColors.length]
+  const random = mulberry32(n)
+
+  const idx1 = n % cursorColors.length
+  const base = cursorColors[idx1]
+
+  // 2nd index should not be identical to the first one
+  const idx2 =
+    (idx1 + 1 + Math.floor(random() * (cursorColors.length - 1))) %
+    cursorColors.length
+  const mixin = cursorColors[idx2]
+
+  const amount = random() * 100
+
+  return `color-mix(in srgb, var(${base}) ${amount}%, var(${mixin}) ${100 - amount}%) `
+}
+
+// https://github.com/cprosche/mulberry32
+function mulberry32(a: number) {
+  return function () {
+    var t = (a += 0x6d2b79f5)
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
 }

cypress/e2e/spec.cy.ts

@@ -63,7 +63,7 @@ describe('The Editor', () => {
     cy.contains('.dropdown .dropdown', 'Examples').click()
     cy.contains('.nav-link', 'Logic').click()
     cy.containsAll([
-      'import Mathlib.Logic.Basic',
+      'import Mathlib.Basic.Logic.Basic',
       'variable (P Q : Prop)',
     ]).should('exist')
   })
@@ -73,7 +73,7 @@ describe('The Editor', () => {
     cy.contains('.nav-link', 'Examples').click()
     cy.contains('.nav-link', 'Logic').click()
     cy.containsAll([
-      'import Mathlib.Logic.Basic',
+      'import Mathlib.Basic.Logic.Basic',
       'variable (P Q : Prop)',
     ]).should('exist')
   })
@@ -209,7 +209,7 @@ describe('The Editor', () => {
     cy.on('window:confirm', alertShown)
     cy.visit('/')
     cy.get('div.view-line').type(
-      'import Mathlib.Logic.Basic #check Classical.em',
+      'import Mathlib.Basic.Logic.Basic #check Classical.em',
     )
     cy.get('.squiggly-info')