diff --git a/index.html b/index.html index adf12c8..4f27312 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@ PVP, ok? E-Mon. - - + +
diff --git a/package.json b/package.json index 552340b..178c470 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "babel-loader": "^8.0.4", "babel-plugin-transform-builtin-extend": "^1.1.2", "css-loader": "^2.1.0", + "css-modules-typescript-loader": "^1.1.1", "fs": "^0.0.1-security", "glob": "^7.1.3", "mini-css-extract-plugin": "^0.5.0", diff --git a/src/scss/Variables.scss b/src/scss/Variables.scss new file mode 100644 index 0000000..7414e53 --- /dev/null +++ b/src/scss/Variables.scss @@ -0,0 +1,2 @@ +$background-color: #fff; +$border-color: #000; diff --git a/src/scss/index.scss b/src/scss/index.scss index 67ce83e..40b4a9d 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,3 +1,8 @@ +@import './Variables.scss'; + +html, body { - background: red; + height: 100vh; + margin: 0; + background: $background-color; } diff --git a/src/scss/index.scss.d.ts b/src/scss/index.scss.d.ts new file mode 100644 index 0000000..5feca4d --- /dev/null +++ b/src/scss/index.scss.d.ts @@ -0,0 +1,3 @@ +// This file is automatically generated. +// Please do not change this file! + diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index b50014b..de1ce09 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/src/ts/app/PokemonApp.tsx @@ -12,6 +12,8 @@ import { IndividualValueKey } from './components/PokemonExplorer/types'; import { PokemonExplorer } from './components/PokemonExplorer/PokemonExplorer'; import { PokemonSelectList } from './components/PokemonSelectList/PokemonSelectList'; +import * as styles from './styles/PokemonApp.scss'; + type PokemonAppProps = ReturnType; interface IConnectedPokemonAppProps extends PokemonAppProps { @@ -39,7 +41,7 @@ class PokemonApp extends React.Component { } = this.props.pokemonExplorerState; return ( -
+
; @@ -90,14 +92,14 @@ export class LeagueStatsList extends React.Component +
{ ({ measureRef }) => ( -
+
-

- { this.formatDexNumber(leaguePokemon.dex) } - { leaguePokemon.name } -

-
-
Base Stats
-
{ leaguePokemon.types.type1 }
-
{ leaguePokemon.types.type2 }
-
{ leaguePokemon.stats.baseStamina }
-
{ leaguePokemon.stats.baseAttack }
-
{ leaguePokemon.stats.baseDefense }
-
-
-
-
Level
- +
+
+

+ { this.formatDexNumber(leaguePokemon.dex) } + { leaguePokemon.name } +

+
+
Base Stats
+
{ leaguePokemon.types.type1 }
+
{ leaguePokemon.types.type2 }
+
{ leaguePokemon.stats.baseStamina }
+
{ leaguePokemon.stats.baseAttack }
+
{ leaguePokemon.stats.baseDefense }
-
-
IVs
-
-
-
{ rankedGrade } Rank
-
CP { rankedCp }
-
{ rankedHp } HP
-
{ rankedAtk } ATK
-
{ rankedDef } DEF
* { + flex: 1; + overflow: auto; + } +} diff --git a/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts b/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts new file mode 100644 index 0000000..9ad81ab --- /dev/null +++ b/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts @@ -0,0 +1,3 @@ +// This file is automatically generated. +// Please do not change this file! +export const selectList: string; diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss new file mode 100644 index 0000000..a208a36 --- /dev/null +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss @@ -0,0 +1,23 @@ +@import 'styles/Variables.scss'; + +.wrapper { + display: flex; + flex-flow: column nowrap; + height: 100vh; +} + +.pokemonInfo { + display: block; +} + +.pokemonBaseStats { + display: block; +} + +.popkemonIndividualStats { + display: block; +} + +.leaguePokemonRank { + display: block; +} diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts new file mode 100644 index 0000000..59435a8 --- /dev/null +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts @@ -0,0 +1,7 @@ +// This file is automatically generated. +// Please do not change this file! +export const leaguePokemonRank: string; +export const pokemonBaseStats: string; +export const pokemonInfo: string; +export const popkemonIndividualStats: string; +export const wrapper: string; diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx index 9d4d5d9..4da1521 100644 --- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx +++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx @@ -6,6 +6,8 @@ import classNames from 'classnames'; import { IPokemon } from 'app/models/Pokemon'; +import * as styles from './styles/PokemonSelectList.scss'; + export interface IPokemonSelectListProps { isLoading : boolean; activePokemonIndex : number | null; @@ -48,17 +50,18 @@ export class PokemonSelectList extends React.Component +
{ ({ measureRef }) => ( -
+
* { + height: 100%; + } +} diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts new file mode 100644 index 0000000..ff2d8cb --- /dev/null +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts @@ -0,0 +1,3 @@ +// This file is automatically generated. +// Please do not change this file! +export const leftPanel: string; diff --git a/src/ts/app/index.tsx b/src/ts/app/index.tsx index 951f1d1..ae4e246 100644 --- a/src/ts/app/index.tsx +++ b/src/ts/app/index.tsx @@ -13,8 +13,6 @@ import { PokemonSelectListReducers } from './components/PokemonSelectList/reduce import { ConnectedPokemonApp } from './PokemonApp'; -import 'styles/index.scss'; - export const appReducers = Redux.combineReducers({ pokemonSelectListState: PokemonSelectListReducers, pokemonExplorerState: PokemonExplorerReducers, diff --git a/src/ts/app/styles/PokemonApp.scss b/src/ts/app/styles/PokemonApp.scss new file mode 100644 index 0000000..a3ab805 --- /dev/null +++ b/src/ts/app/styles/PokemonApp.scss @@ -0,0 +1,12 @@ +@import 'styles/Variables.scss'; + +.wrapper { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + height: 100vh; + + & > * { + flex: 1 auto; + } +} diff --git a/src/ts/app/styles/PokemonApp.scss.d.ts b/src/ts/app/styles/PokemonApp.scss.d.ts new file mode 100644 index 0000000..9ae387c --- /dev/null +++ b/src/ts/app/styles/PokemonApp.scss.d.ts @@ -0,0 +1,3 @@ +// This file is automatically generated. +// Please do not change this file! +export const wrapper: string; diff --git a/webpack.config.js b/webpack.config.js index 33cfb29..c71211a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,7 @@ const path = require('path'); const options = require('./webpack.config.options'); const StyleLintPlugin = require('stylelint-webpack-plugin'); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const typescriptResolve = { alias: { @@ -111,10 +111,12 @@ module.exports = function (env) { // publicPath: '../' } }, + { loader: 'css-modules-typescript-loader' }, { loader: 'css-loader', options: { - sourceMap: !!env.CSS_SOURCEMAPS + sourceMap: !!env.CSS_SOURCEMAPS, + modules: true, } }, { @@ -130,10 +132,12 @@ module.exports = function (env) { exclude: /node_modules/, use: [ { loader: 'style-loader' }, + { loader: 'css-modules-typescript-loader' }, { loader: 'css-loader', options: { - sourceMap: !!env.CSS_SOURCEMAPS + sourceMap: !!env.CSS_SOURCEMAPS, + modules: true, } } ], diff --git a/yarn.lock b/yarn.lock index 8d19452..f2731f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1903,6 +1903,13 @@ css-loader@^2.1.0: postcss-value-parser "^3.3.0" schema-utils "^1.0.0" +css-modules-typescript-loader@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/css-modules-typescript-loader/-/css-modules-typescript-loader-1.1.1.tgz#fe03e2f02ed620c5c6825958f6945395ddf1d0df" + integrity sha512-eAQ6o7ATdO+9UYhe6BPEOg8e5zTfaAjNqyqwzrUm4yex48n2dYgBejWVkjpvOQ2CjsV1pHLadwwDUFYU9F6Akg== + dependencies: + line-diff "^2.0.1" + css-selector-tokenizer@^0.7.0: version "0.7.1" resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d" @@ -3452,11 +3459,23 @@ left-pad@^1.3.0: resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA== +levdist@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/levdist/-/levdist-1.0.0.tgz#91d7a3044964f2ccc421a0477cac827fe75c5718" + integrity sha1-kdejBElk8szEIaBHfKyCf+dcVxg= + leven@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580" integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA= +line-diff@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/line-diff/-/line-diff-2.0.1.tgz#d893ae8d81914cd65974fd57e714e730ce1e96a8" + integrity sha512-l+tt/aYyO+uyVyk5mzLgvoNYOkGR2iiFw5w2rWfFerfM7va0pje7n8LWdGk7Gl+Fkzw/bPZ0X9bvCBuTVLv8RA== + dependencies: + levdist "^1.0.0" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"