├── CNAME ├── images ├── icon.png ├── logo.png └── favicon.ico ├── README.md ├── index.html ├── vuecomponents.js ├── 404-stats.css ├── vuecomponents.css ├── 404.html └── 404-stats.js /CNAME: -------------------------------------------------------------------------------- 1 | scratchstats.com -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WorldLanguages/ScratchStatsv2/HEAD/images/icon.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WorldLanguages/ScratchStatsv2/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WorldLanguages/ScratchStatsv2/HEAD/images/favicon.ico -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ScratchStats.com 2 | 100% frontend website that uses the Scratch API to show many statistics about Scratch users. Uses VueJS. 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ScratchStats.com 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Loading...
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vuecomponents.js: -------------------------------------------------------------------------------- 1 | const componentsHTML = { 2 | "row": ` 3 |
4 |
{{title}}
5 |
6 | 7 |
8 |
➕ Show more
9 |
10 | `, 11 | "stat": ` 12 |
13 |
{{value}}
14 |
15 | 16 |
17 |
18 | `, 19 | "project": ` 20 |
21 |
{{ project.title.length > 20 ? project.title.substring(0,17)+"..." : project.title }}
22 |
23 | 24 |
25 |
{{statEmojis[stat]}} {{n(project.stats[stat])}}% 26 |
27 |
28 |
29 |
30 | ` 31 | }; 32 | 33 | Vue.component("row", { 34 | methods: { 35 | loadMore: function(stat){ 36 | this.$root.$data.projectRowShow[stat] += 3; 37 | } 38 | }, 39 | props: ["title", "projectRowStat", "showLoadMore"], 40 | template: componentsHTML.row 41 | }); 42 | Vue.component("stat", { 43 | props: ["value", "emoji"], 44 | template: componentsHTML.stat 45 | }); 46 | Vue.component("project", { 47 | data: function() { 48 | return { 49 | statNames: this.$root.$data.statNames, 50 | statEmojis: this.$root.$data.statEmojis 51 | } 52 | }, 53 | methods: { 54 | n: x => { 55 | return Math.round(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 56 | }, 57 | openProject : id => window.open(`https://scratch.mit.edu/projects/${id}`), 58 | }, 59 | props: ["project", "sortedBy", "showStats"], 60 | template: componentsHTML.project 61 | }); 62 | -------------------------------------------------------------------------------- /404-stats.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat:500,600,700,800,900,1000|Questrial"); 2 | 3 | html { 4 | font-size: 1vw; 5 | } 6 | 7 | body { 8 | font-size: 1rem; 9 | color: white; 10 | background-color: #F1F1F1; 11 | font-family: Montserrat; 12 | font-weight: 600; 13 | margin: 0; 14 | } 15 | 16 | img { 17 | border-radius: .5rem; 18 | } 19 | 20 | #app { 21 | width: 100%; 22 | margin-top: 1rem; 23 | } 24 | 25 | #country-flag { 26 | width: 3rem; 27 | } 28 | 29 | #user { 30 | width: 50vw; 31 | margin: 0 auto; 32 | padding: 1rem; 33 | background-color: #3D6BFF; 34 | border-radius: 1rem; 35 | box-shadow: 0 4px 6px rgba(34,25,25,0.3); 36 | margin-bottom: 3rem; 37 | text-align: center; 38 | } 39 | 40 | #profile { 41 | cursor: pointer; 42 | } 43 | 44 | #profile-pic { 45 | width: 5rem; 46 | } 47 | 48 | #username { 49 | font-size: 2rem; 50 | overflow-x: hidden; 51 | } 52 | 53 | #buttons { 54 | display: flex; 55 | flex-direction: row; 56 | justify-content: center; 57 | flex-wrap: wrap; 58 | } 59 | 60 | .button { 61 | display: inline; 62 | border-radius: 1rem; 63 | background-color: #25aff4; 64 | font-size: 1rem; 65 | padding: .5rem; 66 | cursor: pointer; 67 | margin: .5rem; 68 | } 69 | 70 | #project-stats { 71 | margin-top: 3rem; 72 | margin-bottom: 3rem; 73 | } 74 | 75 | .explore-user { 76 | display: flex; 77 | flex-direction: column; 78 | margin-left: 3rem; 79 | margin-right: 3rem; 80 | } 81 | 82 | .explore-user-img { 83 | align-self: center; 84 | width: 5rem; 85 | height: 5rem; 86 | } 87 | 88 | #go-to-top { 89 | display: block; 90 | position: fixed; 91 | bottom: .5rem; 92 | right: .5rem; 93 | cursor: pointer; 94 | font-size: 2rem; 95 | } 96 | 97 | /*Mobile portrait*/ 98 | @media screen and (max-width: 850px) and (max-aspect-ratio: 13/9) { 99 | html { 100 | font-size: 4vw; 101 | } 102 | #user { 103 | width: 80vw; 104 | } 105 | } 106 | 107 | /*Mobile landscape*/ 108 | @media screen and (max-width: 850px) and (min-aspect-ratio: 13/9) { 109 | html { 110 | font-size: 1.5vw; 111 | } 112 | } 113 | 114 | /*Desktop*/ 115 | @media screen and (min-width: 850px) { 116 | } 117 | -------------------------------------------------------------------------------- /vuecomponents.css: -------------------------------------------------------------------------------- 1 | /* Rows */ 2 | 3 | .row { 4 | width: 90vw; 5 | margin: 0 auto; 6 | padding-top: 1rem; 7 | background-color: #3D6BFF; 8 | border-radius: 1rem; 9 | box-shadow: 0 4px 6px rgba(34,25,25,0.3); 10 | margin-bottom: 1rem; 11 | text-align: center; /* Center title and "load more" button */ 12 | } 13 | 14 | .row-title { 15 | font-size: 2.5rem; 16 | border-bottom: .1rem solid gray; 17 | } 18 | 19 | .row-stats { 20 | display: flex; 21 | flex-direction: row; 22 | justify-content: center; 23 | flex-wrap: wrap; 24 | } 25 | 26 | .load-more-projects { 27 | display: inline-block; 28 | margin: 0 auto; 29 | margin-bottom: 1rem; 30 | } 31 | 32 | /* Stats */ 33 | 34 | .stat, .project { 35 | padding: 1rem; 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: center; 39 | } 40 | 41 | .project { 42 | text-align: left; 43 | } 44 | 45 | .stat-name { 46 | font-size: 1rem; 47 | align-self: center; 48 | } 49 | 50 | .emoji { 51 | font-size: 2rem; 52 | } 53 | 54 | .stat-value { 55 | font-size: 2.5rem; 56 | align-self: center; 57 | } 58 | 59 | /* Projects */ 60 | 61 | .project-title { 62 | justify-content: center; 63 | display: flex; 64 | font-size: 1.25rem; 65 | cursor: pointer; 66 | } 67 | 68 | .project-info { 69 | display: flex; 70 | flex-direction: row; 71 | justify-content: center; 72 | } 73 | 74 | .project-thumbnail { 75 | height: 7rem; 76 | width: 9.33rem; 77 | cursor: pointer; 78 | } 79 | 80 | .project-stats { 81 | align-self: center; 82 | } 83 | 84 | .project-stat-value { 85 | float: right; 86 | margin-left: .5rem; 87 | } 88 | 89 | .project-stat-bold { 90 | font-weight: 800; 91 | } 92 | 93 | /* Media */ 94 | 95 | /* Desktop */ 96 | @media screen and (min-width: 850px) { 97 | .project { 98 | width: 25.1%; 99 | } 100 | .row-stats { 101 | padding-left: 5rem; 102 | padding-right: 5rem; 103 | } 104 | .stat { 105 | padding-left: 3rem; 106 | padding-right: 3rem; 107 | } 108 | } 109 | 110 | /* Mobile landscape */ 111 | @media screen and (max-width: 850px) and (min-aspect-ratio: 13/9) { 112 | .project { 113 | width: 25.1%; 114 | } 115 | } 116 | 117 | /*Mobile portrait*/ 118 | @media screen and (max-width: 850px) and (max-aspect-ratio: 13/9) { 119 | .row-stats { 120 | flex-direction: column; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ScratchStats.com 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |