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

package/README.md

@@ -1,6 +1,6 @@
 # Articles Dev Box
 
-Shared code, functions, and components for different Articles Media projects.
+Shared code, functions, and components that are commonly used across Articles Media projects. None of this is meant to work outside the Articles Media frontend React ecosystem.
 
 ## Getting Started
 
@@ -16,6 +16,22 @@ Then go to the consuming project directory and run this command.
 npm link articles-dev-box
 ```
 
+For production use add the organization scooped package to your package.json.
+
+```bash
+npm i @articles-media/articles-dev-box
+```
+
+## Package Exports
+
+- ReturnToLauncherButton
+    - For bringing users back to their state in the games showcase/launcher
+- GameScoreboard
+    - Scoreboard for registered games that links with a user's Articles Media account.
+- Ad
+    - Articles Ad component that connects with user data.
+
 # Roadmap
 ⏹️ Remove Bootstrap reliance  
-⏹️ Look into npm package yalc  
+⏹️ Look into npm package yalc  
+⏹️ Automatic GitHub Action for NPM

package/index.js

@@ -1,5 +1,6 @@
 import ReturnToLauncherButton from './src/ReturnToLauncherButton.jsx';
-import ArticlesAd from './src/ArticlesAd.jsx';
+import ArticlesAd from './src/components/ArticlesAd.jsx';
+import Ad from './src/components/Ad.jsx';
 import GameScoreboard from './src/GameScoreboard.jsx';
 
 function helloWorld() {
@@ -10,5 +11,6 @@ export {
   helloWorld,
   ReturnToLauncherButton,
   ArticlesAd,
+  Ad,
   GameScoreboard,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@articles-media/articles-dev-box",
   "description": "Shared code, functions, and components for different Articles Media projects.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "index.js",
   "files": [
@@ -25,5 +25,11 @@
   "devDependencies": {
     "classnames": "^2.5.1",
     "sass": "^1.97.2"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "date-fns": "^4.1.0",
+    "react-intersection-observer": "^10.0.0",
+    "swr": "^2.3.8"
   }
 }

package/src/GameScoreboard.jsx

@@ -1,17 +1,234 @@
-import React from 'react';
-import '../styles/components/GameScoreboard.scss';
-
-const GameScoreboard = () => {
-  return (
-    <div className='articles-game-scoreboard'>
-      <h2>Game Scoreboard</h2>
-      <p>This is a test scoreboard component.</p>
-      <ul>
-        <li>Player 1: 100</li>
-        <li>Player 2: 200</li>
-      </ul>
-    </div>
-  );
-};
-
-export default GameScoreboard;
+// import React from 'react';
+// import '../styles/components/GameScoreboard.scss';
+// import classNames from 'classnames';
+
+// const GameScoreboard = ({
+//     game,
+//     darkMode
+// }) => {
+//     return (
+//         <div
+//             className={
+//                 classNames(
+//                     `articles-game-scoreboard card`,
+//                     { 'dark-mode': darkMode }
+//                 )
+//             }
+//         >
+
+//             <div
+//                 className='card-header'
+//             >
+//                 <div className='fw-bold mb-0'>
+//                     <i className='fad fa-gamepad'></i>
+//                     {game} Scoreboard
+//                 </div>
+//             </div>
+
+//             <div className='card-body p-2'>
+//                 <p>This is a test scoreboard component.</p>
+//                 <ul>
+//                     <li>Player 1: 100</li>
+//                     <li>Player 2: 200</li>
+//                 </ul>
+//             </div>
+
+//             <div
+//                 className='card-footer'
+//             >
+
+//             </div>
+
+//         </div>
+//     );
+// };
+
+// export default GameScoreboard;
+
+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 './Button';
+
+import useGameScoreboard from './hooks/useGameScoreboard';
+
+import "../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;