Closes lichess-org#15009. Study chapter clock editing (inline set/clear).

Author: nstillman-te

modules/coreI18n/src/main/key.scala

@@ -2591,6 +2591,10 @@ object I18nKey:
     val `like`: I18nKey = "study:like"
     val `unlike`: I18nKey = "study:unlike"
     val `newTag`: I18nKey = "study:newTag"
+    val `addOrEditClockTime`: I18nKey = "study:addOrEditClockTime"
+    val `clockTimeFormat`: I18nKey = "study:clockTimeFormat"
+    val `clockTimePlaceholder`: I18nKey = "study:clockTimePlaceholder"
+    val `turnOnRecToSaveClockTimes`: I18nKey = "study:turnOnRecToSaveClockTimes"
     val `commentThisPosition`: I18nKey = "study:commentThisPosition"
     val `commentThisMove`: I18nKey = "study:commentThisMove"
     val `annotateWithGlyphs`: I18nKey = "study:annotateWithGlyphs"

modules/relay/src/main/RelaySync.scala

@@ -105,11 +105,11 @@ final private class RelaySync(
               .filter: c =>
                 existing.clock.forall: prev =>
                   ~c.trust && c.centis != prev.centis
-              .so: c =>
+              .foreach: c =>
                 studyApi.setClock(
                   studyId = study.id,
                   position = Position(chapter, path).ref,
-                  clock = c
+                  clock = c.some
                 )(by)
             path -> none
       case (found, _) => found

modules/study/src/main/ChapterRepo.scala

@@ -126,17 +126,19 @@ final class ChapterRepo(val coll: AsyncColl)(using Executor, akka.stream.Materia
   def setClockAndDenorm(
       chapter: Chapter,
       path: UciPath,
-      clock: Clock,
+      clock: Option[Clock],
       denorm: Option[Chapter.BothClocks]
   ) =
-    val updateNode = $doc(pathToField(path, F.clock) -> clock)
-    val updateDenorm = denorm.map(clocks => $doc("denorm.clocks" -> clocks))
+    val modifier = clock match
+      case None =>
+        $unset(pathToField(path, F.clock)) ++ denorm.fold($empty)(clocks => $set("denorm.clocks" -> clocks))
+      case Some(c) =>
+        val updateNode = $doc(pathToField(path, F.clock) -> c)
+        val updateDenorm = denorm.map(clocks => $doc("denorm.clocks" -> clocks))
+        $set(updateDenorm.foldLeft(updateNode)(_ ++ _))
     coll:
       _.update
-        .one(
-          $id(chapter.id) ++ $doc(path.toDbField.$exists(true)),
-          $set(updateDenorm.foldLeft(updateNode)(_ ++ _))
-        )
+        .one($id(chapter.id) ++ $doc(path.toDbField.$exists(true)), modifier)
         .void
 
   def forceVariation(force: Boolean) = setNodeValue(F.forceVariation, force.option(true))

modules/study/src/main/StudyApi.scala

@@ -425,18 +425,21 @@ final class StudyApi(
                 reloadSriBecauseOf(study, who.sri, chapter.id)
                 fufail(s"Invalid setShapes $position $shapes")
 
-  def setClock(studyId: StudyId, position: Position.Ref, clock: Clock)(who: Who): Funit =
+  def setClock(studyId: StudyId, position: Position.Ref, clock: Option[Clock])(who: Who): Funit =
     sequenceStudyWithChapter(studyId, position.chapterId):
-      doSetClock(_, position, clock)(who)
+      case sc @ Study.WithChapter(study, chapter) =>
+        Contribute(who.u, study):
+          if study.isRelay then fufail("Cannot edit clock on relay chapter")
+          else doSetClock(sc, position, clock)(who)
 
-  private def doSetClock(sc: Study.WithChapter, position: Position.Ref, clock: Clock)(
+  private def doSetClock(sc: Study.WithChapter, position: Position.Ref, clock: Option[Clock])(
       who: Who
   ): Funit =
-    sc.chapter.setClock(clock.some, position.path) match
+    sc.chapter.setClock(clock, position.path) match
       case Some(chapter, newCurrentClocks) =>
         setStudyUpdated(sc.study)
         for _ <- chapterRepo.setClockAndDenorm(chapter, position.path, clock, newCurrentClocks)
-        yield sendTo(sc.study.id)(_.setClock(position, clock.centis.some, newCurrentClocks))
+        yield sendTo(sc.study.id)(_.setClock(position, clock.map(_.centis), newCurrentClocks))
       case None =>
         reloadSriBecauseOf(sc.study, who.sri, position.chapterId)
         fufail(s"Invalid setClock $position $clock")
@@ -472,7 +475,7 @@ final class StudyApi(
           .setRootClockFromTags(chapter)
           .so: c =>
             c.root.clock.so: clock =>
-              doSetClock(Study.WithChapter(study, c), Position(c, UciPath.root).ref, clock)(who)
+              doSetClock(Study.WithChapter(study, c), Position(c, UciPath.root).ref, clock.some)(who)
       yield sendTo(study.id)(_.setTags(chapter.id, chapter.tags, who))
 
   def setComment(studyId: StudyId, position: Position.Ref, text: CommentStr)(who: Who) =

modules/study/src/main/StudySocket.scala

@@ -10,7 +10,7 @@ import lila.common.Bus
 import lila.common.Json.{ *, given }
 import lila.room.RoomSocket.{ Protocol as RP, * }
 import lila.core.socket.{ protocol as P, * }
-import lila.tree.Branch
+import lila.tree.{ Branch, Clock }
 import lila.tree.Node.{ Comment, Gamebook, Shape, Shapes }
 import lila.core.study.Visibility
 import cats.mtl.Handle.*
@@ -198,6 +198,18 @@ final private class StudySocket(
               .foreach: id =>
                 applyWho(api.deleteComment(studyId, position.ref, Comment.Id(id)))
 
+        case "setClock" =>
+          logger.info(s"setClock received studyId=$studyId o=$o")
+          reading[AtPosition](o): position =>
+            if (o \ "d" \ "clear").asOpt[Boolean].contains(true) then
+              applyWho(api.setClock(studyId, position.ref, None)(_))
+            else
+              (o \ "d" \ "centis")
+                .asOpt[Int]
+                .filter(_ >= 0)
+                .foreach: centis =>
+                  applyWho(api.setClock(studyId, position.ref, Clock(Centis(centis), false.some).some)(_))
+
         case "setGamebook" =>
           reading[AtPosition](o): position =>
             (o \ "d" \ "gamebook")

translation/source/study.xml

@@ -44,6 +44,10 @@
   <string name="like">Like</string>
   <string name="unlike">Unlike</string>
   <string name="newTag">New tag</string>
+  <string name="addOrEditClockTime">Add or edit clock time</string>
+  <string name="clockTimeFormat">Time format: H:MM:SS (e.g. 1:03:40), MM:SS (3:40), or seconds (40). Optional tenths: 40.5 or 3:40.2. Enter - to clear.</string>
+  <string name="clockTimePlaceholder">H:MM:SS</string>
+  <string name="turnOnRecToSaveClockTimes">Turn on REC (record button below the board) to save clock times.</string>
   <string name="commentThisPosition">Comment on this position</string>
   <string name="commentThisMove">Comment on this move</string>
   <string name="annotateWithGlyphs">Annotate with glyphs</string>

ui/@types/lichess/i18n.d.ts

@@ -5035,6 +5035,8 @@ interface I18n {
     addMembersText: I18nFormat;
     /** Add a new chapter */
     addNewChapter: string;
+    /** Add or edit clock time */
+    addOrEditClockTime: string;
     /** Allow cloning */
     allowCloning: string;
     /** All studies */
@@ -5083,6 +5085,10 @@ interface I18n {
     clearChat: string;
     /** Clear variations */
     clearVariations: string;
+    /** Time format: H:MM:SS (e.g. 1:03:40), MM:SS (3:40), or seconds (40). Optional tenths: 40.5 or 3:40.2. Enter - to clear. */
+    clockTimeFormat: string;
+    /** H:MM:SS */
+    clockTimePlaceholder: string;
     /** Clone */
     cloneStudy: string;
     /** Click the %s button, or right click on the move list on the right.<br>Comments are shared and saved. */
@@ -5355,6 +5361,8 @@ interface I18n {
     timeTrouble: string;
     /** Topics */
     topics: string;
+    /** Turn on REC (record button below the board) to save clock times. */
+    turnOnRecToSaveClockTimes: string;
     /** Unclear position */
     unclearPosition: string;
     /** Unlike */

ui/analyse/css/_player-clock.scss

@@ -39,6 +39,8 @@ $clock-height: 20px;
   height: $clock-height;
   font-weight: bold;
   text-align: center;
+  /* Reserve border space so empty-editable dashed border doesn't cause 1px shift when .active toggles */
+  border: 1px solid transparent;
 
   &.active {
     background: $m-primary_bg--mix-30;
@@ -53,6 +55,61 @@ $clock-height: 20px;
     margin-inline-end: 0.4em;
     color: $c-accent;
   }
+
+  &--editable {
+    cursor: pointer;
+    border: 1px dashed $c-primary;
+    @media (hover: hover) {
+      &:hover {
+        /* Same effect as move sidebar; --c-base is only set inside .tview2 so use $c-font here */
+        background: color-mix(in srgb, $c-font 15%, transparent);
+      }
+    }
+  }
+
+  &--editing {
+    flex-shrink: 0;
+    min-width: 0; /* allow input to size */
+    .analyse__clock-input {
+      min-width: 10em;
+      width: 10em;
+      padding: 0 0.4em;
+      font: inherit;
+      font-weight: bold;
+      text-align: center;
+      border: 1px solid $c-border;
+      border-radius: 3px;
+      background: $c-bg-box;
+      box-sizing: border-box;
+    }
+  }
+
+  .analyse__clock-input--error {
+    border-color: var(--c-bad, #c23) !important;
+    animation: clock-shake 0.3s ease;
+    &:focus {
+      /* Inset box-shadow so the error ring is visible when the top strip is partially covered by the board */
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--c-bad, #c23);
+    }
+  }
+}
+
+@keyframes clock-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-3px);
+  }
+  75% {
+    transform: translateX(3px);
+  }
+}
+
+.analyse__clock-placeholder {
+  opacity: 0.7;
 }
 
 .material {

ui/analyse/css/study/_player.scss

@@ -70,6 +70,10 @@ $player-height: 1.6rem;
     box-shadow: none;
     font-size: 1.2em;
     font-weight: normal;
+
+    &--editing {
+      padding-inline-end: 0;
+    }
   }
 
   &-bot .analyse__clock {

ui/analyse/src/socket.ts

@@ -31,6 +31,7 @@ export interface StudySocketSendParams {
   shapes: (d: ReqPosition & { shapes: Shape[] }) => void;
   setComment: (d: ReqPosition & { id?: string; text: string }) => void;
   deleteComment: (d: ReqPosition & { id: string }) => void;
+  setClock: (d: ReqPosition & { centis?: number; clear?: boolean }) => void;
   setGamebook: (d: ReqPosition & { gamebook: { deviation?: string; hint?: string } }) => void;
   toggleGlyph: (d: ReqPosition & { id: number }) => void;
   explorerGame: (d: ReqPosition & { gameId: string; insert: boolean }) => void;