-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Made everything Prettier and added a discord button so you guys can come hangout!
- Loading branch information
1 parent
e6f7aeb
commit 2aec2b9
Showing
1 changed file
with
42 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,61 @@ | ||
| /* eslint-disable */ | ||
| import React from 'react' | ||
| import useScript from '../components/scripts/useScript' | ||
| import gameList from '../games.json' | ||
| import { useState, useEffect } from 'react' | ||
| import { motion } from 'framer-motion' | ||
|
|
||
| import { TbBrandGithub } from 'react-icons/tb' | ||
| /* eslint-disable */ | ||
| import React from 'react'; | ||
| import useScript from '../components/scripts/useScript'; | ||
| import gameList from '../games.json'; | ||
| import { useState, useEffect } from 'react'; | ||
| import { motion } from 'framer-motion'; | ||
|
|
||
| import { TbBrandGithub } from 'react-icons/tb'; | ||
| import { FaDiscord } from 'react-icons/fa'; | ||
| function Home() { | ||
| // injecting ruffle js into DOM | ||
| useScript('/ruffle/ruffle.js') | ||
| useScript('/ruffle/ruffle.js'); | ||
|
|
||
| const [games, setGames] = useState(gameList.length) | ||
| const [games, setGames] = useState(gameList.length); | ||
|
|
||
| return ( | ||
| <div className='flex flex-col items-center w-full h-screen overflow-hidden'> | ||
| <div className="flex flex-col items-center w-full h-screen overflow-hidden"> | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 100 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| exit={{ opacity: 0, y: 100 }} | ||
| className='flex flex-col w-full h-full justify-center items-center' | ||
| className="flex flex-col w-full h-full justify-center items-center" | ||
| > | ||
| <img src='/favicon.png' width={200} className="drop-shadow-xl"/> | ||
| <img src="/favicon.png" width={200} className="drop-shadow-xl" /> | ||
|
|
||
| <h1 className='text-4xl text-white p-5'>Welcome to React-Ruffle</h1> | ||
| <p className='text-2xl text-gray-600 p-2'>We have over <span className='text-1xl text-gray-400'>{games}+</span> games for you to choose from</p> | ||
| <a href="/games" className="inline-flex items-center justify-center drop-shadow-xl h-14 px-10 py-2 mt-2 text-xl font-semibold text-center text-gray-200 no-underline align-middle transition-all duration-300 ease-in-out bg-transparent border-2 border-gray-600 border-solid rounded-full cursor-pointer select-none hover:text-white hover:border-white focus:shadow-xs focus:no-underline"> | ||
| <h1 className="text-4xl text-white p-5">Welcome to React-Ruffle</h1> | ||
| <p className="text-2xl text-gray-600 p-2"> | ||
| We have over <span className="text-1xl text-gray-400">{games}+</span>{' '} | ||
| games for you to choose from | ||
| </p> | ||
| <a | ||
| href="/games" | ||
| className="inline-flex items-center justify-center drop-shadow-xl h-14 px-10 py-2 mt-2 text-xl font-semibold text-center text-gray-200 no-underline align-middle transition-all duration-300 ease-in-out bg-transparent border-2 border-gray-600 border-solid rounded-full cursor-pointer select-none hover:text-white hover:border-white focus:shadow-xs focus:no-underline" | ||
| > | ||
| Start Browsing | ||
| </a> | ||
| </motion.div> | ||
| <div className='flex bottom-0 items-center'> | ||
| <div className='rounded-md bg-[#1f2635] p-1 space-x-2'> | ||
| <TbBrandGithub className='flex text-gray-300 text-3xl hover:cursor-pointer hover:text-gray-500 transition-all duration-300 ease-in-out' | ||
| onClick={() => {window.open('https://github.com/illusionTBA/React-Ruffle', '_blank')}} /> | ||
| </motion.div> | ||
| <div className="flex bottom-0 items-center"> | ||
| <div className="flex flex-row rounded-md bg-[#1f2635] p-1 space-x-4"> | ||
| <TbBrandGithub | ||
| className="flex text-gray-300 text-3xl hover:cursor-pointer hover:text-gray-500 transition-all duration-300 ease-in-out" | ||
| onClick={() => { | ||
| window.open( | ||
| 'https://github.com/illusionTBA/React-Ruffle', | ||
| '_blank', | ||
| ); | ||
| }} | ||
| /> | ||
| <FaDiscord | ||
| className="flex text-gray-300 text-3xl hover:cursor-pointer hover:text-gray-500 transition-all duration-300 ease-in-out" | ||
| onClick={() => { | ||
| window.open('https://discord.gg/raFAecZw', '_blank'); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default Home | ||
| export default Home; |
2aec2b9There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
react-ruffle – ./
react-ruffle-git-main-illusiontba.vercel.app
react-ruffle.vercel.app
react-ruffle-illusiontba.vercel.app