diff --git a/src/assets/backgrounds.js b/src/assets/backgrounds.jsx similarity index 100% rename from src/assets/backgrounds.js rename to src/assets/backgrounds.jsx diff --git a/src/assets/flags.js b/src/assets/flags.jsx similarity index 54% rename from src/assets/flags.js rename to src/assets/flags.jsx index 1c446bb..5e77032 100644 --- a/src/assets/flags.js +++ b/src/assets/flags.jsx @@ -1,12 +1,14 @@ import flag_GB from "./images/flags/GB.png"; import flag_ES from "./images/flags/ES.png"; +import flag_PT_BR from "./images/flags/BR.png"; import flag_JP from "./images/flags/JP.png"; export function GetFlag(code) { switch(String(code).toLowerCase()) { - case "eng": return flag_GB; - case "spa": return flag_ES; - case "jpn": return flag_JP; + case "en": return flag_GB; + case "es": return flag_ES; + case "pt-br": return flag_PT_BR; + case "ja": return flag_JP; } return flag_GB; } \ No newline at end of file diff --git a/src/assets/game_art.js b/src/assets/game_art.jsx similarity index 100% rename from src/assets/game_art.js rename to src/assets/game_art.jsx diff --git a/src/assets/icons.js b/src/assets/icons.jsx similarity index 100% rename from src/assets/icons.js rename to src/assets/icons.jsx diff --git a/src/assets/images/flags/BR.png b/src/assets/images/flags/BR.png new file mode 100644 index 0000000..8214547 Binary files /dev/null and b/src/assets/images/flags/BR.png differ diff --git a/src/assets/thumbnails.js b/src/assets/thumbnails.jsx similarity index 100% rename from src/assets/thumbnails.js rename to src/assets/thumbnails.jsx diff --git a/src/games.js b/src/games.jsx similarity index 96% rename from src/games.js rename to src/games.jsx index 95591e2..7e74f68 100644 --- a/src/games.js +++ b/src/games.jsx @@ -1,5 +1,5 @@ import "./styles/games.css"; -import game_art from "./assets/game_art.js" +import game_art from "./assets/game_art.jsx" function Game({link, name}) { return ( diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 97c50f9..0000000 --- a/src/index.js +++ /dev/null @@ -1,198 +0,0 @@ -import { HashRouter as Router, Routes, Route, Link } from "react-router-dom"; -import { HashLink } from 'react-router-hash-link'; -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import reportWebVitals from './reportWebVitals'; -import { useState, useEffect } from 'react'; -import Markdown from 'react-markdown' - -// Scripts -import { News } from "./news.js" -import { Games } from "./games.js" - -// Stylesheets -import "./assets/fonts.css"; -import "./styles/index.css"; - -// Assets -import logo from "./assets/images/Logo.png"; -import logo_JP from "./assets/images/Logo_JP.png" -import wonder_of_u from "./assets/images/Wonder_of_U.png"; -import banner from "./assets/images/Banner.png"; -import banner_long from "./assets/images/Long Banner.png"; -import { GetFlag } from "./assets/flags.js"; - -const UseDebounce = (callback, delay) => { - let timeout; - return (...args) => { - clearTimeout(timeout); - timeout = setTimeout(() => callback(...args), delay); - }; -}; - -const URLs = { - eng: "/", - spa: "/es", - jpn: "/jp" -}; - -const text_content = { - eng : { - navbar : { - wiki: "wiki", - roadmaps: "roadmaps", - about: "about us", - top: "back to top" - }, - headings : { - mods: "mods", - about: "about us" - }, - content : { - about: "**JoJo's Bizarre Adventure** has been the focus of various videogames, developed by different studios and in different game engines. For many, these games are a big part of their connection with the JoJo franchise, and we here at **JoJo's Bizarre Modding Community** seek to harness our creativity to make them even more fun to play and experience!\n\nOur **mission** is to provide the resources, information, and guidance needed for modders, old and new, to successfully unleash their passionate crafts and ideas. Therefore, this website acts as a main **portal** for our community here online, and you can find us on **[Discord](https://discord.jojomodding.com)** where we are primarily based." - } - }, - spa : { - navbar : { - wiki: "wiki", - roadmaps: "planos", - about: "conócenos", - top: "volver arriba" - }, - headings : { - mods: "mods", - about: "sobre nosotros" - }, - content : { - about: "**JoJo's Bizarre Adventure** ha sido el foco de varios videojuegos, creados por varios estudios diferentes y en motores diferentes de videojuegos. Para mucha gente, estos videojuegos son una gran parte de su conexión con la franquicia de JoJo, ¡y aquí en **JoJo's Bizarre Modding Community** nos esforzamos por emplear al maximo nuestra creatividad para hacer que jugar y disfrutar sea aún mas divertido!\n\nLa meta de nuestra comunidad es proveer los recursos, la información y las guías necesarias para que todos los modders, experimentados y nuevos, pueden realizar con éxito sus creaciones e ideas apasionadas. Por lo tanto, este sitio web es el portal principal para nuestra comunidad en línea, y puedes encontrarnos en **[Discord](https://discord.jojomodding.com)**." - } - }, - jpn : { - navbar : { - wiki: "wiki", - roadmaps: "四計", - about: "私ともとは", - top: "トップへ戻る" - }, - headings : { - mods: "mod", - about: "私ともとは" - }, - content : { - about: "" - } - } -}; - -function Home({lang}) { - const [showFooter, setShowFooter] = useState(false); - - useEffect(() => { - const handleScroll = UseDebounce(() => { - if (window.scrollY > 700) { // Change 300 to however many pixels you want - setShowFooter(true); - } else { - setShowFooter(false); - } - }, 100); - - window.addEventListener('scroll', handleScroll); - - return () => { - window.removeEventListener('scroll', handleScroll); // Cleanup event listener - }; - }, []); - - const nav_pipe = F; - - function GrabText(group, target) { - const text = text_content[lang][group][target]; - if (text) return text; - return "[Error: missing text]"; - } - - function LanguageButton({lang_in, code, name}) { - if (lang_in != lang) { - return {name}; - } - } - - var logo_image = logo; - if (lang == "jpn") logo_image = logo_JP; - - return ( - <> -
-
- -
-
- {GrabText("navbar", "wiki")} - {nav_pipe} - {GrabText("navbar", "about")} - {nav_pipe} -
-
-
-
- - - {/* */} -
-
-
-
- - - -
- -
-
- Logo -
-
- -
-
- - -
-
-

{GrabText("headings", "about")}

- - - {GrabText("content", "about")} -
-
-
- -
{GrabText("navbar", "top")}
- - ); -} - -function App() { - return ( - - - } /> - } /> - } /> -

Error 404: This page does not exist.


Go back!}/> - - - ); -} - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/index.jsx b/src/index.jsx new file mode 100644 index 0000000..b467b8f --- /dev/null +++ b/src/index.jsx @@ -0,0 +1,152 @@ +import { HashRouter as Router, Routes, Route, Link } from "react-router-dom"; +import { HashLink } from 'react-router-hash-link'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import reportWebVitals from './reportWebVitals.js'; +import { useState, useEffect } from 'react'; +import Markdown from 'react-markdown' + +// Scripts +import { News } from "./news.jsx" +import { Games } from "./games.jsx" + +// Stylesheets +import "./assets/fonts.css"; +import "./styles/index.css"; + +// Assets +import strings from "./strings.jsx"; +import logo from "./assets/images/Logo.png"; +import logo_JP from "./assets/images/Logo_JP.png" +import wonder_of_u from "./assets/images/Wonder_of_U.png"; +import banner from "./assets/images/Banner.png"; +import banner_long from "./assets/images/Long Banner.png"; +import { GetFlag } from "./assets/flags.jsx"; + +const UseDebounce = (callback, delay) => { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => callback(...args), delay); + }; +}; + +function Home({lang}) { + const [showFooter, setShowFooter] = useState(false); + + useEffect(() => { + const handleScroll = UseDebounce(() => { + if (window.scrollY > 700) { // Change 300 to however many pixels you want + setShowFooter(true); + } else { + setShowFooter(false); + } + }, 100); + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); // Cleanup event listener + }; + }, []); + + const nav_pipe = F; + + function LanguageButton({code, name}) { + if (code != lang) { + return ( + + + + + +
{name}
+ + + ); + } + } + + var logo_image = logo; + if (lang == "jp") logo_image = logo_JP; + + const string = strings[lang]; + + return ( + <> +
+
+ +
+
+ {string.navbar.wiki} + {nav_pipe} + {string.navbar.about} + {nav_pipe} +
+
+
+
+ + + + {/* */} +
+
+
+
+ + + +
+ +
+
+ Logo +
+
+ +
+
+ + +
+
+

{string.headings.about}

+ + + {string.about} +
+
+
+ +
{string.navbar.top}
+ + ); +} + +function App() { + return ( + + + } /> + } /> + } /> + } /> +

Error 404: This page does not exist.


Go back!}/> + + + ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/news.js b/src/news.jsx similarity index 61% rename from src/news.js rename to src/news.jsx index c61eaac..2a375cb 100644 --- a/src/news.js +++ b/src/news.jsx @@ -1,107 +1,126 @@ import React from 'react'; import { HashLink } from 'react-router-hash-link'; +import strings from "./strings.jsx"; import more from "./assets/images/See More.png"; -import icons from "./assets/icons.js" -import thumbnails from "./assets/thumbnails.js" +import icons from "./assets/icons.jsx" +import thumbnails from "./assets/thumbnails.jsx" import "./styles/news.css" -const URLs = { - eng: "/", - spa: "/es", - jpn: "/jp" -}; - const news_data = { "NewWebsiteLaunch" : { media: thumbnails["NewWebsiteLaunch"], type: "image", link: "https://jojomodding.miraheze.org/wiki/News:JoJo_Modding_Website", + translated: { + "es": false, + "pt-br": true, + "ja": false + }, date: { year: 2024, month: 11, day: 29 }, desc: { - eng: "We're proud to announce the launch of our new website at jojomodding.com, our official portal!", - spa: "¡Estamos orgullosos de anunciar el inicio de nuestra web nueva a jojomodding.com, nuestro portal oficial!", - jpn: "" + "en": strings["en"].news.NewWebsiteLaunch, + "es": strings["es"].news.NewWebsiteLaunch, + "pt-br": strings["pt-br"].news.NewWebsiteLaunch, + "ja": strings["ja"].news.NewWebsiteLaunch } }, "AsbrModdingComesToNintendoSwitch" : { media: thumbnails["AsbrModdingComesToNintendoSwitch"], type: "image", link: "https://jojomodding.miraheze.org/wiki/News:ASBR_modding_comes_to_Nintendo_Switch", + translated: { + "es": false, + "pt-br": true, + "ja": false + }, date: { year: 2024, month: 8, day: 8 }, desc: { - eng: "We've seen a massive breakthrough for ASBR players on Nintendo Switch...", - spa: "Hemos visto un gran avance para los jugadores de ASBR en Nintendo Switch...", - jpn: "私たちはNintendo SwitchのASBRプレイヤーにとって大きなディスカバリーを見られました！" + "en": strings["en"].news.AsbrModdingComesToNintendoSwitch, + "es": strings["es"].news.AsbrModdingComesToNintendoSwitch, + "pt-br": strings["pt-br"].news.AsbrModdingComesToNintendoSwitch, + "ja": strings["ja"].news.AsbrModdingComesToNintendoSwitch } }, "UselessMaidLisaLisaCompetition" : { media: thumbnails["UselessMaidLisaLisaCompetition"], type: "image", link: "https://jojomodding.miraheze.org/wiki/News:Useless_Maid%27s_Lisa_Lisa_Competition", + translated: { + "es": false, + "pt-br": true, + "ja": false + }, date: { year: 2024, month: 5, day: 30 }, desc: { - eng: "Previously seldom modded, we held a Lisa Lisa texture competition, funded by Useless Maid...", - spa: "Organizamos un concurso de texturas para la Lisa Lisa solitaria, financiado por Useless Maid...", - jpn: "[TBA]" + "en": strings["en"].news.UselessMaidLisaLisaCompetition, + "es": strings["es"].news.UselessMaidLisaLisaCompetition, + "pt-br": strings["pt-br"].news.UselessMaidLisaLisaCompetition, + "ja": strings["ja"].news.UselessMaidLisaLisaCompetition } }, "UselessButlerCharacterCompetition" : { media: thumbnails["UselessButlerCharacterCompetition"], type: "image", link: "https://jojomodding.miraheze.org/wiki/News:Useless_Butler%27s_Character_Competition", + translated: { + "es": false, + "pt-br": true, + "ja": false + }, date: { year: 2024, month: 5, day: 1 }, desc: { - eng: "Useless Butler started a character model competition with 5 remarkable submissions...", - spa: "Useless Butler inició una competencia de modelos, y hay 5 presentaciones geniales...", - jpn: "[TBA]" + "en": strings["en"].news.UselessButlerCharacterCompetition, + "es": strings["es"].news.UselessButlerCharacterCompetition, + "pt-br": strings["pt-br"].news.UselessButlerCharacterCompetition, + "ja": strings["ja"].news.UselessButlerCharacterCompetition } }, "Sofdec2Discoveries" : { media: thumbnails["Sofdec2Discoveries"], type: "image", link: "https://jojomodding.miraheze.org/wiki/News:Sofdec2_discoveries", + translated: { + "es": false, + "pt-br": true, + "ja": false + }, date: { year: 2024, month: 1, day: 22 }, desc: { - eng: "Sofdec2 USM modding has been made easier than ever thanks to our discovery of various tools...", - spa: "El modding de Sofdec2 se ha hecho súper fácil gracias al descubrimiento de varias herramientas...", - jpn: "[TBA]" + "en": strings["en"].news.Sofdec2Discoveries, + "es": strings["es"].news.Sofdec2Discoveries, + "pt-br": strings["pt-br"].news.Sofdec2Discoveries, + "ja": strings["ja"].news.Sofdec2Discoveries } } }; -const see_more = { - eng: ["see", "more"], - spa: ["leer", "más"], - jpn: ["もっと", "見る"] -}; - function Icon({link, name, color = "white", target = "", lang}) { let text = name; if (name == "NexusMods") return (
- +

Mods

 @@ -118,18 +137,27 @@ function Icon({link, name, color = "white", target = "", lang}) { } export function News({lang}) { + const string = strings[lang]; + function Post({id}) { const data = news_data[id]; var media = ; if (data.type == "video") { media = ; } + + var link = data.link; + if (data.translated[lang] == true) + link += `/${lang}`; + return ( - +
{media}
-

{data.date.year}.{String(data.date.month).padStart(2, '0')}.{String(data.date.day).padStart(2, '0')}

+

+ {data.date.year}.{String(data.date.month).padStart(2, '0')}.{String(data.date.day).padStart(2, '0')} +

{data.desc[lang]}

 @@ -150,8 +178,8 @@ export function News({lang}) {
-

{see_more[lang][0]}

-

{see_more[lang][1]}

+

{string.news.see}

+

{string.news.more}
diff --git a/src/strings.jsx b/src/strings.jsx new file mode 100644 index 0000000..4c2f8b6 --- /dev/null +++ b/src/strings.jsx @@ -0,0 +1,96 @@ +const strings = { + "en": { + url: "/", + navbar: { + wiki: "wiki", + roadmaps: "roadmaps", + about: "about us", + top: "back to top" + }, + headings: { + mods: "mods", + about: "about us" + }, + news: { + see: "see", + more: "more", + NewWebsiteLaunch: "We're proud to announce the launch of our new website at jojomodding.com, our official portal!", + AsbrModdingComesToNintendoSwitch: "We've seen a massive breakthrough for ASBR players on Nintendo Switch...", + UselessMaidLisaLisaCompetition: "Previously seldom modded, we held a Lisa Lisa texture competition, funded by Useless Maid...", + UselessButlerCharacterCompetition: "Useless Butler started a character model competition with 5 remarkable submissions...", + Sofdec2Discoveries: "Sofdec2 USM modding has been made easier than ever thanks to our discovery of various tools..." + }, + about: "**JoJo's Bizarre Adventure** has been the focus of various videogames, developed by different studios and in different game engines. For many, these games are a big part of their connection with the JoJo franchise, and we here at **JoJo's Bizarre Modding Community** seek to harness our creativity to make them even more fun to play and experience!\n\nOur **mission** is to provide the resources, information, and guidance needed for modders, old and new, to successfully unleash their passionate crafts and ideas. Therefore, this website acts as a main **portal** for our community here online, and you can find us on **[Discord](https://discord.jojomodding.com)** where we are primarily based." + }, + "es": { + url: "/es", + navbar: { + wiki: "wiki", + roadmaps: "planos", + about: "conócenos", + top: "volver arriba" + }, + headings: { + mods: "mods", + about: "sobre nosotros" + }, + news: { + see: "leer", + more: "más", + NewWebsiteLaunch: "¡Estamos orgullosos de anunciar el inicio de nuestra web nueva a jojomodding.com, nuestro portal oficial!", + AsbrModdingComesToNintendoSwitch: "Hemos visto un gran avance para los jugadores de ASBR en Nintendo Switch...", + UselessMaidLisaLisaCompetition: "Organizamos un concurso de texturas para la Lisa Lisa solitaria, financiado por Useless Maid...", + UselessButlerCharacterCompetition: "Useless Butler inició una competencia de modelos, y hay 5 presentaciones geniales...", + Sofdec2Discoveries: "El modding de Sofdec2 se ha hecho súper fácil gracias al descubrimiento de varias herramientas..." + }, + about: "**JoJo's Bizarre Adventure** ha sido el foco de varios videojuegos, creados por varios estudios diferentes y en motores diferentes de videojuegos. Para mucha gente, estos videojuegos son una gran parte de su conexión con la franquicia de JoJo, ¡y aquí en **JoJo's Bizarre Modding Community** nos esforzamos por emplear al maximo nuestra creatividad para hacer que jugar y disfrutar sea aún mas divertido!\n\nLa meta de nuestra comunidad es proveer los recursos, la información y las guías necesarias para que todos los modders, experimentados y nuevos, pueden realizar con éxito sus creaciones e ideas apasionadas. Por lo tanto, este sitio web es el portal principal para nuestra comunidad en línea, y puedes encontrarnos en **[Discord](https://discord.jojomodding.com)**." + }, + "pt-br": { + url: "/pt-br", + navbar: { + wiki: "wiki", + roadmaps: "roadmaps", + about: "sobre nós", + top: "voltar ao topo" + }, + headings: { + mods: "mods", + about: "sobre nós" + }, + news: { + see: "leia", + more: "mais", + NewWebsiteLaunch: "Estamos orgulhosos em anunciar o lançamento do nosso novo website na jojomodding.com, nosso portal oficial!", + AsbrModdingComesToNintendoSwitch: "Nós tivemos um grande avanço para os jogadores de ASBR no Nintendo Switch...", + UselessMaidLisaLisaCompetition: "Então foi feita uma competição de texturas para Lisa Lisa, financiada por Useless Maid...", + UselessButlerCharacterCompetition: "Useless Butler iniciou uma competição de modelos, e há 5 ótimas inscrições...", + Sofdec2Discoveries: "Sofdec2 USM agora pode ser facilmente usado graças às descobertas de várias ferramentas..." + }, + about: "**JoJo's Bizarre Adventure** tem sido o foco de vários jogos, desenvolvidos por diferentes estúdios e em diferentes motores de jogo. Para muitos, esses jogos são uma grande parte de sua conexão com a franquia, e nós, da **JoJo's Bizarre Modding Community**, queremos usar nossa criatividade para torná-los ainda mais divertidos de jogar e experienciar!\n\nNossa missão é fornecer os recursos, informações e orientações necessárias para modders, especialistas e novatos, criarem com êxito suas ideias e criações cheias de paixão. Portanto, este site serve como um portal principal para a comunidade, e você pode nos encontrar no **[Discord](https://discord.jojomodding.com)**, onde somos mais ativos." + }, + "ja": { + url: "/ja", + navbar: { + wiki: "wiki", + roadmaps: "四計", + about: "私ともとは", + top: "トップへ戻る" + }, + headings: { + mods: "mod", + about: "私ともとは" + }, + news: { + see: "もっと", + more: "見る", + NewWebsiteLaunch: "私たちはNintendo SwitchのASBRプレイヤーにとって大きなディスカバリーを見られました！", + AsbrModdingComesToNintendoSwitch: "", + UselessMaidLisaLisaCompetition: "", + UselessButlerCharacterCompetition: "", + Sofdec2Discoveries: "" + }, + about: "" + } +}; + +export default strings; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 2a684b3..f26248e 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -163,8 +163,8 @@ p { left: 50%; right: 50%; top: 135%; - transform: translateX(-50%); - width: 350%; + transform: translateX(-55%); + width: 380%; height: auto; padding-bottom: 10px; background-color: rgba(0, 0, 0, 0.9); @@ -291,7 +291,7 @@ p { } .language-dropdown { - width: 300%; + width: 350%; left: -20%; height: auto; font-size: 25px;