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

package/src/components/Games/GameScoreboard.jsx

@@ -0,0 +1,188 @@
+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/{ReturnToLauncherButton.jsx → components/Games/ReturnToLauncherButton.jsx}

@@ -1,4 +1,4 @@
-import ArticlesButton from "./Button";
+import ArticlesButton from "#root/src/components/UI/Button";
 
 export default function ReturnToLauncherButton() {
 
@@ -11,6 +11,8 @@ export default function ReturnToLauncherButton() {
 
     // const router = useRouter()
 
+    if (typeof window === "undefined") return
+
     if (!launcher_mode) {
         return (
             <ArticlesButton

package/src/hooks/Ads/useAd.js

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,59 @@
+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;

package/src/styles/components/Ad.scss

@@ -0,0 +1,223 @@
+@use "../global.scss" as *;
+
+.ad-wrap {
+    z-index: 1;
+    margin: 0 auto;
+    margin-bottom: 1rem;
+    max-width: 312px;
+    width: 100%;
+
+    .ad {
+        position: relative;
+        align-self: flex-start;
+        width: 100%;
+        z-index: 2;
+        font-family: brandon-grotesque, sans-serif;
+        @include shadow-articles;
+        font-size: 14px;
+
+        @include media-breakpoint-down(md) {
+            font-size: 16px;
+            width: 100%;
+        }
+
+        .main-panel {
+            background-color: var(--articles-ad-background-color, var(--card-background));
+            color: var(--articles-ad-font-color, var(--bs-body-color));
+            // background-color: #343746;
+            height: 400px;
+            display: flex;
+            flex-direction: column;
+
+            .ad-warning {
+                // background-color: $base-color;
+                // background-color: white;
+                // color: black;
+                padding: 0.1rem 0.75rem;
+                font-family: brandon-grotesque, sans-serif;
+                // font-style: normal;
+                font-weight: 900;
+                font-size: 1rem;
+                border-bottom: 1px solid var(--articles-ad-border-color, var(--card-background));
+            }
+
+            .content-wrap {
+                display: flex;
+                // flex-direction: row;
+                flex-direction: column;
+                align-items: center;
+
+                @include media-breakpoint-up(lg) {
+                    flex-direction: column;
+                }
+            }
+
+            .photo-banner {
+                position: relative;
+                height: 100px;
+                width: 100px;
+                flex-shrink: 0;
+                display: flex;
+                // justify-content: center;
+                align-items: center;
+                padding-left: 1rem;
+                margin-left: 0.75rem;
+
+                // @include media-breakpoint-up(lg) {
+                margin-left: 0rem;
+                height: 125px;
+                width: 100%;
+                // }
+
+                .logo {
+                    // padding: 1rem;
+                    // $height: 125px;
+                    // position: absolute;
+                    // top: 1rem;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+                    // height: $height;
+                    object-fit: cover;
+                    z-index: 1;
+
+                    img {
+                        width: 75px;
+                        height: 75px;
+                        object-fit: contain;
+
+                        // @include media-breakpoint-up(lg) {
+                        //     width: 100px;
+                        //     height: 100px;
+                        // }
+                    }
+                }
+
+                .icon {
+                    display: none;
+                    position: absolute;
+                    bottom: calc(-125px / 2);
+                    left: 20px;
+                    height: 125px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 3.5rem;
+                }
+
+                .photo {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+
+            .details-wrap {
+                width: 100%;
+            }
+
+            .details,
+            .detail-title {
+                padding: 0.75rem;
+                // color: white;
+                display: grid;
+                grid-gap: 5px 5px;
+                grid-template-columns: repeat(2, 1fr);
+                padding-bottom: 0rem;
+
+                @include media-breakpoint-down(md) {
+                    // padding-top: 80px;
+                }
+
+                .detail {
+                    // margin-left: 5%;
+                    // width: 50%;
+
+                    .icon {
+                        display: inline-block;
+                        width: 1.5rem;
+
+                        i {
+                            justify-content: flex-start;
+                            display: flex;
+                        }
+                    }
+                }
+            }
+
+            .short-description {
+                padding: 0.75rem;
+                padding-top: 0.25rem;
+                padding-bottom: 0rem;
+                min-height: 50px;
+                overflow-y: auto;
+                max-height: 125px;
+                // @include articles-scrollbar;
+                @include alternate-scrollbar;
+                // color: white;
+            }
+
+            .detail-title {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                // .detail {
+                //     // font-size: 2rem;
+                //     width: 100%;
+                //     font-family: brandon-grotesque, sans-serif;
+                //     font-style: normal;
+                //     font-weight: 900;
+                //     font-size: 1.25rem;
+
+                //     .icon {
+                //         margin-right: 1rem;
+                //     }
+                // }
+            }
+
+            .action-wrap {
+                // background-color: #343746;
+                // color: white;
+                border-top: 1px solid var(--articles-ad-border-color, var(--card-background));
+
+                .action {
+                    // color: white;
+                    // margin-top: 0.75rem;
+                    padding: 0.25rem;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border: 1px solid var(--articles-ad-border-color, var(--card-background));
+                    color: var(--articles-ad-font-color, var(--bs-body-color));
+                    border-radius: 10px;
+                    margin-left: auto;
+                    margin-right: auto;
+                    cursor: pointer;
+                    transition-duration: 200ms;
+
+                    &:hover {
+                        background-color: white;
+                        color: black;
+                    }
+
+                    &:active {
+                        background-color: gray;
+                    }
+                }
+            }
+        }
+    }
+
+    .advertise-with-us {
+        background-color: var(--articles-ad-background-color, var(--card-background));
+        border-top: 2px solid var(--articles-ad-border-color, var(--card-background));
+
+        a {
+            color: var(--articles-ad-font-color, var(--bs-body-color))!important;
+        }
+    }
+}

package/src/styles/components/GameScoreboard.scss

@@ -0,0 +1,37 @@
+@use "../global.scss" as *;
+
+.scoreboard {
+    margin-top: 1rem;
+    max-width: 300px;
+    width: 100%;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(lg) {
+        margin-top: 0rem;
+        margin-bottom: 0rem;
+        display: block;
+        position: absolute;
+        left: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+}
+
+.articles-game-scoreboard {
+    border: 1px solid rgb(206, 212, 218);
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 8px;
+    // background: rgb(255, 255, 255);
+    color: rgb(34, 34, 34);
+    width: 100%;
+    max-width: 350px;
+    margin: 0px 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    position: fixed;
+    bottom: 50%;
+    transform: translateY(50%);
+    left: 8px;
+}