Summary data for the main Guess

Author: nshafer

env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="vite/client" />
 declare let GITVERSION: string
+declare module "vue3-popper"

index.html

@@ -34,6 +34,22 @@
         --orange: #f5793a;
         --blue: #85c0f9;
 
+        /* Grade colors */
+        --grade-a-bg: #00695c;
+        --grade-a-fg: #e0f2f1;
+
+        --grade-b-bg: #fbc02d;
+        --grade-b-fg: #fffde7;
+
+        --grade-c-bg: #ff8f00;
+        --grade-c-fg: #fff8e1;
+
+        --grade-d-bg: #d84315;
+        --grade-d-fg: #fbe9e7;
+
+        --grade-f-bg: #c62828;
+        --grade-f-fg: #ffebee;
+        
         /* Main app header */
         --header-height: 55px;
 
@@ -66,7 +82,12 @@
       :root,
       .darktheme {
         --color-background: var(--gray-7);
-    
+        
+        --modal-content-bg: var(--gray-7);
+
+        --tooltip-bg: var(--gray-6);
+        --tooltip-fg: var(--gray-1);
+        --tooltip-border: var(--gray-4);
       }
 
       :root {
@@ -85,30 +106,13 @@
         --input-border: var(--gray-4);
         --input-border-error: #800000;
         --input-border-focus: var(--gray-2);
-    
-        --modal-content-bg: var(--gray-7);
-
-        --grade-a-bg: #00695c;
-        --grade-a-fg: #e0f2f1;
-
-        --grade-b-bg: #fbc02d;
-        --grade-b-fg: #fffde7;
-
-        --grade-c-bg: #ff8f00;
-        --grade-c-fg: #fff8e1;
-
-        --grade-d-bg: #d84315;
-        --grade-d-fg: #fbe9e7;
-
-        --grade-f-bg: #c62828;
-        --grade-f-fg: #ffebee;
-
       }
 
       .darktheme {
         --color-correct: var(--darkGreen);
         --color-present: var(--darkYellow);
         --color-absent: var(--gray-4);
+        --tile-text-color: var(--gray-1);
 
         --button-background: var(--gray-3);
         --button-text: var(--gray-1);
@@ -120,8 +124,6 @@
         --input-border: var(--gray-1);
         --input-border-error: #ffaeae;
         --input-border-focus: var(--gray-1);
-    
-        --modal-content-bg: var(--gray-7);
       }
 
       .colorblind {

package-lock.json

@@ -12,7 +12,8 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --global GITVERSION"
   },
   "dependencies": {
-    "vue": "^3.2.31"
+    "vue": "^3.2.31",
+    "vue3-popper": "^1.4.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",

package.json

@@ -110,6 +110,12 @@ function closeModal(name: string) {
         width: auto;
     }
 
+    .icon-inline {
+        display: inline-block;
+        height: 1em;
+        vertical-align: -0.15em;
+    }
+
     a {
         color: var(--gray-1);
     }
@@ -346,16 +352,72 @@ function closeModal(name: string) {
         padding: .75em .5em;
     }
 
-    @media screen and (min-width: 60em) {
+    @media screen and (min-width: 70em) {
         .section__body {
             padding: 1em;
         }
     }
 
+    .grade {
+        width: 5em;
+        padding: .5em;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .grade .letter {
+        flex: 0 0 auto;
+        font-size: 2.5em;
+        text-shadow: 3px 2px 12px rgba(0, 0, 0, 0.7);
+    }
+
+    .grade .percent {
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    .grade-color {
+        background: var(--gray-5) !important;
+    }
+
+    .grade-color.a {
+        background: var(--grade-a-bg) !important;
+        color: var(--grade-a-fg) !important;
+    }
+
+    .grade-color.b {
+        background: var(--grade-b-bg) !important;
+        color: var(--grade-b-fg) !important;
+    }
+
+    .grade-color.c {
+        background: var(--grade-c-bg) !important;
+        color: var(--grade-c-fg) !important;
+    }
+
+    .grade-color.d {
+        background: var(--grade-d-bg) !important;
+        color: var(--grade-d-fg) !important;
+    }
+
+    .grade-color.f {
+        background: var(--grade-f-bg) !important;
+        color: var(--grade-f-fg) !important;
+    }
+
     strong {
         font-size: 1.2em;
     }
 
+    /* hijacked for variable letters */
+    small {
+        font-style: italic;
+        font-size: 1em;
+        font-weight: bold;
+    }
+
     .middle-center {
         height: 100%;
         display: flex;

src/App.vue

@@ -53,7 +53,7 @@ function showSummaryPage() {
 }
 
 const dragEnabled = computed(() => {
-    return page.screenWidth < 960;
+    return page.screenWidth < 70*16;
 });
 
 const dragOffset = computed(() => {
@@ -206,7 +206,7 @@ function guessClicked(guess?: Guess) {
     }
 
     /* Small screens only */
-    @media screen and (max-width: 59.9375em) {
+    @media screen and (max-width: 69.9375em) {
         .main-interface {
             position: relative;
             width: 100%;
@@ -228,7 +228,7 @@ function guessClicked(guess?: Guess) {
     }
 
     /* Large screens only */
-    @media screen and (min-width: 60em) {
+    @media screen and (min-width: 70em) {
         .main-interface {
             display: grid;
             grid-template-columns: 1fr 1fr;