summaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.tsx (renamed from src/App.jsx)2
-rw-r--r--src/components/App.jsx7
-rw-r--r--src/components/Blogs.tsx (renamed from src/components/Blogs.jsx)8
-rw-r--r--src/components/Button.tsx (renamed from src/components/Button.jsx)11
-rw-r--r--src/components/Game.tsx (renamed from src/components/Game.jsx)6
-rw-r--r--src/components/GameCard.tsx (renamed from src/components/GameCard.jsx)9
-rw-r--r--src/components/Games.tsx (renamed from src/components/Games.jsx)67
-rw-r--r--src/components/Home.tsx (renamed from src/components/Home.jsx)20
-rw-r--r--src/components/Layout.tsx (renamed from src/components/Layout.jsx)15
-rw-r--r--src/components/UploadGame.tsx125
-rw-r--r--src/components/index.jsx10
-rw-r--r--src/controllers/application.js9
-rw-r--r--src/controllers/hello_controller.js7
-rw-r--r--src/controllers/index.js8
-rw-r--r--src/main.tsx (renamed from src/main.jsx)4
-rw-r--r--src/routes/index.tsx (renamed from src/routes/index.jsx)8
-rw-r--r--src/types.ts5
17 files changed, 209 insertions, 112 deletions
diff --git a/src/App.jsx b/src/App.tsx
index b594288..cdd03ed 100644
--- a/src/App.jsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
import React from "react";
import Routes from "./routes";
-export default (props) => {
+export default function App () {
return (<Routes />);
}
diff --git a/src/components/App.jsx b/src/components/App.jsx
deleted file mode 100644
index da6a873..0000000
--- a/src/components/App.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-import Routes from "../routes";
-
-export default (props) => {
- return (<Routes />);
-}
-
diff --git a/src/components/Blogs.jsx b/src/components/Blogs.tsx
index 2dc8f27..863aa73 100644
--- a/src/components/Blogs.jsx
+++ b/src/components/Blogs.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from "react";
+//import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
const Blogs = () => {
const navigate = useNavigate();
- const [blogs, setBlogs] = useState([]);
+ const [blogs, setBlogs] = useState<any[]>([]); // eslint-disable-line @typescript-eslint/no-explicit-any
+
useEffect(() => {
const url = `${import.meta.env.VITE_API_TITLE}/api/v1/blogs/index`;
@@ -13,7 +15,7 @@ const Blogs = () => {
}
throw new Error("Network response was not ok.");
}).then((response) => setBlogs(response)).catch(() => navigate("/"));
- }, []);
+ }, [navigate]);
const allBlogs = blogs.map((blog, index) => (
<div key={index} className="col-md-6 col-lg-4">
diff --git a/src/components/Button.jsx b/src/components/Button.tsx
index de199d0..b12b833 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.tsx
@@ -1,15 +1,16 @@
import React from "react";
-import { Link } from "react-router-dom";
+//import { Link } from "react-router-dom";
-export default function Button ({ link, width = 36, height = 16, spinner = 4 })
+type ButtonProps = {link: React.ReactElement, width?: number, height?: number, spinner?: number};
+export default function Button ({ link , width = 36, height = 16, spinner = 4 }: ButtonProps)
{
return (
<>
<div className={`w-${ width } h-${ height } relative grid rounded-[5px] cursor-pointer overflow-hidden place-items-center before:content-[''] before:absolute before:w-${ spinner } before:bg-amber-400 before:rotate-[32deg] before:h-[1%] before:transition-all before:duration-500 before:ease-linear before:animate-[buttonSpin_1.5s_linear_infinite] hover:before:h-[2800%] hover:before:transition-all hover:before:duration-0 hover:before:ease-linear after:absolute after:content-[''] after:bg-stone-800 after:rounded-[5px] after:inset-0 after:transition-all after:duration-200 after:ease-in-out hover:after:inset-[5px] hover:after:transition-all hover:after:duration-200 hover:after:ease-in-out`}>
- <div className="z-[3]">
+<div className="z-[3]">
{ link }
</div>
</div>
</>
- )
-};
+ );
+}
diff --git a/src/components/Game.jsx b/src/components/Game.tsx
index a7bd007..51d5b3e 100644
--- a/src/components/Game.jsx
+++ b/src/components/Game.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from "react";
+//import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
//<Route path="/game/:game" element={<Game />} />
//export default () => (
export default function Games () {
- let { user, game } = useParams();
+ const { game } = useParams();
//http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html
return(
<>
@@ -17,4 +17,4 @@ export default function Games () {
</div>
</>
);
-};
+}
diff --git a/src/components/GameCard.jsx b/src/components/GameCard.tsx
index ac63160..1f5e766 100644
--- a/src/components/GameCard.jsx
+++ b/src/components/GameCard.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+//import React from "react";
//import { Link } from "react-router-dom";
+import { GameCardProps } from "../types";
//game = {
// card_img: "",
@@ -7,7 +8,7 @@ import React from "react";
// title_img: ""
//}
-export default function GameCard ({ link = "./", width = "72", game = { card_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg", char_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-character.png", title_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" } })
+export default function GameCard ({ link, game }: GameCardProps)
{
return (
@@ -22,5 +23,5 @@ export default function GameCard ({ link = "./", width = "72", game = { card_img
</div>
</a>
</>
- )
-};
+ );
+}
diff --git a/src/components/Games.jsx b/src/components/Games.tsx
index 173b3b7..cfa6925 100644
--- a/src/components/Games.jsx
+++ b/src/components/Games.tsx
@@ -1,11 +1,14 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, FormEvent } from "react";
//import { Link } from "react-router-dom";
import GameCard from "./GameCard";
import Button from "./Button";
+import { GameType } from "../types";
+
-//export default () => (
export default function Games () {
- const [games, setGames] = useState([]);
+ const [games, setGames] = useState<GameType[]>([]);
+
+ // old method
useEffect(() => {
const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`;
fetch(url).then((response) => {
@@ -13,34 +16,48 @@ export default function Games () {
return response.json();
}
throw new Error("Network response was not ok.");
- }).then((response) => setGames(response))//.catch(() => navigate("/"));
+ }).then((response) => setGames(response)); //.catch(() => navigate("/"));
}, []);
+
const allGames = games.map((game) => (
<GameCard link={`/game/${game.titleSlug}`} game={game} key={game.id}/>
));
- 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);
- }
- formData.append('game[card_img]', form.card_img.files[0], form.card_img.value);
- formData.append('game[char_img]', form.char_img.files[0], form.char_img.value);
- formData.append('game[title_img]', form.title_img.files[0], form.title_img.value);
- for (var pair of formData.entries()) {
- console.log(pair[0] + ', ' + pair[1])
+ const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+ e.preventDefault(); //stops submit from happening
+
+ const target = e.target as typeof e.target & {
+ title: { value: string };
+ img_rendering: { value: string };
+ //game_files: { files: FileList };
+ zip: { value: string, files: FileList };
+ card_img: { value: string, files: FileList };
+ char_img: { value: string, files: FileList };
+ title_img: { value: string, files: FileList };
};
+ //const form = e.target;
+ const formData = new FormData();
+ formData.append('game[title]', target.title.value);
+ formData.append('game[img_rendering]', target.img_rendering.value);
+ //for(let i =0; i < target.game_files.files.length; i++)
+ //{
+ //formData.append('game[game_files][]', target.game_files.files[i], target.game_files.files[i].name);
+ //}
+ formData.append('game[zip]', target.zip.files[0], target.zip.value);
+ formData.append('game[card_img]', target.card_img.files[0], target.card_img.value);
+ formData.append('game[char_img]', target.char_img.files[0], target.char_img.value);
+ formData.append('game[title_img]', target.title_img.files[0], target.title_img.value);
+
+ //for (var pair of formData.entries()) {
+ // //console.log(pair[0] + ', ' + pair[1])
+ //};
+
fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, {
method: 'post',
body: formData,
});
- }
+ };
return(
<>
<div>
@@ -61,9 +78,13 @@ export default function Games () {
<option value="crisp-edges">Crisp Edges</option>
</select>
</div>
- <div>
+ { /*<div>
<label>Files</label>
- <input type="file" multiple="multiple" name="game_files" />
+ <input type="file" multiple name="game_files" />
+ </div> */ }
+ <div>
+ <label>Zip</label>
+ <input type="file" name="zip" />
</div>
<div>
<label>Card Image</label>
@@ -92,4 +113,4 @@ export default function Games () {
</div>
</>
);
-};
+}
diff --git a/src/components/Home.jsx b/src/components/Home.tsx
index c1fb689..7430549 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.tsx
@@ -1,25 +1,7 @@
-import React, { } from "react";
//import { Link } from "react-router-dom";
-import GameCard from "./GameCard";
//export default () => (
export default function Home () {
- var handleSubmit = (e) => {
- e.preventDefault() //stops submit from happening
-
- const formData = new FormData()
- formData.append('game[title]', e.target.title.value)
- formData.append('game[game_file]', e.target.game_file.files[0], e.target.game_file.value)
-
- for (var pair of formData.entries()) {
- console.log(pair[0] + ', ' + pair[1])
- };
-
- fetch('${import.meta.env.VITE_API_TITLE}/api/v1/games', {
- method: 'post',
- body: formData,
- });
- }
return(
<>
<div>
@@ -40,4 +22,4 @@ Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis
</div>
</>
);
-};
+}
diff --git a/src/components/Layout.jsx b/src/components/Layout.tsx
index 06df03a..50a3fd7 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.tsx
@@ -1,11 +1,10 @@
-import React from "react";
import { Outlet, Link } from "react-router-dom";
import Button from "./Button";
-export default function Layout ({userData})
+
+export type userData = { userData: { name: string } };
+
+export default function Layout ({userData}: userData)
{
- console.log(userData);
- //const [userData, setUserData] = useState({ name: "" });
-
return (
<>
<div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]">
@@ -13,7 +12,7 @@ export default function Layout ({userData})
<nav id="sidebar-content" dir="rtl" className="text-stone-50 p-6 w-full h-screen overflow-y-auto overflow-x-hidden">
<div dir='ltr'>
{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9" className="pb-2"> Login with Github </a> }
- <div className="text-3xl py-10 text-center font-title">Adam Malczewski</div>
+ <div className="text-3xl py-10 text-center font-title">Tradam</div>
<div className="flex flex-col items-center gap-1 w-full">
<Button link={ <Link to="/" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">About Me</div></Link> }/>
<Button link={ <Link to="/blogs" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Blog</div></Link> }/>
@@ -45,5 +44,5 @@ export default function Layout ({userData})
</div>
</div>
</>
- )
-};
+ );
+}
diff --git a/src/components/UploadGame.tsx b/src/components/UploadGame.tsx
new file mode 100644
index 0000000..4801654
--- /dev/null
+++ b/src/components/UploadGame.tsx
@@ -0,0 +1,125 @@
+import { useState, FormEvent } from "react";
+import Button from "./Button";
+import ReactMarkdown from 'react-markdown';
+
+
+export default function UploadGame () {
+ const [markdownInput, setMarkdownInput] = useState<string>("");
+
+ const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+ e.preventDefault(); //stops submit from happening
+
+ const target = e.target as typeof e.target & {
+ title: { value: string };
+ img_rendering: { value: string };
+ github_link: { value: string };
+ //game_files: { files: FileList };
+ zip: { value: string, files: FileList };
+ card_img: { value: string, files: FileList };
+ char_img: { value: string, files: FileList };
+ title_img: { value: string, files: FileList };
+ status: { value: number };
+ };
+
+ const formData = new FormData();
+ formData.append('game[title]', target.title.value);
+ formData.append('game[img_rendering]', target.img_rendering.value);
+ //for(let i =0; i < target.game_files.files.length; i++)
+ //{
+ //formData.append('game[game_files][]', target.game_files.files[i], target.game_files.files[i].name);
+ //}
+ formData.append('game[zip]', target.zip.files[0], target.zip.value);
+ formData.append('game[card_img]', target.card_img.files[0], target.card_img.value);
+ formData.append('game[char_img]', target.char_img.files[0], target.char_img.value);
+ formData.append('game[title_img]', target.title_img.files[0], target.title_img.value);
+ formData.append('game[github_link]', target.github_link.value);
+ formData.append('game[status]', `${target.status.value}`);
+
+ fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, {
+ credentials: 'include',
+ method: 'post',
+ body: formData,
+ });
+ };
+ return(
+ <>
+ <div>
+ <div className="flex flex-col gap-16 max-w-6xl shrink">
+ <div className="title font-bold text-6xl font-title">Upload Game</div>
+ <div className="">
+ <div className="jumbotron jumbotron-fluid bg-transparent">
+ <div className="container secondary-color">
+ <form onSubmit={handleSubmit} action="/upload" method="post" className="flex flex-col gap-4">
+ <div className="flex flex-col">
+ <label>Title</label>
+ <input type="text" name="title" />
+ </div>
+ <div className="flex flex-col gap-2">
+ <div className="flex flex-col">
+ <label>Description</label>
+ <textarea
+ className="min-h-32 grow p-4"
+ name="description"
+ value={markdownInput}
+ onChange={(e) => setMarkdownInput(e.target.value)}
+ />
+ </div>
+ <div className="flex flex-col">
+ <label>Preview</label>
+ <ReactMarkdown
+ className="prose min-h-32 bg-white p-4"
+ children={markdownInput}
+ />
+ </div>
+ </div>
+ <div className="flex flex-col">
+ <label>Github Link</label>
+ <input type="text" name="github_link" />
+ </div>
+ <div className="flex flex-col">
+ <label>Image Rendering</label>
+ <select name="img_rendering">
+ <option value="crisp-edges">Crisp Edges</option>
+ <option value="pixelated">Pixelated</option>
+ </select>
+ </div>
+ { /*<div>
+ <label>Files</label>
+ <input type="file" multiple name="game_files" />
+ </div> */ }
+ <div className="flex flex-col">
+ <label>Game Zip</label>
+ <input type="file" name="zip" />
+ </div>
+ <div className="flex flex-col">
+ <label>Card Image</label>
+ <input type="file" name="card_img" />
+ </div>
+ <div className="flex flex-col">
+ <label>Character Image</label>
+ <input type="file" name="char_img" />
+ </div>
+ <div className="flex flex-col">
+ <label>Title Image</label>
+ <input type="file" name="title_img" />
+ </div>
+ <div className="flex flex-col">
+ <label>Status</label>
+ <select name="status">
+ <option value="0">Draft</option>
+ <option value="1">Published</option>
+ </select>
+ </div>
+ <div style={{ boxShadow: 'rgba(255,255,255,.1) 0 1px 0,rgba(0,0,0,.8) 0 1px 7px 0 inset' }} className="p-[5px] w-min h-min bg-stone-800 rounded-[5px]">
+ <Button width={ 28 } height={ 12 } link={ <button type="submit" className="w-28 h-12 bg-stone-transparent text-stone-50 rounded">Submit</button> }/>
+ </div>
+
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/components/index.jsx b/src/components/index.jsx
deleted file mode 100644
index 0044916..0000000
--- a/src/components/index.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-
-document.addEventListener("turbo:load", () => {
- const root = createRoot(
- document.body.appendChild(document.createElement("div"))
- );
- root.render(<App />);
-});
diff --git a/src/controllers/application.js b/src/controllers/application.js
deleted file mode 100644
index 1213e85..0000000
--- a/src/controllers/application.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-
-const application = Application.start()
-
-// Configure Stimulus development experience
-application.debug = false
-window.Stimulus = application
-
-export { application }
diff --git a/src/controllers/hello_controller.js b/src/controllers/hello_controller.js
deleted file mode 100644
index 5975c07..0000000
--- a/src/controllers/hello_controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
- connect() {
- this.element.textContent = "Hello World!"
- }
-}
diff --git a/src/controllers/index.js b/src/controllers/index.js
deleted file mode 100644
index d0685d3..0000000
--- a/src/controllers/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// This file is auto-generated by ./bin/rails stimulus:manifest:update
-// Run that command whenever you add a new controller or create them with
-// ./bin/rails generate stimulus controllerName
-
-import { application } from "./application"
-
-import HelloController from "./hello_controller"
-application.register("hello", HelloController)
diff --git a/src/main.jsx b/src/main.tsx
index ac292fd..2c43ef2 100644
--- a/src/main.jsx
+++ b/src/main.tsx
@@ -1,11 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import App from './App.tsx'
import './index.css'
// null assertion for tsx
//ReactDOM.createRoot(document.getElementById('root')!).render(
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
diff --git a/src/routes/index.jsx b/src/routes/index.tsx
index 67f76a7..9a5f11b 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.tsx
@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "../components/Home";
import Blogs from "../components/Blogs";
import Games from "../components/Games";
+import UploadGame from "../components/UploadGame";
import Game from "../components/Game";
import Layout from "../components/Layout";
-export default function index()
+export default function Index()
{
const [userData, setUserData] = useState({});
- const url = `${import.meta.env.VITE_API_TITLE}/api/v1/auth/data`;
useEffect(() => {
+ const url = `${import.meta.env.VITE_API_TITLE}/api/v1/auth/data`;
fetch(url, {
credentials: "include"
}).then((response) => {
@@ -29,6 +30,7 @@ export default function index()
<Route index element={<Home />} />
<Route path="/blogs" element={<Blogs />} />
<Route path="/games" element={<Games />} />
+ <Route path="/games/upload" element={<UploadGame />} />
{/*<Route path="/games/upload" element={<GamesUpload />} />*/}
<Route path="/game/:game" element={<Game />} />
</Route>
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..f28148b
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,5 @@
+
+
+export type ImageRendering = "auto" | "crisp-edges" | "pixelated";
+export type GameType = { id: number, card_img: string, char_img: string, title_img: string, img_rendering: ImageRendering, titleSlug: string };
+export type GameCardProps = { link: string, game: GameType };
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-14 20:15:41 +0000