@articles-media/articles-dev-box 1.0.2 → 1.0.3

package/src/components/Ads/ArticlesAd.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-// const ArticlesAd = () => {
-//   return (
-//     <div style={{ border: '1px solid #ccc', padding: '20px', margin: '10px', textAlign: 'center' }}>
-//       <p>Advertisement</p>
-//     </div>
-//   );
-// };
-
-// export default ArticlesAd;
-
-// import Script from "next/script";
-import { useEffect } from "react";
-// import { useStore } from "@/hooks/useStore";
-
-// Non typescript version, if copying consider using the typescript version instead from a repo like amcot or battle-trap
-
-export default function ArticlesAd({
-    darkMode
-}) {
-
-    // const darkMode = useStore((state) => state.darkMode)
-
-    useEffect(() => {
-        // if (!process.env.NEXT_PUBLIC_ARTICLES_OAUTH_ID) {
-        //     console.log("NEXT_PUBLIC_ARTICLES_OAUTH_ID is not set, skipping Articles Media Sign In button initialization.");
-        // }
-    }, []);
-
-    useEffect(() => {
-        const script = document.createElement('script');
-
-        script.src = "https://accounts.articles.media/js/ad.js";
-        script.async = true;
-
-        document.body.appendChild(script);
-
-        return () => {
-            document.body.removeChild(script);
-        }
-    }, []);
-
-    return (
-        <div className="">
-
-            {/* <script
-                src={process.env.NODE_ENV === "development" ?
-                    // `${process.env.NEXT_PUBLIC_LOCAL_ACCOUNTS_ADDRESS}/js/ad.js`
-                    `https://accounts.articles.media/js/ad.js?darkMode=${darkMode}`
-                    :
-                    `https://accounts.articles.media/js/ad.js?darkMode=${darkMode}`
-                }
-                strategy="afterInteractive"
-
-                data-version="1"
-            // data-articles-color-mode="Dark"
-            // data-articles-button-style={style}
-            // data-articles-client-id={process.env.NEXT_PUBLIC_ARTICLES_OAUTH_ID}
-            // data-articles-redirect-uri="https://localhost:3002"
-            // data-articles-redirect-uri={process.env.NEXT_PUBLIC_ARTICLES_REDIRECT_URI}
-            // data-articles-authHost={
-            //     process.env.NODE_ENV == "development" ? // "http://localhost:3001" 
-            //         process.env.NEXT_PUBLIC_LOCAL_ACCOUNTS_ADDRESS
-            //         :
-            //         "https://accounts.articles.media"
-            // }
-            /> */}
-
-            <div className={"articles-media-ad"}>
-
-            </div>
-
-        </div>
-    );
-}

package/src/components/Games/GameScoreboard.jsx

@@ -1,188 +0,0 @@
-import { useEffect, useState } from 'react'
-
-// import axios from 'axios'
-
-// import Modal from 'react-bootstrap/Modal';
-
-// import { useHotkeys } from 'react-hotkeys-hook';
-
-// import ViewUserModal from '@/components/user/ViewUserModal/ViewUserModal';
-// import ArticlesSwitch from '../Articles/ArticlesSwitch';
-import ArticlesButton from '#root/src/components/UI/Button';
-
-// import useGameScoreboard from '#root/src/hooks/Games/useGameScoreboard';
-import useGameScoreboard from '#root/src/hooks/Games/useGameScoreboard';
-
-import "#root/src/styles/components/GameScoreboard.scss";
-
-function GameScoreboard({ game, reloadScoreboard, setReloadScoreboard }) {
-
-    const [showSettings, setShowSettings] = useState(false)
-
-    // const [scoreboard, setScoreboard] = useState([])
-
-    const [visible, setVisible] = useState(false)
-
-    const {
-        data: scoreboard,
-        isLoading: scoreboardIsLoading,
-        mutate: scoreboardMutate
-    } = useGameScoreboard({
-        game: game
-    })
-
-    // function loadScoreboard() {
-
-    //     axios.get('/api/community/games/scoreboard', {
-    //         params: {
-    //             game: game
-    //         }
-    //     })
-    //         .then(response => {
-    //             console.log(response.data)
-    //             setScoreboard(response.data)
-    //         })
-    //         .catch(response => {
-    //             console.log(response.data)
-    //         })
-
-    // }
-
-    useEffect(() => {
-
-        // loadScoreboard()
-
-    }, [])
-
-    useEffect(() => {
-
-        if (reloadScoreboard) {
-            setReloadScoreboard(false)
-            // loadScoreboard()
-            scoreboardMutate()
-        }
-
-    }, [reloadScoreboard])
-
-    return (
-        <div className="scoreboard">
-
-            {/* <Modal show={showSettings} size={'md'} className="articles-modal" centered onHide={() => setShowSettings(false)}>
-
-                <Modal.Header>
-                    <Modal.Title>
-                        Scoreboard Settings
-                    </Modal.Title>
-                </Modal.Header>
-
-                <Modal.Body>
-
-                    <div
-                        className="d-flex justify-content-between align-items-center"
-                        onClick={() => setVisible(!visible)}
-                    >
-
-                        <div>
-                            <i className="fas fa-trophy-alt"></i>
-                            <span>Join Scoreboard?</span>
-                        </div>
-
-                        <ArticlesSwitch
-                            checked={visible}
-                        />
-
-                    </div>
-
-                </Modal.Body>
-
-                <Modal.Footer className="justify-content-between">
-
-                    <ArticlesButton
-                        variant="articles"
-                        onClick={() => {
-                            setShowSettings(false)
-                        }}
-                    >
-                        Close
-                    </ArticlesButton>
-
-                </Modal.Footer>
-
-            </Modal> */}
-
-            <div className="card card-articles card-sm mb-3 mb-lg-0">
-
-                <div className="card-header d-flex justify-content-between align-items-center">
-
-                    <span>{game} Scoreboard</span>
-
-                    <ArticlesButton
-                        onClick={() => {
-                            scoreboardMutate()
-                        }}
-                        small
-                    >
-                        <i className="fad fa-redo me-0"></i>
-                    </ArticlesButton>
-
-                </div>
-
-                <div className="card-body p-0">
-
-                    {(scoreboard?.length || 0) == 0 &&
-                        <div className="small p-2">No scores yet</div>
-                    }
-
-                    {scoreboard?.map((doc, i) =>
-                        <div key={doc._id} className="result d-flex flex-column justify-content-between border-bottom p-2">
-
-                            <div className='d-flex justify-content-between lh-sm'>
-
-                                <div className='d-flex'>
-
-                                    <h5 className='mb-0 me-3'>{i + 1}</h5>
-
-                                    <div className='lh-sm'>
-
-                                        {/* <ViewUserModal
-                                            populated_user={doc.populated_user}
-                                            user_id={doc.user_id}
-                                        /> */}
-
-                                    </div>
-
-                                </div>
-
-                                <div><h5 className="mb-0">{doc.score || doc.total}</h5></div>
-
-                            </div>
-
-                            {(doc.last_play && doc.public_last_play) && <small className='mt-1' style={{ fontSize: '0.75rem' }}>Played: {format(new Date(doc.last_play), 'MM/d/yy hh:mmaa')}</small>}
-
-                        </div>
-                    )}
-
-                </div>
-
-                <div className="card-footer d-flex justify-content-between align-items-center">
-
-                    <div className='small'>Play to get on the board!</div>
-
-                    <ArticlesButton
-                        small
-                        onClick={() => {
-                            setShowSettings(true)
-                        }}
-                    >
-                        <i className="fad fa-cog me-0"></i>
-                    </ArticlesButton>
-
-                </div>
-
-            </div>
-
-        </div>
-    )
-}
-
-export default GameScoreboard;

package/src/components/Games/ReturnToLauncherButton.jsx

@@ -1,55 +0,0 @@
-import ArticlesButton from "#root/src/components/UI/Button";
-
-export default function ReturnToLauncherButton() {
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const paramsObject = Object.fromEntries(urlParams)
-
-    let { launcher_mode } = paramsObject
-
-    launcher_mode = launcher_mode === '1' ? true : false
-
-    // const router = useRouter()
-
-    if (typeof window === "undefined") return
-
-    if (!launcher_mode) {
-        return (
-            <ArticlesButton
-                // ref={el => elementsRef.current[6] = el}
-                className={`w-100`}
-                small
-                style={{
-                    zIndex: 10,
-                    position: "relative",
-                }}
-                onClick={() => {
-                    // window.history.back()
-                    window.location.href = `https://games.articles.media`
-                }}
-            >
-                <i className="fad fa-gamepad"></i>
-                View our other games
-            </ArticlesButton>
-        )
-    }
-
-    return (
-        <ArticlesButton
-            // ref={el => elementsRef.current[6] = el}
-            className={`w-100`}
-            small
-            style={{
-                zIndex: 10,
-                position: "relative",
-            }}
-            onClick={() => {
-                // window.history.back()
-                window.location.href = `https://games.articles.media`
-            }}
-        >
-            <i className="fad fa-gamepad"></i>
-            Return to Games
-        </ArticlesButton>
-    );
-}   

package/src/components/UI/Button.js

@@ -1,61 +0,0 @@
-import { forwardRef } from 'react';
-import classNames from "classnames";
-
-const ArticlesButton = forwardRef((props, ref) => {
-
-    const {
-        size,
-        variant,
-        style,
-        // Can just use small instead of size="sm"
-        small,
-        large,
-        onClick,
-        className,
-        disabled,
-        active,
-        type,
-        onMouseDown,
-        onMouseUp,
-        onMouseLeave,
-        onTouchStart,
-        onTouchEnd,
-        ...rest
-    } = props;
-
-    return (
-        <button
-            ref={ref}
-            // onClick={onClick}
-            {
-                ...(type && {type: 'submit'})
-            }
-            disabled={disabled}
-            style={style}
-            onMouseDown={onMouseDown}
-            onMouseUp={onMouseUp}
-            onMouseLeave={onMouseLeave}
-            onTouchStart={onTouchStart}
-            onTouchEnd={onTouchEnd}
-            // data-react-component='true'
-            className={
-                classNames(
-                    `btn ${variant ? `btn-${variant}` : 'btn-articles'}`,
-                    {
-                        [className]: className,
-                        'btn-lg': large,
-                        'btn-sm': small,
-                        'active': active,
-                        [`btn-${size}`]: size 
-                    }
-                )
-            }
-            onClick={onClick}
-        >
-            {props.children}
-        </button>
-    )
-})
-ArticlesButton.displayName = 'ArticlesButton';
-
-export default ArticlesButton;

package/src/hooks/Ads/useAd.js

@@ -1,55 +0,0 @@
-import useSWR from "swr";
-
-import axios from "axios";
-
-const fetcher = async (data) => {
-    if (process.env.NODE_ENV === 'development') {
-        try {
-            const res = await axios.get(`http://localhost:3001/api/ads/${data.ad_id}`, {
-                params: {
-                    ad_id: data.ad_id
-                }
-            });
-            return res.data.result;
-        } catch (err) {
-            // Failed to fetch from localhost, fallback to default URL
-        }
-    }
-
-    return axios.get(data.url, {
-        params: {
-            ad_id: data.ad_id
-        }
-    }).then((res) => res.data.result);
-};
-
-const minutes = 60;
-const options = {
-    dedupingInterval: ((1000 * 60) * minutes),
-    // keepPreviousData: true,
-    // fallbackData: []
-}
-
-const useAd = (ad_id) => {
-
-    const { data, error, isLoading, mutate } = useSWR(
-        ad_id ?
-        {
-            url: `https://articles.media/api/ads/${ad_id}`, 
-            ad_id
-        }
-        :
-        null,
-        fetcher,
-        options
-    );
-
-    return {
-        data,
-        error,
-        isLoading,
-        mutate,
-    };
-};
-
-export default useAd;

package/src/hooks/Ads/useAds.js

@@ -1,54 +0,0 @@
-import useSWR from "swr";
-
-import axios from "axios";
-import { minutesToMilliseconds } from "date-fns";
-
-const fetcher = async (data) => {
-    if (process.env.NODE_ENV === 'development') {
-        try {
-            const res = await axios.get("http://localhost:3001/api/ads", {
-                params: {
-                    // ad_id: data.ad_id
-                }
-            });
-            return res.data;
-        } catch (err) {
-            // Failed to fetch from localhost, fallback to default URL
-        }
-    }
-
-    return axios.get(data.url, {
-        params: {
-            // ad_id: data.ad_id
-        }
-    }).then((res) => res.data);
-};
-
-const minutes = 60;
-const options = {
-    dedupingInterval: minutesToMilliseconds(minutes),
-    focusThrottleInterval: minutesToMilliseconds(minutes),
-    // keepPreviousData: true,
-    // fallbackData: []
-}
-
-const useAds = (params) => {
-
-    const { data, error, isLoading, mutate } = useSWR(
-        {
-            url: `https://articles.media/api/ads`, 
-            // ad_id
-        },
-        fetcher,
-        options
-    );
-
-    return {
-        data,
-        error,
-        isLoading,
-        mutate,
-    };
-};
-
-export default useAds;

package/src/hooks/Games/useGameScoreboard.js

@@ -1,59 +0,0 @@
-import useSWR from "swr";
-
-import axios from "axios";
-
-const fetcher = async (obj) => {
-    if (process.env.NODE_ENV === 'development') {
-        try {
-            const res = await axios.get("http://localhost:3001/api/community/games/scoreboard", {
-                params: {
-                    game: obj.game,
-                }
-            });
-            return res.data;
-        } catch (err) {
-            // Failed to fetch from localhost, fallback to default URL
-        }
-    }
-    
-    return axios.get(obj.url, {
-        params: {
-            game: obj.game,
-        }
-    }).then((res) => res.data);
-};
-
-const options = {
-    dedupingInterval: ((1000 * 60) * 30),
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    shouldRetryOnError: false,
-    // fallbackData: []
-}
-
-const useGameScoreboard = (params) => {
-
-    const { data, error, isLoading, isValidating, mutate } = useSWR(
-        params?.game ?
-            {
-                // url: "/api/community/games/scoreboard",
-                url: "https://articles.media/api/community/games/scoreboard",
-                game: params.game,
-            }
-            :
-            null,
-        fetcher,
-        options
-    );
-
-    return {
-        data,
-        error,
-        isLoading,
-        isValidating,
-        mutate,
-    };
-};
-
-export default useGameScoreboard;