Merge pull request #50 from encap/dev

Dev

Author: encap

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 80",
+    "serve": "vue-cli-service serve",
     "dev": "concurrently -r \"npm:serve\" \"npm:server\"",
     "vue-ui": "vue ui",
     "build": "vue-cli-service build",

public/exampleResults.json

@@ -1912,7 +1912,7 @@
   "oneThirdTime": 34888,
   "lastThirdCharsCount": 53,
   "lastThirdStartTime": 61622,
-  "timeFromFirstInput": 76782,
+  "timeFromFirstInput": 61782,
   "codeLength": 216,
   "correctLines": 12,
   "mode": 0,

src/components/charts/BarChart.vue

@@ -39,10 +39,6 @@ export default {
         data[score.name].value = score.value;
       });
 
-      if (Math.round(data.player.value) === data.avg.value || Math.round(data.player.value) === data.best.value) {
-        data.barWidth = true;
-      }
-
       return data;
     },
     options() {
@@ -65,7 +61,6 @@ export default {
             },
           }],
           yAxes: [{
-            barPercentage: 0.7,
             gridLines: {
               display: false,
             },
@@ -74,7 +69,7 @@ export default {
         plugins: {
           datalabels: {
             color: '#fff',
-            align: 'end',
+            align: 'start',
             anchor: 'end',
             formatter(value) {
               return `${value} wpm`;
@@ -88,7 +83,7 @@ export default {
       return {
         datasets: [
           {
-            barPercentage: this.chartData.barWidth ? 0.75 : 0.9,
+            barPercentage: 0.75,
             label: 'You',
             backgroundColor: this.backgroundColors[this.chartData.player.order],
             data: [this.chartData.player.value],
@@ -99,12 +94,14 @@ export default {
             backgroundColor: this.backgroundColors[this.chartData.avg.order],
             data: [this.chartData.avg.value],
             order: this.chartData.avg.order,
+            barPercentage: 0.7,
           },
           {
             label: 'Best',
             backgroundColor: this.backgroundColors[this.chartData.best.order],
             data: [this.chartData.best.value],
             order: this.chartData.best.order,
+            barPercentage: 0.7,
           },
         ],
       };

src/views/Contribute.vue

@@ -3,7 +3,7 @@
     <main class="middle">
       <h1>Contribute</h1>
 
-      <article :class="{shrink: expand || sent}">
+      <article :class="{shrink: expand}">
         <p>
           Our mission is to ensure the diversity and quality of the code on which our users practice and test their skills. We do our best to ensure that there are no errors in the code but with that many languages and technologies available on CodeRush, it is not possible without your help.
         </p>
@@ -49,6 +49,7 @@
         class="editor-wrapper"
         @expand="(value) => expand = value"
       />
+
       <p v-show="sent">
         Thank you for your contribution. Your submission will soon be listed <a href="https://github.com/encap/coderush/pulls">here</a>.
       </p>
@@ -166,7 +167,6 @@ export default {
 
 .middle
   display: flex
-  justify-content: space-between
   flex-basis: 0
   flex-direction: column
   flex-grow: 2
@@ -250,7 +250,7 @@ article p
   display: flex
   align-items: flex-end
   justify-content: space-between
-  margin-top: 1em
+  margin-top: auto
   margin-bottom: $thin-gap
 
 .button
@@ -270,7 +270,7 @@ article p
   &:first-child
     margin-right: $gap
 
-  &:hover
+  &:hover:not(:disabled)
     background-color: $purple
 
   &:active

src/views/Results.vue

@@ -26,7 +26,7 @@
                   Time
                 </p>
                 <h2 class="value">
-                  {{ minutes ? `${minutes}:${seconds}` : `${seconds}s` }}
+                  {{ minutes ? `${minutes}:${('0' + seconds).slice(-2)}` : `${seconds}s` }}
                 </h2>
               </div>
               <div v-else class="characters">

vue.config.js

@@ -1,11 +1,17 @@
 const path = require('path');
 const PrerenderSPAPlugin = require('prerender-spa-plugin');
 
-// const zopfli = require('@gfx/zopfli');
-
 // const fs = require('fs');
 // const StatsPlugin = require('stats-webpack-plugin');
-
+const plugins = [
+  // new StatsPlugin('stats.json')
+];
+if (process.env.VUE_APP_API_URL === 'https://api.coderush.xyz') {
+  plugins.push(new PrerenderSPAPlugin({
+    staticDir: path.join(__dirname, 'dist'),
+    routes: ['/', '/about', '/contribute'],
+  }));
+}
 
 module.exports = {
   productionSourceMap: false,
@@ -19,47 +25,16 @@ module.exports = {
       },
     },
     sourceMap: false,
-    // extract: {
-    //   filename: 'css/[name].css',
-    //   chunkFilename: 'css/[name].css',
-    // },
-  },
-  pluginOptions: {
-    // compression: {
-    //   zopfli: {
-    //     filename: '[path]',
-    //     include: /\.js$|\.css$/,
-    //     exclude: /cm\/|code\//,
-    //     compressionOptions: {
-    //       numiterations: 15,
-    //     },
-    //     algorithm(input, compressionOptions, callback) {
-    //       return zopfli.gzip(input, compressionOptions, callback);
-    //     },
-    //   },
-    // },
   },
   configureWebpack: {
-    // output: {
-    //   filename: 'js/[name].js',
-    //   chunkFilename: 'js/[name].js',
-    // },
     resolve: {
       alias: {
         // bundle size optimatization
         moment: 'moment/src/moment',
         'chart.js$': 'chart.js/dist/Chart.min.js',
       },
     },
-    plugins: [
-      // new StatsPlugin('stats.json'),
-      process.env.NODE_ENV ? new PrerenderSPAPlugin({
-        // Required - The path to the webpack-outputted app to prerender.
-        staticDir: path.join(__dirname, 'dist'),
-        // Required - Routes to render.
-        routes: ['/', '/about', '/contribute'],
-      }) : null,
-    ],
+    plugins,
   },
   chainWebpack(config) {
     config.optimization.minimizer('terser').tap((args) => {
@@ -82,16 +57,6 @@ module.exports = {
     headers: {
       'Access-Control-Allow-Origin': '*',
     },
-    // before(app) {
-    //   app.use((req, res, next) => {
-    //     if (req.path.slice(0, 4) === '/cm/') {
-    //       res.header('content-encoding', 'gzip');
-    //     }
-    //     next();
-    //   });
-    // },
-
-    // compress: false,
     // https: {
     //   key: fs.readFileSync(`${process.env.HOME}/localhost.key`),
     //   cert: fs.readFileSync(`${process.env.HOME}/localhost.crt`),