Instantly share code, notes, and snippets.

Embed
What would you like to do?
react.jsをお試し中
searchArcanas = (query, path, component, callback) ->
component.setState(showError: false)
$("#loading-modal").modal('show')
query ?= {}
query.ver = $("#data-ver").val()
url = $("#app-path").val() + path
callbacks =
done: (as) ->
callback(as, component)
$("#loading-modal").modal('hide')
fail: ->
$("#loading-modal").modal('hide')
component.setState(showError: true)
switch path
when 'ptm'
Searcher.searchMembers(query, url, callbacks)
when 'codes'
Searcher.searchCodes(query, url, callbacks)
else
Searcher.search(query, url, callbacks)
Row = ReactBootstrap.Row
Col = ReactBootstrap.Col
Well = ReactBootstrap.Well
Alert = ReactBootstrap.Alert
Button = ReactBootstrap.Button
Badge = ReactBootstrap.Badge
Glyphicon = ReactBootstrap.Glyphicon
Label = ReactBootstrap.Label
HeaderArea = React.createClass
render: ->
`<div className="header">
<h1>
Get our light!
<span className="hidden-sm hidden-md hidden-lg"><br /></span>
<small className="text-muted lead">チェンクロ パーティーシミュレーター</small>
</h1>
</div>`
ErrorArea = React.createClass
render: ->
return null unless @props.show
url = location.href
`<Row>
<Col xs={12} md={12} sm={12}>
<Alert bsStyle="danger">
<p>
<strong>データの取得に失敗しました。</strong>
<a href={url} className="alert-link">リロードする</a>か、もう一度検索してください。
</p>
</Alert>
</Col>
</Row>`
ArcanaSkill = React.createClass
renderEffect: (ef, i) ->
sd = ""
sd += "=> " if i > 0
sd += Skill.typeNameFor(ef.category)
sd += " - "
sd += Skill.subnameFor(ef.category, ef.subcategory)
if Skill.subeffectForEffect(ef).length > 0
se = []
for e in Skill.subeffectForEffect(ef)
se.push Skill.effectNameFor(ef.category, e)
sd += " ( + #{se.join(' / ')} )"
`<li key={i}>{sd}</li>`
render: ->
sk = @props.skill
return `<span>(不明)</span>` unless sk
efs = []
for ef, i in sk.effects
efs.push @renderEffect(ef, i)
`<div>
{sk.name} ({sk.cost})<br />
<ul className='small list-unstyled ability-detail'>
{efs}
</ul>
</div>`
ArcanaAbility = React.createClass
render: ->
ab = @props.ability
return `<span>なし</span>` unless ab
efs = []
for e, i in ab.effects
efs.push `<li key={i}>{Ability.conditionNameFor(e.conditionType)} - {Ability.effectNameFor(e.effectType)}</li>`
`<div>
{ab.name}
<ul className='small list-unstyled ability-detail'>
{efs}
</ul>
</div>`
ArcanaDetail = React.createClass
render: ->
a = @props.arcana
return null unless a
cl = "#{a.jobClass} arcana"
`<div className={cl}>
<ArcanaHeader arcana={a} />
<div className='arcana-view-body'>
<h4 className='arcana-name'>
<span className='text-muted'>{a.title}</span>
<strong>{a.name}</strong>
</h4>
<Row>
<div className='col-xs-12 hidden-sm hidden-md hidden-lg'>
<p className='pull-right'>
<input type='checkbox' className='fav' data-job-code={a.jobCode} />
</p>
</div>
<Col xs={12} sm={4} md={4}>
<dl className='small arcana-view-detail'>
<dt>職業</dt>
<dd>{a.jobDetail}</dd>
<dt>ATK / HP</dt>
<dd>{a.maxAtk} / {a.maxHp}<br />( {a.limitAtk} / {a.limitHp} )</dd>
<dt>武器タイプ</dt>
<dd>{a.weaponName}</dd>
<dt>所属</dt>
<dd>{Arcana.unionNameFor(a.union)}</dd>
<dt>声優</dt>
<dd>{a.voiceActor}</dd>
<dt>イラストレーター</dt>
<dd>{a.illustrator}</dd>
<dt>入手先</dt>
<dd>{Arcana.sourceCategoryNameFor(a.sourceCategory)} - {Arcana.sourceNameFor(a.sourceCategory, a.source)}</dd>
</dl>
</Col>
<Col xs={12} sm={8} md={8}>
<dl className='small arcana-view-detail'>
<dt>スキル</dt>
<dd><ArcanaSkill skill={a.skill} /></dd>
<dt>アビリティ1</dt>
<dd><ArcanaAbility ability={a.firstAbility} /></dd>
<dt>アビリティ2</dt>
<dd><ArcanaAbility ability={a.secondAbility} /></dd>
<dt>絆アビリティ</dt>
<dd><ArcanaAbility ability={a.chainAbility} /></dd>
</dl>
</Col>
<Col xs={12} sm={12} md={12}>
<p className='pull-left'>
<Button>Wikiで確認</Button>
</p>
<p className='pull-right hidden-xs'>
<input type='checkbox' className='fav' data-job-code={a.jobCode} />
</p>
</Col>
</Row>
</div>
</div>`
MemberArcanaHeader = React.createClass
render: ->
m = @props.member
return null unless m
a = m.arcana
return null unless a
cl = "arcana-title small #{a.jobClass}-title"
cost = a.cost
cost += " + #{m.chainArcana.chainCost}" if m.chainArcana
`<div className={cl}>
{a.jobNameShort} : {a.rarityStars} <Badge className='pull-right'>{cost}</Badge>
</div>`
ArcanaHeader = React.createClass
render: ->
a = @props.arcana
return null unless a
cl = "arcana-title small #{a.jobClass}-title"
cost = "#{a.cost} ( #{a.chainCost} )"
`<div className={cl}>
{a.jobNameShort} : {a.rarityStars} <Badge className='pull-right'>{cost}</Badge>
</div>`
ArcanaInfoButton = React.createClass
viewModalShow: ->
a = @props.arcana
React.render `<ArcanaDetail arcana={a} />`, document.getElementById('view-detail')
# TODO 管理の方法を検討
$(".fav").bootstrapSwitch({
state: false # TODO
size: 'mini'
onColor: 'success'
labelText: 'お気に入り'
onSwitchChange: (e, state) ->
target = $(e.target)
# TODO 実装
#toggleFavoriteArcana(target.data('jobCode'), state)
})
render: ->
_show = @viewModalShow
`<Button bsSize="xsmall"
className="pull-right"
data-toggle='modal'
data-target='#view-modal'
onClick={_show}>Info</Button>`
ChainedArcana = React.createClass
renderWithLink: ->
m = @props.member
return null unless m
c = m.chainArcana
return null unless c
abn = if m.canUseChainAbility()
`<span className='chained-ability'>{c.chainAbility.name}</span>`
else
`<s>{c.chainAbility.name}</s>`
_ubc = m.unbindChain
`<span>
<button className='close' onClick={_ubc}>&times;</button>
<a>{c.name}</a>
<span> / </span>
{abn}
</span>`
renderNoLink: ->
m = @props.member
return null unless m
c = m.chainArcana
return null unless c
abn = if m.canUseChainAbility()
`<span>{c.chainAbility.name}</span>`
else
`<s>{c.chainAbility.name}</s>`
`<span>{c.name} / {abn}</span>`
render: ->
if @props.noLink
@renderNoLink()
else
@renderWithLink()
ChainedArcanaForSelect = React.createClass
render: ->
a = @props.arcana
c = @props.chain
return null unless (a && c)
return `<span>({a.chainAbility.name})</span>` if a.jobCode is c.jobCode
abn = if Arcana.canUseChainAbility(a, c)
`<span className='chained-ability'>{c.chainAbility.name}</span>`
else
`<s>{c.chainAbility.name}</s>`
`<span>
<span className='chained-ability'>{c.name}</span>
<span> / </span>
{abn}
</span>`
ArcanaName = React.createClass
render: ->
a = @props.arcana
return null unless a
button = (if @props.noInfo then null else `<ArcanaInfoButton arcana={a} />`)
`<p>
<small>
{button}
<span className='text-muted small'>{a.title}</span><br />
<strong>{a.name}</strong>
</small>
</p>`
ArcanaSummaryData = React.createClass
render: ->
a = @props.arcana
m = @props.member
a = m?.arcana unless a
return null unless a
ca = @props.chain
abs1 = (if a.firstAbility.name != '' then a.firstAbility.name else 'なし')
abs2 = (if a.secondAbility.name != '' then a.secondAbility.name else 'なし')
chain = if m
if m.chainArcana
nl = @props.noLink
`<ChainedArcana member={m} noLink={nl} />`
else
`<span>({a.chainAbility.name})</span>`
else if ca
`<ChainedArcanaForSelect arcana={a} chain={ca} />`
else
`<span>{a.chainAbility.name}</span>`
`<div>
<small>
<ul className='small text-muted list-unstyled summary-detail'>
<li>{a.maxAtk} / {a.maxHp}</li>
<li>{a.skill.name} ({a.skill.cost})</li>
<li>{abs1}<br />{abs2}</li>
<li className='chain-ability-name'>{chain}</li>
</ul>
</small>
</div>`
MemberArcanaSummaryBody = React.createClass
render: ->
m = @props.member
return null unless (m && m.arcana)
`<div className='arcana-summary'>
<ArcanaName arcana={m.arcana} />
<ArcanaSummaryData member={m} />
</div>`
MemberArcanaSummary = React.createClass
componentDidMount: ->
d = $(@getDOMNode())
d.draggable(
connectToSortable: false
containment: false
helper: 'clone'
opacity: 0.7
zIndex: 10000
start: ->
document.getElementById('search-area').className = 'hide'
React.render `<HelpArea />`, document.getElementById('help-area')
stop: ->
document.getElementById('search-area').className = ''
React.render `<div />`, document.getElementById('help-area')
)
render: ->
m = @props.member
a = m?.arcana
cl = "summary-size arcana "
cl += (if a then a.jobClass else "none")
`<div className="member-character" data-area-id={m.areaId}>
<div className={cl}>
<MemberArcanaHeader member={m} />
<MemberArcanaSummaryBody member={m} />
</div>
</div>`
ChainSelectModal = React.createClass
setChainArcana: ->
m = @props.member
rm = @props.replaceMember
ca = (if rm then rm.arcana else @props.replaceArcana)
m.setArcana(m.arcana, ca)
$('#select-modal').modal('hide')
replaceMember: ->
m = @props.member
rm = @props.replaceMember
a = (if rm then rm.arcana else @props.replaceArcana)
c = (if rm then rm.chainArcana else null)
m.setArcana(a, c)
$('#select-modal').modal('hide')
renderChainedArcana: ->
a = @props.member.arcana
rm = @props.replaceMember
ca = (if rm then rm.arcana else @props.replaceArcana)
cl = "summary-size arcana #{a.jobClass}"
mcl = "arcana-title small #{a.jobClass}-title"
cost = "#{a.cost} + #{ca.chainCost}"
`<div className={cl}>
<div className={mcl}>
{a.jobNameShort} : {a.rarityStars} <Badge className='pull-right'>{cost}</Badge>
</div>
<div className='arcana-summary'>
<ArcanaName arcana={a} noInfo={true} />
<ArcanaSummaryData arcana={a} chain={ca} />
</div>
</div>`
renderChainState: ->
a = @props.member.arcana
rm = @props.replaceMember
ca = (if rm then rm.arcana else @props.replaceArcana)
ab = if Arcana.canUseChainAbility(a, ca)
`<Label bsStyle="success">絆アビリティ使用可能</Label>`
else
`<Label bsStyle="danger">絆アビリティ使用不可</Label>`
union = if a.union == ca.union
`<Label bsStyle="success">所属ボーナスあり</Label>`
else
`<Label bsStyle="warning">所属ボーナスなし</Label>`
`<div>{ab} {union}</div>`
renderReplaced: ->
rm = @props.replaceMember
ra = @props.replaceArcana
if rm
@renderReplacedWithMember(rm)
else
@renderReplacedWithArcana(ra)
renderReplacedWithMember: (m) ->
return null unless m
a = m.arcana
return null unless a
cl = "summary-size arcana #{a.jobClass}"
mcl = "arcana-title small #{a.jobClass}-title"
`<div className={cl}>
<MemberArcanaHeader member={m} />
<div className='arcana-summary'>
<ArcanaName arcana={a} noInfo={true} />
<ArcanaSummaryData member={m} noLink={true} />
</div>
</div>`
renderReplacedWithArcana: (a) ->
return null unless a
cl = "summary-size arcana #{a.jobClass}"
mcl = "arcana-title small #{a.jobClass}-title"
`<div className={cl}>
<div className={mcl}>
{a.jobNameShort} : {a.rarityStars} <Badge className='pull-right'>{a.cost}</Badge>
</div>
<div className='arcana-summary'>
<ArcanaName arcana={a} noInfo={true} />
<ArcanaSummaryData arcana={a} chain={a} />
</div>
</div>`
render: ->
renderChained = @renderChainedArcana()
renderReplaced = @renderReplaced()
renderChainState = @renderChainState()
_sc = @setChainArcana
_rm = @replaceMember
`<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button className="close" data-dismiss="modal"><span aria-hidden="true">&times; Close</span></button>
<h2 className="modal-title">セット先選択</h2>
</div>
<div className="modal-body">
<Row>
<Col sm={6} md={6}>
<Button bsStyle="primary" onClick={_sc}>
<Glyphicon glyph="link" /> 絆として追加する
</Button>
<p className="clearfix"></p>
<label>絆設定後</label>
<Col sm={10} md={10}>
{renderChained}
</Col>
{renderChainState}
</Col>
<Col sm={6} md={6}>
<Button bsStyle="info" onClick={_rm}>
<Glyphicon glyph="user" /> メンバーとして置き換える
</Button>
<p className="clearfix"></p>
<label>置き換え後</label>
<Col sm={10} md={10}>
{renderReplaced}
</Col>
</Col>
</Row>
</div>
<div className="modal-footer">
<Button data-dismiss="modal">
<Glyphicon glyph="remove" /> セットしないで閉じる
</Button>
</div>
</div>
</div>`
MemberArcana = React.createClass
replaceMemberFromMember: (omem, rmem) ->
return if omem.areaId is rmem.areaId
unless omem.arcana
omem.setArcana(rmem.arcana, rmem.chainArcana)
rmem.deleteMember() unless omem.areaId is 'friend'
else
React.render `<ChainSelectModal member={omem} replaceMember={rmem} />`, document.getElementById('select-modal')
$("#select-modal").modal("show")
replaceMemberFromTarget: (omem, ta) ->
unless omem.arcana
omem.setArcana(ta)
return
React.render `<ChainSelectModal member={omem} replaceArcana={ta} />`, document.getElementById('select-modal')
$("#select-modal").modal("show")
handleDropedArcana: (mem, drag) ->
areaId = drag.data("areaId") # from member
code = drag.data("jobCode") # from target
if areaId
dmem = mem.members.memberForId(areaId)
@replaceMemberFromMember(mem, dmem)
else if code
a = Searcher.forCode(code)
@replaceMemberFromTarget(mem, a)
componentDidMount: ->
d = $(@getDOMNode())
d.droppable(
drop: (e, ui) =>
e.preventDefault()
@handleDropedArcana(@props.member, ui.draggable)
)
render: ->
headers =
mem1: "Leader"
mem2: "2nd"
mem3: "3rd"
mem4: "4th"
sub1: "Sub1"
sub2: "Sub2"
friend: "Friend"
m = @props.member
h = headers[m.areaId]
_dm = m.deleteMember
delbtn = if m.arcana
`<button className="close" aria-hidden="true" onClick={_dm}>&times;</button>`
else
null
`<li className="col-xs-6 col-sm-3 col-md-3">
{delbtn}
<label className="member-label">{h}</label>
<MemberArcanaSummary member={m} />
</li>`
TotalCost = React.createClass
render: ->
cost = (@props.cost || 0)
`<li className="col-xs-6 col-sm-3 col-md-3">
<p className="text-center">
<label>Total Cost</label><br />
<span className="cost">{cost}</span>
</p>
</li>`
MemberAreaHeader = React.createClass
render: ->
`<Row>
<Col md={12} sm={12} className="hidden-xs">
<h2>パーティー編集</h2>
</Col>
</Row>`
MemberArea = React.createClass
render: ->
members = @props.members
return null unless members
mems = []
members.eachMembers (k, m) =>
mems.push `<MemberArcana key={k} member={m} />`
`<Well bsSize="small">
<MemberAreaHeader />
<Row>
<Col xs={12} sm={12} md={12} className="member-list">
<ul className="list-inline">
{mems}
<TotalCost cost={members.cost} />
</ul>
</Col>
</Row>
</Well>`
EditButton = React.createClass
viewShareModal: ->
mems = @props.members
return null unless mems
console.log document.getElementById('app-path')
appUrl = document.getElementById('app-path').value
url = appUrl + mems.createCode()
document.getElementById('ptm-code').value = url
twitterUrl = "https://twitter.com/intent/tweet"
twitterUrl += "?text=#{encodeURIComponent('チェンクロ パーティーシミュレーター ' + url)}"
twitterUrl += "&hashtags=ccpts"
document.getElementById('twitter-share').href = twitterUrl
render: ->
mems = @props.members
return null unless mems
edit = if mems.editMode
`<Button bsStyle="primary" className="act-btn">
<Glyphicon glyph="check" /> 編集終了
</Button>`
else
`<Button bsStyle="primary" className="act-btn">
<Glyphicon glyph="edit" /> 編集する
</Button>`
_vsm = @viewShareModal
`<Row>
<Col sm={12} md={12}>
{edit}
<Button
bsStyle="info"
className="act-btn"
data-toggle="modal"
data-target="#share-ptm-modal"
onClick={_vsm}>
<Glyphicon glyph="cloud" /> 共有
</Button>
<Button bsStyle="link" className="act-btn" data-toggle="modal" data-target="#help-modal">
使い方
</Button>
</Col>
</Row>`
EditArea = React.createClass
render: ->
mems = @props.members
`<div>
<EditButton members={mems} />
<MemberArea members={mems} />
</div>`
TargetArcanaBody = React.createClass
render: ->
a = @props.arcana
return null unless a
`<div className='arcana-summary'>
<ArcanaName arcana={a} />
<ArcanaSummaryData arcana={a} />
</div>`
TargetArcana = React.createClass
componentDidMount: ->
return unless @props.arcana
d = $(@getDOMNode())
d.draggable(
connectToSortable: false
containment: false
helper: 'clone'
opacity: 0.7
zIndex: 10000
start: ->
document.getElementById('search-area').className = 'hide'
React.render `<HelpArea />`, document.getElementById('help-area')
stop: ->
document.getElementById('search-area').className = ''
React.render `<div />`, document.getElementById('help-area')
)
render: ->
a = @props.arcana
cl = "summary-size arcana "
cl += (if a then a.jobClass else "none")
code = (if a then a.jobCode else null)
`<div className={cl} data-job-code={code}>
<ArcanaHeader arcana={a} />
<TargetArcanaBody arcana={a} />
</div>`
TargetArcanas = React.createClass
render: ->
results = @props.results
return null unless results
ts = []
for a, i in results.targets()
ts.push `<li className='listed-character col-sm-3 col-md-3 col-xs-6' key={a.jobCode}>
<TargetArcana arcana={a} />
</li>`
`<div>
<ul className="list-inline">
{ts}
</ul>
</div>`
PageLink = React.createClass
jumpPage: (e)->
results = @props.results
return null unless results
page = e.target.dataset.page
results.jumpPage(page)
renderPage: (p, i) ->
return null unless p
results = @props.results
return null unless results
page = results.page()
_jp = @jumpPage
if p is page
`<li key={i} className="active"><span>{p}</span></li>`
else if p is '..'
`<li key={i} className="disable"><span>{p}</span></li>`
else
`<li key={i}><span onClick={_jp} data-page={p}>{p}</span></li>`
renderPrevPage: ->
results = @props.results
return null unless results
if results.hasPrevPage()
_pp = results.prevPage
`<li><span onClick={_pp}>&larr;</span></li>`
else
`<li className="disabled"><span>&larr;</span></li>`
renderNextPage: ->
results = @props.results
return null unless results
if results.hasNextPage()
_np = results.nextPage
`<li><span onClick={_np}>&rarr;</span></li>`
else
`<li className="disabled"><span>&rarr;</span></li>`
render: ->
results = @props.results
return null unless results
pager = results.pager
return null unless pager
isPhone = @props.isPhone
pcl = "pagination"
pcl += " pagination-sm" if isPhone
prev = @renderPrevPage()
next = @renderNextPage()
plist = if isPhone
results.paginationList(3, 1)
else
results.paginationList(5, 2)
pl = []
for p, i in plist
pl.push @renderPage(p, i)
`<nav className="text-center">
<ul className={pcl}>
{prev}
{pl}
{next}
</ul>
</nav>`
HelpArea = React.createClass
render: ->
`<Row>
<Col sm={12} md={12}>
<Alert bsStyle="warning" className="small">
<ul className="list-unstyled">
<li>空いたところにドロップ -> パーティーメンバーとしてセット</li>
<li>すでに登録されたところにドロップ -> 「置き換え」か「絆」か選択</li>
</ul>
</Alert>
</Col>
</Row>`
SearchArea = React.createClass
render: ->
results = @props.results
return null unless results
pager = results.pager
count = if pager.size > 0
"#{pager.head() + 1} - #{pager.tail() + 1} / #{pager.size}件)"
else
"(0件)"
# TODO 検索にあった文字列
str = "最新"
`<Row>
<Col sm={12} md={12}>
<div className="bg-info small text-muted">
<div className="btn-group pull-right">
<Button className="dropdown-toggle" data-toggle="dropdown">
<Glyphicon glyph="menu-hamburger" /> 履歴 <span className="caret"></span>
</Button>
<ul className="dropdown-menu" role="menu">
<li><a><Glyphicon glyph="refresh" /> 最新のアルカナ</a></li>
<li><a><Glyphicon glyph="star" /> お気に入り</a></li>
<li><a><Glyphicon glyph="export" /> 最後に作ったパーティー構成</a></li>
<li className="divider"></li>
<li role="presentation" className="dropdown-header">検索履歴</li>
</ul>
</div>
<Button bsStyle="primary" data-toggle="modal" data-target="#search-modal">
<Glyphicon glyph="search" /> 検索
</Button>
表示中:{str} <span className="pager-count">{count}</span>
</div>
<div>
<span className="help-block small">アルカナをドラッグ -> 上のパーティーエリアでドロップ</span>
</div>
</Col>
</Row>`
TargetArea = React.createClass
render: ->
results = @props.results
`<div>
<div id="help-area"></div>
<div id="search-area"><SearchArea results={results} /></div>
<TargetArcanas results={results} />
<PageLink results={results} />
</div>`
class SearchResult
constructor: (view, rs) ->
psize = (view.state.pagerSize || 8)
@pager = new Pager(rs, psize)
@component = view
@search: (query, view) ->
unless query
result = new SearchResult(view, [])
result.updateState()
return
searchArcanas query, 'arcanas', view, (as, component) ->
result = new SearchResult(component, as)
result.updateState()
updateState: ->
@component.setState(results: @)
targets: ->
@pager.get() || []
page: ->
@pager.page
hasPrevPage: ->
@pager.hasPrevPage()
prevPage: =>
@pager.prevPage()
@updateState()
hasNextPage: ->
@pager.hasNextPage()
nextPage: =>
@pager.nextPage()
@updateState()
jumpPage: (n) ->
@pager.jumpPage(n)
@updateState()
paginationList: (body, edge) ->
return [] unless @pager
return [1 .. @pager.maxPage] if (@pager.maxPage <= (body + edge * 2 + 2))
switch
when @pager.page <= (edge + (body+1)/2)
li = [1 .. (body + edge)]
li.push '..'
li = li.concat [(@pager.maxPage - edge + 1) .. @pager.maxPage]
li
when @pager.page >= (@pager.maxPage - (edge + (body+1)/2) + 1)
li = [1 .. edge]
li.push '..'
li = li.concat [(@pager.maxPage-(body + edge)+1) .. @pager.maxPage]
li
else
li = [1 .. edge]
li.push '..'
li = li.concat [(@pager.page - edge) .. (@pager.page + edge)]
li.push '..'
li = li.concat [(@pager.maxPage - edge + 1) .. @pager.maxPage]
li
class Member
constructor: (aid, mems, a) ->
@areaId = aid
@members = mems
@arcana = a
@chainArcana = null
chainedCost: ->
return 0 unless @arcana
c = @arcana.cost
return c unless @chainArcana
(c + @chainArcana.chainCost)
canUseChainAbility: ->
return false unless (@arcana && @chainArcana)
return false unless @arcana.jobType == @chainArcana.jobType
return false if @arcana.name == @chainArcana.name
true
deleteMember: =>
@arcana = null
@chainArcana = null
@members.updateState()
unbindChain: =>
@chainArcana = null
@members.updateState()
setArcana: (a, c) ->
@arcana = a
@chainArcana = c
@members.updateState()
@members.removeDuplicateMember(@)
class Members
defaultMemberCode = 'V2F82F85K51NA38NP28NP24NNNNN'
memberKeys = ['mem1', 'mem2', 'mem3', 'mem4', 'sub1', 'sub2', 'friend']
ver = document.getElementById('pt-ver').value
constructor: (component) ->
@ptm = {}
@component = component
@editMode = true
@initMembers: (view, code) ->
c = code || defaultMemberCode
query = ptm: c
searchArcanas query, 'ptm', view, (as, component) ->
mems = new Members(component)
for k in memberKeys
ma = as[k]
mc = as[k + 'c']
m = new Member(k, mems, ma)
if ma && mc
m.chainArcana = mc
mems.addMember(m)
mems.updateState()
memberForId: (aid) ->
@ptm[aid]
eachMembers: (f) ->
for k in memberKeys
f(k, @ptm[k])
updateState: ->
@cost = calcTotalCost(@ptm)
@component.setState(members: @)
addMember: (m) ->
return unless m
@ptm[m.areaId] = m
updateMember: (m) ->
return unless m
@addMember(m)
@updateState()
removeDuplicateMember: (org) ->
return unless org
aid = org.areaId
return if aid is 'friend'
oa = org.arcana
return unless oa
n1 = oa.name
n2 = org.chainArcana?.name || ''
@eachMembers (k, m) ->
return if k is 'friend'
return if k is aid
a = m.arcana
return unless a
if (a.name is n1 || a.name is n2)
m.deleteMember()
else if m.chainArcana
cn = m.chainArcana.name
if (cn is n1 || cn is n2)
m.unbindChain()
changeEditMode: (mode) ->
@editMode = mode
createCode: ->
header = "V#{ver}"
code = ''
@eachMembers (k, m) ->
if m?.arcana
code += m.arcana.jobCode
code += (if m.chainArcana then m.chainArcana.jobCode else 'N')
else
code += 'NN'
if (/^N+$/).test(code) then '' else (header + code)
# private
calcTotalCost = (ptm)->
cost = 0
for k in memberKeys
continue if k is 'friend'
m = ptm[k]
cost += m.chainedCost() if m
cost
PtEditView = React.createClass
getInitialState: ->
members: null
results: null
showError: false
pagerSize: 8
componentDidMount: ->
Members.initMembers(@)
SearchResult.search({recently: 24}, @)
render: ->
state = @state
`<div>
<HeaderArea />
<ErrorArea show={state.showError} />
<EditArea members={state.members} />
<TargetArea results={state.results} />
</div>`
React.render `<PtEditView />`, document.getElementById('ptedit')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment