Merge remote-tracking branch 'origin/main' into mg-game-context

src/App.css

@@ -84,14 +84,3 @@ div#game {
 .summary button {
   margin-top: 1rem;
 }
-
-#header {
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid gray;
-  margin-bottom: 0.5rem;
-}
-
-#header a {
-  text-decoration: underline;
-  margin-right: 1rem;
-}

src/App.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import './App.css';
+import { Header } from './components/Header';
 import { InfoDialog } from './components/InfoDialog';
 import { PicketSign } from './components/PicketSign';
 import { ResultsDialog } from './components/ResultsDialog';
@@ -33,15 +34,14 @@ function App() {
 
   return (
     <>
-      <div id="header">
-        <a href="https://nytimesguild.org/tech/">More Games</a>
-        <a
-          style={{ cursor: 'pointer' }}
+      <Header>
+        <span
+          className="link-alike"
           onClick={() => setInfoDialogOpen(!infoDialogOpen)}
         >
           What’s this?
-        </a>
-      </div>
+        </span>
+      </Header>
 
       <div id="game-container">
         <div id="game">

src/components/Header/Header.css

@@ -0,0 +1,33 @@
+#header {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid gray;
+  margin-bottom: 0.5rem;
+  border: none;
+}
+
+#header a {
+  text-decoration: underline;
+}
+
+.header-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  > div {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  > div.header-title {
+    justify-content: center;
+    font-size: x-large;
+  }
+
+  > div.header-links {
+    justify-content: end;
+    & > * {
+      margin-left: 1rem;
+    }
+  }
+}

src/components/Header/index.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import './Header.css';
+
+export const Header = ({ children }: PropsWithChildren) => (
+  <header id="header">
+    <div className="header-container">
+      <div />
+      <div className="header-title">
+        <b>Match Strike</b>
+      </div>
+      <div className="header-links">
+        <a href="https://nytimesguild.org/tech/guild-builds/">More Games</a>
+        {children}
+      </div>
+    </div>
+  </header>
+);

src/components/InfoDialog/InfoDialog.css

@@ -1,17 +1,3 @@
-.info-dialog {
-  z-index: 100;
-  overflow-y: scroll;
-  border: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  /* justify-content: center; */
-  /* align-items: center; */
-}
-
-h2 {
-  margin-top: 0;
+.info-container {
+  width: min(100%, 65ch);
 }

src/components/InfoDialog/index.tsx

@@ -1,16 +1,17 @@
 import { Dialog } from '../Dialog';
+import './InfoDialog.css';
 
 export const InfoDialog = ({ onClose }: { onClose: () => void }) => {
   return (
-    <Dialog onClose={onClose}>
+    <Dialog onClose={onClose} centerX>
       <div className="info-container">
         <h2>What’s this?</h2>
 
         <p>
-          A Times Tech Guild-themed variant on the classic Memory card game,
-          where playing cards are placed face down in a grid format and then
-          turned over two at a time, seeking matching pairs. Instead of playing
-          cards, we used strike placards.
+          Match Strike is a Times Tech Guild-themed variant on the classic
+          Memory card game, where playing cards are placed face down in a grid
+          format and then turned over two at a time, seeking matching pairs.
+          Instead of playing cards, we used strike placards.
         </p>
 
         <h3>Why did we build it?</h3>
@@ -22,7 +23,7 @@ export const InfoDialog = ({ onClose }: { onClose: () => void }) => {
           supporters can play games without crossing the picket digital line.
         </p>
 
-        <h3>Why are you on strike?</h3>
+        <h3>Why is the Tech Guild on strike?</h3>
 
         <p>
           The Times Tech Guild—unionized workers who build and maintain

src/components/ResultsDialog/ResultsDialog.css

@@ -13,3 +13,14 @@
   flex-direction: column;
   gap: 1rem;
 }
+
+.attempts,
+.time {
+  margin: 0;
+}
+
+p.square-key {
+  > span:not(:last-child) {
+    margin-right: 1rem;
+  }
+}

src/components/ResultsDialog/index.tsx

@@ -49,6 +49,11 @@ export const ResultsDialog = ({
             <span>{square}</span>
           ))}
         </div>
+        <p className="square-key">
+          <span>🟩 = 1️</span>
+          <span>🟨 = 2</span>
+          <span>🟥 = 3+</span>
+        </p>
         <button onClick={copyResults}>Copy to Clipboard</button>
         <button type="button" onClick={onReset}>
           Play Again

src/index.css

@@ -21,10 +21,13 @@
   height: 100vh;
 }
 
-a {
+a,
+.link-alike {
   font-weight: 500;
   color: #646cff;
   text-decoration: inherit;
+  cursor: pointer;
+  text-decoration: underline;
 }
 a:hover {
   color: #535bf2;