From d74b18e6e8f5652faa359babbec72a732c1e74a9 Mon Sep 17 00:00:00 2001 From: Beck <50498548+beckpaul@users.noreply.github.com> Date: Tue, 9 Apr 2024 07:54:51 -0400 Subject: [PATCH] Enhancement: Clans page error handling and Snowflake timeframe constraint (#544) * refactor datatable implementation to be cleaner to read * refactor to clans entrypoint * add month check for snowflakes * move snowflakes to a webpack asset * spelling fix and eslint formatting * undo some "refactoring" and add append a generic error message if clans fail to load * add basic loading spinner * linting --- grunt/run.js | 4 +-- public/styles/site/getClans.sass | 17 ++++++++-- src/backend/templates/layouts/default.pug | 9 +----- .../templates/mixins/loading-spinner.pug | 2 ++ src/backend/templates/views/clans/clans.pug | 2 ++ src/frontend/js/entrypoint/clans.js | 32 +++++++++---------- src/frontend/js/entrypoint/navigation.js | 8 ++--- src/frontend/js/entrypoint/snowflakes.js | 17 ++++++++++ webpack.config.js | 19 +++++------ 9 files changed, 68 insertions(+), 42 deletions(-) create mode 100644 src/backend/templates/mixins/loading-spinner.pug create mode 100644 src/frontend/js/entrypoint/snowflakes.js diff --git a/grunt/run.js b/grunt/run.js index b3c1605c..0c7afe57 100644 --- a/grunt/run.js +++ b/grunt/run.js @@ -1,5 +1,5 @@ module.exports = { webpack: { - args: ['node_modules/.bin/webpack'] - } + args: ['node_modules/.bin/webpack'], + }, } diff --git a/public/styles/site/getClans.sass b/public/styles/site/getClans.sass index bcfaca7b..710e0f5d 100644 --- a/public/styles/site/getClans.sass +++ b/public/styles/site/getClans.sass @@ -29,8 +29,21 @@ grid-template-columns: repeat(3, 1fr) li font-size: 10px - + +.spinner + border: 6px solid rgba(0, 0, 0, 0.0) + border-left-color: #ffa300 + border-radius: 50% + width: 220px + height: 220px + animation: spin 1s linear infinite + margin: 20px auto + +@keyframes spin + 0% + transform: rotate(0deg) + 100% + transform: rotate(360deg) #iAmMember display: none - diff --git a/src/backend/templates/layouts/default.pug b/src/backend/templates/layouts/default.pug index e0f98786..28d4f415 100755 --- a/src/backend/templates/layouts/default.pug +++ b/src/backend/templates/layouts/default.pug @@ -293,14 +293,7 @@ html(lang='en') a(href=forumUrl) FORUMS script(src=webpackAssetJS('navigation')) - script( - src='https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js', - crossorigin='anonymous' - ) - script(type='text/javascript'). - if (typeof Snowflakes !== 'undefined') { - new Snowflakes() - } + script(src=webpackAssetJS('snowflakes')) //- Include template-specific javascript files by extending the js block block js diff --git a/src/backend/templates/mixins/loading-spinner.pug b/src/backend/templates/mixins/loading-spinner.pug new file mode 100644 index 00000000..a8c89731 --- /dev/null +++ b/src/backend/templates/mixins/loading-spinner.pug @@ -0,0 +1,2 @@ +mixin loading-spinner + .spinner diff --git a/src/backend/templates/views/clans/clans.pug b/src/backend/templates/views/clans/clans.pug index b1676c3f..fada4f3e 100644 --- a/src/backend/templates/views/clans/clans.pug +++ b/src/backend/templates/views/clans/clans.pug @@ -1,7 +1,9 @@ extends ../../layouts/default +include ../../mixins/loading-spinner block content h1 Clans + +loading-spinner table#clan-table block js script(src=webpackAssetJS('clans')) diff --git a/src/frontend/js/entrypoint/clans.js b/src/frontend/js/entrypoint/clans.js index b2cc76cf..4933bdb2 100644 --- a/src/frontend/js/entrypoint/clans.js +++ b/src/frontend/js/entrypoint/clans.js @@ -5,22 +5,12 @@ import 'simple-datatables/dist/style.css' axios .get('/data/clans.json') .then((response) => { - if ( - response.status !== 200 || - !response.data || - !response.data.length - ) { - console.error('request clans failed') - - return - } - - const clans = response.data - const datatable = new DataTable('#clan-table', { + document.querySelector('.spinner').remove() + const dataTable = new DataTable('#clan-table', { perPageSelect: null, data: { headings: ['TAG', 'NAME', 'LEADER', 'POPULATION'], - data: clans.map((item) => { + data: response.data.map((item) => { return [ item.tag, item.name, @@ -31,13 +21,21 @@ axios }, }) - datatable.on('datatable.selectrow', (rowIndex, event) => { + dataTable.on('datatable.selectrow', (rowIndex, event) => { if (typeof rowIndex === 'number') { event.preventDefault() - window.location.href = '/clans/view/' + clans[rowIndex].id + window.location.href = + '/clans/view/' + response.data[rowIndex].id } }) }) - .catch((err) => { - console.log(err, 'loading clans failed') + .catch((error) => { + document.querySelector('.spinner').remove() + const header = document.querySelector('h1') + const errorElement = document.createElement('h2') + errorElement.textContent = + 'Failed to load clans. Please try again later' + + console.error(error) + header.insertAdjacentElement('afterend', errorElement) }) diff --git a/src/frontend/js/entrypoint/navigation.js b/src/frontend/js/entrypoint/navigation.js index b7d982a2..822e33af 100644 --- a/src/frontend/js/entrypoint/navigation.js +++ b/src/frontend/js/entrypoint/navigation.js @@ -138,11 +138,11 @@ document.addEventListener('DOMContentLoaded', () => { // function to make highligthed text change colors/pulsate (it goes from white to gold and viceversa) const highlightText = document.querySelectorAll('.highlightText') - let highLigthCounter = 0 + let highlightCounter = 0 function highlightPulse() { - if (highLigthCounter < 1) { - highLigthCounter++ + if (highlightCounter < 1) { + highlightCounter++ highlightText.forEach((element) => { element.style.transition = '1s' }) @@ -150,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => { element.style.color = '#FFFFFF' }) } else { - highLigthCounter-- + highlightCounter-- highlightText.forEach((element) => { element.style.color = '#f7941d' }) diff --git a/src/frontend/js/entrypoint/snowflakes.js b/src/frontend/js/entrypoint/snowflakes.js new file mode 100644 index 00000000..5962e51c --- /dev/null +++ b/src/frontend/js/entrypoint/snowflakes.js @@ -0,0 +1,17 @@ +const script = document.createElement('script') + +script.src = 'https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js' +script.setAttribute('crossorigin', 'anonymous') + +document.body.appendChild(script) + +script.onload = function () { + const currentMonth = new Date().getMonth() + 1 + if ( + typeof Snowflakes !== 'undefined' && + (currentMonth <= 2 || currentMonth >= 10) + ) { + // eslint-disable-next-line no-new, no-undef + new Snowflakes() + } +} diff --git a/webpack.config.js b/webpack.config.js index 9b90ca54..968c1c85 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,30 +7,31 @@ module.exports = { rules: [ { test: /\.css$/i, - use: ['style-loader', 'css-loader'] - } - ] + use: ['style-loader', 'css-loader'], + }, + ], }, entry: { clan: ['./src/frontend/js/entrypoint/clan.js'], clans: ['./src/frontend/js/entrypoint/clans.js'], - 'content-creators': ['./src/frontend/js/entrypoint/content-creators.js'], + 'content-creators': [ + './src/frontend/js/entrypoint/content-creators.js', + ], donation: ['./src/frontend/js/entrypoint/donation.js'], 'faf-teams': ['./src/frontend/js/entrypoint/faf-teams.js'], leaderboards: ['./src/frontend/js/entrypoint/leaderboards.js'], navigation: ['./src/frontend/js/entrypoint/navigation.js'], + snowflakes: ['./src/frontend/js/entrypoint/snowflakes.js'], newshub: ['./src/frontend/js/entrypoint/newshub.js'], play: ['./src/frontend/js/entrypoint/play.js'], report: ['./src/frontend/js/entrypoint/report.js'], - 'clan-invite': ['./src/frontend/js/entrypoint/clan-invite.js'] + 'clan-invite': ['./src/frontend/js/entrypoint/clan-invite.js'], }, output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist/js'), publicPath: '/dist/js', - clean: true + clean: true, }, - plugins: [ - new WebpackManifestPlugin({ useEntryKeys: true }) - ] + plugins: [new WebpackManifestPlugin({ useEntryKeys: true })], }