From 7a38eef00de0bb35565dda3ddb1efa748c22ea47 Mon Sep 17 00:00:00 2001 From: realtradam Date: Thu, 23 May 2024 16:55:59 -0400 Subject: improve games --- .env.development | 1 + .env.production | 1 + src/components/Game.jsx | 13 ++--- src/components/GameCard.jsx | 6 +- src/components/Games.jsx | 20 ++++--- src/index.css | 136 +++++++++++++++++++++++--------------------- src/routes/index.jsx | 3 +- 7 files changed, 94 insertions(+), 86 deletions(-) diff --git a/.env.development b/.env.development index 93b132e..93fd70c 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ # .env.development VITE_API_TITLE=http://localhost:3000 +VITE_BOXEDAPI_TITLE=http://localhost:3000 diff --git a/.env.production b/.env.production index 175ef0a..a8b52da 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1,3 @@ # .env.production VITE_API_TITLE=https://gameshost.tradam.dev +VITE_BOXEDAPI_TITLE=https://gameshost.boxed.fun diff --git a/src/components/Game.jsx b/src/components/Game.jsx index 7746767..a7bd007 100644 --- a/src/components/Game.jsx +++ b/src/components/Game.jsx @@ -1,10 +1,7 @@ import React, { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; -//import { Link } from "react-router-dom"; -import GameCard from "./GameCard"; -import Button from "./Button"; -//} /> +//} /> //export default () => ( export default function Games () { @@ -12,10 +9,10 @@ export default function Games () { //http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html return( <> -
-
-
Orc: Arena of Time
- +
+
+
{game}
+
diff --git a/src/components/GameCard.jsx b/src/components/GameCard.jsx index 82ad423..ac63160 100644 --- a/src/components/GameCard.jsx +++ b/src/components/GameCard.jsx @@ -15,10 +15,10 @@ export default function GameCard ({ link = "./", width = "72", game = { card_img
- +
- - + +
diff --git a/src/components/Games.jsx b/src/components/Games.jsx index a0646be..173b3b7 100644 --- a/src/components/Games.jsx +++ b/src/components/Games.jsx @@ -16,13 +16,14 @@ export default function Games () { }).then((response) => setGames(response))//.catch(() => navigate("/")); }, []); const allGames = games.map((game) => ( - + )); var handleSubmit = (e) => { e.preventDefault() //stops submit from happening const form = e.target; const formData = new FormData() formData.append('game[title]', form.title.value) + formData.append('game[img_rendering]', form.img_rendering.value) for(let i =0; i < form.game_files.files.length; i++) { formData.append('game[game_files][]', form.game_files.files[i], form.game_files.files[i].value); @@ -35,7 +36,7 @@ export default function Games () { console.log(pair[0] + ', ' + pair[1]) }; - fetch('${import.meta.env.VITE_API_TITLE}/api/v1/games', { + fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, { method: 'post', body: formData, }); @@ -54,6 +55,13 @@ export default function Games () {
+ + +
+
@@ -77,14 +85,8 @@ export default function Games () {
- { allGames }
- - - - - - + { allGames }
diff --git a/src/index.css b/src/index.css index 8ea4fad..9af3266 100644 --- a/src/index.css +++ b/src/index.css @@ -13,96 +13,102 @@ */ .gameCard { aspect-ratio: 5/7; - width: 300px; - position: relative; - display: flex; - justify-content: center; - align-items: flex-end; - perspective: 2500px; + width: 300px; + position: relative; + display: flex; + justify-content: center; + align-items: flex-end; + perspective: 2500px; } .gameCardCoverImg { - width: 100%; - height: 100%; - object-fit: cover; - image-rendering: pixelated; + width: 100%; + height: 100%; + object-fit: cover; + /*image-rendering: pixelated;*/ + border-radius: 5px; } .gameCardWrapper { - transition: all 0.5s; - position: absolute; - width: 100%; - z-index: -1; - box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75) + transition: all 0.5s; + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75); + border-radius: 5px; } .gameCard:hover .gameCardWrapper { - transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); - box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75); - -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); + transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); + box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); } .gameCardWrapper::before, .gameCardWrapper::after { - content: ""; - opacity: 0; - width: 100%; - height: 80px; - transition: all 0.5s; - position: absolute; - left: 0; + content: ""; + opacity: 0; + width: 100%; + height: 80px; + transition: all 0.5s; + position: absolute; + left: 0; + border-radius: 5px; } .gameCardWrapper::before { - top: 0; - height: 100%; - background-image: linear-gradient( - to top, - transparent 46%, - rgba(12, 13, 19, 0.5) 68%, - rgba(12, 13, 19) 97% - ); + top: 0; + height: 100%; + background-image: linear-gradient( + to top, + transparent 46%, + rgba(12, 13, 19, 0.5) 68%, + rgba(12, 13, 19) 97% + ); + border-radius: 5px; } .gameCardWrapper::after { - bottom: 0; - opacity: 1; - background-image: linear-gradient( - to bottom, - transparent 46%, - rgba(12, 13, 19, 0.5) 68%, - rgba(12, 13, 19) 97% - ); + bottom: 0; + opacity: 1; + background-image: linear-gradient( + to bottom, + transparent 46%, + rgba(12, 13, 19, 0.5) 68%, + rgba(12, 13, 19) 97% + ); + border-radius: 5px; } .gameCard:hover .gameCardWrapper::before, .gameCardWrapper::after { - opacity: 1; + opacity: 1; } .gameCard:hover .gameCardWrapper::after { - height: 120px; + height: 120px; } .gameTitleImg { - width: 100%; - transition: transform 0.5s; - image-rendering: pixelated; + width: 100%; + transition: transform 0.5s; + /*image-rendering: pixelated;*/ } .gameCard:hover .gameTitleImg { - transform: translate3d(0%, -50px, 100px); + transform: translate3d(0%, -50px, 100px); } .gameCharacterImg { - width: 100%; - opacity: 0; - transition: all 0.5s; - position: absolute; - z-index: -1; - image-rendering: pixelated; + width: 100%; + opacity: 0; + transition: all 0.5s; + position: absolute; + z-index: -1; + /*image-rendering: pixelated;*/ } .gameCard:hover .gameCharacterImg { - opacity: 1; - transform: translate3d(0%, -30%, 100px); + opacity: 1; + transform: translate3d(0%, -30%, 100px); } @keyframes pan { @@ -123,19 +129,19 @@ } @keyframes buttonSpin { - from { - transform: rotate(32deg); - } - to { - transform: rotate(calc(360deg + 32deg)); - filter: hue-rotate(360deg); - } + from { + transform: rotate(32deg); + } + to { + transform: rotate(calc(360deg + 32deg)); + filter: hue-rotate(360deg); + } } .contact { transition: opacity 1s ease; position: absolute;} .contact + .contact, - a:hover .contact:first-child { opacity: 0; } - a:hover .contact:first-child + .contact { opacity: 1; } +a:hover .contact:first-child { opacity: 0; } +a:hover .contact:first-child + .contact { opacity: 1; } .contact + .contact { pointer-events: none; } @layer utilities { diff --git a/src/routes/index.jsx b/src/routes/index.jsx index 5809fbb..67f76a7 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -29,7 +29,8 @@ export default function index() } /> } /> } /> - } /> + {/*} />*/} + } /> -- cgit v1.2.3