add back button

Aphexus · Jul 4, 2022 · f1a780d · f1a780d
1 parent 9a5cecd
commit f1a780d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/app/views/coordinate/bits.scala b/app/views/coordinate/bits.scala
@@ -39,6 +39,7 @@ object bits {
     trans.coordinates.findSquare,
     trans.coordinates.nameSquare,
     trans.storm.score,
+    trans.study.back,
     trans.time,
     trans.asWhite,
     trans.asBlack,

diff --git a/ui/coordinateTrainer/css/_coordinateTrainer.scss b/ui/coordinateTrainer/css/_coordinateTrainer.scss
@@ -94,6 +94,17 @@ form.color {
   row-gap: 1em;
 }
 
+.back {
+  @extend %flex-column;
+  align-items: center;
+  margin-top: $block-gap;
+}
+
+.back-button {
+  font-size: 1.5em;
+  text-transform: uppercase;
+}
+
 .progress {
   @extend %box-radius;
   background-color: $c-bg-zebra;

diff --git a/ui/coordinateTrainer/src/view.ts b/ui/coordinateTrainer/src/view.ts
@@ -157,6 +157,19 @@ const side = (ctrl: CoordinateTrainerCtrl): VNode => {
     );
   }
   if (ctrl.isAuth && ctrl.hasModeScores()) sideContent.push(h('div.box', scoreCharts(ctrl)));
+  if (ctrl.playing && ctrl.timeDisabled())
+    sideContent.push(
+      h(
+        'div.back',
+        h(
+          'a.back-button',
+          {
+            hook: bind('click', ctrl.stop),
+          },
+          `« ${trans('back')}`
+        )
+      )
+    );
 
   return h('div.side', sideContent);
 };