Skip to content

Commit de8ee89

Browse files
committed
feat: add more Netlify brand
1 parent 72ca388 commit de8ee89

File tree

3 files changed

+76
-18
lines changed

3 files changed

+76
-18
lines changed

pnpm-lock.yaml

Lines changed: 3 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/ui/components.tsx/Game.tsx

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { useMemo, useState } from "react";
2-
import { Button, ButtonGroup, Card } from "@netlify/sdk/ui/react/components";
2+
import {
3+
Button,
4+
ButtonGroup,
5+
Card,
6+
Tooltip,
7+
} from "@netlify/sdk/ui/react/components";
38

49
const NETLIFY_EPOCH = new Date("2014-11-09");
510
const SECONDS_SINCE_NETLIFY_EPOCH =
@@ -10,38 +15,47 @@ const CONFIG = {
1015
{
1116
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH / 60 / 60 / 24 / 365), // ~10
1217
multiplier: 2,
18+
unit: "years",
1319
},
1420
{
1521
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH / 60 / 60 / 24 / 30), // ~100
1622
multiplier: 2,
23+
unit: "months",
1724
},
1825
{
1926
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH / 60 / 60 / 24 / 7), // ~500
2027
multiplier: 4,
28+
unit: "weeks",
2129
},
2230
{
2331
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH / 60 / 60 / 24), // ~4K
2432
multiplier: 4,
33+
unit: "days",
2534
},
2635
{
2736
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH / 60 / 60), // ~100K
2837
multiplier: 8,
38+
unit: "hours",
2939
},
3040
{
3141
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH / 60), // ~5M
3242
multiplier: 16,
43+
unit: "minutes",
3344
},
3445
{
3546
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH), // ~300M
3647
multiplier: 32,
48+
unit: "seconds",
3749
},
3850
{
3951
threshold: Math.floor(SECONDS_SINCE_NETLIFY_EPOCH) * 1000, // ~300B
4052
multiplier: 1024,
53+
unit: "milliseconds",
4154
},
4255
{
4356
threshold: Number.MAX_SAFE_INTEGER,
4457
multiplier: 1,
58+
unit: "",
4559
},
4660
],
4761
};
@@ -57,34 +71,74 @@ const ClickerButtonGroup = ({
5771
() =>
5872
completedLevels
5973
.reduce(
60-
(acc, { multiplier }) => [
74+
(acc, level) => [
6175
...acc,
62-
(acc[acc.length - 1] ?? 1) * multiplier,
76+
{
77+
...level,
78+
multiplier:
79+
(acc[acc.length - 1]?.multiplier ?? 1) * level.multiplier,
80+
},
6381
],
64-
[] as number[],
82+
[] as typeof CONFIG.levels,
6583
)
6684
.reverse(),
6785
[completedLevels],
6886
);
6987

7088
return (
7189
<ButtonGroup>
72-
{multipliers.map((multiplier, index) => (
73-
<Button key={index} onClick={() => onClick(multiplier)}>
74-
Click {multiplier}x
75-
</Button>
90+
{multipliers.map((level, index) => (
91+
<Tooltip
92+
type="info"
93+
disabled={level.multiplier === 1}
94+
contents={`Netlify is ${level.threshold} ${level.unit} old!`}
95+
>
96+
<Button key={index} onClick={() => onClick(level.multiplier)}>
97+
Click {level.multiplier}x
98+
</Button>
99+
</Tooltip>
76100
))}
77101
</ButtonGroup>
78102
);
79103
};
80104

105+
// TODO(serhalp) Check dark mode
106+
// const NetlifyLogo = () => (
107+
// <svg className="tw-size-9" viewBox="0 0 128 128">
108+
// <path
109+
// fill="rgb(12, 42, 42)"
110+
// d="m125.2 54.8-52-52L71.3.9 69.2 0H58.8l-2.1.9-1.9 1.9-52 52-1.9 1.9-.9 2.1v10.3l.9 2.1 1.9 1.9 52 52 1.9 1.9 2.1.9h10.3l2.1-.9 1.9-1.9 52-52 1.9-1.9.9-2.1V58.8l-.9-2.1-1.8-1.9z"
111+
// />
112+
// <path
113+
// fill="white"
114+
// d="M78.9 80.5H71l-.7-.7V61.3c0-3.3-1.3-5.9-5.3-6-2-.1-4.4 0-6.9.1l-.4.4v24l-.7.7h-7.9l-.7-.7V48.1l.7-.7H67c6.9 0 12.6 5.6 12.6 12.6v19.8l-.7.7z"
115+
// />
116+
// <path
117+
// fill="rgb(50, 230, 226)"
118+
// d="m38.4 30.8 7.3 7.3v5.8l-.8.8h-5.8l-7.3-7.3v-1.1l5.5-5.5h1.1zm.2 37.2v-8l-.7-.7h-28l-.7.7v8l.7.7H38l.6-.7zm.5 15.7L31.8 91v1.1l5.5 5.5h1.1l7.3-7.3v-5.8l-.8-.8h-5.8zM60 11.3l-.6.7v25l.7.7H68l.7-.7V12l-.7-.7h-8zm0 79.1-.7.7v25l.7.7h8l.7-.7v-25l-.7-.7h-8zm58.1-31h-28l-.7.6v8l.7.7h28.1l.7-.7v-8l-.8-.6z"
119+
// />
120+
// </svg>
121+
// );
122+
123+
const YouWin = () => (
124+
<div className="tw-flex tw-flex-col tw-place-content-center">
125+
<div className="tw-text-2xl tw-text-netlify-teal">You win!</div>{" "}
126+
{/* FIXME(serhalp) Tailwind animations aren't working for some reason */}
127+
{/* <div className="tw-animate-spin"> */}
128+
{/* <NetlifyLogo /> */}
129+
{/* </div> */}
130+
</div>
131+
);
132+
81133
export const Game = () => {
82134
const [clickCount, setClickCount] = useState(0);
83135
const [remainingLevels, setRemainingLevels] = useState([...CONFIG.levels]);
84136
const [completedLevels, setCompletedLevels] = useState([
85-
{ threshold: 0, multiplier: 1 },
137+
{ threshold: 0, multiplier: 1, unit: "" },
86138
]);
87139

140+
const hasWon = remainingLevels.length == 0;
141+
88142
const handleClick = (count: number) => {
89143
setClickCount((prev) => {
90144
const cur = prev + count;
@@ -103,7 +157,9 @@ export const Game = () => {
103157
return (
104158
<>
105159
<Card className="tw-text-center tw-text-xl">
106-
Clicks: <span className="tw-font-bold">{clickCount}</span>
160+
Clicks:{" "}
161+
<span className="tw-font-bold">{!hasWon ? clickCount : "∞"}</span>
162+
{hasWon ? <YouWin /> : null}
107163
</Card>
108164
<Card>
109165
<ClickerButtonGroup

tailwind.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,11 @@ import config from "@netlify/sdk/ui/react/tailwind-config";
33
export default {
44
presets: [config],
55
content: ["./src/ui/index.html", "./src/ui/**/*.{js,jsx,ts,tsx}"],
6+
theme: {
7+
extend: {
8+
colors: {
9+
"netlify-teal": "#014847",
10+
},
11+
},
12+
},
613
};

0 commit comments

Comments
 (0)