jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

begin ui

Browse Source
This commit is contained in:
Jeff Colombo 2019-01-13 00:23:34 -05:00
parent e72a59fe9d
commit 6dca121ffb
8 changed files with 59 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
generatePokemonData.ts
View File

@ -1,6 +1,6 @@
import * as fs from 'fs'; import * as fs from 'fs';
import Pokemon from 'pokemongo-json-pokedex/output/pokemon.json'; import Pokemon from 'pokemongo-json-pokedex/output/pokemon.json';
import { ILeaguePokemon, IPokemon, IStats, League, Grade } from './src/ts/app/models/Pokemon'; import { ILeaguePokemon, IPokemon, IStats, League, Grade } from 'app/models/Pokemon';
interface ICpAndTotalFound { interface ICpAndTotalFound {
[ key : number ] : Array<IStats>; [ key : number ] : Array<IStats>;

1
index.html
View File

@ -6,6 +6,7 @@
<style src="dist/app.css"></style> <style src="dist/app.css"></style>
</head> </head>
<body> <body>
<div id="pokemon-mount"></div>
<script src="dist/global-bundle.js"></script> <script src="dist/global-bundle.js"></script>
<script src="dist/main-bundle.js"></script> <script src="dist/main-bundle.js"></script>
</body> </body>

37
src/ts/api/PokemonService.ts
View File

@ -1,10 +1,9 @@
import { AjaxUtils } from 'src/ts/api/AjaxUtils'; import { AjaxUtils } from 'api/AjaxUtils';
import { IPokemon } from 'src/ts/app/models/Pokemon'; import { IPokemon } from 'app/models/Pokemon';
interface IPokemonService { interface IPokemonJSON extends IPokemon {}
interface IPokemonService {}
}
export class PokemonService implements IPokemonService { export class PokemonService implements IPokemonService {
public getPokemonList() { public getPokemonList() {
@ -14,38 +13,36 @@ export class PokemonService implements IPokemonService {
}; };
return AjaxUtils.ajaxGet('/api/billing/plan', queryParameters) return AjaxUtils.ajaxGet('/api/billing/plan', queryParameters)
.then((response : Array<object>) => { .then((response : Array<IPokemonJSON>) => {
return Promise.resolve(this.serializePokemonList(response)); return Promise.resolve(this.serializePokemonList(response));
}); });
} }
// does `object` need to be `any`? private serializePokemonList(jsonPokemonList : Array<IPokemonJSON>) : Array<IPokemon> {
private serializePokemonList(jsonPokemonList : Array<object>) : Array<IPokemon> { const pokemonList = jsonPokemonList.reduce((result : Array<IPokemon>, pokemonJson) => {
const pokemonList = jsonPokemonList.map((jsonPokemon) => {
let pokemon : IPokemon | null = null;
try { try {
if (typeof jsonPokemon.name !== 'string') { if (typeof pokemonJson.name !== 'string') {
throw 'pokemon missing name'; throw 'pokemon missing name';
} }
if (typeof jsonPokemon.id !== 'string') { if (typeof pokemonJson.id !== 'string') {
throw 'pokemon missing id'; throw 'pokemon missing id';
} }
if (typeof jsonPokemon.family !== 'string') { if (typeof pokemonJson.family !== 'string') {
throw 'pokemon missing family'; throw 'pokemon missing family';
} }
if (typeof jsonPokemon.dex !== 'number') { if (typeof pokemonJson.dex !== 'number') {
throw 'pokemon missing dex'; throw 'pokemon missing dex';
} }
if (typeof jsonPokemon.stats !== 'object') { if (typeof pokemonJson.stats !== 'object') {
throw 'pokemon missing stats'; throw 'pokemon missing stats';
} }
pokemon = { ...jsonPokemon }; const pokemon : IPokemon = { ...pokemonJson };
result.push(pokemon);
} catch (e) { } catch (e) {
console.error(jsonPokemon, e.message); console.error(pokemonJson, e.message);
} }
return pokemon; return result;
}); }, []);
// TODO should we allow `null`s?
return pokemonList; return pokemonList;
} }
} }

23
src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from 'react';
import { PokemonService } from 'api/PokemonService';
export interface IPokemonSelectListProps {}
export class PokemonSelectList extends React.Component<IPokemonSelectListProps, object> {
constructor(props : IPokemonSelectListProps) {
super(props);
}
public componentWillMount() {
// TODO: switch to redux
// PokemonService
}
public render() {
return (
<div>Pokemon List</div>
);
}
}

6
src/ts/app/index.tsx
View File

@ -1,9 +1,11 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { PokemonSelectList } from './components/PokemonSelectList/PokemonSelectList';
import 'styles/index.scss'; import 'styles/index.scss';
ReactDOM.render( ReactDOM.render(
<h1>Hello Mons</h1>, <PokemonSelectList />,
document.body document.getElementById('pokemon-mount')
); );

11
tsconfig.json
View File

@ -6,15 +6,17 @@
"allowJs": true, "allowJs": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"outDir": "./dist", "outDir": "dist",
"sourceMap": true, "sourceMap": true,
"module": "commonjs", "module": "commonjs",
"target": "es6", "target": "es6",
"jsx": "react", "jsx": "react",
"baseUrl": ".", "baseUrl": "./",
"traceResolution": false, "traceResolution": false,
"paths": { "paths": {
"src": ["./src"] "api/*": ["src/ts/api/*"],
"app/*": ["src/ts/app/*"],
"styles/*": ["src/scss/*"]
}, },
"plugins": [{ "plugins": [{
"name": "tslint-language-service", "name": "tslint-language-service",
@ -22,10 +24,11 @@
}], }],
}, },
"include": [ "include": [
"./src/**/*", "src/**/*",
"." "."
], ],
"exclude": [ "exclude": [
"node_modules", "node_modules",
"dist"
] ]
} }

2
tslint.json
View File

@ -1,7 +1,7 @@
{ {
"extends": ["tslint:latest", "tslint-react", "tslint-eslint-rules"], "extends": ["tslint:latest", "tslint-react", "tslint-eslint-rules"],
"rules": { "rules": {
"no-implicit-dependencies": [true, ["styles"]], "no-implicit-dependencies": [true, ["styles", "app", "api"]],
"no-default-export": true, "no-default-export": true,
"no-unused-expression": true, "no-unused-expression": true,
"no-unused-variable": [true, "react"], "no-unused-variable": [true, "react"],

6
webpack.config.js
View File

@ -7,6 +7,10 @@ const typescriptResolve = {
alias: { alias: {
'moment$': path.resolve('./node_modules/moment/min/moment-with-locales.min.js'), 'moment$': path.resolve('./node_modules/moment/min/moment-with-locales.min.js'),
'moment-timezone$': path.resolve('./node_modules/moment-timezone/builds/moment-timezone-with-data-2012-2022.min.js'), 'moment-timezone$': path.resolve('./node_modules/moment-timezone/builds/moment-timezone-with-data-2012-2022.min.js'),
// keep in sync with tsconfig.json `paths` and tslint.json `no-implicit-dependencies`
'api': path.resolve('./src/ts/api'),
'app': path.resolve('./src/ts/app'),
'styles': path.resolve('./src/scss'), 'styles': path.resolve('./src/scss'),
}, },
extensions: ['.ts', '.tsx', '.js'], extensions: ['.ts', '.tsx', '.js'],
@ -35,7 +39,7 @@ module.exports = function (env, tsLoaderHappyPackMode) {
'./src/scss/index.scss' // these are the global styles that should never be imported by a component './src/scss/index.scss' // these are the global styles that should never be imported by a component
], ],
'main': './src/ts/index.tsx', 'main': './src/ts/app/index.tsx',
}, },
optimization: options.getOptimizations(), optimization: options.getOptimizations(),
output: { output: {