mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-29 07:24:08 -04:00
Refactored item-details-view styling and shared styles between InventoryModal and PlayItemsView, fixing scrollbars and text overflow issues in the process. Dragging to unequip now updates restrictions again. Worked on pointer cursors for equippable ittems. Hid items not usable by your hero's class. Stopped silhouetted items from being clickable.
This commit is contained in:
Nick Winter
parent
fbbcf2a925
commit
eab293cb66
4 changed files with 74 additions and 221 deletions
app
styles
templates/game-menu
views/game-menu
|
|
@ -301,15 +301,19 @@ $itemSlotGridHeight: 70px
|
||||||
|
|
||||||
//- Available equipment
|
//- Available equipment
|
||||||
|
|
||||||
|
&.Warrior #unequipped img.item:not(.Warrior), &.Ranger #unequipped img.item:not(.Ranger), &.Wizard #unequipped img.item:not(.Wizard)
|
||||||
|
// Our code hides and shows (modifies display), but we can be invisible this other way.
|
||||||
|
visibility: hidden
|
||||||
|
position: absolute
|
||||||
|
|
||||||
#unequipped
|
#unequipped
|
||||||
width: 222px
|
width: 222px
|
||||||
position: absolute
|
position: absolute
|
||||||
left: 370px
|
left: 370px
|
||||||
top: 112px
|
top: 112px
|
||||||
height: 450px
|
height: 450px
|
||||||
overflow-y: scroll
|
|
||||||
border: 3px solid black
|
border: 3px solid black
|
||||||
padding: 9px
|
padding: 9px 0 9px 9px
|
||||||
background-color: white
|
background-color: white
|
||||||
|
|
||||||
#double-click-hint
|
#double-click-hint
|
||||||
|
|
@ -330,6 +334,7 @@ $itemSlotGridHeight: 70px
|
||||||
padding: 1px
|
padding: 1px
|
||||||
width: 60px
|
width: 60px
|
||||||
height: 60px
|
height: 60px
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
background-color: rgb(81,153,236)
|
background-color: rgb(81,153,236)
|
||||||
|
|
@ -350,6 +355,7 @@ $itemSlotGridHeight: 70px
|
||||||
&.equipped
|
&.equipped
|
||||||
background-color: #ff5
|
background-color: #ff5
|
||||||
display: none
|
display: none
|
||||||
|
cursor: default
|
||||||
|
|
||||||
//.item-view
|
//.item-view
|
||||||
// cursor: default
|
// cursor: default
|
||||||
|
|
@ -359,6 +365,7 @@ $itemSlotGridHeight: 70px
|
||||||
|
|
||||||
&.restricted
|
&.restricted
|
||||||
background-color: rgba(255, 80, 67, 0.25)
|
background-color: rgba(255, 80, 67, 0.25)
|
||||||
|
cursor: default
|
||||||
|
|
||||||
//.item-view
|
//.item-view
|
||||||
// cursor: default
|
// cursor: default
|
||||||
|
|
@ -366,10 +373,13 @@ $itemSlotGridHeight: 70px
|
||||||
//.status-message .restricted-message
|
//.status-message .restricted-message
|
||||||
// display: inline
|
// display: inline
|
||||||
|
|
||||||
//&.locked
|
&.locked
|
||||||
|
cursor: default
|
||||||
//background-color: gray
|
//background-color: gray
|
||||||
|
|
||||||
&.silhouette
|
&.silhouette
|
||||||
|
cursor: default
|
||||||
|
pointer-events: none
|
||||||
@include filter(contrast(25%) brightness(25%))
|
@include filter(contrast(25%) brightness(25%))
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
|
|
||||||
|
|
@ -397,122 +407,22 @@ $itemSlotGridHeight: 70px
|
||||||
right: 414px
|
right: 414px
|
||||||
|
|
||||||
|
|
||||||
//- Item details. Mostly the same as the item store view, but figured we'd probably
|
//- Item details. Non-specific item-details-view styling is in item-details-view.sass.
|
||||||
// be futzing with details so just copied it. TODO: refactor?
|
|
||||||
|
|
||||||
#item-title
|
#item-details-view
|
||||||
position: absolute
|
|
||||||
width: 228px
|
|
||||||
height: 50px
|
|
||||||
left: 698px
|
|
||||||
top: 56px
|
|
||||||
z-index: 2
|
|
||||||
|
|
||||||
h2
|
#item-title
|
||||||
font-size: 20px
|
left: 698px
|
||||||
margin: 12px 20px
|
top: 56px
|
||||||
text-align: center
|
|
||||||
color: rgb(53,40,25)
|
|
||||||
|
|
||||||
#item-details-body
|
|
||||||
position: absolute
|
|
||||||
left: 650px
|
|
||||||
top: 126px
|
|
||||||
width: 330px
|
|
||||||
height: 453px
|
|
||||||
//background: rgba(100,100,100,0.5)
|
|
||||||
overflow: scroll
|
|
||||||
|
|
||||||
#item-container
|
|
||||||
height: 163px
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.item-img, .item-shadow
|
|
||||||
width: 130px
|
|
||||||
height: 130px
|
|
||||||
|
|
||||||
.item-img
|
|
||||||
top: 15px
|
|
||||||
|
|
||||||
.item-shadow
|
|
||||||
top: 25px
|
|
||||||
|
|
||||||
img.hr
|
|
||||||
width: 80%
|
|
||||||
margin: 0 10% -3px
|
|
||||||
|
|
||||||
&.faded
|
|
||||||
opacity: 0.4
|
|
||||||
|
|
||||||
.stat-row
|
|
||||||
height: 24px
|
|
||||||
position: relative
|
|
||||||
font-size: 20px
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
.stat-label
|
|
||||||
position: absolute
|
|
||||||
left: 54px
|
|
||||||
color: rgb(93,73,52)
|
|
||||||
|
|
||||||
.stat
|
|
||||||
position: absolute
|
|
||||||
left: 150px
|
|
||||||
color: rgb(42,38,28)
|
|
||||||
|
|
||||||
#skills
|
|
||||||
margin: 25px
|
|
||||||
|
|
||||||
h3
|
|
||||||
color: rgb(41,35,25)
|
|
||||||
|
|
||||||
strong
|
|
||||||
color: rgb(50,50,30)
|
|
||||||
|
|
||||||
#selected-item-unlock-button
|
|
||||||
left: 646px
|
|
||||||
top: 594px
|
|
||||||
width: 337px
|
|
||||||
height: 41px
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
img
|
|
||||||
height: 16px
|
|
||||||
|
|
||||||
//- Item icons w/shadows (both in list and details areas)
|
|
||||||
|
|
||||||
.item-img, .item-shadow, .item-silhouette
|
|
||||||
position: absolute
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
|
|
||||||
.item-img
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
.item-shadow
|
|
||||||
left: 5px
|
|
||||||
@include filter(contrast(0%) brightness(0%))
|
|
||||||
opacity: 0.2
|
|
||||||
|
|
||||||
.item-silhouette
|
|
||||||
@include filter(contrast(0%) brightness(0%))
|
|
||||||
opacity: 0.3
|
|
||||||
|
|
||||||
.unlock-button
|
#item-details-body
|
||||||
position: absolute
|
left: 650px
|
||||||
border: 3px solid rgb(7,65,83)
|
|
||||||
background: rgb(0,119,168)
|
#selected-item-unlock-button
|
||||||
color: white
|
left: 646px
|
||||||
font-size: 16px
|
|
||||||
border-radius: 0
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
background: rgb(72, 106, 113)
|
//- Equip/unequip/extra
|
||||||
opacity: 1
|
|
||||||
color: rgba(255,255,255, 0.4)
|
|
||||||
|
|
||||||
#item-details-extra
|
#item-details-extra
|
||||||
position: absolute
|
position: absolute
|
||||||
|
|
|
||||||
|
|
@ -123,8 +123,8 @@
|
||||||
.tab-pane
|
.tab-pane
|
||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
.nano-content
|
.nano-content
|
||||||
padding: 26px 51px 26px 26px
|
padding: 26px 51px 26px 26px
|
||||||
|
|
||||||
|
|
||||||
//- Item box
|
//- Item box
|
||||||
|
|
@ -222,6 +222,23 @@
|
||||||
background: url(/images/pages/play/modal/item-box-background-selected.png)
|
background: url(/images/pages/play/modal/item-box-background-selected.png)
|
||||||
|
|
||||||
|
|
||||||
|
//- Item details. Non-specific item-details-view styling is in item-details-view.sass.
|
||||||
|
|
||||||
|
#item-details-view
|
||||||
|
|
||||||
|
#item-title
|
||||||
|
left: 910px
|
||||||
|
top: 60px
|
||||||
|
|
||||||
|
#item-details-body
|
||||||
|
left: 860px
|
||||||
|
|
||||||
|
#selected-item-unlock-button
|
||||||
|
left: 856px
|
||||||
|
|
||||||
|
|
||||||
|
#play-items-modal, #inventory-modal
|
||||||
|
|
||||||
//- Item list scrollbar
|
//- Item list scrollbar
|
||||||
|
|
||||||
.nano-pane
|
.nano-pane
|
||||||
|
|
@ -236,89 +253,6 @@
|
||||||
margin-left: -3px
|
margin-left: -3px
|
||||||
margin-right: -3px
|
margin-right: -3px
|
||||||
|
|
||||||
// color: red
|
|
||||||
|
|
||||||
|
|
||||||
//- Item details
|
|
||||||
|
|
||||||
#item-title
|
|
||||||
position: absolute
|
|
||||||
width: 228px
|
|
||||||
height: 50px
|
|
||||||
left: 910px
|
|
||||||
top: 60px
|
|
||||||
z-index: 2
|
|
||||||
|
|
||||||
h2
|
|
||||||
font-size: 20px
|
|
||||||
margin: 12px 20px
|
|
||||||
text-align: center
|
|
||||||
color: rgb(53,40,25)
|
|
||||||
|
|
||||||
#item-details-body
|
|
||||||
position: absolute
|
|
||||||
left: 860px
|
|
||||||
top: 126px
|
|
||||||
width: 330px
|
|
||||||
height: 449px
|
|
||||||
//background: rgba(100,100,100,0.5)
|
|
||||||
|
|
||||||
#item-container
|
|
||||||
height: 163px
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.item-img, .item-shadow
|
|
||||||
width: 130px
|
|
||||||
height: 130px
|
|
||||||
|
|
||||||
.item-img
|
|
||||||
top: 15px
|
|
||||||
|
|
||||||
.item-shadow
|
|
||||||
top: 25px
|
|
||||||
|
|
||||||
img.hr
|
|
||||||
width: 80%
|
|
||||||
margin: 0 10% -3px
|
|
||||||
|
|
||||||
&.faded
|
|
||||||
opacity: 0.4
|
|
||||||
|
|
||||||
.stat-row
|
|
||||||
height: 24px
|
|
||||||
position: relative
|
|
||||||
font-size: 20px
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
.stat-label
|
|
||||||
position: absolute
|
|
||||||
left: 54px
|
|
||||||
color: rgb(93,73,52)
|
|
||||||
|
|
||||||
.stat
|
|
||||||
position: absolute
|
|
||||||
left: 150px
|
|
||||||
color: rgb(42,38,28)
|
|
||||||
|
|
||||||
#skills
|
|
||||||
margin: 25px
|
|
||||||
|
|
||||||
h3
|
|
||||||
color: rgb(41,35,25)
|
|
||||||
|
|
||||||
strong
|
|
||||||
color: rgb(50,50,30)
|
|
||||||
|
|
||||||
#selected-item-unlock-button
|
|
||||||
left: 856px
|
|
||||||
top: 594px
|
|
||||||
width: 337px
|
|
||||||
height: 41px
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
img
|
|
||||||
height: 16px
|
|
||||||
|
|
||||||
|
|
||||||
//- Item icons w/shadows (both in list and details areas)
|
//- Item icons w/shadows (both in list and details areas)
|
||||||
|
|
||||||
|
|
@ -358,6 +292,9 @@
|
||||||
opacity: 1
|
opacity: 1
|
||||||
color: rgba(255,255,255, 0.4)
|
color: rgba(255,255,255, 0.4)
|
||||||
|
|
||||||
|
|
||||||
|
//- Use the two-column layout and background image if we are on a narrow screen.
|
||||||
|
|
||||||
@media only screen and (max-width: 1300px)
|
@media only screen and (max-width: 1300px)
|
||||||
#play-items-modal
|
#play-items-modal
|
||||||
overflow-x: hidden
|
overflow-x: hidden
|
||||||
|
|
|
||||||
|
|
@ -19,26 +19,28 @@
|
||||||
img.item(src=equipment[slot].getPortraitURL(), data-item-id=equipment[slot].id)
|
img.item(src=equipment[slot].getPortraitURL(), data-item-id=equipment[slot].id)
|
||||||
|
|
||||||
#unequipped
|
#unequipped
|
||||||
if itemGroups
|
.nano
|
||||||
if itemGroups.availableItems.models.length
|
.nano-content
|
||||||
h4#available-description(data-i18n="inventory.available_item")
|
if itemGroups
|
||||||
for item in itemGroups.availableItems.models
|
if itemGroups.availableItems.models.length
|
||||||
img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
|
h4#available-description(data-i18n="inventory.available_item")
|
||||||
.clearfix
|
for item in itemGroups.availableItems.models
|
||||||
|
img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
|
||||||
#double-click-hint.alert.alert-info.secret(data-i18n="inventory.should_equip")
|
.clearfix
|
||||||
|
|
||||||
if itemGroups.restrictedItems.models.length
|
#double-click-hint.alert.alert-info.secret(data-i18n="inventory.should_equip")
|
||||||
h4#restricted-description(data-i18n="inventory.restricted_title")
|
|
||||||
for item in itemGroups.restrictedItems.models
|
if itemGroups.restrictedItems.models.length
|
||||||
img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
|
h4#restricted-description(data-i18n="inventory.restricted_title")
|
||||||
.clearfix
|
for item in itemGroups.restrictedItems.models
|
||||||
|
img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
|
||||||
if itemGroups.lockedItems.models.length
|
.clearfix
|
||||||
h4#locked-description(data-i18n="play.locked")
|
|
||||||
for item in itemGroups.lockedItems.models
|
if itemGroups.lockedItems.models.length
|
||||||
img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
|
h4#locked-description(data-i18n="play.locked")
|
||||||
.clearfix
|
for item in itemGroups.lockedItems.models
|
||||||
|
img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
|
||||||
|
.clearfix
|
||||||
|
|
||||||
#item-details-view
|
#item-details-view
|
||||||
#item-details-extra
|
#item-details-extra
|
||||||
|
|
|
||||||
|
|
@ -122,6 +122,7 @@ module.exports = class InventoryModal extends ModalView
|
||||||
@itemDetailsView = new ItemDetailsView()
|
@itemDetailsView = new ItemDetailsView()
|
||||||
@insertSubView(@itemDetailsView)
|
@insertSubView(@itemDetailsView)
|
||||||
@requireLevelEquipment()
|
@requireLevelEquipment()
|
||||||
|
@$el.find('.nano').nanoScroller()
|
||||||
|
|
||||||
afterInsert: ->
|
afterInsert: ->
|
||||||
super()
|
super()
|
||||||
|
|
@ -169,7 +170,9 @@ module.exports = class InventoryModal extends ModalView
|
||||||
tolerance: 'pointer'
|
tolerance: 'pointer'
|
||||||
|
|
||||||
makeEquippedSlotDraggable: (slot) ->
|
makeEquippedSlotDraggable: (slot) ->
|
||||||
unequip = => @unequipItemFromSlot slot
|
unequip = =>
|
||||||
|
@unequipItemFromSlot slot
|
||||||
|
@requireLevelEquipment()
|
||||||
shouldStayEquippedWhenDropped = (isValidDrop) ->
|
shouldStayEquippedWhenDropped = (isValidDrop) ->
|
||||||
pos = $(@).position()
|
pos = $(@).position()
|
||||||
revert = Math.abs(pos.left) < $(@).outerWidth() and Math.abs(pos.top) < $(@).outerHeight()
|
revert = Math.abs(pos.left) < $(@).outerWidth() and Math.abs(pos.top) < $(@).outerHeight()
|
||||||
|
|
@ -381,6 +384,7 @@ module.exports = class InventoryModal extends ModalView
|
||||||
$('#play-level-button').prop('disabled', @remainingRequiredEquipment.length > 0)
|
$('#play-level-button').prop('disabled', @remainingRequiredEquipment.length > 0)
|
||||||
|
|
||||||
setHero: (@selectedHero) ->
|
setHero: (@selectedHero) ->
|
||||||
|
@$el.removeClass('Warrior Ranger Wizard').addClass(@selectedHero.get('heroClass'))
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
onShown: ->
|
onShown: ->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue