Transaction: Br4XynL...KoXB

{ "data": { "vlofoto81.near": { "widget": { "RockScissorsPaper": { "": "const widget_owner_id = \"nearukraineguild.near\";\n\nconst OuterWrapper = styled.div`\nposition: fixed;\nheight: 100%;\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n`;\n\nconst Block = styled.div`\n\nbackground-color: black;\n height: 100vh;\n width: 100%;\n`;\n\nconst Text = styled.div`\n position: absolute;\n top: 15%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #ffffff;\n font-family: 'Kodchasan', sans-serif;\n \n font-size: 3vw;\n`;\n\nconst Social = styled.div`\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst Wrapper = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0 auto; /* Вирівнює по центру по горизонталі */\n width: 90%;\n \n padding: 20px;\n color: #ffffff;\n font-family: 'Kodchasan', sans-serif;\n font-size: 3vw;\n`;\n\nconst ButtonContainer = styled.div`\n display: flex;\n justify-content: center; /* Вирівнює кнопки по центру по горизонталі */\n width: 100%; /* Розтягує контейнер на всю ширину */\n \n`;\n\nconst Button = styled.button`\n font-size: 2vw;\n margin: 10px;\n padding: 15px 25px;\n border-radius: 10px;\n cursor: pointer;\n background-color: #203343;\n color: #ffffff;\n border: none;\n outline: none;\n transition: all 0.3s ease;\n &:hover {\n background-color: #5c91df;\n }\n`;\n\nconst ResultText = styled.p`\n font-size: 2.5vw;\n text-align: center; \n`;\n\nconst PrimaryText = styled.p`\n @media (min-width: 512px) {\n font-size: 40px;\n width: 100%;\n }\n\n width: 100%;\n font-size: 20px;\n\n font-family: 'Kodchasan', sans-serif;\n font-weight: 700;\n text-align: center;\n color: #ffffff;\n text-transform: uppercase;\n\n padding: 0;\n margin: 0;\n\n white-space: pre-line;\n`;\n\nconst choices = [\"Камінь\", \"Бумага\", \"Ножиці\"];\n\nconst randomChoice = () => choices[Math.floor(Math.random() * choices.length)];\n\nconst determineWinner = (user, computer) => {\n if (user === computer) return <ResultText>\"Нічия!\"</ResultText>;\n if (\n (user === \"Камінь\" && computer === \"Ножиці\") ||\n (user === \"Бумага\" && computer === \"Камінь\") ||\n (user === \"Ножиці\" && computer === \"Бумага\")\n ) {\n return <ResultText>\"Ви виграли!\"</ResultText>;\n } else {\n return <ResultText>\"Ви програли!\"</ResultText>;\n }\n};\n\nconst [userChoice, setUserChoice] = useState(null);\nconst [computerChoice, setComputerChoice] = useState(null);\nconst [result, setResult] = useState(null);\n\nconst handleClick = (choice) => {\n setUserChoice(choice);\n const computerChoice = randomChoice();\n setComputerChoice(computerChoice);\n setResult(determineWinner(choice, computerChoice));\n};\n\nreturn (\n <Block>\n <OuterWrapper>\n <Widget\n src={`${widget_owner_id}/widget/MysteryBox.Manage.Components.MenuHeader`}\n />\n <Wrapper>\n <PrimaryText>\n <Widget\n src={`${widget_owner_id}/widget/MysteryBox.Manage.Components.PrimaryText`}\n />\n Камінь Ножиці Бумага\n <ButtonContainer>\n <Button onClick={() => handleClick(\"Камінь\")}>Камінь</Button>\n <Button onClick={() => handleClick(\"Бумага\")}>Бумага</Button>\n <Button onClick={() => handleClick(\"Ножиці\")}>Ножиці</Button>\n </ButtonContainer>\n {userChoice && computerChoice && result && (\n <ResultText>\n Ви обрали: {userChoice} / Комп'ютор обрав: {computerChoice}\n <span></span>\n Результат: {result}\n </ResultText>\n )}\n </PrimaryText>\n <Social>\n <Widget\n src={`${widget_owner_id}/widget/MysteryBox.Manage.Components.Socials`}\n />\n <br />\n </Social>\n </Wrapper>\n <Widget\n src={`${widget_owner_id}/widget/MysteryBox.Components.BackgroundStars`}\n />\n </OuterWrapper>\n </Block>\n);\n", "metadata": { "fork_of": "vlofoto81.near/widget/RockScissorsPaper@115166457" } } } } } }