From 228548f960b05b1267b6b9bfe52250030922d0fd Mon Sep 17 00:00:00 2001 From: Jeremy McCurdy Date: Tue, 2 Jul 2024 11:53:48 -0300 Subject: [PATCH 1/5] Added game demo page with SpringRoll Container --- docs/Examples/game.mdx | 6 +++ package-lock.json | 48 ++++++++++++++++- package.json | 3 +- src/components/GameDemo/index.tsx | 42 +++++++++++++++ src/components/GameDemo/styles.module.scss | 60 ++++++++++++++++++++++ 5 files changed, 157 insertions(+), 2 deletions(-) create mode 100644 docs/Examples/game.mdx create mode 100644 src/components/GameDemo/index.tsx create mode 100644 src/components/GameDemo/styles.module.scss 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/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/src/components/GameDemo/index.tsx b/src/components/GameDemo/index.tsx new file mode 100644 index 0000000..cbeea8b --- /dev/null +++ b/src/components/GameDemo/index.tsx @@ -0,0 +1,42 @@ +import { useEffect, JSX } from 'react'; +import styles from './styles.module.scss'; +import { Container } from 'springroll-container'; + +/** + * 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
+
+
+ ); +} diff --git a/src/components/GameDemo/styles.module.scss b/src/components/GameDemo/styles.module.scss new file mode 100644 index 0000000..023ae18 --- /dev/null +++ b/src/components/GameDemo/styles.module.scss @@ -0,0 +1,60 @@ +@import "../../scss/colors"; + +.gameDemoRoot { + display: flex; + flex-direction: row; + align-items: flex-start; + width: 100%; + height:57vh; +} + +.gameContainer { + background-color: transparent !important; + height: 100%; + width: 100%; +} + +.gameHeader { + margin-top: 1rem; + margin-bottom: 0; + font-size: 1.6rem !important; +} + +@mixin buttonStyles { + height: 2.4rem; + width: 15rem; + border-radius: .4rem; + box-shadow: 0 0 2px 0 rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.2); + display: flex; + justify-content: center; + align-items: center; + text-transform: capitalize; + margin: .26rem; + transition: background-color .25s; + +} + +.optionButton { + @include buttonStyles; + color: $white; + background-color: $primary !important; + border-color: $primary !important; +} + +.gameEvent { + @include buttonStyles; + background-color: #f7f7f7; + color: $primary; +} + +.gameEvents { + color: $primary; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + text-align: center; + padding: 0; + margin: 0; +} + From ddd3a31a732040fc9f92f3a2a6d81f9820d8385e Mon Sep 17 00:00:00 2001 From: Jeremy McCurdy Date: Tue, 2 Jul 2024 13:30:47 -0300 Subject: [PATCH 2/5] Fixes post-merge, and added `_category_.json` file for examples section --- docs/Examples/game.mdx | 6 ------ docs/springroll/Examples/_category_.json | 8 ++++++++ docs/springroll/Examples/game.mdx | 6 ++++++ src/components/GameDemo/index.tsx | 6 +++--- src/components/GameDemo/styles.module.scss | 2 +- 5 files changed, 18 insertions(+), 10 deletions(-) delete mode 100644 docs/Examples/game.mdx create mode 100644 docs/springroll/Examples/_category_.json create mode 100644 docs/springroll/Examples/game.mdx diff --git a/docs/Examples/game.mdx b/docs/Examples/game.mdx deleted file mode 100644 index ea53124..0000000 --- a/docs/Examples/game.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import GameDemo from '../../src/components/GameDemo' - -# Game Demo - - - diff --git a/docs/springroll/Examples/_category_.json b/docs/springroll/Examples/_category_.json new file mode 100644 index 0000000..0e467e6 --- /dev/null +++ b/docs/springroll/Examples/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Examples", + "position": 12, + "link": { + "type": "generated-index", + "description": "Demos and Implementation Examples for SpringRoll" + } +} diff --git a/docs/springroll/Examples/game.mdx b/docs/springroll/Examples/game.mdx new file mode 100644 index 0000000..eae62ae --- /dev/null +++ b/docs/springroll/Examples/game.mdx @@ -0,0 +1,6 @@ +import GameDemo from '../../../src/components/GameDemo' + +# Game Demo + + + diff --git a/src/components/GameDemo/index.tsx b/src/components/GameDemo/index.tsx index cbeea8b..5702075 100644 --- a/src/components/GameDemo/index.tsx +++ b/src/components/GameDemo/index.tsx @@ -21,16 +21,16 @@ export default function GameDemo(): JSX.Element {

Game Options

+ - +

Game Events

+
Localiztion
Speech Synch
Pause
diff --git a/src/components/GameDemo/styles.module.scss b/src/components/GameDemo/styles.module.scss index 023ae18..bf7d7f5 100644 --- a/src/components/GameDemo/styles.module.scss +++ b/src/components/GameDemo/styles.module.scss @@ -5,7 +5,7 @@ flex-direction: row; align-items: flex-start; width: 100%; - height:57vh; + height:60vh; } .gameContainer { From befb936fc982649ab57344ff60b7a89055d1f7e6 Mon Sep 17 00:00:00 2001 From: Jeremy McCurdy Date: Tue, 2 Jul 2024 13:39:01 -0300 Subject: [PATCH 3/5] Added back hint button that was accidentally removed --- src/components/GameDemo/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/GameDemo/index.tsx b/src/components/GameDemo/index.tsx index 5702075..eefb96f 100644 --- a/src/components/GameDemo/index.tsx +++ b/src/components/GameDemo/index.tsx @@ -28,6 +28,10 @@ export default function GameDemo(): JSX.Element { + +

Game Events

From cf316a5f4841ebcc6f3ac4b6891ade08999c2065 Mon Sep 17 00:00:00 2001 From: Jeremy McCurdy Date: Wed, 3 Jul 2024 09:48:29 -0300 Subject: [PATCH 4/5] Moved examples into its own sidebar section. Changed demo page to use theme styles that are affected by dark mode --- .../{springroll => }/Examples/_category_.json | 2 +- docs/Examples/game.mdx | 6 +++++ docs/Examples/introduction.md | 9 +++++++ docs/springroll/Examples/game.mdx | 6 ----- docusaurus.config.ts | 10 +++++++ sidebars.ts | 3 ++- src/components/GameDemo/index.tsx | 26 ++++++++++++------- src/components/GameDemo/styles.module.scss | 22 +--------------- 8 files changed, 45 insertions(+), 39 deletions(-) rename docs/{springroll => }/Examples/_category_.json (88%) create mode 100644 docs/Examples/game.mdx create mode 100644 docs/Examples/introduction.md delete mode 100644 docs/springroll/Examples/game.mdx diff --git a/docs/springroll/Examples/_category_.json b/docs/Examples/_category_.json similarity index 88% rename from docs/springroll/Examples/_category_.json rename to docs/Examples/_category_.json index 0e467e6..a03a3ab 100644 --- a/docs/springroll/Examples/_category_.json +++ b/docs/Examples/_category_.json @@ -1,6 +1,6 @@ { "label": "Examples", - "position": 12, + "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/docs/springroll/Examples/game.mdx b/docs/springroll/Examples/game.mdx deleted file mode 100644 index eae62ae..0000000 --- a/docs/springroll/Examples/game.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import GameDemo from '../../../src/components/GameDemo' - -# Game Demo - - - 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/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 index eefb96f..dc7370b 100644 --- a/src/components/GameDemo/index.tsx +++ b/src/components/GameDemo/index.tsx @@ -1,6 +1,8 @@ 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 @@ -20,26 +22,30 @@ export default function GameDemo(): JSX.Element {
-

Game Options

+ + Game Options + - - - -

Game Events

+ + Game Events + -
Localiztion
-
Speech Synch
-
Pause
-
Sound Mute
-
Captions Start
+
Localiztion
+
Speech Synch
+
Pause
+
Sound Mute
+
Captions Start
); diff --git a/src/components/GameDemo/styles.module.scss b/src/components/GameDemo/styles.module.scss index bf7d7f5..5508373 100644 --- a/src/components/GameDemo/styles.module.scss +++ b/src/components/GameDemo/styles.module.scss @@ -1,5 +1,3 @@ -@import "../../scss/colors"; - .gameDemoRoot { display: flex; flex-direction: row; @@ -17,38 +15,20 @@ .gameHeader { margin-top: 1rem; margin-bottom: 0; - font-size: 1.6rem !important; } -@mixin buttonStyles { +.gameOptionButton { height: 2.4rem; width: 15rem; - border-radius: .4rem; - box-shadow: 0 0 2px 0 rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.2); display: flex; justify-content: center; align-items: center; text-transform: capitalize; margin: .26rem; transition: background-color .25s; - -} - -.optionButton { - @include buttonStyles; - color: $white; - background-color: $primary !important; - border-color: $primary !important; -} - -.gameEvent { - @include buttonStyles; - background-color: #f7f7f7; - color: $primary; } .gameEvents { - color: $primary; display: flex; flex-direction: column; align-content: center; From 5525382ded0ceb4849abcf44e5f42f422574fb44 Mon Sep 17 00:00:00 2001 From: Jeremy McCurdy Date: Wed, 3 Jul 2024 15:19:05 -0300 Subject: [PATCH 5/5] Changed the background color of the demo iframe to prevent issues with dark mode --- src/components/GameDemo/styles.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GameDemo/styles.module.scss b/src/components/GameDemo/styles.module.scss index 5508373..0e0f74f 100644 --- a/src/components/GameDemo/styles.module.scss +++ b/src/components/GameDemo/styles.module.scss @@ -7,7 +7,7 @@ } .gameContainer { - background-color: transparent !important; + background-color: #FFF !important; height: 100%; width: 100%; }