chesspal 0.1.0 → 0.2.0

package/dist/page/talk/talk.css

@@ -0,0 +1,958 @@
+/* The talk's column: the players' cards with their pictures and names, the faces, the words said and the box to write in, the card of a page offline,
+   and the notes laid over the board between games */
+
+/* The picture stays at the card's top left, however many lines the card has; the clock in the middle */
+.player-line {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.player-line > .clock {
+    align-self: center;
+}
+
+.player-line > svg {
+    flex: none;
+}
+
+.who {
+    flex: 1;
+    min-width: 0;
+    line-height: 1.25;
+}
+
+.name {
+    font-weight: 600;
+}
+
+/* The AI's name, which the player may choose long, stays on one line: whole in its tooltip */
+.player.ai .name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* Under the AI's name, the model it plays with (D-82): one line, whole in its tooltip */
+.player .signed {
+    color: var(--soft);
+    font-size: 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.turn {
+    color: var(--accent);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+/* A player's clock, in Zoe's pill: the running one in the accent colour, red in the last seconds */
+.player .clock {
+    flex: none;
+    padding: 4px 10px;
+    border-radius: 7px;
+    background: var(--page);
+    font-size: 20px;
+    font-weight: 600;
+    font-variant-numeric: lining-nums tabular-nums;
+    letter-spacing: 0.01em;
+}
+
+.player .clock.running {
+    background: var(--accent);
+    color: var(--on-accent);
+}
+
+.player .clock.low {
+    color: var(--low-time);
+}
+
+.player .clock.running.low {
+    background: var(--low-time);
+    color: #fff;
+}
+
+/* The clocks wait for the player (Zoe): the button that starts them takes a line of the player's card, under the clock it starts, off the board's squares;
+   between games the new game takes the same line, in the clock's place (D-77) */
+.player-line:has(> .start-clocks, > .next-game) {
+    flex-wrap: wrap;
+    row-gap: 10px;
+}
+
+.start-clocks,
+.next-game {
+    flex: 1 0 100%;
+    justify-content: center;
+    padding: 8px 14px;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.start-clocks .icon {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+}
+
+.next-game .icon {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2.2;
+}
+
+/* Between games a card has no side under the name (D-77): the name alone, in the middle of the picture */
+.player-line > .who:not(:has(.note)) {
+    align-self: center;
+}
+
+.player-line > .who:not(:has(.note)) .taken:empty {
+    display: none;
+}
+
+/* The pieces taken overlap within a kind, close enough that all fifteen and the score stay on one line */
+.taken {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0;
+    white-space: nowrap;
+    min-height: 20px;
+    margin-top: 3px;
+}
+
+.taken .group {
+    display: inline-flex;
+}
+
+/* A kind starts close to the one before: the piece's own margin is the gap */
+.taken .group + .group {
+    margin-left: -3px;
+}
+
+/* The pieces taken are the set's small ones, whose colours and edges are their own */
+.taken .piece {
+    width: 20px;
+    height: 20px;
+}
+
+/* Pawns comb tight; the other pieces show more of themselves, a pair of rooks or bishops two pieces still (Zoe) */
+.taken .piece + .piece {
+    margin-left: -11px;
+}
+
+.taken .pawns .piece + .piece {
+    margin-left: -15px;
+}
+
+.balance {
+    flex: none;
+    margin-left: 2px;
+    color: var(--soft);
+    font-size: 13px;
+    font-weight: 600;
+}
+
+/* The badges of a side's moves, in its card under the pieces taken */
+.badge-counts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 10px;
+    list-style: none;
+    margin: 6px 0 0;
+    padding: 0;
+    font-size: 13px;
+}
+
+.badge-counts li {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* The player's face, masked by a circle */
+.avatar {
+    clip-path: circle(50%);
+}
+
+.avatar .back {
+    fill: var(--say);
+}
+
+.avatar .shirt {
+    fill: var(--accent);
+}
+
+.avatar .skin {
+    fill: #f1c6a0;
+}
+
+.avatar .hair {
+    fill: #4a3426;
+}
+
+.avatar .eye {
+    fill: #2b2420;
+}
+
+.avatar .smile {
+    fill: none;
+    stroke: #2b2420;
+    stroke-width: 1.6;
+    stroke-linecap: round;
+}
+
+/* The dialogs (D-23, D-45, D-48): the player's picture, which a click changes, their name, which opens the profiles, the wizard, the profiles, the new game and the analyses */
+.avatar.photo {
+    clip-path: none;
+    border-radius: 50%;
+    object-fit: cover;
+    box-shadow: 0 0 0 1px var(--line);
+}
+
+/* A drawn avatar, its colour in the picture: the page's colour while it loads */
+.avatar.drawn {
+    background: var(--say);
+}
+
+.me {
+    position: relative;
+    flex: none;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    line-height: 0;
+    cursor: pointer;
+}
+
+.me-cover {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.45);
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.12s;
+}
+
+.me-cover .icon {
+    width: 45%;
+    height: 45%;
+}
+
+.me:hover .me-cover,
+.me:focus-visible .me-cover {
+    opacity: 1;
+}
+
+/* Where nothing hovers, a camera in the corner says the picture changes */
+.me-badge {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    display: none;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: var(--on-accent);
+    box-shadow: 0 0 0 2px var(--card);
+}
+
+.me-badge .icon {
+    width: 12px;
+    height: 12px;
+}
+
+@media (hover: none) {
+    .me-badge {
+        display: grid;
+    }
+}
+
+.profile-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.profile-name span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.profile-name .icon {
+    flex: none;
+    width: 15px;
+    height: 15px;
+    color: var(--soft);
+}
+
+.profile-name:hover,
+.profile-name:hover .icon {
+    color: var(--accent);
+}
+
+/* The Torretta, whose eyes blink now and then, and its moods (D-70): a new face that pops in, never fading out, a red light when worried, out when sad, a light that breathes when
+   thoughtful */
+.torretta .antenna {
+    fill: none;
+    stroke: var(--torretta-shade);
+    stroke-width: 4;
+    stroke-linecap: round;
+}
+
+.torretta .light {
+    fill: var(--torretta-light);
+    transition: fill 0.2s;
+}
+
+.torretta.mood-worried .light {
+    fill: var(--torretta-alarm);
+}
+
+.torretta.mood-thoughtful .light {
+    animation: ponder 2.4s ease-in-out infinite;
+}
+
+.torretta.mood-sad .light {
+    fill: var(--torretta-shade);
+}
+
+@keyframes ponder {
+    50% {
+        fill: var(--torretta-ponder);
+    }
+}
+
+.torretta .expression.changed {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: face-in 0.16s ease-out;
+}
+
+@keyframes face-in {
+    from {
+        transform: scale(0.8);
+    }
+}
+
+.torretta .shade {
+    fill: var(--torretta-shade);
+}
+
+.torretta .body {
+    fill: var(--torretta-body);
+}
+
+.torretta .screen {
+    fill: var(--torretta-screen);
+}
+
+.torretta .eyes,
+.torretta .mouth {
+    fill: var(--torretta-face);
+}
+
+.torretta .expression .line,
+.torretta .brows {
+    fill: none;
+    stroke: var(--torretta-face);
+    stroke-width: 3.4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.torretta .eyes {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: blink 6s infinite;
+}
+
+@keyframes blink {
+    0%,
+    95%,
+    100% {
+        transform: scaleY(1);
+    }
+
+    97% {
+        transform: scaleY(0.1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .torretta .eyes,
+    .torretta .expression.changed,
+    .torretta.mood-thoughtful .light {
+        animation: none;
+    }
+
+    .torretta .light {
+        transition: none;
+    }
+}
+
+/* The bubbles: the AI's under its card, the tail under the Torretta's centre (14 px of padding, 48 px picture), and the player's above their box */
+.says,
+.sent {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+/* The bubbles never scroll: those that do not fit whole are hidden, and on the side away from the card they overflow toward */
+.says {
+    overflow: hidden;
+    min-height: 0;
+    padding-top: 12px;
+}
+
+.says:empty {
+    display: none;
+}
+
+.say {
+    position: relative;
+    background: var(--say);
+    color: var(--say-ink);
+    border-radius: var(--bubble);
+    padding: 10px 13px;
+    font-size: 14.5px;
+    line-height: 1.45;
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+}
+
+.say:first-child::before {
+    content: "";
+    position: absolute;
+    left: 29px;
+    top: -10px;
+    border: 10px solid transparent;
+    border-top: 0;
+    border-bottom-color: var(--say);
+}
+
+.sent {
+    align-items: flex-end;
+    justify-content: flex-end;
+    margin-bottom: 8px;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.sent li {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    max-width: 88%;
+}
+
+.said {
+    margin: 0;
+    background: var(--accent);
+    color: var(--on-accent);
+    border-radius: var(--bubble) var(--bubble) 4px var(--bubble);
+    padding: 8px 12px;
+    font-size: 14.5px;
+    line-height: 1.4;
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+}
+
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    margin-top: 3px;
+    font-size: 12px;
+    color: var(--soft);
+}
+
+.status .icon {
+    width: 15px;
+    height: 15px;
+    stroke-width: 2;
+}
+
+.status.read {
+    color: var(--accent);
+    font-weight: 600;
+}
+
+/* The box the player writes in: a bubble whose tail points at their picture */
+.compose {
+    position: relative;
+    background: var(--card);
+    border: 1px solid var(--line);
+    border-radius: var(--bubble);
+    padding: 8px 8px 8px 12px;
+    margin: 0 0 12px;
+    box-shadow: var(--shadow);
+}
+
+.compose::after {
+    content: "";
+    position: absolute;
+    left: 31px;
+    bottom: -8px;
+    width: 14px;
+    height: 14px;
+    background: var(--card);
+    border-right: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    transform: rotate(45deg);
+    border-bottom-right-radius: 3px;
+}
+
+.compose:focus-within,
+.compose:focus-within::after {
+    border-color: var(--accent);
+}
+
+.compose textarea {
+    display: block;
+    width: 100%;
+    resize: none;
+    border: 0;
+    background: none;
+    padding: 2px 0;
+    font-size: 14.5px;
+    line-height: 1.45;
+    min-height: 44px;
+    max-height: 96px;
+    field-sizing: content;
+    outline: none;
+}
+
+.compose textarea::placeholder {
+    color: var(--soft);
+}
+
+.foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 4px;
+}
+
+.foot .hint,
+.foot .count {
+    font-size: 12px;
+    color: var(--soft);
+}
+
+.foot .count {
+    font-variant-numeric: tabular-nums;
+}
+
+.send {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border: 0;
+    border-radius: 8px;
+    padding: 6px 10px 6px 12px;
+    background: var(--accent);
+    color: var(--on-accent);
+    font-size: 13.5px;
+    font-weight: 600;
+}
+
+.send .icon {
+    width: 15px;
+    height: 15px;
+    stroke-width: 2;
+}
+
+.send:disabled {
+    background: var(--quote);
+    color: var(--soft);
+    cursor: default;
+}
+
+.limit {
+    margin: 0 4px 6px 0;
+    padding: 7px 10px;
+    border-radius: 8px;
+    background: var(--warn-back);
+    color: var(--ink);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.limit:empty {
+    display: none;
+}
+
+/* Turned round: the player on top, the AI below; the tails turn with them */
+.flipped .talk,
+.flipped .ai-block,
+.flipped .you-block {
+    flex-direction: column-reverse;
+}
+
+.flipped .says {
+    justify-content: flex-end;
+    padding: 0 0 12px;
+}
+
+.flipped .say:first-child::before {
+    content: none;
+}
+
+.flipped .say:last-child::after {
+    content: "";
+    position: absolute;
+    left: 29px;
+    bottom: -10px;
+    border: 10px solid transparent;
+    border-bottom: 0;
+    border-top-color: var(--say);
+}
+
+.flipped .compose {
+    margin: 12px 0 0;
+}
+
+.flipped .compose::after {
+    bottom: auto;
+    top: -8px;
+    transform: rotate(225deg);
+}
+
+.flipped .sent {
+    justify-content: flex-start;
+    margin: 8px 0 0;
+}
+
+/* In analysis nothing in the talk gives way: on a short screen the talk scrolls whole */
+.talk.studied {
+    overflow-y: auto;
+}
+
+.talk.studied > section,
+.talk.studied > section > * {
+    flex: none;
+}
+
+.ai-note {
+    display: grid;
+    gap: 6px;
+    margin-top: 12px;
+}
+
+.ai-note .who {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--soft);
+    font-size: 13px;
+}
+
+/* Who made the analysis, signed under the Torretta's name in the Torretta's height (D-81, Zoe's sketch A) */
+.ai-note .signed {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.25;
+}
+
+.ai-note .signed small {
+    font-size: 12px;
+    overflow-wrap: anywhere;
+}
+
+/* Only the note's last bubble has a tail, pointing down at the Torretta beside the AI's name, the board turned round or not */
+.ai-note > .say::before,
+.ai-note > .say::after {
+    content: none;
+}
+
+.ai-note > .say:has(+ .who)::after {
+    content: "";
+    position: absolute;
+    left: 8px;
+    bottom: -9px;
+    border: 10px solid transparent;
+    border-bottom: 0;
+    border-top-color: var(--say);
+}
+
+.ai-note > .say + .who {
+    margin-top: 4px;
+}
+
+/* In analysis the board turned round changes which side's card is on top, never the order of the talk */
+.flipped .talk.studied,
+.flipped .talk.studied > section {
+    flex-direction: column;
+}
+
+.move-note .head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* The AI's judgment of the player's last move, with the helps on (D-78): a line that opens on its note */
+.move-note.judged summary {
+    cursor: pointer;
+    list-style: none;
+}
+
+.move-note.judged summary::-webkit-details-marker {
+    display: none;
+}
+
+/* The note is the bubble's content: in the bubble's own ink, not the soft one of a side note (Zoe) */
+.move-note .note {
+    display: block;
+    margin-top: 4px;
+    color: var(--say-ink);
+    font-size: 14.5px;
+}
+
+/* The words the AI put in bold, in the titles' colour; the squares and moves in its words in the accent too, to find on the board */
+.say b {
+    color: var(--ink);
+    font-weight: 700;
+}
+
+.say .on-board {
+    color: var(--accent);
+}
+
+/* What the colours drawn with the note or the coach's hint mean, the ones it uses */
+.legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px 12px;
+    margin-top: 6px;
+    color: var(--soft);
+    font-size: 12px;
+}
+
+.legend > span {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.legend i {
+    width: 14px;
+    height: 3px;
+    border-radius: 2px;
+    background: var(--ring);
+}
+
+.legend .green {
+    --ring: var(--drawn-green);
+}
+
+.legend .red {
+    --ring: var(--drawn-red);
+}
+
+.legend .yellow {
+    --ring: var(--drawn-yellow);
+}
+
+.legend .blue {
+    --ring: var(--drawn-blue);
+}
+
+/* The move's number, which the list far below gives on a phone */
+.move-note .move-number {
+    display: none;
+    margin-right: 2px;
+    color: var(--soft);
+    font-size: 12px;
+    font-weight: 400;
+}
+
+/* The page without its server, after /clear in Claude's app (Zoe): a card in the middle of the window, over the page that waits under it, dimmed and still;
+   its light breathes while the page tries again */
+.offline {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 20;
+    width: min(400px, calc(100vw - 32px));
+    margin: 0;
+    padding: 20px 24px;
+    transform: translate(-50%, -50%);
+    border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
+    border-radius: var(--radius);
+    background: var(--card);
+    color: var(--ink);
+    /* The dialogs' backdrop, over the whole window */
+    box-shadow: 0 0 0 100vmax rgba(16, 22, 29, 0.5), 0 16px 40px rgb(0 0 0 / 22%);
+    font-size: 15px;
+    line-height: 1.5;
+    text-align: center;
+    text-wrap: pretty;
+}
+
+.offline::before {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 0 auto 12px;
+    border-radius: 50%;
+    background: var(--accent);
+    animation: reconnecting 1.6s ease-in-out infinite;
+}
+
+@keyframes reconnecting {
+    50% {
+        opacity: 0.25;
+    }
+}
+
+/* Grey, darker and a little blurred, so it reads as stopped even when the board's theme is already grey */
+.offline + .app {
+    filter: grayscale(1) brightness(0.85) blur(2px);
+}
+
+/* No chat hears the player (Zoe): a note under the AI's card, by its stopped clock, on a page still in use. The AI's words below it lose their tail */
+.asleep {
+    flex: none;
+    margin: var(--between) 0 0;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in oklab, var(--hover-edge) 55%, var(--line));
+    border-radius: var(--radius);
+    background: var(--warn-back);
+    color: var(--ink);
+    font-size: 13.5px;
+    line-height: 1.45;
+    text-wrap: pretty;
+}
+
+.flipped .asleep {
+    margin: 0 0 var(--between);
+}
+
+.ai-block:has(> .asleep) .say::before,
+.ai-block:has(> .asleep) .say::after {
+    content: none;
+}
+
+/* With the talk folded, the same note and the button that starts the clocks over the board's edge on the AI's side, away from the squares of the player's
+   first move (Stefano); clicks go through the note to the squares, and both step aside for a lifted piece, a promotion and a refused move */
+.over-board {
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    width: min(460px, calc(100% - 24px));
+    transform: translateX(-50%);
+    pointer-events: none;
+    animation: appear 200ms;
+}
+
+.flipped .over-board {
+    top: auto;
+    bottom: 12px;
+    flex-direction: column-reverse;
+}
+
+.over-board > .asleep {
+    margin: 0;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 10px 28px rgb(0 0 0 / 20%);
+}
+
+.over-board > .start-clocks {
+    flex: none;
+    padding: 9px 22px;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 8px 20px rgb(0 0 0 / 22%);
+    pointer-events: auto;
+}
+
+:root.dragging .over-board,
+.board-wrap:has(.promotion, .notice) > .over-board {
+    visibility: hidden;
+}
+
+/* A phone shows the talk whatever its fold: the note and the button stay in the cards */
+@media (max-width: 840px) {
+    .over-board {
+        display: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .offline::before,
+    .over-board {
+        animation: none;
+    }
+}
+
+/* The AI's level on its card: a button that shows what it sees, under it where the browser anchors popovers, else in the middle */
+.level-name {
+    margin: -4px -2px;
+    padding: 4px 2px;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: help;
+    text-decoration: underline dotted;
+    text-underline-offset: 3px;
+    anchor-name: --ai-level;
+}
+
+.level-tip {
+    max-width: min(280px, calc(100vw - 32px));
+    padding: 8px 10px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: var(--card);
+    color: var(--ink);
+    font-size: 13px;
+    line-height: 1.35;
+    box-shadow: var(--shadow);
+}
+
+@supports (position-area: bottom) {
+    .level-tip {
+        position-anchor: --ai-level;
+        position-area: bottom span-right;
+        position-try-fallbacks: flip-block, flip-inline;
+        inset: auto;
+        margin: 6px 16px 6px 0;
+    }
+}
+
+/* On a phone, or in a narrow window, the number of the judged move shows in its note */
+@media (max-width: 840px) {
+    .move-note .move-number {
+        display: inline;
+    }
+}