Fix typescript type checking. Set up application state.

kliento/snowpack.config.js

@@ -12,14 +12,15 @@ module.exports = {
   ],
   plugins: [
     '@snowpack/plugin-sass',
+    '@snowpack/plugin-typescript',
   ],
   packageOptions: {
-    /* ... */
+    types: true,
   },
   devOptions: {
     /* ... */
   },
   buildOptions: {
-    /* ... */
+    sourceMap: true,
   },
 };

kliento/src/appContext.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+
+import { PlayerCharacter } from "./types"
+
+export type AppState = {
+  playerCharacters: { [name: string]: PlayerCharacter };
+}
+
+export const AppContext = React.createContext<AppState>({
+  playerCharacters: {}
+})
+
+const AppProvider = ({ children }: { children: ReactNode }) => {
+  const [state, setState] = React.useState<AppState>({playerCharacters: {
+    "priat": {
+      name: "Priat",
+      concept: "An Intuitive Jack who Explores Yesterday",
+      effort: 1,
+      cypherLimit: 2,
+      might: { value: 12, max: 12, edge: 0 },
+      speed: { value: 14, max: 14, edge: 0 },
+      intellect: { value: 12, max: 12, edge: 1 },
+    }}})
+
+  return (<AppContext.Provider value={{state}}>{children}</AppContext.Provider>)
+}
+
+export default AppProvider

kliento/src/index.tsx

@@ -1,13 +1,15 @@
-import React from "react"
+import React, { createContext, useState } from "react"
 import ReactDOM from "react-dom"
 import { BrowserRouter, Route, Routes, useParams } from "react-router-dom";
 
 import Menu from "./components/Menu"
 import PlayerListView from "./views/PlayerListView"
 import "./styles.scss"
+import { PlayerCharacter } from "./types"
+import AppProvider from "./appContext"
 
-const App = () => (
+const App = () => {
-  <>
+  return (<AppProvider>
     <h1>Numenera Datasphere</h1>
     <div className="columns">
       <Menu />
@@ -21,7 +23,8 @@ const App = () => (
         <Route path="battles" element={<div>battles</div>} />
       </Routes>
     </div>
-  </>)
+  </AppProvider>)
+}
 
 const main = () => {
   ReactDOM.render(

kliento/src/views/PlayerCharacter.tsx

@@ -6,13 +6,12 @@ import { PlayerCharacter } from "../types"
 
 interface PlayerCharacterProps extends PlayerCharacter { }
 
-const PlayerCharacter = ({ name, might, speed, intellect }: PlayerCharacterProps) => {
+const PlayerCharacter = ({ name, concept, might, speed, intellect }: PlayerCharacterProps) => {
   return (<div>
     <h2>{name}</h2>
-    <div>{concept}</div>
     <div className="columns c-2">
       <div>
-
+        <div>{concept}</div>
       </div>
 
       <div>

kliento/src/views/PlayerListView.tsx

@@ -1,11 +1,15 @@
-import React from "react"
+import React, { useContext } from "react"
 import ReactDOM from "react-dom"
-import { Link, Route, Routes, useParams } from "react-router-dom";
+import { Link, Route, Routes, useParams } from "react-router-dom"
 
-import PlayerCharacter from "./PlayerCharacter";
+import { AppContext } from "../appContext"
+import PlayerCharacter from "./PlayerCharacter"
 
 const PlayerListView = () => {
-  let params = useParams();
+  const params = useParams()
+  const { state } = useContext(AppContext)
+  const character = params.name ? state.playerCharacters[params.name] : null
+
   return (<div>
     <nav>
       <Link to="priat">Priat</Link> |
@@ -13,7 +17,7 @@ const PlayerListView = () => {
       <Link to="ember">Ember</Link> |
       <Link to="lise">Lise</Link>
     </nav>
-    {params.name ? <PlayerCharacter name={params.name} /> : null }
+    {character ? <PlayerCharacter {...character} /> : null }
   </div>);
 }
 

kliento/tsconfig.json

@@ -7,8 +7,6 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true,
     "noEmit": true,
-    "types": ["snowpack-env"],
   }
 }