beatSabre/index.html at main · robeastwood/beatSabre · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Beat Sabre Score Parser</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
  <div id="app">
  <section class="section">
    <div class="container">
      	<h1 class="title">
        	Score Parser
      	</h1>
      	<p class="subtitle">
        	Load the <strong>PlayerData.dat</strong> file found in:
        	C:\Users\[YourUsername]\AppData\LocalLow\Hyperbolic Magnetism\Beat Saber\
      	</p>
    	<div class="file">
  			<label class="file-label">
				<input class="file-input" type="file" id="selectFiles">
    			<span class="file-cta">
	      			<span class="file-icon">
	        			<i class="fas fa-upload"></i>
	      			</span>
      				<span class="file-label">
        			Select PlayerData.dat
      				</span>
    			</span>
  			</label>
		</div>
		<p class="subtitle">
	        Then click the button to extract your scores:
	    </p>
	    <button class="button is-primary" v-on:click="parse">Parse File</button>

    </div>

	<div class="container">
		<p>{{ message }}</p>

		<table class="table">
		  <thead>
		    <tr>
		      <th>Track</th>
		      <th>Difficulty</th>
		      <th>Mode</th>
		      <th>Score</th>
		      <th>Combo</th>
		      <th>Rank</th>
		      <th>Plays</th>
		    </tr>
		  </thead>
		  <tbody>
		  	<tr v-for="score in scores">
		  		<td>{{ score.levelId }}</td>
		  		<td>{{ difficulties[score.difficulty] }}</td>
		  		<td>{{ score.beatmapCharacteristicName }}</td>
		  		<td><strong>{{ score.highScore }}</strong></td>
		  		<td>{{ score.maxCombo }}</td>
		  		<td>{{ score.maxRank }}</td>
		  		<td>{{ score.playCount }}</td>
	      	</tr>
	      </tbody>
	  </table>
	</div>

  </section>

	</div>
  </body>

  	<script>
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Awaiting File',
		    difficulties: {
		    	0: "Easy",
		    	1: "Normal",
		    	2: "Hard",
		    	3: "Expert",
		    	4: "Expert+"
		    },
		    scores: [],
		  },
		  methods: {
		  	parse: function() {
		  		var files = document.getElementById('selectFiles').files;
			  	if (files.length <= 0) {
			  		this.message = "Please select your PlayerData.dat file";
			  		return false;
			  	}
				var fr = new FileReader();
    			var vm = this;

			  	fr.onload = function(e) {
			  		vm.message = "Parsing file...";
			    	var result = JSON.parse(e.target.result);
			    	result.localPlayers[0].levelsStatsData.forEach(function(score){
			    		if(score.highScore > 0 && score.validScore===true){
			    			console.log(score);
			    			vm.scores.push(score);
			    		}
			    	});
			    	vm.message = "Done";
			  	}
			  	fr.readAsText(files.item(0));
		  	}
		  }
		})
	</script>
</html>