Tonk issue #11 — hand-point counter design mockups

issue11-option1-badge.svg

issue11-option2-statusbar.svg

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600" viewBox="0 0 900 600" font-family="-apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif">
  <defs>
    <radialGradient id="felt2" cx="50%" cy="34%" r="80%">
      <stop offset="0%" stop-color="#2a6e4c"/>
      <stop offset="48%" stop-color="#1e5b3e"/>
      <stop offset="100%" stop-color="#123b28"/>
    </radialGradient>
  </defs>
  <rect width="900" height="600" fill="#3e2714"/>
  <rect x="26" y="26" width="848" height="548" rx="38" fill="url(#felt2)" stroke="#000" stroke-opacity="0.35" stroke-width="2"/>

  <!-- status bar, extended to include the human's point total -->
  <rect x="60" y="46" width="780" height="34" rx="17" fill="rgba(7,35,23,0.5)"/>
  <text x="86" y="68" font-size="13" font-weight="700" letter-spacing="1.2" fill="#cfead9">HAND 4 · STAKE $2</text>
  <circle cx="270" cy="63" r="2.5" fill="#cfead9" opacity="0.5"/>
  <text x="286" y="68" font-size="13" font-weight="800" letter-spacing="1.2" fill="#e0bf4e">YOUR HAND: 15 PTS</text>
  <rect x="620" y="52" width="94" height="22" rx="11" fill="rgba(224,191,78,0.18)" stroke="rgba(224,191,78,0.5)"/>
  <text x="667" y="67" text-anchor="middle" font-size="11.5" font-weight="700" fill="#e0bf4e">YOUR TURN</text>

  <g font-size="13" fill="#efe7d0" text-anchor="middle">
    <circle cx="220" cy="130" r="28" fill="#123b28" stroke="#cfead9" stroke-opacity="0.3" stroke-width="2"/>
    <text x="220" y="135">Doug</text>
    <circle cx="450" cy="112" r="28" fill="#123b28" stroke="#cfead9" stroke-opacity="0.3" stroke-width="2"/>
    <text x="450" y="117">Scott</text>
    <circle cx="680" cy="130" r="28" fill="#123b28" stroke="#e0bf4e" stroke-width="3"/>
    <text x="680" y="135" font-weight="700">Greg</text>
  </g>

  <g transform="translate(450,300)">
    <rect x="-130" y="-62" width="80" height="112" rx="10" fill="#8c2f2f" opacity="0.9"/>
    <text x="-90" y="0" text-anchor="middle" font-size="11.5" fill="#efe7d0">STOCK 28</text>
    <rect x="24" y="-62" width="80" height="112" rx="10" fill="#f7f3e8" stroke="#d8d2c0" stroke-width="2"/>
    <text x="64" y="4" text-anchor="middle" font-size="22" fill="#b3382c">♥</text>
    <text x="64" y="62" text-anchor="middle" font-size="11.5" fill="#efe7d0">DISCARD</text>
  </g>

  <g transform="translate(450,530)">
    <g transform="rotate(-9) translate(-150,10)"><rect width="70" height="98" rx="8" fill="#f7f3e8" stroke="#d8d2c0" stroke-width="2"/></g>
    <g transform="rotate(-4) translate(-88,-6)"><rect width="70" height="98" rx="8" fill="#f7f3e8" stroke="#d8d2c0" stroke-width="2"/></g>
    <g transform="rotate(1) translate(-25,-14)"><rect width="70" height="98" rx="8" fill="#f7f3e8" stroke="#d8d2c0" stroke-width="2"/></g>
    <g transform="rotate(6) translate(38,-6)"><rect width="70" height="98" rx="8" fill="#f7f3e8" stroke="#d8d2c0" stroke-width="2"/></g>
    <g transform="rotate(11) translate(100,10)"><rect width="70" height="98" rx="8" fill="#f7f3e8" stroke="#d8d2c0" stroke-width="2"/></g>
  </g>

  <text x="450" y="588" text-anchor="middle" font-size="12" fill="#cfead9" opacity="0.75">Point total joins the existing Hand/Stake status line — no new element near the cards</text>
</svg>

issue11-option3-gauge.svg