var g_elActiveSticker = false; var g_elStickerContainer = null; var g_rgDragState = false; var g_nBaseScaleFactor = 1.0; var CStickerManager = function( elContainer, bEditMode ){ this.unWidthActual = 940; this.fScaleFactor = this.unWidthActual / 2100; // Sprite scale this.elContainer = elContainer; this.rgOwnedStickers = []; this.bEditMode = bEditMode || false; this.rgNewStickersCount = {}; if( this.bEditMode ) this.ShowEditHandles(); this.rgStickerDefinitions = g_rgStickerDefs; // Build some maps for( var key in this.rgStickerDefinitions ) { this.rgStickerToIdMap.push( key ); if( this.rgSceneToIdMap.indexOf( this.rgStickerDefinitions[key].texture ) === -1 ) this.rgSceneToIdMap.push(this.rgStickerDefinitions[key].texture); } // Make horrible assumptions about filenames for( var i=0; i 50 ) { ShowAlertDialog("Too many stickers!", "Whoa there! You're trying to put more than 50 stickers on this page. If you want to add more, you'll need to peel a few off first."); return; } var sticker = this.rgStickerDefinitions[nStickerId]; if( sticker.texture == this.strScene ) { this.CreateSticker( nStickerId, sticker.dx * this.fScaleFactor, sticker.dy * this.fScaleFactor, 1.0, 1.0, 0, sticker.z ); } else this.CreateSticker( nStickerId, 10, 10, 1.0, 1.0, 0 ); if( !this.BSceneUnlocked(this.strScene) && this.BSceneCanBeUnlocked( this.strScene ) ) { this.UnlockScene( this.strScene ); } } //CStickerManager.prototype.Set CStickerManager.prototype.PopulateStickerList = function() { // Sticker list var unMaxWidth = 140; // @todo don't hard code this var unMaxHeight = 100; // @todo don't hard code this either var elTarget = document.getElementById('sticker_selector'); if( !elTarget ) return; while( elTarget.firstChild ) elTarget.removeChild( elTarget.firstChild ); // Do we have a sticker pack? If so show that first if( this.unStickerPacks > 0 ) { var elPack = document.createElement('div'); elPack.classList.add('sticker_item'); var elImage = document.createElement('img'); elImage.src = "https://community.akamai.steamstatic.com/public/images/promo/summer2017/stickers_group.png"; elPack.addEventListener('click', this.OpenPack.bind(this)); elPack.appendChild(elImage); elTarget.appendChild(elPack); } for(var key in this.rgStickerDefinitions ) { var stickerDef = this.rgStickerDefinitions[key]; if( !this.BSceneUnlocked( this.strScene ) && stickerDef.texture != this.strScene ) continue; var elSticker = this.CreateScaledSticker( key, unMaxWidth, unMaxHeight, !this.BOwnsSticker( key ) ); if( this.BOwnsSticker( key ) ) elSticker.addEventListener('click', this.AddSticker.bind(this, key ) ); elTarget.appendChild(elSticker); } } CStickerManager.prototype.CreateScaledSticker = function( key, unMaxWidth, unMaxHeight, bFaded ) { var elImage = document.createElement('div'); var stickerDef = this.rgStickerDefinitions[key]; var texture = this.rgStickerTextures[ stickerDef.texture ]; var elSticker = document.createElement('div'); elSticker.classList.add('sticker_item'); elImage.style.width = stickerDef.w + "px"; elImage.style.height = stickerDef.h + "px"; if( !bFaded ) { elImage.style.background = "url('"+texture+"') no-repeat -"+stickerDef.x+"px -"+stickerDef.y+"px"; } else { elImage.style.webkitMask = "url('"+texture+"') no-repeat -"+stickerDef.x+"px -"+stickerDef.y+"px";// no-repeat -"+stickerDef.x+"px -"+stickerDef.y+"px"; elImage.style.mask = "url('"+texture+"') no-repeat -"+stickerDef.x+"px -"+stickerDef.y+"px";// no-repeat -"+stickerDef.x+"px -"+stickerDef.y+"px"; elImage.style.backgroundColor = '#9E9E9E'; } var fScale = 1.0; if( stickerDef.w > unMaxWidth ) fScale = unMaxWidth / stickerDef.w; if( stickerDef.h > unMaxHeight && unMaxHeight / stickerDef.h < fScale ) fScale = unMaxHeight / stickerDef.h; elImage.style.transform = "scale( "+fScale+", "+fScale+" )"; elSticker.appendChild( elImage ); if( this.BOwnsSticker( key ) ) { elSticker.addEventListener ( 'click', this.AddSticker.bind ( this, key ) ); elSticker.draggable = true; elSticker.addEventListener ( 'dragstart', this.DragStart.bind ( this, key ) ); } return elSticker; } CStickerManager.prototype.DragStart = function( key, event ) { event.dataTransfer.setData("key", key); event.dataTransfer.dropEffect = "copy"; console.log(event); } CStickerManager.prototype.PopulateSelectors = function( ) { // Scene list var elTarget = document.getElementById('scene_selector'); if( !elTarget ) return; while( elTarget.firstChild ) elTarget.removeChild( elTarget.firstChild ); for( var key in this.rgBackgroundTextures ) { var elContainer = document.createElement('div'); var elImage = document.createElement('img'); var texture = this.rgBackgroundTextures[ key ]; elImage.src = texture; elContainer.classList.add('item'); elContainer.id = key + "_select_icon"; var nSceneId = this.rgSceneToIdMap.indexOf(key); elImage.addEventListener('click', this.SetScene.bind(this, nSceneId ) ); // Text counts var rgCounts = this.GetStickerCounts( key ); var elText = document.createElement('div'); elText.textContent = "%1$s of %2$s stickers".replace(/%1\$s/,rgCounts[0]).replace(/%2\$s/,rgCounts[1]) elContainer.appendChild(elImage); elContainer.appendChild(elText); // New counts var nNewStickers = this.rgNewStickersCount[key]; if( nNewStickers ) { var elNew = document.createElement('div'); elNew.classList.add('new'); elNew.textContent = nNewStickers; elContainer.appendChild(elNew); } if( this.rgOwnership.scenes[nSceneId] ) { var elNew = document.createElement('div'); elNew.classList.add('new'); elNew.classList.add('unlocked'); elNew.textContent = '✔'; elContainer.appendChild(elNew); } if( nNewStickers ) elTarget.insertBefore(elContainer, elTarget.firstChild); else elTarget.appendChild(elContainer); } } CStickerManager.prototype.GetStickerCounts = function( strScene ) { var unStickersTotal = 0; var unStickersOwned= 0; for( var key in this.rgStickerDefinitions ) { var sticker = this.rgStickerDefinitions[ key ]; if ( sticker.texture == strScene ) { unStickersTotal++; if( this.BOwnsSticker( key ) ) unStickersOwned++; } } return [ unStickersOwned, unStickersTotal ]; } CStickerManager.prototype.BOwnsSticker = function( strStickerID ) { var nStickerId = this.rgStickerToIdMap.indexOf( strStickerID ); return this.rgOwnership.stickers[ nStickerId ]; }; CStickerManager.prototype.BSceneUnlocked = function( strScene ) { var nSceneId = this.rgSceneToIdMap.indexOf(strScene); return this.rgOwnership.scenes[nSceneId]; } CStickerManager.prototype.BSceneCanBeUnlocked = function( strScene ) { var rgSceneData = this.GetSceneData(); for( var key in this.rgStickerDefinitions ) { var sticker = this.rgStickerDefinitions[ key ]; if ( sticker.texture == strScene ) { var bFound = false; for( var i=0; i= 0; i-- ) { this.elContainer.removeChild( rgStickers[i] ); } } CStickerManager.prototype.GetDefaultScene = function( strScene ) { var rgScene = []; for( var key in this.rgStickerDefinitions ) { var sticker = this.rgStickerDefinitions[key]; if( sticker.texture == strScene ) { rgScene.push({ id: key, x: sticker.dx * this.fScaleFactor, y: sticker.dy * this.fScaleFactor, sx: 1.0, sy: 1.0, r: 0, z: sticker.z }); } } return rgScene; } CStickerManager.prototype.PreloadScene = function() { // pass } CStickerManager.prototype.CreateSticker = function(id, x, y, sx, sy, r, z) { var elSticker = document.createElement('div'); var stickerDef = this.rgStickerDefinitions[id]; var texture = this.rgStickerTextures[ stickerDef.texture ]; elSticker.sticker = { id: id, x: x, y: y, sx: sx, sy: sy, r: r, z: z }; elSticker.style.width = stickerDef.w + "px"; elSticker.style.height = stickerDef.h + "px"; elSticker.style.background = "url('"+texture+"') no-repeat -"+stickerDef.x+"px -"+stickerDef.y+"px"; this.elContainer.appendChild(elSticker); //elSticker.addEventListener('click', ); var _this = this; elSticker.addEventListener('mousedown', function( event ){ _this.SetStickerActive( elSticker ); _this.StickerDragStart('x', 'y', false, event ); }); elSticker.addEventListener('touchstart', function( event ){ _this.SetStickerActive( elSticker ); _this.StickerDragStart('x', 'y', false, event ); }); this.UpdateStickerState( elSticker ); elSticker.classList.add("sticker"); } CStickerManager.prototype.UpdateStickerState = function( elSticker ) { elSticker.style.transform = "rotate("+elSticker.sticker.r+"deg) scale("+(elSticker.sticker.sx*this.fScaleFactor)+", "+(elSticker.sticker.sy*this.fScaleFactor)+")"; var rect = elSticker.getBoundingClientRect(); elSticker.style.left = elSticker.sticker.x+"px"; elSticker.style.top = elSticker.sticker.y+"px"; if( elSticker.sticker.z ) elSticker.style.zIndex = elSticker.sticker.z; } CStickerManager.prototype.SetScene = function( nSceneId ) { // Save off old scene if we were on one if( this.strScene ) { var nOldSceneId = this.rgSceneToIdMap.indexOf( this.strScene ); this.rgSceneData[nOldSceneId] = this.GetSceneData(); } this.strScene = this.rgSceneToIdMap[ nSceneId ]; var rgBackgrounds = this.elContainer.getElementsByClassName('sticker_background'); rgBackgrounds[0].src =this.rgBackgroundTextures[this.strScene]; this.Render( this.rgSceneData[ nSceneId ] ); // Update handles var rgMatches = document.querySelectorAll('.background_selection_container .item'); for( var i=0; i < rgMatches.length; i++) { rgMatches[i].classList.remove('selected'); } var elTarget = document.getElementById(this.strScene + "_select_icon"); if( elTarget ) elTarget.classList.add('selected'); this.PopulateStickerList(); if( this.bEditMode ) { if ( !this.BSceneUnlocked ( this.strScene ) ) { document.getElementById ( 'r_handle' ).style.display = "none"; document.getElementById ( 's_handle' ).style.display = "none"; document.getElementById ( 'feature_on_profile' ).style.display = "none"; } else { document.getElementById ( 'r_handle' ).style.display = "block"; document.getElementById ( 's_handle' ).style.display = "block"; document.getElementById ( 'feature_on_profile' ).style.display = "inline-block"; } } }; CStickerManager.prototype.Render = function( rgSceneData ) { this.ResetScene(); for( var i=0; i div'); for( var i=0; i 0 ) { var elContainer = document.createElement ( 'div' ); elContainer.classList.add ( 'openpack_container' ); var elDesc = document.createElement ( 'p' ); elDesc.textContent = "%1$s new stickers have been added to your collection.". replace ( /%1\$s/, data.stickers.length ); elContainer.appendChild ( elDesc ); var elStickerContainer = document.createElement ( 'div' ); elStickerContainer.classList.add ( 'sticker_container' ); while ( data.stickers.length ) { var nStickerId = data.stickers.pop (); var elSticker = _this.CreateScaledSticker ( _this.rgStickerToIdMap[ nStickerId ], 140, 100, false ); elStickerContainer.appendChild ( elSticker ); _this.rgOwnership.stickers[ nStickerId ] = 1; var strStickerKey = _this.rgStickerToIdMap[ nStickerId ]; var rgStickerDef = _this.rgStickerDefinitions[ strStickerKey ]; var strScene = rgStickerDef.texture; if( _this.rgNewStickersCount[strScene] ) _this.rgNewStickersCount[strScene]++; else _this.rgNewStickersCount[strScene] = 1; } elContainer.appendChild ( elStickerContainer ); // Did we unlock any scenes? var strUnlockTexture = false; for ( var i = 0; i < data.stickers.length; i++ ) { var stickerDef = _this.rgStickerDefinitions[ _this.rgStickerToIdMap[ i ] ]; var strScene = stickerDef.texture; if ( _this.BSceneUnlocked ( strScene ) ) { strUnlockTexture = _this.rgBackgroundTextures[ strScene ]; } } if ( strUnlockTexture ) { var elUnlockContainer = document.createElement ( 'div' ); elUnlockContainer.classList.add ( 'unlock_container' ); var elUnlockTitle = document.createElement ( 'h2' ); elUnlockTitle.textContent = "Scene unlocked!"; var elUnlockSceneImg = document.createElement ( 'img' ); elUnlockSceneImg.src = strUnlockTexture; var elUnlockDesc = document.createElement ( 'p' ); elUnlockDesc.textContent = "You can now move, rotate, and scale stickers on this scene, as well as add stickers from other scenes and feature it on your profile!"; elUnlockContainer.appendChild ( elUnlockSceneImg ); elUnlockContainer.appendChild ( elUnlockTitle ); elUnlockContainer.appendChild ( elUnlockDesc ); elContainer.appendChild ( elUnlockContainer ); } _this.unStickerPacks = data.stickerpacks; var Modal = ShowAlertDialog ( "New stickers have been added to your collection!", elContainer ); } _this.PopulateStickerList(); _this.PopulateSelectors(); var elTarget = document.getElementById(_this.strScene + "_select_icon"); if( elTarget ) elTarget.classList.add('selected'); }); } // ===================================================================================================================== var CTaskManager = function(){} CTaskManager.prototype.rgTaskList = [ //k_ESummerSaleTaskUseDiscoveryQueue = 0; { name: "Explore your Discovery Queue", desc: "Visit your personal Discovery Queue<\/a> and click through to the end. You can complete this quest once per day." }, //k_ESummerSaleTaskPlayAGame = 1; { name: "Play a game from your library", desc: "Just play any game from your Steam library! Something new, or something from your backlog..." }, //k_ESummerSaleTaskViewFriendActivity = 2; { name: "View your Friend Activity page", desc: "See what's going on with your friends on Steam at your Friend Activity<\/a> page." }, //k_ESummerSaleTaskAddToWishlist = 3; { name: "Add to your wishlist", desc: "Find a game you are interested in, and add it to your Wishlist<\/a>." }, //k_ESummerSaleTaskReviewStorePreferences = 4; { name: "Review your Preferences", desc: "You can help the Steam store show you the best stuff by making sure your Store Preferences<\/a> match your interests." }, //k_ESummerSaleTaskEarnAchievement = 5; { name: "Earn an Achievement", desc: "Play any Steam game in your library, and earn an Achievement. You can check your Achievement progress for any game you own on your Games page<\/a>." }, //k_ESummerSaleTaskVisitBroadcastPage = 6; { name: "Visit the Broadcasts page", desc: "Take a look at the Broadcasts<\/a> currently running on the Community." }, //k_ESummerSaleTaskMarkReviewHelpful = 7; { name: "Mark a Review as Helpful ... or not", desc: "Did a Steam community review help you make a decision about a game? Mark any review as Helpful, Not Helpful, or Funny." }, //k_ESummerSaleTaskFollowCurator = 8; { name: "Follow a Curator", desc: "Look through the Steam Curators<\/a> and follow someone that will help you find the best games on Steam." }, //k_ESummerSaleTaskViewAProfile = 9; { name: "View a Profile", desc: "Take a look at what your friends<\/a> have showcased on their Steam Community Profile." }, //k_ESummerSaleTaskViewATagPage = 10; { name: "Explore popular tags", desc: "Choose something interesting from the recommended tags for you<\/a>. Try a few!" }, //k_ESummerSaleTaskMarkNotInterested = 11; { name: "Mark something Not Interested", desc: "Somewhere on the store, you'll find a game that isn't for you. Click the Not Interested button - don't worry, it only affects that game." }, //k_ESummerSaleTaskViewVideosPage = 12; { name: "Browse the Videos on Steam", desc: "Visit the Video Hub<\/a> on Steam." }, //k_ESummerSaleTaskUploadAScreenshot = 13; { name: "Visit your screenshot library", desc: "You can take a screenshot in-game (default hotkey is F12) and upload it to Steam; go visit your uploaded Screenshots<\/a> on the Steam Community." }, //k_ESummerSaleTaskPersonalizeProfile = 14; { name: "Personalize your Steam Community Profile", desc: "There are a lot of ways you can customize your profile<\/a> - click the attractive Edit Profile button, and personalize!" }, //k_ESummerSaleTaskPersonalizeDiscoveryQueue = 15; { name: "Customize your Discovery Queue", desc: "Make sure your personalized Discovery Queue is personal \u2013 your Discovery Queue settings<\/a> should match what you want to see on Steam." }, ]; CTaskManager.prototype.RenderTaskList = function( rgProgress ) { // First pass, find tasks we need to do still var elTaskContainer = document.getElementById('tasks_remaining_container'); var elTaskCompleteContainer = document.getElementById('tasks_completed_container'); var rgTaskIdsShown = {}; var nTasksToDo = 0; for( var i in rgProgress.tasks_remaining ) { if( rgProgress.tasks_remaining[i] > 0 ) { var rgTaskInfo = this.rgTaskList[i]; rgTaskIdsShown[ i ] = 1; //if( !rgTaskInfo ) // ??? // continue; var elTask = document.createElement('div'); elTask.classList.add('task'); var elTaskName = document.createElement('h2'); elTaskName.innerHTML = rgTaskInfo.name; var elTaskDesc = document.createElement('p'); elTaskDesc.innerHTML = rgTaskInfo.desc; elTask.appendChild( elTaskName ); elTask.appendChild( elTaskDesc ); elTaskContainer.appendChild( elTask ); nTasksToDo++; } } if( nTasksToDo == 0 ) { var elT = document.getElementById('tasks_none'); if( elT ) elT.style.display = 'inline'; } else if( nTasksToDo == 1 ) { var elT = document.getElementById('tasks_one'); if( elT ) elT.style.display = 'inline'; } else { var elT = document.getElementById('tasks_many'); if( elT ) { elT.style.display = 'inline'; var elTC = document.getElementById('task_count'); elTC.textContent = nTasksToDo; } } for(var i in rgProgress.tasks_limits ) { if( rgProgress.tasks_limits[i] > 0 && !rgTaskIdsShown[i] ) { var rgTaskInfo = this.rgTaskList[i]; if( !rgTaskInfo ) // ??? continue; var elTask = document.createElement('div'); elTask.classList.add('task'); elTask.innerHTML = '✔ ' + rgTaskInfo.name; elTaskCompleteContainer.appendChild( elTask ); } } }