improve world tree

client/src/components/welcome.css

@@ -54,16 +54,16 @@ h5, h6 {
 /* SVG Graphic */
 /***************/
 
-svg .world-title-wrapper {
+svg .world-title-wrapper, svg .level-title-wrapper div {
   overflow: auto;
 }
 
-svg .world-title-wrapper div {
+svg .world-title-wrapper div, svg .level-title-wrapper div {
   width: 100%;
   height: 100%;
 }
 
-svg .world-title-wrapper div {
+svg .world-title-wrapper div, svg .level-title-wrapper div {
   display: flex;
   align-items:center;
   justify-content:center;
@@ -71,13 +71,26 @@ svg .world-title-wrapper div {
 
 }
 
-svg .world-title {
-  font-weight: 500;
+svg .world-title, svg .level-title {
   color: white;
   margin: 0;
   padding: 0;
 }
 
+svg .world-title {
+  font-weight: 700;
+}
+
+svg .level-title {
+  font-weight: 400;
+  opacity: 0;
+  transition: opacity .3s;
+}
+
+svg .level:hover .level-title {
+  opacity: 1;
+}
+
 /******************/
 /* Privacy Button */
 /******************/

client/src/components/welcome.tsx

@@ -36,8 +36,16 @@ function LevelIcon({ worldId, levelId, position, completed, available }) {
 
   // TODO: relative positioning?
   return (
-    <Link to={`/${gameId}/world/${worldId}/level/${levelId}`}>
+    <Link to={`/${gameId}/world/${worldId}/level/${levelId}`} className="level">
       <circle fill={completed ? "#139e13" : available? "#1976d2" : "#999"} cx={x} cy={y} r={r} />
+      <foreignObject className="level-title-wrapper" x={x} y={y}
+              width={1.42*r} height={1.42*r} transform={"translate("+ -.71*r +","+ -.71*r +")"}>
+            <div>
+              <p className="level-title" style={{fontSize: Math.floor(r) + "px"}}>
+               {levelId}
+              </p>
+            </div>
+          </foreignObject>
     </Link>
   )
 }
@@ -118,11 +126,20 @@ function Welcome() {
         )
       }
 
-      // Draw the worlds
       let worldUnlocked = completed[worldId][0]
       let worldCompleted = completed[worldId].slice(1).every(Boolean)
+
+      // This selects the first uncompleted level
+      let nextLevel: number = completed[worldId].findIndex(c => !c)
+      if (nextLevel <= 1) {
+        // This uses the fact that `findIndex` returns `-1` if it does not find an uncompleted entry
+        // so `-1, 0, 1` are all the indices where we want to show the introduction.
+        nextLevel = 0
+      }
+
+      // Draw the worlds
       svgElements.push(
-        <Link key={`world${worldId}`} to={`/${gameId}/world/${worldId}/level/0`}>
+        <Link key={`world${worldId}`} to={`/${gameId}/world/${worldId}/level/${nextLevel}`}>
           <circle className="world-circle" cx={s*position.x} cy={s*position.y} r={R}
               fill={worldCompleted ? "green" : worldUnlocked ? "#1976d2": "#999"}/>
           <foreignObject className="world-title-wrapper" x={s*position.x} y={s*position.y}