diff --git a/Web/Script/Module/SummonerGames.js b/Web/Script/Module/SummonerGames.js index e76e1e6..a645449 100644 --- a/Web/Script/Module/SummonerGames.js +++ b/Web/Script/Module/SummonerGames.js @@ -2,25 +2,25 @@ function getSummonerGamesTable(summoner, games) { var titles = [ - 'Champion', - 'Map', - 'Mode', - 'Outcome', - 'Date', - 'Side', - 'Spells', - 'K', - 'D', - 'A', - 'MK', - 'NK', - 'Gold', - 'Items', - 'Level', - 'Premade', - 'Ping', - 'Time in queue', - 'Game ID', + ['Champion','champion'], + ['Map','map'], + ['Mode','mode'], + ['Outcome','outcome'], + ['Date','date'], + ['Side','side'], + ['Spells','spells'], + ['K','kills'], + ['D','deaths'], + ['A','assissts'], + ['MK','minionKills'], + ['NK','neutralKills'], + ['Gold','gold'], + ['Items','items'], + ['Lvl','level'], + ['Premade','premade'], + ['Ping','ping'], + ['Queue Time','queueTime'], + ['Game ID','gameID'], ]; var container = diverse(); @@ -35,8 +35,12 @@ function getSummonerGamesTable(summoner, games) output.add(caption('Games of ' + summoner.SummonerName)); var row = tableRow(); - titles.forEach(function(title) { - row.add(tableHead(title)); + titles.forEach(function(pair) { + var title = pair[0]; + var className = pair[1]; + var head = tableHead(title); + head.className = className; + row.add(head); }); output.add(row); games.forEach(function(game) { @@ -45,12 +49,28 @@ function getSummonerGamesTable(summoner, games) var items = []; game.Items.forEach(function(itemId) { - if(itemId == 0) - items.push(icon('Item/Small/Blank.png', 'Unused')); - else - { + if(itemId == 0) { + var itemDiv = diverse(); + itemDiv.className = 'item'; + itemDiv.add(icon('Item/Small/Blank.png', 'Unused')); + items.push(itemDiv); + } else { + var item = getItem(itemId); - items.push(icon('Item/Small/' + (item.description == 'Unknown' ? 'Unknown' : itemId) + '.png', item.name)); + var itemDiv = diverse(); + itemDiv.className = 'item'; + var _icon = icon('Item/Small/' + (item.description == 'Unknown' ? 'Unknown' : itemId) + '.png', item.name); + itemDiv.add(_icon); + + var theList = list(); + theList.className = 'itemDesc'; + theList.add(listElement(text(item.name))); + theList.add(listElement(text(''))); + item.description.split('\n').forEach(function(line) { + theList.add(listElement(text(line))); + }); + itemDiv.add(theList); + items.push(itemDiv); } }); diff --git a/Web/Style/Style.css b/Web/Style/Style.css index ef58cdc..72dd2e3 100644 --- a/Web/Style/Style.css +++ b/Web/Style/Style.css @@ -158,7 +158,6 @@ table.statistics td img table.statistics td.items img { margin: 0; - float: left; } table.statistics td.items @@ -166,6 +165,29 @@ table.statistics td.items width: 192px; } +table.statistics ul.itemDesc { + background:#223344; + position:absolute; + width:200px; + display:none; + color:#FFFFFF; + padding:10px; + left:0px; + z-index:2; + //list-style:none outside none; + list-style-type:none; +} + +table.statistics .item { + position:relative; + float:left; +} + +table.statistics .item:hover .itemDesc { + display:block; + left:32px; +} + table.statistics td.spells img { margin: 0; @@ -331,21 +353,32 @@ table.graphDescription margin-bottom: 1.5em; } +#summonerGames th +{ + padding:0 0.2em 0 0.2em; +} + #summonerGames td { + padding:0 0.3em 0 0.3em; border: 1px solid black; } - +#summonerGames .date { + min-width:5em; +} +#summonerGames .items { + min-width:192px; +} #summonerGames { text-align: left; width: 100%; + margin-bottom:500px; } #summonerGamesContainer { margin: 2em; - min-width: 122em; } #returnFromMatchHistory