8<\/div>";
31 | row += "<\/div>";
32 |
33 | if(wheelRef.current){
34 | for(let x = 0; x < 29; x++){
35 | wheelRef.current.innerHTML += row;
36 | }
37 | }
38 | };
39 |
40 | const spinWheel = () => {
41 | const order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4];
42 | const position = Math.floor(Math.random() * order.length);
43 |
44 | const rows = 12;
45 | const card = 75 + 3 * 2;
46 | let landingPosition = (rows * 15 * card) + (position * card);
47 |
48 | const randomize = Math.floor(Math.random() * 75) - (75/2);
49 |
50 | landingPosition = landingPosition + randomize;
51 |
52 | const landingIndex = (position + Math.round(randomize / card)) % order.length;
53 |
54 | const object = {
55 | x: Math.floor(Math.random() * 50) / 100,
56 | y: Math.floor(Math.random() * 20) / 100
57 | };
58 |
59 | if (wheelRef.current) {
60 | wheelRef.current.style.transitionTimingFunction = `cubic-bezier(0,${object.x},${object.y},1)`;
61 | wheelRef.current.style.transitionDuration = '6s';
62 | wheelRef.current.style.transform = `translate3d(-${landingPosition}px, 0px, 0px)`;
63 |
64 | setTimeout(() => {
65 | if(wheelRef.current){
66 | wheelRef.current.style.transitionTimingFunction = '';
67 | wheelRef.current.style.transitionDuration = '';
68 | const resetTo = -(position * card + randomize);
69 | wheelRef.current.style.transform = `translate3d(${resetTo}px, 0px, 0px)`;
70 |
71 | const landingNumber = order[landingIndex];
72 |
73 | if (h1Ref.current) {
74 | h1Ref.current.innerHTML = `Outcome: ${landingNumber} Color: ${landingNumber % 2 === 0 ? 'Black' : 'Red'}`;
75 | }
76 | setIsSpinning(false);
77 | }
78 | }, 6000);
79 | }
80 | };
81 |
82 | useEffect(() => {
83 | initWheel();
84 | }, []);
85 |
86 | const handleClick = () => {
87 | setIsSpinning(true);
88 | spinWheel();
89 | };
90 |
91 | return (
92 |
93 |
ROULETTE
94 |
98 |
99 |
100 |
103 |
104 |
105 | );
106 | };
107 |
108 | export default Roulette;
109 |
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef
,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 |
29 | ))
30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
31 |
32 | const DialogContent = React.forwardRef<
33 | React.ElementRef,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
38 |
46 | {children}
47 |
48 |
49 | Close
50 |
51 |
52 |
53 | ))
54 | DialogContent.displayName = DialogPrimitive.Content.displayName
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | )
68 | DialogHeader.displayName = "DialogHeader"
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | )
82 | DialogFooter.displayName = "DialogFooter"
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 |
96 | ))
97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
98 |
99 | const DialogDescription = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 |
111 | export {
112 | Dialog,
113 | DialogPortal,
114 | DialogOverlay,
115 | DialogClose,
116 | DialogTrigger,
117 | DialogContent,
118 | DialogHeader,
119 | DialogFooter,
120 | DialogTitle,
121 | DialogDescription,
122 | }
123 |
--------------------------------------------------------------------------------
/src/app/create/item/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/components/Button';
4 | import React, { useState } from 'react';
5 | import Image from 'next/image';
6 | import { useToast } from '@/components/ui/use-toast';
7 |
8 | function CreateItem() {
9 | const [name, setName] = useState('');
10 | const [rarity, setRarity] = useState(1);
11 | const [price, setPrice] = useState('');
12 | const [imageURL, setImageURL] = useState('');
13 | const { toast } = useToast();
14 |
15 | const handleRarityChange = (event: React.ChangeEvent) => {
16 | setImageURL('');
17 | setRarity(Number(event.target.value));
18 | };
19 |
20 | const handleSubmit = async (e: { preventDefault: () => void; }) => {
21 | e.preventDefault();
22 |
23 | const itemData = {
24 | name,
25 | rarity,
26 | price: parseFloat(price),
27 | imageURL,
28 | };
29 |
30 | try {
31 | const response = await fetch('/api/item', {
32 | method: 'POST',
33 | headers: {
34 | 'Content-Type': 'application/json',
35 | },
36 | body: JSON.stringify(itemData),
37 | });
38 |
39 | if (!response.ok) {
40 | throw new Error(`HTTP error! status: ${response.status}`);
41 | }
42 |
43 | toast({
44 | variant: 'success',
45 | title: "Successfull Item Creation",
46 | description: "You have successfully created " + name + " with rarity " + rarity + " that costs " + price + "!",
47 | })
48 |
49 | setName('');
50 | setRarity(Number(1));
51 | setPrice('');
52 | setImageURL('');
53 | } catch (error) {
54 | console.error(error);
55 | }
56 | };
57 |
58 | return (
59 |
116 | );
117 | }
118 |
119 | export default CreateItem;
--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | // Inspired by react-hot-toast library
2 | import * as React from "react"
3 |
4 | import type {
5 | ToastActionElement,
6 | ToastProps,
7 | } from "@/components/ui/toast"
8 |
9 | const TOAST_LIMIT = 1
10 | const TOAST_REMOVE_DELAY = 1000000
11 |
12 | type ToasterToast = ToastProps & {
13 | id: string
14 | title?: React.ReactNode
15 | description?: React.ReactNode
16 | action?: ToastActionElement
17 | }
18 |
19 | const actionTypes = {
20 | ADD_TOAST: "ADD_TOAST",
21 | UPDATE_TOAST: "UPDATE_TOAST",
22 | DISMISS_TOAST: "DISMISS_TOAST",
23 | REMOVE_TOAST: "REMOVE_TOAST",
24 | } as const
25 |
26 | let count = 0
27 |
28 | function genId() {
29 | count = (count + 1) % Number.MAX_SAFE_INTEGER
30 | return count.toString()
31 | }
32 |
33 | type ActionType = typeof actionTypes
34 |
35 | type Action =
36 | | {
37 | type: ActionType["ADD_TOAST"]
38 | toast: ToasterToast
39 | }
40 | | {
41 | type: ActionType["UPDATE_TOAST"]
42 | toast: Partial
43 | }
44 | | {
45 | type: ActionType["DISMISS_TOAST"]
46 | toastId?: ToasterToast["id"]
47 | }
48 | | {
49 | type: ActionType["REMOVE_TOAST"]
50 | toastId?: ToasterToast["id"]
51 | }
52 |
53 | interface State {
54 | toasts: ToasterToast[]
55 | }
56 |
57 | const toastTimeouts = new Map>()
58 |
59 | const addToRemoveQueue = (toastId: string) => {
60 | if (toastTimeouts.has(toastId)) {
61 | return
62 | }
63 |
64 | const timeout = setTimeout(() => {
65 | toastTimeouts.delete(toastId)
66 | dispatch({
67 | type: "REMOVE_TOAST",
68 | toastId: toastId,
69 | })
70 | }, TOAST_REMOVE_DELAY)
71 |
72 | toastTimeouts.set(toastId, timeout)
73 | }
74 |
75 | export const reducer = (state: State, action: Action): State => {
76 | switch (action.type) {
77 | case "ADD_TOAST":
78 | return {
79 | ...state,
80 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
81 | }
82 |
83 | case "UPDATE_TOAST":
84 | return {
85 | ...state,
86 | toasts: state.toasts.map((t) =>
87 | t.id === action.toast.id ? { ...t, ...action.toast } : t
88 | ),
89 | }
90 |
91 | case "DISMISS_TOAST": {
92 | const { toastId } = action
93 |
94 | // ! Side effects ! - This could be extracted into a dismissToast() action,
95 | // but I'll keep it here for simplicity
96 | if (toastId) {
97 | addToRemoveQueue(toastId)
98 | } else {
99 | state.toasts.forEach((toast) => {
100 | addToRemoveQueue(toast.id)
101 | })
102 | }
103 |
104 | return {
105 | ...state,
106 | toasts: state.toasts.map((t) =>
107 | t.id === toastId || toastId === undefined
108 | ? {
109 | ...t,
110 | open: false,
111 | }
112 | : t
113 | ),
114 | }
115 | }
116 | case "REMOVE_TOAST":
117 | if (action.toastId === undefined) {
118 | return {
119 | ...state,
120 | toasts: [],
121 | }
122 | }
123 | return {
124 | ...state,
125 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 | }
127 | }
128 | }
129 |
130 | const listeners: Array<(state: State) => void> = []
131 |
132 | let memoryState: State = { toasts: [] }
133 |
134 | function dispatch(action: Action) {
135 | memoryState = reducer(memoryState, action)
136 | listeners.forEach((listener) => {
137 | listener(memoryState)
138 | })
139 | }
140 |
141 | type Toast = Omit
142 |
143 | function toast({ ...props }: Toast) {
144 | const id = genId()
145 |
146 | const update = (props: ToasterToast) =>
147 | dispatch({
148 | type: "UPDATE_TOAST",
149 | toast: { ...props, id },
150 | })
151 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
152 |
153 | dispatch({
154 | type: "ADD_TOAST",
155 | toast: {
156 | ...props,
157 | id,
158 | open: true,
159 | onOpenChange: (open) => {
160 | if (!open) dismiss()
161 | },
162 | },
163 | })
164 |
165 | return {
166 | id: id,
167 | dismiss,
168 | update,
169 | }
170 | }
171 |
172 | function useToast() {
173 | const [state, setState] = React.useState(memoryState)
174 |
175 | React.useEffect(() => {
176 | listeners.push(setState)
177 | return () => {
178 | const index = listeners.indexOf(setState)
179 | if (index > -1) {
180 | listeners.splice(index, 1)
181 | }
182 | }
183 | }, [state])
184 |
185 | return {
186 | ...state,
187 | toast,
188 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 | }
190 | }
191 |
192 | export { useToast, toast }
193 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as ToastPrimitives from "@radix-ui/react-toast"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 | import { X } from "lucide-react"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const ToastProvider = ToastPrimitives.Provider
9 |
10 | const ToastViewport = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 |
22 | ))
23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
24 |
25 | const toastVariants = cva(
26 | "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
27 | {
28 | variants: {
29 | variant: {
30 | default: "border bg-background text-foreground",
31 | destructive:
32 | "destructive group border-destructive bg-destructive text-destructive-foreground",
33 | success: "success group",
34 | },
35 | },
36 | defaultVariants: {
37 | variant: "default",
38 | },
39 | }
40 | )
41 |
42 | const Toast = React.forwardRef<
43 | React.ElementRef,
44 | React.ComponentPropsWithoutRef &
45 | VariantProps
46 | >(({ className, variant, ...props }, ref) => {
47 | return (
48 |
53 | )
54 | })
55 | Toast.displayName = ToastPrimitives.Root.displayName
56 |
57 | const ToastAction = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
69 | ))
70 | ToastAction.displayName = ToastPrimitives.Action.displayName
71 |
72 | const ToastClose = React.forwardRef<
73 | React.ElementRef,
74 | React.ComponentPropsWithoutRef
75 | >(({ className, ...props }, ref) => (
76 |
85 |
86 |
87 | ))
88 | ToastClose.displayName = ToastPrimitives.Close.displayName
89 |
90 | const ToastTitle = React.forwardRef<
91 | React.ElementRef,
92 | React.ComponentPropsWithoutRef
93 | >(({ className, ...props }, ref) => (
94 |
99 | ))
100 | ToastTitle.displayName = ToastPrimitives.Title.displayName
101 |
102 | const ToastDescription = React.forwardRef<
103 | React.ElementRef,
104 | React.ComponentPropsWithoutRef
105 | >(({ className, ...props }, ref) => (
106 |
111 | ))
112 | ToastDescription.displayName = ToastPrimitives.Description.displayName
113 |
114 | type ToastProps = React.ComponentPropsWithoutRef
115 |
116 | type ToastActionElement = React.ReactElement
117 |
118 | export {
119 | type ToastProps,
120 | type ToastActionElement,
121 | ToastProvider,
122 | ToastViewport,
123 | Toast,
124 | ToastTitle,
125 | ToastDescription,
126 | ToastClose,
127 | ToastAction,
128 | }
129 |
--------------------------------------------------------------------------------
/src/app/case/[slug]/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useEffect, useState } from 'react';
4 | import { fetchCase } from '@/lib/fetch-case';
5 | import { Button } from '@/components/Button';
6 | import Image from 'next/image';
7 | import { Skeleton } from "@/components/ui/skeleton"
8 | import useStore from '@/lib/global-store';
9 |
10 | interface PageProps {
11 | params: {
12 | slug: string
13 | }
14 | }
15 |
16 | interface Case {
17 | id: number;
18 | name: string;
19 | image: string;
20 | items: any[];
21 | history: any[];
22 | price: number;
23 | odds: Odds[];
24 | }
25 |
26 | interface Odds {
27 | id: number;
28 | caseId: number;
29 | itemId: number;
30 | Odds: number;
31 | }
32 |
33 | const CaseOpener = ({ params }: PageProps) => {
34 | const { slug } = params;
35 |
36 | const [caseData, setCaseData] = useState(null);
37 | const [error, setError] = useState(null);
38 | const [isButtonClicked, setIsButtonClicked] = useState(false);
39 | const [itemsWithOdds, setItemsWithOdds] = useState([]);
40 | const [selectedItem, setSelectedItem] = useState(null);
41 | const [animationStarted, setAnimationStarted] = useState(false);
42 | const balance = useStore((state: { balance: number } | unknown) => (state as { balance: number }).balance);
43 | const updateBalance = useStore((state: unknown) => (state as { updateBalance: (amount: number) => Promise }).updateBalance);
44 |
45 | useEffect(() => {
46 | fetchCase(slug).then(caseData => {
47 | if ('error' in caseData) {
48 | setError(caseData.error);
49 | } else {
50 | setCaseData(caseData);
51 | if (caseData && caseData.length > 0) {
52 | const items = caseData[0].items;
53 | const odds = caseData[0].odds;
54 | const itemsWithOdds = items && odds ? items.map((item: { id: any; }) => {
55 | const oddsItem = odds?.find((odds: { itemId: any; }) => odds.itemId === item.id);
56 | return { ...item, odds: oddsItem ? oddsItem.Odds : null };
57 | }) : [];
58 | setItemsWithOdds(itemsWithOdds);
59 | }
60 | }
61 | });
62 | }, [slug]);
63 |
64 | let name: string | undefined, price: number | undefined, image: string | undefined;
65 |
66 | if (caseData && caseData.length > 0) {
67 | name = caseData[0].name;
68 | price = caseData[0].price;
69 | image = caseData[0].image;
70 | }
71 |
72 | if (error) {
73 | window.location.href = '/404';
74 | }
75 |
76 | const openCase = async () => {
77 | if(!price) return;
78 | if (balance < price) {
79 | alert('Not enough balance');
80 | return;
81 | }
82 |
83 | const response = await fetch('/api/open', {
84 | method: 'POST',
85 | headers: {
86 | 'Content-Type': 'application/json',
87 | },
88 | body: JSON.stringify({ caseId: Number(slug) }),
89 | });
90 |
91 | if (!response.ok) {
92 | const errorData = await response.json();
93 | console.error('Error:', errorData.error);
94 | return;
95 | }
96 |
97 | const data = await response.json();
98 | const updatedBalance = data.leftBalance;
99 | const receivedItem = data.item;
100 |
101 | await updateBalance(updatedBalance);
102 |
103 | console.log(`You received: ${receivedItem.id}`);
104 |
105 | setSelectedItem(receivedItem);
106 | };
107 |
108 | const generateAnimationItems = () => {
109 | if (!itemsWithOdds) return <>;
110 | return Array(30).fill(null).map((_, index) => {
111 | const item = itemsWithOdds[Math.floor(Math.random() * itemsWithOdds.length)];
112 | return (
113 |
114 |
115 |
116 | );
117 | });
118 | };
119 |
120 | return (
121 | <>
122 |
123 | {name ?
{name}
:
}
124 |
125 | {image ?
126 |
127 | :
}
128 |
129 | {isButtonClicked ?
130 |
131 | {generateAnimationItems()}
132 |
: <>}
133 |
134 |
135 |
146 |
Items in case:
147 |
149 | {itemsWithOdds.length > 0 ? itemsWithOdds.map((item, index) => (
150 |
151 | {item.odds &&
{item.odds.toFixed(2)}%
}
152 |
153 |
{item.name}
154 |
${item.price.toFixed(2)}
155 |
156 | )) :
157 | <>
158 |
159 |
160 |
161 |
162 |
163 |
164 | }
165 |
150 |
173 |
174 |
175 | {currentItems.map((item, index) => (
176 |
handleItemClick(item)}
180 | >
181 |
182 |
{item.name}
183 |
${item.price.toFixed(2)}
184 |
185 | ))}
186 |
187 |
188 | setCurrentPage((old) => Math.max(old - 1, 1))} />
189 | {Array.from({length: totalPages}, (_, i) => (
190 |
191 | setCurrentPage(i + 1)}>{i + 1}
192 |
193 | ))}
194 | setCurrentPage((old) => Math.min(old + 1, totalPages))} />
195 |
196 |
197 |
199 |
Total Price: ${price.toFixed(2)}
200 |
Input the odds
201 |
The odds must add up to 100%.
202 |
204 | {selectedItems.map(itemId => {
205 | const item = allItems.find(item => item.id === itemId);
206 | if (item) {
207 | const itemOdds = odds[itemId] || 0;
208 | const cost = item.price * itemOdds / 100;
209 | return (
210 |
211 |
{`${item.name}`}
212 |
setOdds((prevOdds) => ({ ...prevOdds, [itemId]: parseFloat(e.target.value)}))}
219 | />
220 |
${cost.toFixed(2)}
221 |
222 | );
223 | }
224 | return null;
225 | })}
226 |