+
+ )
+}
+
+type ActiveGameProps = {
+ numCards: number,
+ // always defined, just to avoid checking it all the time.
+ wordSet: string[],
+ // if undefined, use words.
+ picSet?: PictureSet,
+ // callback when user clicks new game
+ onNewGame?: () => void,
+}
+
+export function ActiveGame({numCards, picSet, wordSet, onNewGame}: ActiveGameProps) {
+ const allIndexes = picSet
+ ? Array.from({ length: picSet.numberOfPics() }, (_, i) => i)
+ : wordSet.map((_, index) => index);
+
+ // wrap this in useState() so that randomization is only done when creating the component.
+ // this probably needs to change when we add starting a new game
+ const [activeIndexes] = useState(randomPick(numCards, allIndexes));
+ const [cardOrder] = useState(randomize(activeIndexes.concat(...activeIndexes)));
+ const [columns, setColumns] = useState(Math.ceil(Math.sqrt(numCards*2)));
+ const containerRef = useRefChoose how many different cards you'd like:
+
+
+
+ And then click here to play:
+
+ {Object.values(CardType).map((cardType) => (
+
+ ))}
+
+ Memory Game
- {wordOrder.map((word, i) => -
+
+ )
}
diff --git a/src/components/ArcSelect.tsx b/src/components/ArcSelect.tsx
new file mode 100644
index 0000000..b6a0d7e
--- /dev/null
+++ b/src/components/ArcSelect.tsx
@@ -0,0 +1,153 @@
+import {FunctionalComponent, JSX} from 'preact';
+
+interface ArcSelectProps {
+ min: number;
+ max: number;
+ val: number;
+ title: string;
+ setVal: (val: number) => void;
+}
+
+class Point {
+ x: number;
+ y: number;
+
+ constructor(x: number, y: number) {
+ this.x = x;
+ this.y = y;
+ }
+
+ polarToCartesian(radius: number, angle: number): Point {
+ return new Point(
+ this.x + radius * Math.cos(angle),
+ this.y + radius * Math.sin(angle)
+ );
+ }
+}
+
+function clamp(value: number, min: number, max: number): number {
+ return Math.min(max, Math.max(min, value));
+}
+
+function buildArcPath(
+ center: Point,
+ innerRadius: number,
+ outerRadius: number,
+ startAngle: number,
+ endAngle: number
+): string {
+ const p1 = center.polarToCartesian(innerRadius, startAngle);
+ const p2 = center.polarToCartesian(innerRadius, endAngle);
+ const p3 = center.polarToCartesian(outerRadius, endAngle);
+ const p4 = center.polarToCartesian(outerRadius, startAngle);
+ const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+
+ return `
+ M ${p1.x} ${p1.y}
+ A ${innerRadius} ${innerRadius} 0 ${largeArc} 1 ${p2.x} ${p2.y}
+ L ${p3.x} ${p3.y}
+ A ${outerRadius} ${outerRadius} 0 ${largeArc} 0 ${p4.x} ${p4.y}
+ Z
+ `.trim();
+}
+
+function getColor(position: number, min: number, max: number): string {
+ const range = max - min;
+ if (range <= 0) {
+ return 'rgb(0, 255, 0)';
+ }
+ const normalized = clamp((position - min) / range, 0, 1); // 0 to 1
+ const orangeGreen = 165;
+
+ // Color scale: green -> yellow -> orange -> red -> purple
+ if (normalized <= 0.25) {
+ // green to yellow
+ const t = normalized / 0.25;
+ const r = Math.round(255 * t);
+ const g = 255;
+ const b = 0;
+ return `rgb(${r}, ${g}, ${b})`;
+ } else if (normalized <= 0.5) {
+ // yellow to orange
+ const t = (normalized - 0.25) / 0.25;
+ const r = 255;
+ const g = Math.round(255 - (255 - orangeGreen) * t);
+ const b = 0;
+ return `rgb(${r}, ${g}, ${b})`;
+ } else if (normalized <= 0.75) {
+ // orange to red
+ const t = (normalized - 0.5) / 0.25;
+ const r = 255;
+ const g = Math.round(orangeGreen * (1 - t));
+ const b = 0;
+ return `rgb(${r}, ${g}, ${b})`;
+ } else {
+ // red to purple
+ const t = (normalized - 0.75) / 0.25;
+ const r = 255;
+ const g = 0;
+ const b = Math.round(255 * t);
+ return `rgb(${r}, ${g}, ${b})`;
+ }
+}
+
+export const ArcSelect: FunctionalComponent
+ {cardOrder.map((cardIndex, i) => {
+ const count = seenCounts[cardIndex] ?? 0;
+ seenCounts[cardIndex] = count + 1;
+ const pulseClass = isWin
+ ? (count % 2 === 0 ? "win-wiggle-left" : "win-wiggle-right")
+ : "";
+
+ return picSet ? (
+ clickCard(cardIndex, i)}
+ picSet={picSet}
+ index={cardIndex}
+ extraClass={pulseClass}
+ />
+ ) : (
+ clickCard(cardIndex, i)}
+ extraClass={pulseClass}
+ />
+ );
+ })}
+
+ {showNewGameButton && (
+
+
+
+ )}
+ onClick()}
- >
- {open || solved ? word : "Look at me."}
-
-}
\ No newline at end of file
diff --git a/src/components/PictureCard.tsx b/src/components/PictureCard.tsx
new file mode 100644
index 0000000..2ea24ee
--- /dev/null
+++ b/src/components/PictureCard.tsx
@@ -0,0 +1,27 @@
+import type {CardProps} from '../model';
+import {BACKSIDE, PictureSet} from '../pictures';
+
+export type PictureCardProps = CardProps & {
+ picSet: PictureSet,
+ index: number;
+}
+
+export function PictureCard({picSet, index, open, solved, onClick, extraClass}: PictureCardProps) {
+ const idx = open || solved ? index : BACKSIDE;
+ const cardSize = picSet.getMaxCardSize();
+ const pos = picSet.getPosition(idx);
+ const imgSize = picSet.getCardSize(pos)
+ const pixelPos = picSet.getPixelPosition(pos);
+ const stateClass = solved ? "solved" : open ? "open" : "hidden";
+ const classes = ["picture-card", stateClass, extraClass].filter(Boolean).join(" ");
+ return onClick()}
+ >
+ 
+
+}
diff --git a/src/components/TextCard.tsx b/src/components/TextCard.tsx
new file mode 100644
index 0000000..2d6e497
--- /dev/null
+++ b/src/components/TextCard.tsx
@@ -0,0 +1,16 @@
+import type {CardProps} from '../model';
+
+export type TextCardProps = CardProps & {
+ word: string;
+}
+
+export function TextCard({word, open, solved, onClick, extraClass}: TextCardProps) {
+ const stateClass = solved ? "solved" : open ? "open" : "hidden";
+ const classes = ["text-card", stateClass, extraClass].filter(Boolean).join(" ");
+ return onClick()}
+ draggable={false}
+ >
+ {open || solved ? word : "Look at me."}
+
+}
diff --git a/src/index.css b/src/index.css
index 7da0bdd..531d8d3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,38 +15,154 @@
body {
margin: 0;
- display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
+.main-header {
+ font: 48px "Garamond", serif;
+}
+
#app {
- max-width: 1280px;
+ display: flex;
+ /*max-width: 1280px;*/
margin: 0 auto;
padding: 2rem;
text-align: center;
}
-.card {
+.setup-explanation {
+ font-size: 18px;
+}
+
+.card-type-button {
padding: 1rem;
margin: 0.5rem;
border-radius: 0.5rem;
- display: inline-block;
- width: 6em;
+ font-size: 1.2rem;
+}
+.cards-container {
+ display: grid;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 0.5rem; /* replaces relying on per-card margins */
+}
+
+.picture-card {
cursor: pointer;
+ margin: 0.5rem;
+ border-radius: 0.5rem;
+
+ /* keep the outer element's size stable */
+ box-sizing: border-box;
+
+ /* center content */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ /* if the image is larger or shifted, don't let it change layout */
+ overflow: hidden;
+
+ user-select: none;
+
+ img {
+ /* this is for centering inside the div */
+ display: block;
+ /* this is for cropping the sprite */
+ object-fit: none;
+ }
}
-.hidden-card {
- background-color: #f677e3;
+.text-card {
+ padding: 1rem;
+ margin: 0.5rem;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 9em;
+ height: 3em;
+ font: 36px "Garamond", serif;
+ color: black;
+ cursor: pointer;
+ user-select: none;
+}
+
+.text-card.hidden {
+ background-color: #f3d4ac;
}
-.open-card {
+.text-card.open {
background-color: #2d4ce8;
}
-.solved-card {
+.text-card.solved {
background-color: #42b983;
-}
\ No newline at end of file
+}
+
+.win-wiggle-left,
+.win-wiggle-right {
+ animation-duration: 0.6s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: 3;
+ animation-fill-mode: none;
+ transform-origin: center;
+ will-change: transform;
+}
+
+.win-wiggle-left {
+ animation-name: winWiggleLeft;
+}
+
+.win-wiggle-right {
+ animation-name: winWiggleRight;
+}
+
+@keyframes winWiggleLeft {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 25% {
+ transform: rotate(-8deg);
+ }
+ 50% {
+ transform: rotate(0deg);
+ }
+ 75% {
+ transform: rotate(8deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes winWiggleRight {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 25% {
+ transform: rotate(8deg);
+ }
+ 50% {
+ transform: rotate(0deg);
+ }
+ 75% {
+ transform: rotate(-8deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+.arc-select-center-text {
+ fill: white;
+ font: 24px "Garamond", serif;
+ tspan {
+ text-anchor: middle;
+ }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 812f602..22a6049 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,3 +3,10 @@ import { App } from './app'
import './index.css'
render(