Skip to content

Commit

Permalink
v2.65 击键、速度、码长图表
Browse files Browse the repository at this point in the history
  • Loading branch information
@KyleBing
KyleBing committed Sep 26, 2022
1 parent 4a2b31b commit aa1cb1e
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 13 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CHANGELOG

### v2.65 `2022-09-26`
- 击键的柱状图展示
- 状图展示：击键、码长、速度

### v2.64 `2022-09-23`
- 展示当前跟打类型的统计数据
Expand Down
3 changes: 1 addition & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ Roseo Maple Type Pad

## 界面

<img width="1415" alt="Screen Shot 2022-09-16 at 23 33 28" src="https://user-images.githubusercontent.com/12215982/190679390-886d4fc4-d526-494b-a35c-7db3a7fc4331.png">

<img width="1624" alt="Screen Shot 2022-09-26 at 22 33 44" src="https://user-images.githubusercontent.com/12215982/192304108-002676b1-e6b9-4820-8947-25febc223980.png">

## 下载
### 1. 线上地址
Expand Down
23 changes: 23 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,28 @@
<div class="score-statistics-item hitrate level-12"><div class="chart-bar"><div class="process"></div></div><div class="label">12</div></div>
</div>
</div>

<!--SPEED CHART-->
<div class="score-statistics-container info-panel">
<div class="title">速度 × 10</div>
<div class="score-statistics-list">
<div class="score-statistics-item speed level-3"><div class="chart-bar"><div class="process"></div></div><div class="label">3</div></div>
<div class="score-statistics-item speed level-6"><div class="chart-bar"><div class="process"></div></div><div class="label">6</div></div>
<div class="score-statistics-item speed level-9"><div class="chart-bar"><div class="process"></div></div><div class="label">9</div></div>
<div class="score-statistics-item speed level-12"><div class="chart-bar"><div class="process"></div></div><div class="label">12</div></div>
<div class="score-statistics-item speed level-15"><div class="chart-bar"><div class="process"></div></div><div class="label">15</div></div>
<div class="score-statistics-item speed level-18"><div class="chart-bar"><div class="process"></div></div><div class="label">18</div></div>
<div class="score-statistics-item speed level-21"><div class="chart-bar"><div class="process"></div></div><div class="label">21</div></div>
<div class="score-statistics-item speed level-24"><div class="chart-bar"><div class="process"></div></div><div class="label">24</div></div>
<div class="score-statistics-item speed level-27"><div class="chart-bar"><div class="process"></div></div><div class="label">27</div></div>
<div class="score-statistics-item speed level-30"><div class="chart-bar"><div class="process"></div></div><div class="label">30</div></div>
<div class="score-statistics-item speed level-33"><div class="chart-bar"><div class="process"></div></div><div class="label">33</div></div>
<div class="score-statistics-item speed level-36"><div class="chart-bar"><div class="process"></div></div><div class="label">36</div></div>
<div class="score-statistics-item speed level-39"><div class="chart-bar"><div class="process"></div></div><div class="label">39</div></div>
<div class="score-statistics-item speed level-42"><div class="chart-bar"><div class="process"></div></div><div class="label">42</div></div>
</div>
</div>

<!--CODE LENGTH CHART-->
<div class="score-statistics-container info-panel">
<div class="title">码长</div>
Expand All @@ -232,6 +254,7 @@
</div>
</div>


<!--SCORE SUMMERY-->
<div class="score-info info-panel">
<div class="title">单字</div>
Expand Down
55 changes: 45 additions & 10 deletions js/class/Engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -795,7 +795,7 @@ define(
this.record.speed = Number((this.correctWordsCount / this.duration * 1000 * 60).toFixed(2));

// 保存记录
console.log(this.record, this.config)
// console.log(this.record, this.config)
this.database.insert(this.record, this.config);

//
Expand Down Expand Up @@ -875,6 +875,21 @@ define(
else if (this.record.codeLength >= 9 && this.record.codeLength < 10 ) { this.score[this.config.articleType].codeLength9++}
else if (this.record.codeLength >= 10 && this.record.codeLength < 11 ) { this.score[this.config.articleType].codeLength10++}

// SPEED FILTER
if ( this.record.speed >= 0 && this.record.speed < 60 ) { this.score[this.config.articleType].speed30++}
else if ( this.record.speed >= 60 && this.record.speed < 90 ) { this.score[this.config.articleType].speed60++}
else if ( this.record.speed >= 90 && this.record.speed < 120 ) { this.score[this.config.articleType].speed90++}
else if ( this.record.speed >= 120 && this.record.speed < 150 ) { this.score[this.config.articleType].speed120++}
else if ( this.record.speed >= 150 && this.record.speed < 180 ) { this.score[this.config.articleType].speed150++}
else if ( this.record.speed >= 180 && this.record.speed < 210 ) { this.score[this.config.articleType].speed180++}
else if ( this.record.speed >= 210 && this.record.speed < 240 ) { this.score[this.config.articleType].speed210++}
else if ( this.record.speed >= 240 && this.record.speed < 270 ) { this.score[this.config.articleType].speed240++}
else if ( this.record.speed >= 270 && this.record.speed < 300 ) { this.score[this.config.articleType].speed270++}
else if ( this.record.speed >= 300 && this.record.speed < 330 ) { this.score[this.config.articleType].speed300++}
else if ( this.record.speed >= 330 && this.record.speed < 360 ) { this.score[this.config.articleType].speed330++}
else if ( this.record.speed >= 360 && this.record.speed < 390 ) { this.score[this.config.articleType].speed360++}
else if ( this.record.speed >= 390 && this.record.speed < 420 ) { this.score[this.config.articleType].speed390++}

// RECORD COUNT
this.score[this.config.articleType].recordCount++

Expand Down Expand Up @@ -983,20 +998,21 @@ define(
$('.score-info-item.code-length-max .score').innerText = currentArticleTypeScore.codeLengthMax.toFixed(1);
$('.score-info-item.code-length-ave .score').innerText = currentArticleTypeScore.codeLengthAve.toFixed(1);

// SCORE 图表展示
// SCORE HITRATE 图表展示
let hitRateScoreArray = []
for (let i=1;i<=12;i++){
hitRateScoreArray.push(currentArticleTypeScore[`hitRate${i}`])
}
let hitRateMax = Math.max(...hitRateScoreArray)

hitRateScoreArray.forEach((hitRateScore, index) => {
let hitRate = currentArticleTypeScore[`hitRate${index+1}`]
$(`.score-statistics-item.hitrate.level-${index+1} .process`).style.backgroundColor = generateColorForChart(hitRate, 0, 20)
let suffix = index + 1
let hitRate = currentArticleTypeScore[`hitRate${suffix}`]
$(`.score-statistics-item.hitrate.level-${suffix} .process`).style.backgroundColor = generateColorForChart(hitRate, 0, hitRateMax)
if (hitRateMax === 0){
$(`.score-statistics-item.hitrate.level-${index+1} .process`).style.height = 0
$(`.score-statistics-item.hitrate.level-${suffix} .process`).style.height = 0
} else {
$(`.score-statistics-item.hitrate.level-${index+1} .process`).style.height = `${hitRate * 60 / hitRateMax}px`
$(`.score-statistics-item.hitrate.level-${suffix} .process`).style.height = `${hitRate * 60 / hitRateMax}px`
}
})

Expand All @@ -1008,12 +1024,31 @@ define(
let codeLengthMax = Math.max(...codeLengthScoreArray)

codeLengthScoreArray.forEach((hitRateScore, index) => {
let codeLength = currentArticleTypeScore[`codeLength${index+1}`]
$(`.score-statistics-item.codelength.level-${index+1} .process`).style.backgroundColor = generateColorForChart(codeLength, 0, 20)
let suffix = index + 1
let codeLength = currentArticleTypeScore[`codeLength${suffix}`]
$(`.score-statistics-item.codelength.level-${suffix} .process`).style.backgroundColor = generateColorForChart(codeLength, 0, codeLength)
if(codeLengthMax === 0){
$(`.score-statistics-item.codelength.level-${index+1} .process`).style.height = 0
$(`.score-statistics-item.codelength.level-${suffix} .process`).style.height = 0
} else {
$(`.score-statistics-item.codelength.level-${suffix} .process`).style.height = `${codeLength * 60 / codeLengthMax}px`
}
})

// SCORE SPEED 图表展示
let speedScoreArray = []
for (let i=1;i<=14;i++){
speedScoreArray.push(currentArticleTypeScore[`speed${i*30}`])
}
let speedMax = Math.max(...speedScoreArray)

speedScoreArray.forEach((speedScore, index) => {
let suffix = (index + 1) * 3
let speed = currentArticleTypeScore[`speed${suffix * 10}`]
$(`.score-statistics-item.speed.level-${suffix} .process`).style.backgroundColor = generateColorForChart(speed, 0, speedMax)
if (speedMax === 0){
$(`.score-statistics-item.speed.level-${suffix} .process`).style.height = 0
} else {
$(`.score-statistics-item.codelength.level-${index+1} .process`).style.height = `${codeLength * 60 / codeLengthMax}px`
$(`.score-statistics-item.speed.level-${suffix} .process`).style.height = `${speed * 60 / speedMax}px`
}
})

Expand Down
15 changes: 15 additions & 0 deletions js/class/Score.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,21 @@ define(['Article', 'ArticleType'],function (Article, ArticleType) {
codeLength8 : 0,
codeLength9 : 0,
codeLength10 : 0,

speed30 : 0, // 1 速度 30 - 410
speed60 : 0, // 2
speed90 : 0, // 3
speed120 : 0, // 4
speed150 : 0, // 5
speed180 : 0, // 6
speed210 : 0, // 7
speed240 : 0, // 8
speed270 : 0, // 9
speed300 : 0, // 10
speed330 : 0, // 11
speed360 : 0, // 12
speed390 : 0, // 13
speed420 : 0, // 14
}
}
}
Expand Down

0 comments on commit aa1cb1e

Please sign in to comment.