Feature/187838825 - Game Demo Page - Setup

docs/Examples/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Examples",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Demos and Implementation Examples for SpringRoll"
+  }
+}

docs/Examples/game.mdx

@@ -0,0 +1,6 @@
+import GameDemo from '../../src/components/GameDemo'
+
+# Game Demo
+
+<GameDemo   />
+

docs/Examples/introduction.md

@@ -0,0 +1,9 @@
+---
+sidebar_position: 1
+sidebar_label: Introduction
+sidebar_class_name: green
+---
+
+# Introduction
+
+This is a collection of examples for the SpringRoll toolset. Each example is a standalone project that demonstrates specific features.

docusaurus.config.ts

@@ -76,6 +76,12 @@ const config: Config = {
           position: 'left',
           label: 'SpringRoll Container',
         },
+        {
+          type: 'docSidebar',
+          sidebarId: 'examplesSidebar',
+          position: 'left',
+          label: 'Examples',
+        },
         {to: '/blog', label: 'Blog', position: 'left'},
         {
           href: 'https://github.com/SpringRoll',
@@ -98,6 +104,10 @@ const config: Config = {
               label: 'SpringRoll Container',
               to: '/docs/springroll-container/getting-started',
             },
+            {
+              label: 'Examples',
+              to: '/docs/Examples/introduction',
+            },
           ],
         },
         {

package.json

@@ -23,7 +23,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sass": "^1.77.6"
+    "sass": "^1.77.6",
+    "springroll-container": "^2.5.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

sidebars.ts

@@ -13,7 +13,8 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   springrollSidebar: [{type: 'autogenerated', dirName: 'springroll'}],
-  containerSidebar: [{type: 'autogenerated', dirName: 'springroll-container'}]
+  containerSidebar: [{type: 'autogenerated', dirName: 'springroll-container'}],
+  examplesSidebar: [{type: 'autogenerated', dirName: 'Examples'}]
 
   // But you can create a sidebar manually
   /*

src/components/GameDemo/index.tsx

@@ -0,0 +1,52 @@
+import { useEffect, JSX } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { Container } from 'springroll-container';
+import Heading from '@theme/Heading';
+
+/**
+ * Game Demo Component - Creates a springroll container and loads the demo game into it. Referenced in docs/Examples/game.mdx
+ * @returns JSX.Element
+ */
+export default function GameDemo(): JSX.Element {
+  // Instantiate the container and load the demo game after the component mounts  
+  useEffect(() => {
+    const container = new Container('#demo-game', {
+      plugins: []
+    });
+
+    container.openPath('http://springroll.io/springroll-io-demo-game/');
+  }, []);
+  return (
+    <section className={styles.gameDemoRoot}>
+      <iframe id="demo-game" className={styles.gameContainer}></iframe>
+
+      <div className={styles.gameEvents}>
+        <Heading as="h2" className={clsx('hero__subtitle', styles.gameHeader)}>
+          Game Options
+        </Heading>
+
+        <button type="button" className={clsx('button button--primary', styles.gameOptionButton)}>
+          <span>Pause</span>
+        </button>
+        <button type="button" className={clsx('button button--primary', styles.gameOptionButton)}>
+          <span>Mute</span>
+        </button>
+        <button type="button" className={clsx('button button--primary', styles.gameOptionButton)}>
+          <span>Hint</span>
+        </button>
+
+
+        <Heading as="h2" className={clsx('hero__subtitle', styles.gameHeader)}>
+          Game Events
+        </Heading>
+
+        <div className={clsx('button button--secondary', styles.gameOptionButton)}>Localiztion</div>
+        <div className={clsx('button button--secondary', styles.gameOptionButton)}>Speech Synch</div>
+        <div className={clsx('button button--secondary', styles.gameOptionButton)}>Pause</div>
+        <div className={clsx('button button--secondary', styles.gameOptionButton)}>Sound Mute</div>
+        <div className={clsx('button button--secondary', styles.gameOptionButton)}>Captions Start</div>
+      </div>
+    </section>
+  );
+}

src/components/GameDemo/styles.module.scss

@@ -0,0 +1,40 @@
+.gameDemoRoot {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  height:60vh;
+}
+
+.gameContainer {
+  background-color: #FFF !important;
+  height: 100%;
+  width: 100%;
+}
+
+.gameHeader {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.gameOptionButton {
+  height: 2.4rem;
+  width: 15rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: capitalize;
+  margin: .26rem;
+  transition: background-color .25s;
+}
+
+.gameEvents {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+