Skip to content
This repository has been archived by the owner on Aug 28, 2020. It is now read-only.

Commit

Permalink
Styles
Browse files Browse the repository at this point in the history
  • Loading branch information
ukatama committed Apr 6, 2016
1 parent 650229d commit 5b3369d
Show file tree
Hide file tree
Showing 14 changed files with 977 additions and 586 deletions.
50 changes: 34 additions & 16 deletions src/components/character.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import Paper from 'material-ui/lib/paper';
import ChevronLeft from 'material-ui/lib/svg-icons/navigation/chevron-left';
import React, {PropTypes} from 'react';
import {Character as CharacterShape} from '../shapes/character';
import {Col} from './col';
import {Row} from './row';
import {SheetField} from './sheet-field';
import {SheetPaper} from './sheet-paper';
import * as sheets from './sheets';

export const Character = (props) => {
Expand Down Expand Up @@ -46,22 +49,37 @@ export const Character = (props) => {
}
title={name}
/>
<Paper style={{margin: 16, padding: 16}}>
<SheetField
fullWidth
label="Name"
value={name}
onChange={changeHandler('name')}
/>
<SheetField fullWidth readOnly label="User" value={user_id} />
<SheetField
fullWidth
readOnly
label="Type"
value={types[type]}
/>
</Paper>
{sheetElement}
<div style={{padding: '16px 8px 0'}}>
<SheetPaper style={{padding: '0 8px'}}>
<Row>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="Name"
value={name}
onChange={changeHandler('name')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
readOnly
label="User"
value={user_id}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
readOnly
label="Type"
value={types[type]}
/>
</Col>
</Row>
</SheetPaper>
{sheetElement}
</div>
</div>
);
};
Expand Down
29 changes: 29 additions & 0 deletions src/components/col.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, {PropTypes} from 'react';

export const Col = (props) => {
const {
style,
tag,
width,
...otherProps,
} = props;

const flexWidth = typeof(width) === 'number'
? `${width}px`
: (width || '200px');

const Style = {
flex: `1 0 ${flexWidth}`,
};
const Tag = tag || 'div';

return <Tag {...otherProps} style={{...Style, ...style}} />;
};
Col.propTypes = {
style: PropTypes.object,
tag: PropTypes.string,
width: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
};
22 changes: 22 additions & 0 deletions src/components/row.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, {PropTypes} from 'react';

export const Row = (props) => {
const {
style,
tag,
...otherProps,
} = props;

const Style = {
width: '100%',
display: 'flex',
flexWrap: 'wrap',
};
const Tag = tag || 'div';

return <Tag {...otherProps} style={{...Style, ...style}} />;
};
Row.propTypes = {
style: PropTypes.object,
tag: PropTypes.string,
};
4 changes: 2 additions & 2 deletions src/components/sheet-paper.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ export const SheetPaper = (props) => {
} = props;

const Style = {
margin: 16,
padding: Array.isArray(children) ? '0 16px' : 0,
height: '100%',
margin: '0 8px 16px',
overflow: 'hidden',
overflowX: 'auto',
WebkitOverflowScrolling: 'touch',
Expand Down
67 changes: 67 additions & 0 deletions src/components/sheets/sw2_character_ja/armor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React, {PropTypes} from 'react';
import {Col} from '../../col';
import {Row} from '../../row';
import {SheetField} from '../../sheet-field';

export const Armor = ({changeHandler, data, readOnly}) => (
<div style={{padding: '0 8px'}}>
<Row>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="鎧"
readOnly={readOnly}
value={data.armor}
onChange={changeHandler('armor')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="必筋"
readOnly={readOnly}
type="number"
value={data.armor_str_req}
onChange={changeHandler('armor_str_req')}
/>
</Col>
</Row>
<Row>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="回避修正"
readOnly={readOnly}
type="number"
value={data.armor_evasion}
onChange={changeHandler('armor_evasion')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="防護点"
readOnly={readOnly}
type="number"
value={data.armor_protection}
onChange={changeHandler('armor_protection')}
/>
</Col>
</Row>
<div style={{padding: '0 8px'}}>
<SheetField
fullWidth
multiLine
label="備考"
readOnly={readOnly}
value={data.armor_note}
onChange={changeHandler('armor_note')}
/>
</div>
</div>
);
Armor.propTypes = {
changeHandler: PropTypes.func.isRequired,
data: PropTypes.object.isRequired,
readOnly: PropTypes.bool.isRequired,
};
54 changes: 54 additions & 0 deletions src/components/sheets/sw2_character_ja/basic-standards.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, {PropTypes} from 'react';
import {Col} from '../../col';
import {Row} from '../../row';
import {SheetField} from '../../sheet-field';

export const BasicStandards = ({changeHandler, data, readOnly}) => (
<div style={{margin: '0 8px'}}>
<Row>
<Col width={80}>
<SheetField
fullWidth
readOnly
label="生命抵抗力"
type="number"
value={data.vit_res}
/>
</Col>
<Col width={80}>
<SheetField
fullWidth
readOnly
label="精神抵抗力"
type="number"
value={data.spr_res}
/>
</Col>
</Row>
<Row>
<Col width={80}>
<SheetField
fullWidth
readOnly
label="HP"
type="number"
value={data.hp}
/>
</Col>
<Col width={80}>
<SheetField
fullWidth
readOnly
label="MP"
type="number"
value={data.mp}
/>
</Col>
</Row>
</div>
);
BasicStandards.propTypes = {
changeHandler: PropTypes.func.isRequired,
data: PropTypes.object.isRequired,
readOnly: PropTypes.bool.isRequired,
};
114 changes: 114 additions & 0 deletions src/components/sheets/sw2_character_ja/basis.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import React, {PropTypes} from 'react';
import {Col} from '../../col';
import {Row} from '../../row';
import {SheetField} from '../../sheet-field';

export const Basis = ({changeHandler, data, readOnly}) => (
<div style={{margin: '0 8px'}}>
<Row>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
readOnly
label="冒険者レベル"
type="number"
value={data.level}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="経験点"
readOnly={readOnly}
type="number"
value={data.exp}
onChange={changeHandler('exp')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
readOnly
label="累計経験点"
type="number"
value={data.total_exp}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="1ゾロ"
readOnly={readOnly}
type="number"
value={data.fumble}
onChange={changeHandler('fumble')}
/>
</Col>
</Row>
<Row>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="種族"
readOnly={readOnly}
value={data.race}
onChange={changeHandler('race')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="種族特徴"
readOnly={readOnly}
value={data.race_ability}
onChange={changeHandler('race_ability')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="生まれ"
readOnly={readOnly}
value={data.natinality}
onChange={changeHandler('natinality')}
/>
</Col>
</Row>
<Row>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="年齢"
readOnly={readOnly}
type="number"
value={data.age}
onChange={changeHandler('age')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="性別"
readOnly={readOnly}
value={data.sex}
onChange={changeHandler('sex')}
/>
</Col>
<Col style={{margin: '0 8px'}}>
<SheetField
fullWidth
label="穢れ"
readOnly={readOnly}
type="number"
value={data.foul}
onChange={changeHandler('foul')}
/>
</Col>
</Row>
</div>
);
Basis.propTypes = {
changeHandler: PropTypes.func.isRequired,
data: PropTypes.object.isRequired,
readOnly: PropTypes.bool.isRequired,
};
Loading

0 comments on commit 5b3369d

Please sign in to comment.