@articles-media/articles-dev-box 1.0.0

package/README.md

@@ -0,0 +1,21 @@
+# Articles Dev Box
+
+Shared code, functions, and components for different Articles Media projects.
+
+## Getting Started
+
+For local development, navigate to this project and run this command.
+
+```bash
+npm link
+```
+
+Then go to the consuming project directory and run this command.
+
+```bash
+npm link articles-dev-box
+```
+
+# Roadmap
+⏹️ Remove Bootstrap reliance  
+⏹️ Look into npm package yalc  

package/index.js

@@ -0,0 +1,14 @@
+import ReturnToLauncherButton from './src/ReturnToLauncherButton.jsx';
+import ArticlesAd from './src/ArticlesAd.jsx';
+import GameScoreboard from './src/GameScoreboard.jsx';
+
+function helloWorld() {
+  return "Hello, world!";
+}
+
+export {
+  helloWorld,
+  ReturnToLauncherButton,
+  ArticlesAd,
+  GameScoreboard,
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@articles-media/articles-dev-box",
+  "description": "Shared code, functions, and components for different Articles Media projects.",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "src",
+    "styles"
+  ],
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Articles Media",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=19.2.3",
+    "react-dom": ">=19.2.3"
+  },
+  "devDependencies": {
+    "classnames": "^2.5.1",
+    "sass": "^1.97.2"
+  }
+}

package/src/ArticlesAd.jsx

@@ -0,0 +1,76 @@
+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/Button.js

@@ -0,0 +1,61 @@
+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/GameScoreboard.jsx

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

package/src/ReturnToLauncherButton.jsx

@@ -0,0 +1,53 @@
+import ArticlesButton from "./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 (!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/styles/components/GameScoreboard.scss

@@ -0,0 +1,3 @@
+.articles-game-scoreboard {
+    background-color: aquamarine;
+}