add character images and change ladder page style

bakana808 · Mar 16, 2016 · 9851f59 · 9851f59
1 parent c6f001a
commit 9851f59
Show file tree

Hide file tree

Showing 61 changed files with 66 additions and 22 deletions.
diff --git a/img/stock/bayonetta.png b/img/stock/bayonetta.png
diff --git a/img/stock/bowser-jr.png b/img/stock/bowser-jr.png
diff --git a/img/stock/bowser.png b/img/stock/bowser.png
diff --git a/img/stock/captain-falcon.png b/img/stock/captain-falcon.png
diff --git a/img/stock/charizard.png b/img/stock/charizard.png
diff --git a/img/stock/cloud.png b/img/stock/cloud.png
diff --git a/img/stock/corrin.png b/img/stock/corrin.png
diff --git a/img/stock/dark-pit.png b/img/stock/dark-pit.png
diff --git a/img/stock/diddy-kong.png b/img/stock/diddy-kong.png
diff --git a/img/stock/donkey-kong.png b/img/stock/donkey-kong.png
diff --git a/img/stock/dr-mario.png b/img/stock/dr-mario.png
diff --git a/img/stock/duck-hunt.png b/img/stock/duck-hunt.png
diff --git a/img/stock/falco.png b/img/stock/falco.png
diff --git a/img/stock/fox.png b/img/stock/fox.png
diff --git a/img/stock/ganondorf.png b/img/stock/ganondorf.png
diff --git a/img/stock/greninja.png b/img/stock/greninja.png
diff --git a/img/stock/ike.png b/img/stock/ike.png
diff --git a/img/stock/jigglypuff.png b/img/stock/jigglypuff.png
diff --git a/img/stock/king-dedede.png b/img/stock/king-dedede.png
diff --git a/img/stock/kirby.png b/img/stock/kirby.png
diff --git a/img/stock/link.png b/img/stock/link.png
diff --git a/img/stock/little-mac.png b/img/stock/little-mac.png
diff --git a/img/stock/lucario.png b/img/stock/lucario.png
diff --git a/img/stock/lucas.png b/img/stock/lucas.png
diff --git a/img/stock/lucina.png b/img/stock/lucina.png
diff --git a/img/stock/luigi.png b/img/stock/luigi.png
diff --git a/img/stock/mario.png b/img/stock/mario.png
diff --git a/img/stock/marth.png b/img/stock/marth.png
diff --git a/img/stock/megaman.png b/img/stock/megaman.png
diff --git a/img/stock/meta-knight.png b/img/stock/meta-knight.png
diff --git a/img/stock/mewtwo.png b/img/stock/mewtwo.png
diff --git a/img/stock/mii-fighter.png b/img/stock/mii-fighter.png
diff --git a/img/stock/mii-gunner.png b/img/stock/mii-gunner.png
diff --git a/img/stock/mii-swordsman.png b/img/stock/mii-swordsman.png
diff --git a/img/stock/mr-game-and-watch.png b/img/stock/mr-game-and-watch.png
diff --git a/img/stock/ness.png b/img/stock/ness.png
diff --git a/img/stock/olimar.png b/img/stock/olimar.png
diff --git a/img/stock/pac-man.png b/img/stock/pac-man.png
diff --git a/img/stock/palutena.png b/img/stock/palutena.png
diff --git a/img/stock/peach.png b/img/stock/peach.png
diff --git a/img/stock/pikachu.png b/img/stock/pikachu.png
diff --git a/img/stock/pit.png b/img/stock/pit.png
diff --git a/img/stock/random.png b/img/stock/random.png
diff --git a/img/stock/rob.png b/img/stock/rob.png
diff --git a/img/stock/robin.png b/img/stock/robin.png
diff --git a/img/stock/rosalina.png b/img/stock/rosalina.png
diff --git a/img/stock/roy.png b/img/stock/roy.png
diff --git a/img/stock/ryu.png b/img/stock/ryu.png
diff --git a/img/stock/samus.png b/img/stock/samus.png
diff --git a/img/stock/sheik.png b/img/stock/sheik.png
diff --git a/img/stock/shulk.png b/img/stock/shulk.png
diff --git a/img/stock/sonic.png b/img/stock/sonic.png
diff --git a/img/stock/toon-link.png b/img/stock/toon-link.png
diff --git a/img/stock/villager.png b/img/stock/villager.png
diff --git a/img/stock/wario.png b/img/stock/wario.png
diff --git a/img/stock/wii-fit-trainer.png b/img/stock/wii-fit-trainer.png
diff --git a/img/stock/yoshi.png b/img/stock/yoshi.png
diff --git a/img/stock/zelda.png b/img/stock/zelda.png
diff --git a/img/stock/zero-suit-samus.png b/img/stock/zero-suit-samus.png
diff --git a/src/ladder.coffee b/src/ladder.coffee
@@ -9,6 +9,41 @@ window.onload = () ->
 Function::property = (prop, desc) ->
 	Object.defineProperty @prototype, prop, desc
 
+slugify = (string) ->
+	return string
+		.toLowerCase()
+		.replace(/[^\w ]+/g, "")
+		.replace(/ +/g, "-")
+
+class Player
+	constructor: (@username, @matches) ->
+		characters = @matches.getCharactersUsed(@username)
+		@characters = []
+		if characters.length == 0 then return
+		counts = {}
+		for character in characters
+			counts[character] = if character of counts then counts[character] + 1 else 1
+		for character, count of counts
+			@characters.push [character, (Math.round(count / characters.length * 100 * 100) / 100)]
+		@characters.sort((a, b) -> b[1] - a[1])
+
+	getRankChange: ->
+		diff = @rank_last - @rank;
+		if diff > 0 then return "+" + diff;
+		else return diff;
+
+	getRating: -> @rating
+	getRank: -> @rank
+	getTier: -> @tier
+	getUsername: -> @username
+	getName: -> @displayname
+	getGamesPlayed: -> @matches.getGamesPlayed(@username)
+	getGamesWon: -> @matches.getGamesWon(@username)
+	getWinStreak: -> @matches.getWinStreak(@username)
+	hasCharacterMain: -> @characters.length != 0
+	getCharacterMain: -> if @characters.length == 0 then "" else @characters[0]
+	getCharacterImage: -> if @characters.length == 0 then "" else "/img/stock/#{ slugify @characters[0][0] }.png"
+
 class Elo
 	@tier: (rating) ->
 		if rating >= 2050 then return "S"
@@ -59,7 +94,22 @@ class Matches
 			else if row[4] == username && row[3] == "Defender" || row[7] == username && row[3] == "Challenger" then games = 0
 		return games
 
-
+	getCharactersUsed: (username) ->
+		characters = []
+		for row in @values
+			if row[4] == username
+				if row[10] != "" then characters.push row[10]
+				if row[14] != "" then characters.push row[14]
+				if row[18] != "" then characters.push row[18]
+				if row[22] != "" then characters.push row[22]
+				if row[26] != "" then characters.push row[26]
+			else if row[7] == username
+				if row[11] != "" then characters.push row[11]
+				if row[15] != "" then characters.push row[15]
+				if row[19] != "" then characters.push row[19]
+				if row[23] != "" then characters.push row[23]
+				if row[27] != "" then characters.push row[27]
+		return characters
 
 class Ladder
 	@players: []
@@ -89,12 +139,13 @@ class Ladder
 			player.rating = row["Rating"]
 			player.rank_last = row["Rank Last"]
 			player.tier = Elo.tier(player.rating)
-
+			console.log player
 			Ladder.players.push player
 
 		for player in Ladder.players
 
-			playerRankChange = player.getRankChange();
+
+			playerRankChange = player.getRankChange()
 
 			if playerRankChange == 0 then rankChangeClass = "rank-change__none"
 			if playerRankChange > 0  then rankChangeClass = "rank-change__raise"
@@ -107,26 +158,11 @@ class Ladder
 						<div class="rank-change #{ rankChangeClass }">#{ player.getRankChange() }</div>
 						<div class="name">#{ player.getName() }</div>
 						<div class="games">#{ player.getGamesPlayed() } Games #{ if player.getWinStreak() > 0 then "(#{ player.getWinStreak() } game win streak)" else "" }</div>
+						#{ if player.hasCharacterMain() then "<div class=\"main\"><img title=\"#{ "Played " + player.getCharacterMain()[1] + "%" }\" src=#{ player.getCharacterImage() } alt=#{ player.getCharacterMain()[0] }></div>" else "" }
 						<div class="tier">#{ player.getTier() }</div>
 				</div>
 				</li>
 			"""
 
-class Player
-	constructor: (@username, @matches) ->
-
-	getRankChange: () ->
-		diff = @rank_last - @rank;
-		if diff > 0 then return "+" + diff;
-		else return diff;
-	getRating: () -> @rating
-	getRank: () -> @rank
-	getTier: () -> @tier
-	getUsername: () -> @username
-	getName: () -> @displayname
-	getGamesPlayed: () -> @matches.getGamesPlayed(@username)
-	getGamesWon: () -> @matches.getGamesWon(@username)
-	getWinStreak: () -> @matches.getWinStreak(@username)
-
 init = () ->
-	Ladder.load("https://docs.google.com/spreadsheets/d/1aNji1A2YqsDZldwpqv-pybWnV4ITKafV8fththQCB2I/pubhtml")
+	Ladder.load "https://docs.google.com/spreadsheets/d/1aNji1A2YqsDZldwpqv-pybWnV4ITKafV8fththQCB2I/pubhtml"
diff --git a/ssb4/ladder/style.scss b/ssb4/ladder/style.scss
@@ -53,7 +53,7 @@ $tier-e: #b71ede;
 		border-radius: 5px;
 		margin-bottom: 5px;
 
-		height: 30px;
+		height: 64px;
 		line-height: 30px;
 
 		background-color: lighten($bracket-color, 50%);
@@ -138,10 +138,18 @@ $tier-e: #b71ede;
 		}
 
 		.games {
-			width: auto;
+			width: 300px;
 			display: inline-block;
 			color: rgba(255, 255, 255, 0.4);
 		}
 
+		.main {
+			position: absolute;
+			width: auto;
+			display: inline-block;
+			color: white;
+			float: right;
+		}
+
 	}
 }