all done but the testing

JeffML · Sep 25, 2024 · 80695d9 · 80695d9
1 parent a9c4cae
commit 80695d9
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 209 deletions.
diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,7 @@ import { SelectedSitesContextProvider } from "./common/Contexts.js";
 import PageHeader from "./PageHeader.js";
 import PgnAnalysis from "./PgnAnalyzePage.js";
 import SearchPage from "./SearchPage.js";
-import TestComponent from "./TestComponent.js";
+// import TestComponent from "./TestComponent.js";
 import { Visualizations } from "./Visualizations.js";
 
 function App() {
@@ -22,7 +22,7 @@ function App() {
                 {mode === modes.pgnAnalyze && <PgnAnalysis {...{ setMode }} />}
                 {mode === modes.visualization && <Visualizations />}
                 {mode === modes.about && <AboutPage />}
-                {mode === modes.test && <TestComponent />}
+                {/* {mode === modes.test && <TestComponent />} */}
             </SelectedSitesContextProvider>
         </div>
     );

diff --git a/src/Visualizations.js b/src/Visualizations.js
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { Display } from "./vizzes/Display.js";
 
-const MOST_ACTIVE = "most active squares"
-const FROM_TO = "from-to squares"
-const PIECE_DESTINATION = "destination squares"
+const MOST_ACTIVE = "most active squares";
+const FROM_TO = "from-to squares";
+const PIECE_DESTINATION = "destination squares";
+const ECO_FLOWCHART = "ECO Categories";
 
 const visualizations = [
     { name: FROM_TO, type: "graph" },
-    // "ECO flowchart": {type: "graph"},
+    { name: ECO_FLOWCHART, type: "graph" },
     { name: MOST_ACTIVE, type: "heatmap" },
     { name: PIECE_DESTINATION, type: "heatmap" },
     // "ball of mud": {type: "graph"},               TODO (or not)
@@ -91,7 +92,7 @@ const Visualizations = () => {
             >
                 <h2 className="font-cinzel">Experimental Visualizations</h2>
                 <div style={{ gridColumn: "1" }}>
-                    <h3 className="left">Graphs</h3>
+                    <h3 className="left">Graphs & Lists</h3>
                     <Graphs {...{ graphs, handler }}></Graphs>
                 </div>
                 <div style={{ gridColumn: "1" }}>
@@ -104,4 +105,4 @@ const Visualizations = () => {
     );
 };
 
-export {Visualizations, FROM_TO, PIECE_DESTINATION, MOST_ACTIVE};
+export { Visualizations, FROM_TO, PIECE_DESTINATION, MOST_ACTIVE, ECO_FLOWCHART };
diff --git a/src/common/consts.js b/src/common/consts.js
@@ -1,5 +1,5 @@
 const APP_NAME = "Fenster";
-const VERSION = "2.3.0";   // keep in sync with package.json version!
+const VERSION = "2.3.0"; // keep in sync with package.json version!
 
 const INCR = 5; // list increment
 
@@ -29,20 +29,20 @@ SUBTITLES[modes.visualization] = "Visualization";
 SUBTITLES[modes.about] = "About Fenster";
 
 // Note: shredder has been down before; check https://www.shredderchess.com/online/opening-database.html or see fenster-s getOpeningAdditional resolver
-const sites = ["FICS", "lichess", "shredder"]; 
+const sites = ["FICS", "lichess", "shredder"];
 const siteUrls = {
     FICS: "https://www.freechess.org/",
     lichess: "https://lichess.org/",
-    shredder: "https://www.shredderchess.com/",   
+    shredder: "https://www.shredderchess.com/",
 };
 
 const FENEX = /(?!.*\d{2,}.*)^([1-8PNBRQK]+\/){7}[1-8PNBRQK]+$/im;
 const DEFAULT_SERVER = "fenster-s.netlify.app";
 
-const token = process.env.REACT_APP_QUOTE;  // authentication token
+const token = process.env.REACT_APP_QUOTE; // authentication token
 const alias = process.env.REACT_APP_SERVER; // this can be set as follows: "REACT_APP_SERVER=flum netlify dev"
 
-const isTestMode = process.env.REACT_APP_TEST_MODE === "flum"   // brings up test page
+const isTestMode = process.env.REACT_APP_TEST_MODE === "flum"; // brings up test page
 
 // prettier-ignore
 const serverUri = `https://${alias? alias + "--" : ""}${DEFAULT_SERVER}/.netlify/functions/server`;
@@ -51,6 +51,14 @@ const serverUri = `https://${alias? alias + "--" : ""}${DEFAULT_SERVER}/.netlify
 const RANKS = [1, 2, 3, 4, 5, 6, 7, 8];
 const FILES = ["a", "b", "c", "d", "e", "f", "g", "h"];
 
+const ECO_CATS = [
+    ["A", "Flank Openings"],
+    ["B", "Semi-Open Games"],
+    ["C", "Open Games, and French Defense"],
+    ["D", "Closed and Semi-Closed Games"],
+    ["E", "Indian Defenses"],
+];
+
 export {
     APP_NAME,
     SUBTITLES,
@@ -66,5 +74,6 @@ export {
     serverUri,
     RANKS,
     FILES,
+    ECO_CATS,
     isTestMode,
 };
diff --git a/src/vizzes/Display.js b/src/vizzes/Display.js
@@ -4,9 +4,10 @@ import { FromToCircle } from "./FromToCircle.js";
 import { BallOfMud } from "./BallOfMud.js";
 import ecoCodes from "../common/ecoCodes.js";
 import { ColorAndPieces } from "./ColorAndPieces.js";
-import { MOST_ACTIVE, FROM_TO, PIECE_DESTINATION } from "../Visualizations.js";
+import { MOST_ACTIVE, FROM_TO, PIECE_DESTINATION, ECO_FLOWCHART } from "../Visualizations.js";
+import {EcoFlowchart} from './EcoFlowchart.js'
 
-const EcoCatCode = ({ cat, setCat, setCode }) => {
+function EcoCatCode({ cat, setCat, setCode }) {
     const cats = Object.keys(ecoCodes);
     const radioGridStyle = {
         display: "grid",
@@ -28,8 +29,7 @@ const EcoCatCode = ({ cat, setCat, setCode }) => {
                             name="cat"
                             defaultChecked={cat === c}
                             value={c}
-                            onChange={() => setCat(c)}
-                        />
+                            onChange={() => setCat(c)} />
                     </label>
                 ))}
             </div>
@@ -42,7 +42,7 @@ const EcoCatCode = ({ cat, setCat, setCode }) => {
                             size={5}
                             onChange={({ target }) => {
                                 setCode(target.value);
-                            }}
+                            } }
                         >
                             {ecoCodes[cat].map((entry) => (
                                 <option value={entry[0]} key={entry[0]} title={entry[2]}>
@@ -56,7 +56,7 @@ const EcoCatCode = ({ cat, setCat, setCode }) => {
             )}
         </div>
     );
-};
+}
 
 export const Display = ({ viz }) => {
     const [cat, setCat] = useState();
@@ -107,5 +107,9 @@ export const Display = ({ viz }) => {
                 <MostActiveByPiece {...{ cat, code, colors, piece}} />
             </div>
         );
+    if (viz === ECO_FLOWCHART) 
+        return (
+            <EcoFlowchart></EcoFlowchart>
+        )
     return <div className="double-column left" />;
 };
diff --git a/src/vizzes/EcoFlowchart.css b/src/vizzes/EcoFlowchart.css
@@ -0,0 +1,26 @@
+/* Style the button that is used to open and close the collapsible content */
+.collapsible {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+  }
+
+  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+  .active, .collapsible:hover {
+    background-color: #ccc;
+  }
+
+  /* Style the collapsible content. Note: hidden by default */
+  .content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background: radial-gradient(#3d8050, #585C5C);
+    text-align: left;
+  }
diff --git a/src/vizzes/EcoFlowchart.js b/src/vizzes/EcoFlowchart.js
@@ -0,0 +1,43 @@
+import data from "../common/ecoCodes.js";
+import { ECO_CATS } from "../common/consts.js";
+import "./EcoFlowchart.css";
+import { useState } from "react";
+
+
+
+const EcoCats = ({ category }) => {
+    const [cat, desc] = category;
+    const [active, setActive] = useState('')
+    const [contentStyle, setContentStyle] = useState('none')
+
+    const handler = (e) => {
+        setActive(active === 'active'? '' : 'active')
+        setContentStyle(contentStyle === 'block'? 'none' : 'block')
+    }
+
+    return (
+        <>
+            <button type="button" className={`collapsible font-cinzel " + ${active}`} style={{fontSize:'large'}} onClick={handler}>
+                {cat}&mdash;{desc}
+            </button>
+            <div className="content" style={{display:`${contentStyle}`, fontFamily:'Serif', fontSize:'larger'}}>
+                {data[cat].map(([code, desc, desc2]) => (
+                    <p style={{borderBottom:'solid 1px', margin:'1em'}}>
+                        <span style={{color:'lightgray', textShadow: '1px 1px 4px black'}}>{cat}
+                        {code}:{"   "}</span>{desc},{desc2}
+                    </p>
+                ))}
+            </div>
+        </>
+    );
+};
+
+const EcoFlowchart = () => (
+    <div style={{marginRight:'3em'}} >
+        {ECO_CATS.map((category) => (
+            <EcoCats {...{ category }} />
+        ))}
+    </div>
+);
+
+export { EcoFlowchart };
diff --git a/src/vizzes/Flowchart2.js b/src/vizzes/Flowchart2.js