| 95 | * it in a sheet, and the two disagree about everything except the words. |
| 96 | */ |
| 97 | export function WorldGuideContent({ |
| 98 | isOwn, |
| 99 | districts, |
| 100 | hasReplay, |
| 101 | canCustomize, |
| 102 | isTouch, |
| 103 | }: WorldGuideContentProps): ReactElement { |
| 104 | /* Off the districts rather than the rank rows, which hold REALMS at world |
| 105 | scale and are scored on the stretched ladder. The level anyone is ever shown |
| 106 | is a district's, so the one marked here has to be too. */ |
| 107 | const topLevel = |
| 108 | districts?.reduce((top, { reads }) => Math.max(top, levelOf(reads)), 0) ?? |
| 109 | 0; |
| 110 | const tap = isTouch ? 'Tap' : 'Click'; |
| 111 | |
| 112 | return ( |
| 113 | <> |
| 114 | <Section title="What this is"> |
| 115 | <Line> |
| 116 | Every article {isOwn ? 'you read' : 'they read'} on daily.dev grows a |
| 117 | district here. Reading is the only thing that builds it. |
| 118 | </Line> |
| 119 | </Section> |
| 120 | |
| 121 | <Section title="How it grows"> |
| 122 | <Line> |
| 123 | Every topic read becomes a district, and the more articles in it, the |
| 124 | more it builds up. Each of the twelve levels needs twice as many |
| 125 | articles as the one below, so the first few come fast and the last |
| 126 | ones stay out of reach. |
| 127 | </Line> |
| 128 | {/* Twelve thresholds, wrapped three to a row. The one this world is |
| 129 | standing on is filled in, so the ladder is read against something |
| 130 | rather than in the abstract. */} |
| 131 | <ul aria-label="Levels" className="grid grid-cols-3 gap-1"> |
| 132 | {LEVELS.map(({ reads }, index) => { |
| 133 | const level = index + 1; |
| 134 | const isTop = level === topLevel; |
| 135 | |
| 136 | return ( |
| 137 | <li |
| 138 | key={reads} |
| 139 | className={classNames( |
| 140 | 'flex items-baseline justify-between gap-1 rounded-8 border border-border-subtlest-tertiary px-2 py-1', |
| 141 | isTop && 'bg-surface-float', |
| 142 | )} |
| 143 | > |
| 144 | <Typography |
| 145 | tag={TypographyTag.Span} |
| 146 | type={TypographyType.Caption2} |
| 147 | color={isTop ? undefined : TypographyColor.Quaternary} |
| 148 | bold={isTop} |
| 149 | > |
| 150 | L{level} |
| 151 | </Typography> |
| 152 | <Typography |
| 153 | tag={TypographyTag.Span} |
| 154 | type={TypographyType.Caption2} |