diff --git a/package.json b/package.json index 4d6f733..3ecb408 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,13 @@ "astro": "^4.0.7", "clsx": "2.0.0", "framer-motion": "10.16.16", + "html-to-image": "1.11.11", "nanostores": "0.9.5", "react": "^18.2.0", "react-dom": "^18.2.0", "sharp": "^0.33.1", "tailwindcss": "^3.4.0", + "tailwind-merge": "2.2.0", "typescript": "^5.3.3" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17c1e9b..234110e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ dependencies: framer-motion: specifier: 10.16.16 version: 10.16.16(react-dom@18.2.0)(react@18.2.0) + html-to-image: + specifier: 1.11.11 + version: 1.11.11 nanostores: specifier: 0.9.5 version: 0.9.5 @@ -47,6 +50,9 @@ dependencies: sharp: specifier: ^0.33.1 version: 0.33.1 + tailwind-merge: + specifier: 2.2.0 + version: 2.2.0 tailwindcss: specifier: ^3.4.0 version: 3.4.0 @@ -461,6 +467,13 @@ packages: '@babel/types': 7.23.6 dev: false + /@babel/runtime@7.23.7: + resolution: {integrity: sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.1 + dev: false + /@babel/template@7.22.15: resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} engines: {node: '>=6.9.0'} @@ -2885,6 +2898,10 @@ packages: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} dev: false + /html-to-image@1.11.11: + resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} + dev: false + /html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} dev: false @@ -4305,6 +4322,10 @@ packages: picomatch: 2.3.1 dev: false + /regenerator-runtime@0.14.1: + resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + dev: false + /rehype-parse@9.0.0: resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==} dependencies: @@ -4828,6 +4849,12 @@ packages: tslib: 2.6.2 dev: true + /tailwind-merge@2.2.0: + resolution: {integrity: sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==} + dependencies: + '@babel/runtime': 7.23.7 + dev: false + /tailwindcss@3.4.0: resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==} engines: {node: '>=14.0.0'} diff --git a/public/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf new file mode 100644 index 0000000..68ebcbb Binary files /dev/null and b/public/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf differ diff --git a/public/fonts/sukhumvit-set/SukhumvitSet-Light.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Light.ttf new file mode 100644 index 0000000..dc9dc22 Binary files /dev/null and b/public/fonts/sukhumvit-set/SukhumvitSet-Light.ttf differ diff --git a/public/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf new file mode 100644 index 0000000..38ee27a Binary files /dev/null and b/public/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf differ diff --git a/public/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf new file mode 100644 index 0000000..f897f94 Binary files /dev/null and b/public/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf differ diff --git a/public/fonts/sukhumvit-set/SukhumvitSet-Text.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Text.ttf new file mode 100644 index 0000000..69c3c6c Binary files /dev/null and b/public/fonts/sukhumvit-set/SukhumvitSet-Text.ttf differ diff --git a/public/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf new file mode 100644 index 0000000..da6c626 Binary files /dev/null and b/public/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf differ diff --git a/src/assets/blue-lagoon.png b/src/assets/elements/blue-lagoon.png similarity index 100% rename from src/assets/blue-lagoon.png rename to src/assets/elements/blue-lagoon.png diff --git a/src/assets/bottle.png b/src/assets/elements/bottle.png similarity index 100% rename from src/assets/bottle.png rename to src/assets/elements/bottle.png diff --git a/src/assets/cake-1.png b/src/assets/elements/cake-1.png similarity index 100% rename from src/assets/cake-1.png rename to src/assets/elements/cake-1.png diff --git a/src/assets/cake-2.png b/src/assets/elements/cake-2.png similarity index 100% rename from src/assets/cake-2.png rename to src/assets/elements/cake-2.png diff --git a/src/assets/calendar.png b/src/assets/elements/calendar.png similarity index 100% rename from src/assets/calendar.png rename to src/assets/elements/calendar.png diff --git a/src/assets/casette.png b/src/assets/elements/casette.png similarity index 100% rename from src/assets/casette.png rename to src/assets/elements/casette.png diff --git a/src/assets/Cosmopolitan.png b/src/assets/elements/cosmopolitan.png similarity index 100% rename from src/assets/Cosmopolitan.png rename to src/assets/elements/cosmopolitan.png diff --git a/src/assets/donut.png b/src/assets/elements/donut.png similarity index 100% rename from src/assets/donut.png rename to src/assets/elements/donut.png diff --git a/src/assets/drinks.png b/src/assets/elements/drinks.png similarity index 100% rename from src/assets/drinks.png rename to src/assets/elements/drinks.png diff --git a/src/assets/gin-and-tonic.png b/src/assets/elements/gin-and-tonic.png similarity index 100% rename from src/assets/gin-and-tonic.png rename to src/assets/elements/gin-and-tonic.png diff --git a/src/assets/headphone.png b/src/assets/elements/headphone.png similarity index 100% rename from src/assets/headphone.png rename to src/assets/elements/headphone.png diff --git a/src/assets/heart-1.png b/src/assets/elements/heart-1.png similarity index 100% rename from src/assets/heart-1.png rename to src/assets/elements/heart-1.png diff --git a/src/assets/heart-2.png b/src/assets/elements/heart-2.png similarity index 100% rename from src/assets/heart-2.png rename to src/assets/elements/heart-2.png diff --git a/src/assets/icecream-1.png b/src/assets/elements/icecream-1.png similarity index 100% rename from src/assets/icecream-1.png rename to src/assets/elements/icecream-1.png diff --git a/src/assets/icecream-2.png b/src/assets/elements/icecream-2.png similarity index 100% rename from src/assets/icecream-2.png rename to src/assets/elements/icecream-2.png diff --git a/src/assets/elements/lavender-lemonade.png b/src/assets/elements/lavender-lemonade.png new file mode 100644 index 0000000..ad80083 Binary files /dev/null and b/src/assets/elements/lavender-lemonade.png differ diff --git a/src/assets/letter.png b/src/assets/elements/letter.png similarity index 100% rename from src/assets/letter.png rename to src/assets/elements/letter.png diff --git a/src/assets/lightning.png b/src/assets/elements/lightning.png similarity index 100% rename from src/assets/lightning.png rename to src/assets/elements/lightning.png diff --git a/src/assets/elements/logo.png b/src/assets/elements/logo.png new file mode 100644 index 0000000..d897753 Binary files /dev/null and b/src/assets/elements/logo.png differ diff --git a/src/assets/music.png b/src/assets/elements/music.png similarity index 100% rename from src/assets/music.png rename to src/assets/elements/music.png diff --git a/src/assets/orange.png b/src/assets/elements/orange.png similarity index 100% rename from src/assets/orange.png rename to src/assets/elements/orange.png diff --git a/src/assets/palette.png b/src/assets/elements/palette.png similarity index 100% rename from src/assets/palette.png rename to src/assets/elements/palette.png diff --git a/src/assets/pina-colada.png b/src/assets/elements/pina-colada.png similarity index 100% rename from src/assets/pina-colada.png rename to src/assets/elements/pina-colada.png diff --git a/src/assets/radio.png b/src/assets/elements/radio.png similarity index 100% rename from src/assets/radio.png rename to src/assets/elements/radio.png diff --git a/src/assets/rose.png b/src/assets/elements/rose.png similarity index 100% rename from src/assets/rose.png rename to src/assets/elements/rose.png diff --git a/src/assets/strawberry.png b/src/assets/elements/strawberry.png similarity index 100% rename from src/assets/strawberry.png rename to src/assets/elements/strawberry.png diff --git a/src/assets/elements/summer-berry-sangria.png b/src/assets/elements/summer-berry-sangria.png new file mode 100644 index 0000000..feef440 Binary files /dev/null and b/src/assets/elements/summer-berry-sangria.png differ diff --git a/src/assets/vinyl.png b/src/assets/elements/vinyl.png similarity index 100% rename from src/assets/vinyl.png rename to src/assets/elements/vinyl.png diff --git a/src/assets/lavender-lemonade.png b/src/assets/lavender-lemonade.png deleted file mode 100644 index 3669a8f..0000000 Binary files a/src/assets/lavender-lemonade.png and /dev/null differ diff --git a/src/assets/summer-berry-sangria.png b/src/assets/summer-berry-sangria.png deleted file mode 100644 index 9b05d2e..0000000 Binary files a/src/assets/summer-berry-sangria.png and /dev/null differ diff --git a/src/components/story/Button.tsx b/src/components/story/Button.tsx new file mode 100644 index 0000000..1aff750 --- /dev/null +++ b/src/components/story/Button.tsx @@ -0,0 +1,17 @@ +interface Props { + text: string; + handleClick?: () => void; +} + +const Button = ({ text, handleClick }: Props) => { + return ( + + ); +}; + +export default Button; diff --git a/src/components/story/ButtonSet.tsx b/src/components/story/ButtonSet.tsx new file mode 100644 index 0000000..dcc38b3 --- /dev/null +++ b/src/components/story/ButtonSet.tsx @@ -0,0 +1,47 @@ +import { BACKGROUND_BOX, TEXT, type Cocktail } from "@/data/cocktail"; +import { cn } from "@/lib/utils"; +import * as htmlToImage from "html-to-image"; +interface Props extends Cocktail {} + +const ButtonSet = ({ variant }: Props): JSX.Element => { + const downloadImage = () => { + const result = document.getElementById("result"); + if (!result) return; + htmlToImage.toJpeg(result, { quality: 0.96 }).then(function (dataUrl) { + const link = document.createElement("a"); + link.download = "result.jpeg"; + link.href = dataUrl; + link.click(); + }); + }; + + return ( +
+ + กลับสู่หน้าหลัก + + +
+ ); +}; + +export default ButtonSet; diff --git a/src/components/story/Card.tsx b/src/components/story/Card.tsx new file mode 100644 index 0000000..92d480f --- /dev/null +++ b/src/components/story/Card.tsx @@ -0,0 +1,36 @@ +import { useRef, type ReactNode } from "react"; + +import { cn } from "@/lib/utils"; + +import { BACKGROUND_BOX, NAME, TEXT, type Cocktail } from "@/data/cocktail"; + +interface Props extends Cocktail { + children: ReactNode; + img: string; +} + +const Card = ({ variant, children, img }: Props) => { + const ref = useRef(null); + + return ( +
+
+ +

+ {NAME[variant]} +

+
+ {children} +
+
+
+ ); +}; + +export default Card; diff --git a/src/components/story/ChoiceCard.tsx b/src/components/story/ChoiceCard.tsx new file mode 100644 index 0000000..7d18c20 --- /dev/null +++ b/src/components/story/ChoiceCard.tsx @@ -0,0 +1,22 @@ +import type { ReactNode } from "react"; + +interface Props { + header: string; + children: ReactNode; +} + +const ChoiceCard = ({ header, children }: Props) => { + return ( +
+

+ {header} +

+ {children} +
+ ); +}; + +export default ChoiceCard; diff --git a/src/components/story/FooterDecorator.astro b/src/components/story/FooterDecorator.astro new file mode 100644 index 0000000..dce0c35 --- /dev/null +++ b/src/components/story/FooterDecorator.astro @@ -0,0 +1,63 @@ +--- +import { Image } from "astro:assets"; + +import Cake1 from "@/assets/elements/cake-1.png"; +import Calendar from "@/assets/elements/calendar.png"; +import Donut from "@/assets/elements/donut.png"; +import Drinks from "@/assets/elements/drinks.png"; +import Heart1 from "@/assets/elements/heart-1.png"; +import Letter from "@/assets/elements/letter.png"; +import Orange from "@/assets/elements/orange.png"; +import Palette from "@/assets/elements/palette.png"; +import Strawberry from "@/assets/elements/strawberry.png"; +--- + +
+ + + + + + + + + +
diff --git a/src/components/story/ScoredButton.tsx b/src/components/story/ScoredButton.tsx new file mode 100644 index 0000000..5f1d2e9 --- /dev/null +++ b/src/components/story/ScoredButton.tsx @@ -0,0 +1,17 @@ +import { addScores } from "../../store/score.ts"; +import Button from "./Button"; + +interface Props { + text: string; + scores: number[]; +} + +const ScoredButton = ({ text, scores }: Props): JSX.Element => { + const handleClick = () => { + addScores(scores); + }; + + return