improve agreement and add agreement circle to UI (#188)

* improve agreement calculation and add agreement circle indicator to ui * update node * change participant filter pipe to layout players differently * update images in readme * update images in readme
philmtd · Nov 27, 2023 · c8e934a · c8e934a
1 parent ec9e4eb
commit c8e934a
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 88 deletions.
diff --git a/docs/results-dark.png b/docs/results-dark.png
diff --git a/docs/results-light.png b/docs/results-light.png
diff --git a/docs/voting-dark.png b/docs/voting-dark.png
diff --git a/docs/voting-light.png b/docs/voting-light.png
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -40,7 +40,7 @@
     "@angular/compiler-cli": "^17.0.4",
     "@ngxs/devtools-plugin": "3.8.1",
     "@types/jasmine": "~5.1.2",
-    "@types/node": "^20.9.4",
+    "@types/node": "^20.10.0",
     "@types/qrcode": "^1.5.5",
     "gzipper": "7.2.0",
     "jasmine-core": "~5.1.1",

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -42,6 +42,7 @@ import {TranslateHttpLoader} from "@ngx-translate/http-loader";
 import {TranslateMessageFormatCompiler} from "ngx-translate-messageformat-compiler";
 import {QRCodeModule} from "angularx-qrcode";
 import {SettingsState} from "./store/settings/settings.state";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
@@ -60,37 +61,38 @@ export function HttpLoaderFactory(http: HttpClient) {
     ThemeSwitcherComponent,
     FractionFilterPipe
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatDialogModule,
-    MatInputModule,
-    MatSelectModule,
-    MatOptionModule,
-    MatButtonModule,
-    FormsModule,
-    HttpClientModule,
-    NgxsModule.forRoot(appStates, {developmentMode: !environment.production}),
-    NgxsStoragePluginModule.forRoot({key: [UserState, ThemingState, SettingsState]}),
-    NgxsReduxDevtoolsPluginModule.forRoot(),
-    NgxsLoggerPluginModule.forRoot(),
-    MatIconModule,
-    MatMenuModule,
-    MatTooltipModule,
-    QRCodeModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      },
-      compiler: {
-        provide: TranslateCompiler,
-        useClass: TranslateMessageFormatCompiler
-      }
-    })
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatDialogModule,
+        MatInputModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatButtonModule,
+        FormsModule,
+        HttpClientModule,
+        NgxsModule.forRoot(appStates, {developmentMode: !environment.production}),
+        NgxsStoragePluginModule.forRoot({key: [UserState, ThemingState, SettingsState]}),
+        NgxsReduxDevtoolsPluginModule.forRoot(),
+        NgxsLoggerPluginModule.forRoot(),
+        MatIconModule,
+        MatMenuModule,
+        MatTooltipModule,
+        QRCodeModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            },
+            compiler: {
+                provide: TranslateCompiler,
+                useClass: TranslateMessageFormatCompiler
+            }
+        }),
+        MatProgressSpinnerModule
+    ],
   providers: [
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},
     {

diff --git a/frontend/src/app/game/game/agreement.ts b/frontend/src/app/game/game/agreement.ts
@@ -15,7 +15,7 @@ function calculateAgreementInternal(numbers: number[]): number | null {
   const votedValueRange: number = Math.max(...numbers) - Math.min(...numbers);
   const minMaxDeviationPercentage: number = 10;
   const maxDeviationScalingFactor: number = 5;
-  const maxDeviationPercentage: number = Math.max(minMaxDeviationPercentage, 70 - (votedValueRange / maxDeviationScalingFactor));
+  const maxDeviationPercentage: number = Math.max(minMaxDeviationPercentage, 70 - (votedValueRange * maxDeviationScalingFactor));
   const maxDeviation: number = (maxDeviationPercentage / 100) * consensus;
   return Math.max(0, (1 - averageDeviation / maxDeviation) * 100);
 }

diff --git a/frontend/src/app/game/game/fraction-filter.pipe.ts b/frontend/src/app/game/game/fraction-filter.pipe.ts
@@ -9,13 +9,17 @@ export function transformToFraction(v: number | undefined): string | undefined {
     return '⅛';
   } else if (v == 0.25) {
     return '¼';
+  } else if (v.toFixed(2) === '0.33') {
+    return '⅓';
   } else if (v == 0.5) {
     return '½';
+  } else if (v.toFixed(2) === '0.66') {
+    return '⅔';
   } else if (v == 0.75) {
     return '¾';
   } else if (v > 1 && v%1 > 0) {
     let fraction = transformToFraction(v%1) || ''
-    let utf8Fractions = ['⅛', '¼', '½', '¾']
+    let utf8Fractions = ['⅛', '¼', '⅓', '½', '⅔', '¾']
     let isUtf8Fraction = utf8Fractions.includes(fraction)
     return `${Math.trunc(v)}${isUtf8Fraction ? '' : '.'}${isUtf8Fraction ? fraction : Math.trunc(v%1*10)}`
   } else {

diff --git a/frontend/src/app/game/game/game.component.html b/frontend/src/app/game/game/game.component.html
@@ -82,6 +82,8 @@
       <strong class="large">{{ game.voteCount }}</strong>
     </div>
     <div class="agreement fx-layout-column fx-align--center-x fx-align--x-center fx-gap--1em" *ngIf="game.agreement != null">
+      <mat-spinner mode="determinate" [value]="100-game.agreement"></mat-spinner>
+      <mat-spinner mode="determinate" [value]="game.agreement"></mat-spinner>
       <span class="gray">{{ 'game.agreement' | translate }}</span>
       <strong class="large">{{ game.agreementEmoji }}</strong>
     </div>

diff --git a/frontend/src/app/game/game/game.component.scss b/frontend/src/app/game/game/game.component.scss
@@ -59,18 +59,11 @@
     font-size: 2em;
   }
   .agreement {
-    .agreement-circle {
-      height: 96px;
-      width: 96px;
-      position: relative;
-      span {
-        display: block;
-        font-size: 48px;
-        margin: 0;
-        position: absolute;
-        top: calc(50% - 12px);
-        left: calc(50% - 24px);
-      }
+    mat-spinner {
+      position: absolute;
+      height: 3rem !important;
+      width: 3rem !important;
+      top: 3rem;
     }
   }
 }
diff --git a/frontend/src/app/game/game/game.component.theme.scss b/frontend/src/app/game/game/game.component.theme.scss
@@ -44,4 +44,18 @@
     }
   }
 
+  .agreement {
+    mat-spinner {
+      &:first-of-type {
+        transform: scaleX(-1);
+        circle {
+          @if($isDark) {
+            stroke: desaturate(darken(mat.get-color-from-palette($primary, 50), 70%), 75%);
+          } @else {
+            stroke: mat.get-color-from-palette($primary, 50);
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/frontend/src/app/game/game/game.component.ts b/frontend/src/app/game/game/game.component.ts
@@ -155,7 +155,9 @@ export class GameComponent {
       return '🤩'
     } else if (agreement >= 50) {
       return '🙂'
-    } else if (agreement >= 25) {
+    } else if (agreement >= 30) {
+      return '😐'
+    } else if (agreement >= 15) {
       return '😕'
     } else {
       return '😡'

diff --git a/frontend/src/app/game/game/participant-filter.pipe.ts b/frontend/src/app/game/game/participant-filter.pipe.ts
@@ -8,26 +8,27 @@ type PARTICIPANT_ROW = 'top' | 'left' | 'bottom_left' | 'bottom_right' | 'right'
 })
 export class ParticipantFilterPipe implements PipeTransform {
 
-  // top: 0, 3, 5, 7, 9
-  // left: 1
-  // right: 2
-  // bottom_left: 4, 8
-  // bottom_right: 6, 10
+  // top: 0, 1, 3, 7, 9, 11, 13, ...
+  // left: 5
+  // right: 6
+  // bottom_left: 2, 8, 12, ...
+  // "bottom_middle": self
+  // bottom_right: 4, 10, 14, ...
   transform(value: Array<ParticipantModel>, row?: PARTICIPANT_ROW): Array<ParticipantModel> {
     if (!row || !value) {
       return value;
     }
 
     if (row == "top") {
-      return value.filter((p, idx) => idx == 0 || (idx >= 3 && (idx - 3) % 2 == 0));
+      return value.filter((p, idx) => idx == 0 || idx == 1 || idx == 3 || (idx >= 7 && (idx - 7) % 2 == 0));
     } else if (row == "left") {
-      return value.filter((p, idx) => idx == 1);
+      return value.filter((p, idx) => idx == 5);
     } else if (row == "bottom_left") {
-      return value.filter((p, idx) => idx >= 4 && (idx - 4) % 4 == 0);
+      return value.filter((p, idx) => idx == 2 || idx >= 8 && (idx - 4) % 4 == 0);
     } else if (row == "bottom_right") {
-      return value.filter((p, idx) => idx >= 6 && (idx - 6) % 4 == 0);
+      return value.filter((p, idx) => idx == 4 || idx >= 10 && (idx - 6) % 4 == 0);
     } else if (row == "right") {
-      return value.filter((p, idx) => idx == 2);
+      return value.filter((p, idx) => idx == 6);
     }
 
     return value;