diff --git a/kliento/snowpack.config.js b/kliento/snowpack.config.js index 3c76d40..2b6b9e4 100644 --- a/kliento/snowpack.config.js +++ b/kliento/snowpack.config.js @@ -12,14 +12,15 @@ module.exports = { ], plugins: [ '@snowpack/plugin-sass', + '@snowpack/plugin-typescript', ], packageOptions: { - /* ... */ + types: true, }, devOptions: { /* ... */ }, buildOptions: { - /* ... */ + sourceMap: true, }, }; diff --git a/kliento/src/appContext.tsx b/kliento/src/appContext.tsx new file mode 100644 index 0000000..704bdd0 --- /dev/null +++ b/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({ + playerCharacters: {} +}) + +const AppProvider = ({ children }: { children: ReactNode }) => { + const [state, setState] = React.useState({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 ({children}) +} + +export default AppProvider diff --git a/kliento/src/index.tsx b/kliento/src/index.tsx index 615f7a6..6f985de 100644 --- a/kliento/src/index.tsx +++ b/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 (

Numenera Datasphere

@@ -21,7 +23,8 @@ const App = () => ( battles
} /> - ) +
) +} const main = () => { ReactDOM.render( diff --git a/kliento/src/views/PlayerCharacter.tsx b/kliento/src/views/PlayerCharacter.tsx index 5f4a1bf..a76abc3 100644 --- a/kliento/src/views/PlayerCharacter.tsx +++ b/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 (

{name}

-
{concept}
- +
{concept}
diff --git a/kliento/src/views/PlayerListView.tsx b/kliento/src/views/PlayerListView.tsx index 7cbc9c5..b2e38bd 100644 --- a/kliento/src/views/PlayerListView.tsx +++ b/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 (
- {params.name ? : null } + {character ? : null }
); } diff --git a/kliento/tsconfig.json b/kliento/tsconfig.json index 1a9bfca..7d8e50e 100644 --- a/kliento/tsconfig.json +++ b/kliento/tsconfig.json @@ -7,8 +7,6 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, - "skipLibCheck": true, "noEmit": true, - "types": ["snowpack-env"], } }