diff --git a/client/.eslintrc.js b/client/.eslintrc.js index 8c34227..c80ee2d 100644 --- a/client/.eslintrc.js +++ b/client/.eslintrc.js @@ -5,12 +5,34 @@ module.exports = { }, 'extends': [ 'plugin:vue/essential', + 'plugin:vue/recommended', 'eslint:recommended' ], rules: { //'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-console': 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'vue/singleline-html-element-content-newline': 'off', + 'vue/multiline-html-element-content-newline': 'off', + "vue/html-self-closing": 'off', + 'vue/max-attributes-per-line': 'off', + "vue/attributes-order": ["error", { + "order": [ + "DEFINITION", + "LIST_RENDERING", + "CONDITIONALS", + "RENDER_MODIFIERS", + "UNIQUE", + "TWO_WAY_BINDING", + "OTHER_DIRECTIVES", + "EVENTS", + "CONTENT", + "GLOBAL", + "OTHER_ATTR" + ] + }], + "quotes": [2, "single", { "avoidEscape": true }], + "semi": [2, "never"] }, parserOptions: { parser: 'babel-eslint' diff --git a/client/src/App.vue b/client/src/App.vue index c2d32f5..cdf9f30 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,8 +1,8 @@ diff --git a/client/src/components/LazyBackgroundImage.vue b/client/src/components/LazyBackgroundImage.vue index 78b9ae0..6461ba3 100644 --- a/client/src/components/LazyBackgroundImage.vue +++ b/client/src/components/LazyBackgroundImage.vue @@ -45,10 +45,16 @@ export default { if (this.imageState === 'loaded') { return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize } - return ''; + return '' } }, + mounted () { + this.$nextTick(() => { + this.fetchImage() + }) + }, + methods: { fetchImage () { this.asyncImage.onload = this.imageOnLoad @@ -58,11 +64,6 @@ export default { imageOnLoad () { this.imageState = 'loaded' } - }, - mounted () { - this.$nextTick(() => { - this.fetchImage() - }) } } diff --git a/client/src/components/Match.vue b/client/src/components/Match.vue index 8060bfb..194c182 100644 --- a/client/src/components/Match.vue +++ b/client/src/components/Match.vue @@ -1,11 +1,10 @@ @@ -73,7 +79,10 @@ export default { props: { - data: Object + data: { + type: Object, + required: true + } } } @@ -92,11 +101,11 @@ export default { } .match.win .match-container { - border-left: 10px solid #48BB78; + border-left: 10px solid #48bb78; } .match.lose .match-container { - border-left: 10px solid #F56565; + border-left: 10px solid #f56565; } /* First col */ diff --git a/client/src/components/NotificationsContainer.vue b/client/src/components/NotificationsContainer.vue index 4ef8541..c2bbec9 100644 --- a/client/src/components/NotificationsContainer.vue +++ b/client/src/components/NotificationsContainer.vue @@ -9,7 +9,7 @@ \ No newline at end of file diff --git a/client/src/components/RecentActivity.vue b/client/src/components/RecentActivity.vue index 1eae17f..11cb8b2 100644 --- a/client/src/components/RecentActivity.vue +++ b/client/src/components/RecentActivity.vue @@ -28,7 +28,7 @@ :title="day.date + ' : ' + day.matches + ' game(s)'" :class="[getCaseMargin(index), getCaseColor(day.matches)]" class="ml-1 w-4 h-4 cursor-pointer" - > + /> @@ -49,74 +49,74 @@ export default { gridDays: [], indexFirstMonday: 0, nbColumns: 15 - }; - }, - - methods: { - createGrid() { - const nbDaysInGrid = this.nbColumns * 7; - - const options = { - year: "numeric", - month: "2-digit", - day: "numeric" - }; - - // Create array with all the days of the Grid - for (let i = 1; i <= nbDaysInGrid; i++) { - const day = new Date(); - day.setDate(day.getDate() - nbDaysInGrid + i); - const formattedDay = day.toLocaleString("fr", options); - - this.gridDays.push({ - date: formattedDay, - matches: 0, - day: day.toLocaleString("en", { weekday: "long" }).substring(0, 2), - month: day.toLocaleString("en", { month: "long" }).substring(0, 3) - }); - } - - // Add all the matches made by the summoner - for (const key in this.matches) { - const match = this.matches[key]; - const matchTime = new Date(match.timestamp); - const formattedTime = matchTime.toLocaleString("fr", options); - - const dayOfTheMatch = this.gridDays.filter( - e => e.date === formattedTime - ); - if (dayOfTheMatch.length > 0) { - dayOfTheMatch[0].matches++; - } - } - - // Get the index of the first Monday - this.indexFirstMonday = this.gridDays.findIndex(d => d.day === "Mo"); - }, - getCaseColor(nbMatches) { - /* TODO: change this */ - if (nbMatches >= 6) { - return "bg-teal-200"; - } else if (nbMatches >= 4) { - return "bg-teal-300"; - } else if (nbMatches >= 2) { - return "bg-teal-400"; - } else if (nbMatches >= 1) { - return "bg-teal-500"; - } - return "bg-teal-700"; - }, - getCaseMargin(index) { - if (index % 7 !== 0) { - return "mt-1"; - } } }, created() { - console.log("activity"); + console.log('activity') - this.createGrid(); + this.createGrid() + }, + + methods: { + createGrid() { + const nbDaysInGrid = this.nbColumns * 7 + + const options = { + year: 'numeric', + month: '2-digit', + day: 'numeric' + } + + // Create array with all the days of the Grid + for (let i = 1; i <= nbDaysInGrid; i++) { + const day = new Date() + day.setDate(day.getDate() - nbDaysInGrid + i) + const formattedDay = day.toLocaleString('fr', options) + + this.gridDays.push({ + date: formattedDay, + matches: 0, + day: day.toLocaleString('en', { weekday: 'long' }).substring(0, 2), + month: day.toLocaleString('en', { month: 'long' }).substring(0, 3) + }) + } + + // Add all the matches made by the summoner + for (const key in this.matches) { + const match = this.matches[key] + const matchTime = new Date(match.timestamp) + const formattedTime = matchTime.toLocaleString('fr', options) + + const dayOfTheMatch = this.gridDays.filter( + e => e.date === formattedTime + ) + if (dayOfTheMatch.length > 0) { + dayOfTheMatch[0].matches++ + } + } + + // Get the index of the first Monday + this.indexFirstMonday = this.gridDays.findIndex(d => d.day === 'Mo') + }, + getCaseColor(nbMatches) { + /* TODO: change this */ + if (nbMatches >= 6) { + return 'bg-teal-200' + } else if (nbMatches >= 4) { + return 'bg-teal-300' + } else if (nbMatches >= 2) { + return 'bg-teal-400' + } else if (nbMatches >= 1) { + return 'bg-teal-500' + } + return 'bg-teal-700' + }, + getCaseMargin(index) { + if (index % 7 !== 0) { + return 'mt-1' + } + } } -}; +} \ No newline at end of file diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue index f9bc48d..3590c2e 100644 --- a/client/src/components/SearchForm.vue +++ b/client/src/components/SearchForm.vue @@ -3,10 +3,10 @@
+ class="absolute vertical-center offsetIcon" + > {{ region }}
@@ -75,20 +76,20 @@ export default { 'RU' ], selectedRegion: 'EUW' - }; + } }, methods: { classRegions(index) { return { 'rounded-t': index === 0, 'rounded-b': index === this.regions.length - 1 - }; + } }, formSubmit() { - const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u'); + const regexNames = new RegExp('^[0-9\\p{L} _\\.]+$', 'u') if(regexNames.exec(this.summoner)) { - this.$emit('formSubmit', this.summoner.split(' ').join(''), this.selectedRegion.toLowerCase()); + this.$emit('formSubmit', this.summoner.split(' ').join(''), this.selectedRegion.toLowerCase()) } else { this.$store.dispatch('notification/add', { type: 'error', @@ -97,7 +98,7 @@ export default { } } } -}; +}