mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-05-02 08:53:38 -04:00
Put in the new BuyGemsModal design.
This commit is contained in:
parent
50b4e79c7b
commit
5b034194ee
5 changed files with 64 additions and 25 deletions
app
assets/images/pages/play/modal
locale
styles/play/modal
templates/play/modal
views/play/modal
BIN
app/assets/images/pages/play/modal/buy-gems-background.png
Normal file
BIN
app/assets/images/pages/play/modal/buy-gems-background.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 166 KiB |
|
@ -310,6 +310,11 @@
|
||||||
restricted: "(restricted in this level)"
|
restricted: "(restricted in this level)"
|
||||||
equip: "Equip"
|
equip: "Equip"
|
||||||
unequip: "Unequip"
|
unequip: "Unequip"
|
||||||
|
|
||||||
|
buy_gems:
|
||||||
|
few_gems: 'A few gems'
|
||||||
|
pile_gems: 'Pile of gems'
|
||||||
|
chest_gems: 'Chest of gems'
|
||||||
|
|
||||||
choose_hero:
|
choose_hero:
|
||||||
choose_hero: "Choose Your Hero"
|
choose_hero: "Choose Your Hero"
|
||||||
|
|
|
@ -1,8 +1,44 @@
|
||||||
#buy-gems-modal
|
#buy-gems-modal
|
||||||
button
|
|
||||||
width: 100%
|
//- Clear modal defaults
|
||||||
margin-bottom: 10px
|
.modal-dialog
|
||||||
|
margin: 100px auto 0 auto
|
||||||
|
padding: 0
|
||||||
|
width: 820px
|
||||||
|
height: 460px
|
||||||
|
background: none
|
||||||
|
|
||||||
|
//- Background
|
||||||
|
#buy-gems-background
|
||||||
|
position: absolute
|
||||||
|
top: -157px
|
||||||
|
left: -2px
|
||||||
|
|
||||||
|
//- Products
|
||||||
|
|
||||||
|
#products
|
||||||
|
position: absolute
|
||||||
|
left: 55px
|
||||||
|
top: 242px
|
||||||
|
width: 720px
|
||||||
|
height: 140px
|
||||||
|
index: 1
|
||||||
|
|
||||||
.gem
|
.product
|
||||||
width: 20px
|
width: 228px
|
||||||
height: 20px
|
overflow: none
|
||||||
|
float: left
|
||||||
|
text-align: center
|
||||||
|
margin-right: 12px
|
||||||
|
|
||||||
|
h4
|
||||||
|
font-size: 20px
|
||||||
|
color: rgb(22,16,5)
|
||||||
|
|
||||||
|
h3
|
||||||
|
margin-top: 10px
|
||||||
|
text-transform: uppercase
|
||||||
|
color: rgb(22,16,5)
|
||||||
|
|
||||||
|
button
|
||||||
|
width: 80%
|
||||||
|
|
|
@ -1,14 +1,11 @@
|
||||||
extends /templates/modal/modal_base
|
.modal-dialog
|
||||||
|
.modal-content
|
||||||
block modal-header-content
|
img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background
|
||||||
h3(data-i18n='play.buy_gems')
|
|
||||||
|
#products
|
||||||
block modal-body-content
|
for product in products
|
||||||
for product in products
|
.product
|
||||||
button.product.btn.btn-lg(value=product.id)
|
h4 x#{product.gems}
|
||||||
img.gem(src="/images/common/gem.png")
|
h3(data-i18n=product.i18n)
|
||||||
span x#{product.gems): #{product.price}
|
button.btn.btn-illustrated.btn-lg(value=product.id)
|
||||||
|
span= product.price
|
||||||
block modal-footer
|
|
||||||
.modal-footer
|
|
||||||
button(data-dismiss="modal", data-i18n="common.cancel").btn Cancel
|
|
|
@ -7,9 +7,9 @@ module.exports = class BuyGemsModal extends ModalView
|
||||||
plain: true
|
plain: true
|
||||||
|
|
||||||
products: [
|
products: [
|
||||||
{ price: '$4.99', gems: 5000, id: 'gems_5' }
|
{ price: '$4.99', gems: 5000, id: 'gems_5', i18n: 'buy_gems.few_gems' }
|
||||||
{ price: '$9.99', gems: 11000, id: 'gems_10' }
|
{ price: '$9.99', gems: 11000, id: 'gems_10', i18n: 'buy_gems.pile_gems' }
|
||||||
{ price: '$19.99', gems: 25000, id: 'gems_20' }
|
{ price: '$19.99', gems: 25000, id: 'gems_20', i18n: 'buy_gems.chest_gems' }
|
||||||
]
|
]
|
||||||
|
|
||||||
subscriptions:
|
subscriptions:
|
||||||
|
@ -17,7 +17,7 @@ module.exports = class BuyGemsModal extends ModalView
|
||||||
'ipad:iap-complete': 'onIAPComplete'
|
'ipad:iap-complete': 'onIAPComplete'
|
||||||
|
|
||||||
events:
|
events:
|
||||||
'click button.product': 'onClickProductButton'
|
'click .product button': 'onClickProductButton'
|
||||||
|
|
||||||
constructor: (options) ->
|
constructor: (options) ->
|
||||||
super(options)
|
super(options)
|
||||||
|
@ -48,7 +48,8 @@ module.exports = class BuyGemsModal extends ModalView
|
||||||
Backbone.Mediator.publish 'buy-gems-modal:purchase-initiated', { productID: productID }
|
Backbone.Mediator.publish 'buy-gems-modal:purchase-initiated', { productID: productID }
|
||||||
|
|
||||||
else
|
else
|
||||||
@$el.find('.modal-body').append($('<div class="alert alert-danger">Not implemented</div>'))
|
application.tracker?.trackEvent 'Started purchase', {productID:productID}, ['Google Analytics']
|
||||||
|
alert('Not yet implemented, but thanks for trying!')
|
||||||
|
|
||||||
onIAPComplete: (e) ->
|
onIAPComplete: (e) ->
|
||||||
product = _.find @products, { id: e.productID }
|
product = _.find @products, { id: e.productID }
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue