Hangman
8 |Find the hidden word - Enter a letter
9 | 10 | ) 11 | } 12 | 13 | export default Header -------------------------------------------------------------------------------- /src/components/games/Hangman/components/Notification.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const Notification = ({ showNotification }) => { 4 | return ( 5 |
6 |
8 | )
9 | }
10 |
11 | export default Notification
--------------------------------------------------------------------------------
/src/components/games/Hangman/components/Popup.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { checkWin } from '../helpers/helpers';
3 | import { useMoralis} from 'react-moralis'
4 | import{useNavigate} from 'react-router-dom'
5 |
6 | const Popup = ({correctLetters, wrongLetters, selectedWord, setPlayable, playAgain}) => {
7 | let finalMessage = '';
8 | let finalMessageRevealWord = '';
9 | let playable = true;
10 | const {user,setUserData} = useMoralis()
11 | const navigate = useNavigate()
12 |
13 | if( checkWin(correctLetters, wrongLetters, selectedWord) === 'win' ) {
14 | alert('You won!')
15 | finalMessage = 'Congratulations! You won! 😃';
16 |
17 | playable = false;
18 | setUserData({points:(user.attributes.points+200)})
19 | navigate('/games')
20 | } else if( checkWin(correctLetters, wrongLetters, selectedWord) === 'lose' ) {
21 | finalMessage = 'Unfortunately you lost. 😕';
22 | finalMessageRevealWord = `...the word was: ${selectedWord}`;
23 | playable = false;
24 | navigate('/games')
25 | }
26 |
27 | useEffect(() => {
28 | setPlayable(playable);
29 | });
30 |
31 | return (
32 | You have already entered this letter
7 |
33 |
39 | )
40 | }
41 |
42 | export default Popup;
--------------------------------------------------------------------------------
/src/components/games/Hangman/components/Word.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const Word = ({ selectedWord, correctLetters }) => {
4 |
5 | return (
6 |
34 |
38 | {finalMessage}
35 |{finalMessageRevealWord}
36 | 37 |
7 | {selectedWord.split('').map((letter, i) => {
8 | return (
9 |
10 | {correctLetters.includes(letter) ? letter : ''}
11 |
12 | )
13 | })}
14 |
15 | )
16 | }
17 |
18 | export default Word;
--------------------------------------------------------------------------------
/src/components/games/Hangman/components/WrongLetters.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const WrongLetters = ({ wrongLetters }) => {
4 |
5 | return (
6 |
7 |
16 | )
17 | }
18 |
19 | export default WrongLetters
--------------------------------------------------------------------------------
/src/components/games/Hangman/helpers/helpers.js:
--------------------------------------------------------------------------------
1 | export function showNotification(setter) {
2 | setter(true);
3 | setTimeout(() => {
4 | setter(false);
5 | }, 2000);
6 | }
7 |
8 | export function checkWin(correct, wrong, word) {
9 | let status = 'win';
10 |
11 | // Check for win
12 | word.split('').forEach(letter => {
13 | if (!correct.includes(letter)) {
14 | status = '';
15 | }
16 | });
17 |
18 | // Check for lose
19 | if (wrong.length === 6) status = 'lose';
20 |
21 | return status
22 | }
--------------------------------------------------------------------------------
/src/components/games/Tetris/Tetris.css:
--------------------------------------------------------------------------------
1 | .game-block {
2 | margin: 0;
3 | padding: 0;
4 | width: 2rem;
5 | height: 2rem;
6 | border: 1px solid rgba(210, 203, 203, 0.606);
7 | }
8 |
9 | .piece-i {
10 | background-color: #33e1f4;
11 | }
12 |
13 | .piece-j {
14 | background-color: rgb(17, 64, 251);
15 | }
16 |
17 | .piece-l {
18 | background-color: rgb(247, 181, 12);
19 | }
20 |
21 | .piece-o {
22 | background-color: #e0f404;
23 | }
24 |
25 | .piece-s {
26 | background-color: rgb(2, 252, 81);
27 | }
28 |
29 | .piece-t {
30 | background-color: rgb(175, 20, 242);
31 | }
32 |
33 | .piece-z {
34 | background-color: #e32a27;
35 | }
36 |
37 | .piece-preview {
38 | background-color: rgb(247, 247, 247);
39 | opacity: 0.25;
40 | }
41 |
42 | .tetris-container {
43 | display: flex;
44 | flex-direction: row;
45 | gap: 30px
46 | }
47 |
48 | .points {
49 | display: flex;
50 | flex-direction: column;
51 | align-items: flex-start;
52 | justify-content: flex-start;
53 | }
54 |
55 | h1 {
56 | font-weight: 1000;
57 | font-size: 75px;
58 | }
--------------------------------------------------------------------------------
/src/components/games/Tetris/Tetris.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Tetris from 'react-tetris';
3 | import './Tetris.css';
4 | import { Flex } from '@chakra-ui/react';
5 | import {useNavigate } from 'react-router-dom'
6 | import {useMoralis} from 'react-moralis'
7 |
8 | const TetrisApp = () => {
9 | const navigate = useNavigate()
10 | const {user,setUserData} = useMoralis()
11 |
12 | function clickHandler(wonPoints){
13 | setUserData({points:(user.attributes.points + wonPoints)})
14 | navigate('/games')
15 | }
16 |
17 | return (
18 |
8 | {wrongLetters.length > 0 &&
9 |
15 | Wrong
10 | } 11 | {wrongLetters 12 | .map((letter, i) => {letter}) 13 | .reduce((prev, curr) => prev === null ? [curr] : [prev, ', ', curr], null)} 14 |Tetris
22 | 23 |
49 |
62 | )}
63 |
50 |
53 | Points: {points}
51 |Lines Cleared: {linesCleared}
52 |
57 |
60 | )}
61 | Game Over
58 | 59 |
7 |
19 | )
20 |
21 | }
22 |
23 | export default GetStarted;
--------------------------------------------------------------------------------
/src/components/mini/HeroSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMoralis } from 'react-moralis';
3 | import { Button, Flex, Text, Box } from '@chakra-ui/react';
4 | import { Link } from 'react-scroll';
5 | import { FaAngleDoubleDown } from 'react-icons/fa';
6 | import Video from '../../assets/videos/bg-video.mp4';
7 |
8 | const HeroSection = () => {
9 | const { authenticate, isAuthenticated, isAuthenticating, logout } = useMoralis();
10 |
11 | return (
12 | <>
13 | 1
8 | Sign In Using Metamask
9 |
10 | 2
11 | Earn Points Daily By Doing Actions on Your Profile Page
12 |
13 | 3
14 | Earn Points Daily By Winning Games in the ZIMS Arcade
15 |
16 | 4
17 | Use Your Points to Mint NFTs
18 |
15 |
24 |
25 |
26 |
27 |
28 |
36 |
44 | ZIMS
45 |
46 |
47 | Play Games · Win Points · Mint NFTs
48 |
49 |
69 |
70 |
71 |
74 |
75 |
76 |
16 |
17 |
18 | )
19 | }
20 |
21 | export default NFTMinter
--------------------------------------------------------------------------------
/src/components/mini/Navbar.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
2 |
3 | .zims-logo {
4 | font-family: 'Press Start 2P';
5 | font-size: 30px;
6 | color: gold;
7 | }
--------------------------------------------------------------------------------
/src/components/mini/Navbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 | import { useMoralis } from 'react-moralis';
4 | import { BsPersonFill, BsCaretDownFill } from 'react-icons/bs';
5 | import { HiLogout } from 'react-icons/hi';
6 | import { SiApplearcade } from 'react-icons/si';
7 | import { IoSettings, IoStorefront } from 'react-icons/io5';
8 | import Sidebar from './Sidebar';
9 | import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
10 | import {
11 | Box,
12 | Flex,
13 | Text,
14 | IconButton,
15 | Button,
16 | Stack,
17 | Collapse,
18 | useColorMode,
19 | useColorModeValue,
20 | useBreakpointValue,
21 | useDisclosure,
22 | Menu,
23 | MenuList,
24 | MenuButton,
25 | MenuItem,
26 | MenuDivider,
27 | } from '@chakra-ui/react';
28 |
29 | const Navbar = () => {
30 | const { colorMode, toggleColorMode } = useColorMode();
31 | const { isOpen, onToggle, onClose } = useDisclosure();
32 | const { logout } = useMoralis();
33 | const navigate = useNavigate();
34 |
35 | const Logout = () => {
36 | logout();
37 | navigate('/');
38 | };
39 |
40 | const onClick = destination => {
41 | onClose();
42 | navigate('/' + destination);
43 | };
44 |
45 | return (
46 |
29 | Loading Chart
}
34 | data = {
35 | [
36 | ['Time', 'Points'],
37 | ...data.filter(data => (data.attributes.user.id === user.id))
38 | .reverse()
39 | .map((data) => [moment(data.attributes.updatedAt).format('MM/DD h a'), data.attributes.points])
40 | ]
41 | }
42 | options = {
43 | {
44 | title: '',
45 | legend: { position: 'top' },
46 | hAxis: { title: 'Timestamp', titleTextStyle: { color: '#4FD1C5' }, slantedText: true, slantedTextAngle: 80 },
47 | vAxis: { title: 'Points', titleTextStyle: { color: '#4FD1C5' }, minValue: 100000 },
48 | chartArea: { width: '60%', height: '50%' }
49 | }
50 | }
51 | />
52 | )
53 | }
54 |
55 | export default PointsSummary;
--------------------------------------------------------------------------------
/src/components/mini/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useMoralis } from 'react-moralis';
3 | import { Link } from 'react-router-dom';
4 | import {
5 | Container,
6 | Flex,
7 | Text,
8 | Box,
9 | Heading,
10 | Button,
11 | } from '@chakra-ui/react';
12 | import moment from 'moment';
13 | import { useMoralisCloudFunction } from 'react-moralis';
14 |
15 | const Sidebar = ({ isMobile }) => {
16 | const { user, refetchUserData } = useMoralis();
17 | const { data, isLoading } = useMoralisCloudFunction('getUsers');
18 |
19 | useEffect(() => {
20 | refetchUserData();
21 | }, [isLoading]);
22 |
23 | return (
24 |
19 | 
22 |
23 |
24 | COMING SOON
25 |
26 |
27 | Marketplace
20 |
21 |