diff --git a/docs/Examples/_category_.json b/docs/Examples/_category_.json
new file mode 100644
index 0000000..a03a3ab
--- /dev/null
+++ b/docs/Examples/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Examples",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "Demos and Implementation Examples for SpringRoll"
+ }
+}
diff --git a/docs/Examples/game.mdx b/docs/Examples/game.mdx
new file mode 100644
index 0000000..ea53124
--- /dev/null
+++ b/docs/Examples/game.mdx
@@ -0,0 +1,6 @@
+import GameDemo from '../../src/components/GameDemo'
+
+# Game Demo
+
+
+
diff --git a/docs/Examples/introduction.md b/docs/Examples/introduction.md
new file mode 100644
index 0000000..5cfed13
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 995e9ff..9fc8f87 100644
--- a/docusaurus.config.ts
+++ b/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',
+ },
],
},
{
diff --git a/package-lock.json b/package-lock.json
index 7763044..88e166a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,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",
@@ -1864,6 +1865,28 @@
"@babel/core": "^7.0.0"
}
},
+ "node_modules/@babel/polyfill": {
+ "version": "7.12.1",
+ "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz",
+ "integrity": "sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==",
+ "deprecated": "🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.",
+ "dependencies": {
+ "core-js": "^2.6.5",
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
+ "node_modules/@babel/polyfill/node_modules/core-js": {
+ "version": "2.6.12",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+ "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+ "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+ "hasInstallScript": true
+ },
+ "node_modules/@babel/polyfill/node_modules/regenerator-runtime": {
+ "version": "0.13.11",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+ "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+ },
"node_modules/@babel/preset-env": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.7.tgz",
@@ -4145,6 +4168,11 @@
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
},
+ "node_modules/bellhop-iframe": {
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/bellhop-iframe/-/bellhop-iframe-3.5.0.tgz",
+ "integrity": "sha512-3KrYh7ZMdNiHvngKyR+3swD0jAiIEOb3clWmmDXMm8KCCNrIy7rGrFUC8mJX/f5X3y8Rwz8lsZeW0i2uUFeVnA=="
+ },
"node_modules/big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -13148,6 +13176,19 @@
"wbuf": "^1.7.3"
}
},
+ "node_modules/springroll-container": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/springroll-container/-/springroll-container-2.5.2.tgz",
+ "integrity": "sha512-K9H4EdazkcMsTushcfxJ4eJ7ubiOa2+Nvukhe3fO1jyev4o+9u5RRsc3r8TMUfhMAhMOPGWwqf3qfd9Qy75/cQ==",
+ "dependencies": {
+ "@babel/polyfill": "^7.4.3",
+ "bellhop-iframe": "^3.2.0",
+ "core-js": "^3.6.5",
+ "http-proxy": "^1.18.1",
+ "webpack": "^5.88.2",
+ "whatwg-fetch": "^3.0.0"
+ }
+ },
"node_modules/sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -14482,6 +14523,11 @@
"node": ">=0.8.0"
}
},
+ "node_modules/whatwg-fetch": {
+ "version": "3.6.20",
+ "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
+ "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
+ },
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 490f24e..c5061d4 100644
--- a/package.json
+++ b/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",
diff --git a/sidebars.ts b/sidebars.ts
index 39683c0..a195682 100644
--- a/sidebars.ts
+++ b/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
/*
diff --git a/src/components/GameDemo/index.tsx b/src/components/GameDemo/index.tsx
new file mode 100644
index 0000000..dc7370b
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ Game Options
+
+
+
+
+
+
+
+
+ Game Events
+
+
+
Localiztion
+
Speech Synch
+
Pause
+
Sound Mute
+
Captions Start
+