1+ import React , { useState } from 'react' ;
2+
3+ import 'katex/dist/katex.min.css' ;
4+ import katex from 'katex' ;
5+ import { BlockMath } from 'react-katex' ;
6+ import HumanFormulas from './Fixtures/human_out.json' ;
7+ import AIFormulas from './Fixtures/ai_out.json' ;
8+
9+ const green = 'rgb(151, 226, 153)' ;
10+
11+ // why is this global? good question: I wanted to keep things concise, so
12+ // I drew out a fragile state machine and thus minimized code lines, sacrificing
13+ // good style along the way
14+ let human = { creator : 'Human' , expression : getRandomFormula ( HumanFormulas ) } ;
15+ let ai = { creator : 'AI' , expression : getRandomFormula ( AIFormulas ) } ;
16+ let duo = shuffle ( [ human , ai ] ) ;
17+
18+ export const GuessWho = ( ) => {
19+ const [ color , setColor ] = useState ( 'white' ) ;
20+
21+ const answerChoice = ( creator , color ) => {
22+ return {
23+ display : 'flex' ,
24+ alignItems : 'center' ,
25+ justifyContent : 'center' ,
26+ borderRadius : '10px' ,
27+ padding : '20px' ,
28+ height : '75px' ,
29+ border : 'black thin dashed' ,
30+ width : 'min(90vw, 600px)' ,
31+ margin : 'auto' ,
32+ marginTop : '5px' ,
33+ marginBottom : '5px' ,
34+ transition : 'all .25s ease-out' ,
35+ backgroundColor : creator === 'Human' ? color : 'white' ,
36+ color : creator === 'Human' && color === green ? 'white' : 'black'
37+ }
38+ } ;
39+
40+ return (
41+ < >
42+ { duo . map ( ( exp ) => (
43+ < div
44+ style = { answerChoice ( exp . creator , color ) }
45+ onClick = { ( ) => setColor ( revealTrue ( exp . creator ) ) }
46+ >
47+ < BlockMath >
48+ { exp . expression }
49+ </ BlockMath >
50+ </ div >
51+ ) ) }
52+ < div
53+ style = { {
54+ visibility : color === green ? 'visible' : 'hidden' ,
55+ opacity : color === green ? '1' : '0' ,
56+ ...answerChoice ( 'none' , color ) } }
57+ onClick = { ( ) => setColor ( mutateGlobalExpr ( ) ) }
58+ >
59+ Good job! Another?
60+ </ div >
61+ </ >
62+ )
63+ }
64+ function mutateGlobalExpr ( ) {
65+ human = { creator : 'Human' , expression : getRandomFormula ( HumanFormulas ) } ;
66+ ai = { creator : 'AI' , expression : getRandomFormula ( AIFormulas ) } ;
67+ duo = shuffle ( [ human , ai ] ) ;
68+ return 'white'
69+ }
70+
71+ function revealTrue ( creator ) {
72+ const newColor = creator !== "Human" ? 'white' : green ;
73+ return newColor ;
74+
75+ }
76+
77+ function getRandomInt ( max ) {
78+ return Math . floor ( Math . random ( ) * Math . floor ( max ) ) ;
79+ }
80+
81+ function rendering ( el ) {
82+ try {
83+ katex . renderToString ( el , {
84+ displayMode : false ,
85+ macros : {
86+ "\\RR" : "\\mathbb{R}" ,
87+ "\\textup" : "\\text" ,
88+ } ,
89+ } ) ;
90+ return true ;
91+ } catch {
92+ return false ;
93+ }
94+ }
95+
96+ function getRandomFormula ( indexable ) {
97+ const expression = indexable [ getRandomInt ( indexable . length ) ] ;
98+ return rendering ( expression ) ? expression : getRandomFormula ( indexable ) ;
99+ }
100+
101+ function shuffle ( array ) {
102+ array . sort ( ( ) => Math . random ( ) - 0.5 ) ;
103+ return array
104+ }
105+
106+
107+ const ExamplePage = ( ) => (
108+ < div
109+ style = { {
110+ // width: '40%',
111+ margin : '0 auto'
112+ } }
113+ >
114+ < h1 >
115+ < BlockMath >
116+ { '\\text{React-}\\KaTeX \\space \\text{usage examples}' }
117+ </ BlockMath >
118+ </ h1 >
119+ < h2 >
120+ < code > { '<InlineMath />' } </ code >
121+ </ h2 >
122+ This is an in-line expression < BlockMath math = { '\\int_0^\\infty x^2 dx' } /> { ' ' }
123+ passed as < code > math prop</ code > . This is an in-line{ ' ' }
124+ < BlockMath math = { '\\int_0^\\infty x^2 dx' } /> expression passed as{ ' ' }
125+ < code > children prop</ code > .
126+ < h2 >
127+ < code > { '<BlockMath />' } </ code >
128+ </ h2 >
129+ < BlockMath math = { '\\int_0^\\infty x^2 dx' } />
130+ < BlockMath > { `A =
131+ \\begin{pmatrix}
132+ 1 & 0 & 0 \\\\
133+ 0 & 1 & 0 \\\\
134+ 0 & 0 & 1 \\\\
135+ \\end{pmatrix}` } </ BlockMath >
136+ < h2 > Error handling</ h2 >
137+ < BlockMath math = { '\\int_0^\\infty x^2 dx \\inta' } errorColor = { '#cc0000' } />
138+ < BlockMath
139+ math = "\\int_{"
140+ renderError = { err => < b > Custom error message: { err . name } </ b > }
141+ />
142+ < BlockMath math = "\sum_{" />
143+ < BlockMath
144+ math = { '\\sum_{' }
145+ renderError = { err => < b > Custom error message: { err . name } </ b > }
146+ />
147+ < BlockMath math = { 123 } />
148+ < BlockMath
149+ math = { 123 }
150+ renderError = { err => < b > Custom error message: { err . name } </ b > }
151+ />
152+ </ div >
153+ ) ;
154+
155+ // ReactDOM.render(<ExamplePage />, document.getElementById('root'));
156+
157+ export default ExamplePage
0 commit comments