restructure
This commit is contained in:
@@ -0,0 +1,172 @@
|
||||
#CosmeticMenu {
|
||||
horizontal-align: center;
|
||||
vertical-align: bottom;
|
||||
flow-children: down;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-right: 58px;
|
||||
margin-left: 58px;
|
||||
margin-bottom: 145px;
|
||||
transition-property: height;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.Open #CosmeticMenu {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#CosmeticMenuButton {
|
||||
horizontal-align: right;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
background-color: "#000E";
|
||||
background-image: url( "s2r://panorama/images/backgrounds/background_play_button_2x_png.vtex" );
|
||||
}
|
||||
|
||||
#CosmeticMenuButtonText {
|
||||
color: #ffffff;
|
||||
horizontal-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#CosmeticMenuMain {
|
||||
horizontal-align: center;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #263238;
|
||||
background-image: url( "s2r://panorama/images/hud/reborn/ability_bg_psd.vtex" );
|
||||
background-size: 100%;
|
||||
padding: 30px 60px 60px;
|
||||
}
|
||||
|
||||
#CosmeticContainer {
|
||||
flow-children: right;
|
||||
horizontal-align: center;
|
||||
vertical-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#AnimationPanel {
|
||||
width: 185px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
#AnimationContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba( 8, 8, 8, 0.9 );
|
||||
}
|
||||
|
||||
#BorderAnimation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url( "s2r://panorama/images/hud/passive_ability_border_png.vtex" );
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#CosmeticAbilitiesContainer {
|
||||
margin-left: 30px;
|
||||
flow-children: down;
|
||||
}
|
||||
|
||||
.AbilitiesRow {
|
||||
margin-top: 10px;
|
||||
flow-children: right;
|
||||
}
|
||||
|
||||
#ImagePreview {
|
||||
margin: 0px 3px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#BarOverAbilities {
|
||||
vertical-align: bottom;
|
||||
margin-left: 285px;
|
||||
margin-bottom: 145px;
|
||||
flow-children: right;
|
||||
}
|
||||
|
||||
#BarOverAbilities.FiveAbilities {
|
||||
margin-left: 283px;
|
||||
}
|
||||
|
||||
.SlotOverAbility {
|
||||
vertical-align: bottom;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.FiveAbilities .SlotOverAbility {
|
||||
vertical-align: bottom;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#BarOverItems {
|
||||
horizontal-align: right;
|
||||
vertical-align: bottom;
|
||||
margin-right: 59px;
|
||||
margin-bottom: 145px;
|
||||
flow-children: right;
|
||||
}
|
||||
|
||||
.SlotOverItems {
|
||||
vertical-align: bottom;
|
||||
min-width: 60px;
|
||||
min-height: 60px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#Image {
|
||||
horizontal-align: center;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.SlotOverAbility #Image {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.SlotOverItems #Image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#Cooldown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#CooldownEffect {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba( 0, 0, 0, 0.85 );
|
||||
}
|
||||
|
||||
#CooldownCountdown {
|
||||
vertical-align: bottom;
|
||||
padding: 0px 2px;
|
||||
text-shadow: 2px 2px 4px 2 black;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#DeleteButton {
|
||||
visibility: collapse;
|
||||
horizontal-align: right;
|
||||
background-color: rgb( 11, 11, 11 );
|
||||
background-image: url( "s2r://panorama/images/control_icons/x_close_png.vtex" );
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.Open #DeleteButton {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
var IMAGES = {}
|
||||
var cosmeticAbilities = {
|
||||
"high_five": true,
|
||||
"seasonal_ti9_banner": true,
|
||||
"seasonal_summon_cny_balloon": true,
|
||||
"seasonal_summon_dragon": true,
|
||||
"seasonal_summon_cny_tree": true,
|
||||
"seasonal_firecrackers": true,
|
||||
"seasonal_ti9_shovel": true,
|
||||
"seasonal_ti9_instruments": true,
|
||||
"seasonal_ti9_monkey": true,
|
||||
"seasonal_summon_ti9_balloon": true,
|
||||
"seasonal_throw_snowball": true,
|
||||
"seasonal_festive_firework": true,
|
||||
"seasonal_decorate_tree": true,
|
||||
"seasonal_summon_snowman": true
|
||||
}
|
||||
var permanentAbilitySlots = {
|
||||
"high_five": 4,
|
||||
"seasonal_ti9_banner": 5
|
||||
}
|
||||
var abilitiesToTake = [
|
||||
"seasonal_summon_cny_balloon",
|
||||
"seasonal_summon_dragon",
|
||||
"seasonal_summon_cny_tree",
|
||||
"seasonal_firecrackers",
|
||||
"seasonal_ti9_shovel",
|
||||
"seasonal_ti9_instruments",
|
||||
"seasonal_ti9_monkey",
|
||||
"seasonal_summon_ti9_balloon",
|
||||
"seasonal_throw_snowball",
|
||||
"seasonal_festive_firework",
|
||||
"seasonal_decorate_tree",
|
||||
"seasonal_summon_snowman"
|
||||
]
|
||||
var ABILITIES_CANT_BE_REMOVED = {
|
||||
"high_five": true,
|
||||
"seasonal_ti9_banner": true,
|
||||
}
|
||||
var abillity_name_to_webm = {
|
||||
"seasonal_summon_cny_balloon":"40XJ9",
|
||||
"seasonal_summon_dragon":"Ry9Mv",
|
||||
"seasonal_summon_cny_tree":"rVY9D",
|
||||
"seasonal_firecrackers":"Lxe64",
|
||||
"seasonal_ti9_shovel":"b1dNv",
|
||||
"seasonal_ti9_instruments":"5d1Rr",
|
||||
"seasonal_ti9_monkey":"XEjX7",
|
||||
"seasonal_summon_ti9_balloon":"BAEq9",
|
||||
"seasonal_throw_snowball":"8mBLL",
|
||||
"seasonal_festive_firework":"voBa5",
|
||||
"seasonal_decorate_tree":"Px17L",
|
||||
"seasonal_summon_snowman":"na38r"
|
||||
}
|
||||
var showcaseAbilitiesSlot = 6
|
||||
|
||||
var slots = []
|
||||
|
||||
var currentUnit = null
|
||||
var currentAbilitiesCount = 0
|
||||
var animation = {}
|
||||
|
||||
function ToggleCosmeticMenu() {
|
||||
$.GetContextPanel().ToggleClass( "Open" )
|
||||
}
|
||||
|
||||
function Ability( slot, abilityName ) {
|
||||
this.abilityName = abilityName
|
||||
|
||||
var image_path = IMAGES[abilityName] || "file://{images}/spellicons/consumables/" + abilityName + ".png"
|
||||
|
||||
this.image = $.CreatePanel( "Image", slot.panel, "Image" )
|
||||
this.image.SetImage( image_path )
|
||||
|
||||
this.image.SetPanelEvent( "onactivate", function() {
|
||||
if ( Entities.IsControllableByPlayer( currentUnit, Players.GetLocalPlayer() ) ) {
|
||||
var ability = Entities.GetAbilityByName( currentUnit, abilityName )
|
||||
|
||||
if ( Abilities.IsActivated( ability ) ) {
|
||||
Abilities.ExecuteAbility( ability, currentUnit, false )
|
||||
} else {
|
||||
GameEvents.SendCustomGameEventToServer( "cosmetic_abilities_try_activate", { unit: currentUnit, ability: abilityName } )
|
||||
}
|
||||
}
|
||||
} )
|
||||
|
||||
var panel = this.image
|
||||
|
||||
this.image.SetPanelEvent( "onmouseover", function() {
|
||||
$.DispatchEvent( "DOTAShowAbilityTooltip", panel, abilityName )
|
||||
} )
|
||||
this.image.SetPanelEvent( "onmouseout", function() {
|
||||
$.DispatchEvent( "DOTAHideAbilityTooltip", panel )
|
||||
} )
|
||||
|
||||
this.cooldown = $.CreatePanel( "Panel", this.image, "Cooldown" )
|
||||
this.cooldownEffect = $.CreatePanel( "Panel", this.cooldown, "CooldownEffect" )
|
||||
this.cooldownEffect.style["opacity-mask"] = "url( '" + image_path + "' )"
|
||||
this.cooldownCountdown = $.CreatePanel( "Label", this.cooldown, "CooldownCountdown" )
|
||||
|
||||
if ( !ABILITIES_CANT_BE_REMOVED[abilityName] ) {
|
||||
var deleteButton = $.CreatePanel( "Button", this.image, "DeleteButton" )
|
||||
|
||||
deleteButton.SetPanelEvent( "onactivate", function() {
|
||||
if ( Entities.IsControllableByPlayer( currentUnit, Players.GetLocalPlayer() ) ) {
|
||||
GameEvents.SendCustomGameEventToServer( "cosmetic_abilities_delete", { unit: currentUnit, ability: abilityName } )
|
||||
}
|
||||
} )
|
||||
}
|
||||
|
||||
this.Update = function() {
|
||||
var ability = Entities.GetAbilityByName( currentUnit, this.abilityName )
|
||||
|
||||
if ( !Abilities.IsCooldownReady( ability ) ) {
|
||||
var remaining = Abilities.GetCooldownTimeRemaining( ability )
|
||||
var progress = remaining / Abilities.GetCooldownLength( ability ) * -360
|
||||
|
||||
this.cooldown.style.visibility = "visible"
|
||||
this.cooldownEffect.style.clip = "radial( 50% 75%, 0deg, " + progress + "deg )"
|
||||
this.cooldownCountdown.text = Math.ceil( remaining )
|
||||
} else {
|
||||
this.cooldown.style.visibility = "collapse"
|
||||
}
|
||||
}
|
||||
|
||||
this.Delete = function() {
|
||||
this.image.DeleteAsync( 0 )
|
||||
}
|
||||
}
|
||||
|
||||
function Slot( parent, index, style ) {
|
||||
this.panel = $.CreatePanel( "Panel", parent, "Slot" + index )
|
||||
this.panel.AddClass( style )
|
||||
|
||||
this.Update = function() {
|
||||
if ( this.content && this.content.Update ) {
|
||||
this.content.Update()
|
||||
}
|
||||
}
|
||||
|
||||
this.Clear = function() {
|
||||
if ( this.content ) {
|
||||
this.content.Delete()
|
||||
this.content = null
|
||||
}
|
||||
}
|
||||
|
||||
this.AddContent = function( content ) {
|
||||
this.Clear()
|
||||
this.content = content
|
||||
}
|
||||
}
|
||||
|
||||
function Reload() {
|
||||
currentUnit = Players.GetLocalPlayerPortraitUnit()
|
||||
|
||||
for ( i in slots ) {
|
||||
var slot = slots[i]
|
||||
slot.Clear()
|
||||
}
|
||||
|
||||
var visible_abilities = 0
|
||||
|
||||
for ( var i = 0; i < Entities.GetAbilityCount( currentUnit ); i++ ) {
|
||||
var ability = Entities.GetAbility( currentUnit, i )
|
||||
var name = Abilities.GetAbilityName( ability )
|
||||
|
||||
if ( !Abilities.IsHidden( ability ) && i < 6 ) {
|
||||
visible_abilities++
|
||||
}
|
||||
|
||||
if ( cosmeticAbilities[name] ) {
|
||||
var permSlot = permanentAbilitySlots[name]
|
||||
|
||||
if ( permSlot ) {
|
||||
slots[permSlot].AddContent( new Ability( slots[permSlot], name ) )
|
||||
} else {
|
||||
for ( s in slots ) {
|
||||
var slot = slots[s]
|
||||
|
||||
if ( !slot.content ) {
|
||||
slot.AddContent( new Ability( slot, name ) )
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( Entities.IsRealHero( currentUnit ) ) {
|
||||
$( "#CosmeticMenu" ).style.visibility = "visible"
|
||||
} else {
|
||||
$( "#CosmeticMenu" ).style.visibility = "collapse"
|
||||
}
|
||||
|
||||
if ( visible_abilities > 4 ) {
|
||||
$( "#BarOverAbilities" ).AddClass( "FiveAbilities" )
|
||||
} else {
|
||||
$( "#BarOverAbilities" ).RemoveClass( "FiveAbilities" )
|
||||
}
|
||||
}
|
||||
|
||||
function Update() {
|
||||
if ( Players.GetLocalPlayerPortraitUnit() != currentUnit ) {
|
||||
Reload()
|
||||
} else {
|
||||
for ( i in slots ) {
|
||||
var slot = slots[i]
|
||||
slot.Update()
|
||||
}
|
||||
}
|
||||
|
||||
$.Schedule( 1 / 60, Update )
|
||||
}
|
||||
|
||||
for ( var i = 0; i < 7; i++ ) {
|
||||
if ( i > 3 ) {
|
||||
slots[i] = new Slot( $( "#BarOverItems" ), i, "SlotOverItems" )
|
||||
} else {
|
||||
slots[i] = new Slot( $( "#BarOverAbilities" ), i, "SlotOverAbility" )
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
GameEvents.Subscribe( "cosmetic_abilities_reload_hud", Reload )
|
||||
|
||||
Update()
|
||||
|
||||
function CreateAbilityToTake( row, abilityName ) {
|
||||
var image = $.CreatePanel( "Image", row, "ImagePreview" )
|
||||
image.SetImage( IMAGES[abilityName] || "file://{images}/spellicons/consumables/" + abilityName + ".png")
|
||||
|
||||
animation[abilityName] = $.CreatePanel( "Panel", $( "#AnimationContainer" ), "" )
|
||||
animation[abilityName].BLoadLayoutFromString( '<root><Panel><MoviePanel src="http://s1.webmshare.com/'+abillity_name_to_webm[abilityName]+'.webm" repeat="true" autoplay="onload" /></Panel></root>', false, false )
|
||||
animation[abilityName].visible = false
|
||||
|
||||
image.SetPanelEvent( "onactivate", function() {
|
||||
if ( Entities.IsControllableByPlayer( currentUnit, Players.GetLocalPlayer() ) ) {
|
||||
GameEvents.SendCustomGameEventToServer( "cosmetic_abilities_take", { unit: currentUnit, ability: abilityName } )
|
||||
}
|
||||
} )
|
||||
|
||||
image.SetPanelEvent( "onmouseover", function() {
|
||||
$.DispatchEvent( "DOTAShowAbilityTooltip", image, abilityName )
|
||||
|
||||
animation[abilityName].visible = true
|
||||
} )
|
||||
|
||||
image.SetPanelEvent( "onmouseout", function() {
|
||||
$.DispatchEvent( "DOTAHideAbilityTooltip", image )
|
||||
|
||||
animation[abilityName].visible = false
|
||||
} )
|
||||
}
|
||||
|
||||
function CreateAbilitiesToTake() {
|
||||
var abilities_row = null
|
||||
|
||||
for ( var i = 0; i < abilitiesToTake.length; i++ ) {
|
||||
if ( i % 4 == 0 ) {
|
||||
abilities_row = $.CreatePanel( "Panel", $( "#CosmeticAbilitiesContainer" ), "" )
|
||||
abilities_row.AddClass( "AbilitiesRow" )
|
||||
}
|
||||
|
||||
CreateAbilityToTake( abilities_row, abilitiesToTake[i] )
|
||||
}
|
||||
}
|
||||
|
||||
CreateAbilitiesToTake()
|
||||
@@ -0,0 +1,30 @@
|
||||
<root>
|
||||
<styles>
|
||||
<include src="s2r://panorama/layout/custom_game/frames/cosmetic_abilities/cosmetic_abilities.vcss_c" />
|
||||
</styles>
|
||||
|
||||
<scripts>
|
||||
<include src="s2r://panorama/layout/custom_game/frames/cosmetic_abilities/cosmetic_abilities.vjs_c" />
|
||||
</scripts>
|
||||
|
||||
<Panel style="width: 100%; height: 100%;" hittest="false">
|
||||
<Panel id="CosmeticMenu">
|
||||
<Button id="CosmeticMenuButton" onactivate="ToggleCosmeticMenu()">
|
||||
<Label id="CosmeticMenuButtonText" text="#td_cosmetic" />
|
||||
</Button>
|
||||
<Panel id="CosmeticMenuMain">
|
||||
<Panel id="CosmeticContainer">
|
||||
<Panel id="AnimationPanel">
|
||||
<Panel id="AnimationContainer"></Panel>
|
||||
<Panel id="BorderAnimation" />
|
||||
</Panel>
|
||||
<Panel id="CosmeticAbilitiesContainer"></Panel>
|
||||
</Panel>
|
||||
</Panel>
|
||||
</Panel>
|
||||
<Panel id="BarOverAbilities" hittest="false">
|
||||
</Panel>
|
||||
<Panel id="BarOverItems" hittest="false">
|
||||
</Panel>
|
||||
</Panel>
|
||||
</root>
|
||||
@@ -0,0 +1,57 @@
|
||||
var COSMETIC_ABILITIES = {
|
||||
"high_five": true,
|
||||
"seasonal_ti9_banner": true,
|
||||
"seasonal_summon_cny_balloon": true,
|
||||
"seasonal_summon_dragon": true,
|
||||
"seasonal_summon_cny_tree": true,
|
||||
"seasonal_firecrackers": true,
|
||||
"seasonal_ti9_shovel": true,
|
||||
"seasonal_ti9_instruments": true,
|
||||
"seasonal_ti9_monkey": true,
|
||||
"seasonal_summon_ti9_balloon": true,
|
||||
"seasonal_throw_snowball": true,
|
||||
"seasonal_festive_firework": true,
|
||||
"seasonal_decorate_tree": true,
|
||||
"seasonal_summon_snowman": true
|
||||
}
|
||||
|
||||
var hud = $.GetContextPanel().GetParent().GetParent().GetParent()
|
||||
var lower_hud = hud.FindChildTraverse( "HUDElements" ).FindChild( "lower_hud" )
|
||||
var center_with_stats = lower_hud.FindChild( "center_with_stats" )
|
||||
var center_block = center_with_stats.FindChild( "center_block" )
|
||||
var buff_container = lower_hud.FindChild( "BuffContainer" )
|
||||
|
||||
lower_hud.style.height = "100%"
|
||||
center_with_stats.style.height = "100%"
|
||||
center_block.style.height = "100%"
|
||||
|
||||
buff_container.FindChild( "buffs" ).style.transform = "translateY( -50px )"
|
||||
buff_container.FindChild( "debuffs" ).style.transform = "translateY( -50px )"
|
||||
|
||||
if ( !center_block.FindChild( "CosmeticAbilities" ) ) {
|
||||
var newPanel = $.CreatePanel( "Panel", center_block, "CosmeticAbilities" )
|
||||
newPanel.BLoadLayout( "file://{resources}/layout/custom_game/frames/cosmetic_abilities/cosmetic_abilities.xml", false, false )
|
||||
center_block.MoveChildBefore( newPanel, center_block.FindChild( "center_bg" ) )
|
||||
}
|
||||
|
||||
center_block.FindChildrenWithClassTraverse( "TertiaryAbilityContainer" )[0].style.visibility = "collapse"
|
||||
|
||||
var abilities_panel = center_block.FindChild( "AbilitiesAndStatBranch" ).FindChildTraverse( "abilities" )
|
||||
|
||||
function HideAbilities() {
|
||||
var abilities = abilities_panel.Children()
|
||||
|
||||
for ( i in abilities ) {
|
||||
var ability_name = abilities[i].FindChildTraverse( "AbilityImage" ).abilityname
|
||||
|
||||
if ( COSMETIC_ABILITIES[ability_name] ) {
|
||||
abilities[i].style.visibility = "collapse"
|
||||
} else {
|
||||
abilities[i].style.visibility = "visible"
|
||||
}
|
||||
}
|
||||
|
||||
$.Schedule( 0.001, HideAbilities )
|
||||
}
|
||||
|
||||
HideAbilities()
|
||||
Reference in New Issue
Block a user