Merge pull request #116 from cayb0rg/ease-of-use-fixes

Ease of use fixes

README.md

@@ -13,9 +13,12 @@ For more information about developing Materia widgets, visit [our docs site](htt
 * Quick installation to a local Materia instance and utilities for widget package compiling
 * Materia API mocking
 
-*\*experimental feature*  
+*\*experimental feature*
 
 ## Setup
 
 Visit the [MWDK wiki](https://github.com/ucfopen/Materia-Widget-Dev-Kit/wiki) for instructions related to installation, use, upgrading from prior versions, and more.
 
+## Contributing
+
+For more information on contributing, visit the [MWDK wiki](https://github.com/ucfopen/Materia-Widget-Dev-Kit/wiki/Contributing).

assets/css/mwdk-main.css

@@ -11,7 +11,7 @@
 	border-radius: 4px;
 	border: #e4e4e4 1px solid;
 	box-shadow: 1px 3px 10px #dcdcdc;
-	
+
 }
 
 .mwdk-home img {
@@ -109,6 +109,10 @@
 	margin: auto;
 }
 
+.centered {
+	text-align: center;
+}
+
 .center.full {
 	margin-top: 100px;
 	width: calc(100% - 120px);
@@ -444,4 +448,10 @@ header.logged-in {
 	flex-shrink: 0;
 	height: fit-content;
 	margin: 0;
+}
+
+#try-again-button {
+	padding: 10px;
+	border-radius: 5px;
+	cursor: pointer;
 }

bin/mwdk-start.js

@@ -1,4 +1,15 @@
 #! /usr/bin/env node
-var shell = require("shelljs");
 
-shell.exec("export NODE_ENV=development || set NODE_ENV=development && node ./node_modules/materia-widget-development-kit/express.js --mode=development");
+// command line options
+const args = process.argv.slice(2);
+
+const shell = require("shelljs");
+
+// check if the NODE_ENV is set to anything
+// if so, don't change it
+let node_env = process.env.NODE_ENV;
+if (node_env === undefined || node_env === null || node_env === '') {
+    node_env = 'development';
+}
+
+shell.exec(`export NODE_ENV=${node_env} || set NODE_ENV=${node_env} && node ./node_modules/materia-widget-development-kit/express.js ${args.join(' ')}`);

example-widget-config.js

@@ -0,0 +1,47 @@
+// This is an example webpack for a React project
+
+const path = require('path')
+const srcPath = path.join(__dirname, 'src') + path.sep
+const outputPath = path.join(__dirname, 'build') + path.sep
+const widgetWebpack = require('materia-widget-development-kit/webpack-widget')
+
+const rules = widgetWebpack.getDefaultRules()
+const copy = [
+	...widgetWebpack.getDefaultCopyList()
+]
+
+const entries = {
+	'player': [
+		path.join(srcPath, 'player.html'),
+		path.join(srcPath, 'player.js'),
+		path.join(srcPath, 'player.scss')
+	],
+	'creator': [
+		path.join(srcPath, 'creator.html'),
+		path.join(srcPath, 'creator.js'),
+		path.join(srcPath, 'creator.scss')
+	],
+	'scoreScreen': [
+		path.join(srcPath, 'scoreScreen.html'),
+		path.join(srcPath, 'scoreScreen.js'),
+		path.join(srcPath, 'scoreScreen.scss')
+	]
+}
+
+
+const customRules = [
+	rules.loadHTMLAndReplaceMateriaScripts,
+	rules.loadAndPrefixSASS,
+	rules.copyImages,
+	rules.reactLoader
+]
+
+const options = {
+	entries: entries,
+	copyList: copy,
+	moduleRules: customRules
+}
+
+const buildConfig = widgetWebpack.getLegacyWidgetBuildConfig(options)
+
+module.exports = buildConfig

express.js

@@ -12,7 +12,6 @@ const cors                 = require('cors')
 const hbs                  = require('hbs');
 
 // common paths used here
-const srcPath              = path.join(process.cwd(), 'src') + path.sep
 const outputPath           = path.join(process.cwd(), 'build') + path.sep
 
 // Webpack middleware setup
@@ -29,7 +28,6 @@ const webpackMiddleware = webpackDevMiddleware(compiler, {
 let hasCompiled = false;
 let hasSampleScoreData = false;
 let customScoreScreen = null;
-let hasPlayLogs = false;
 
 // this will call next() once webpack is ready by trying to:
 // 1. talk to the middlware
@@ -343,6 +341,7 @@ const resizeImage = (size, double) => {
 }
 // ============= ASSETS and SETUP =======================
 const app = express();
+const port = process.env.PORT || 8118;
 // ============= ASSETS and SETUP =======================
 
 hbs.registerPartials(__dirname + 'views/partials', function(err) {});
@@ -384,8 +383,7 @@ app.use('/js', express.static(path.join(clientAssetsPath, 'js')))
 
 // insert the port into the res.locals
 app.use( (req, res, next) => {
-	// console.log(`request to ${req.url}`)
-	res.locals.port = process.env.PORT || 8118
+	res.locals.port = port
 	next()
 })
 
@@ -538,7 +536,6 @@ app.post('/mwdk/remove_play_logs', async (req, res) => {
 		error = true
 		res.status(204)
 	}
-	hasPlayLogs = false;
 	return res.json({ error: error, msg: msg})
 })
 
@@ -560,6 +557,12 @@ app.get('/mwdk/widgets/1-mwdk/create', (req, res) => {
 	res.render(res.locals.template, { layout: false})
 });
 
+// old url
+// redirect to home page since we can't set hash here
+app.get('/mwdk/widgets/1-mwdk/:instance?', (req, res) => {
+	res.redirect('/')
+})
+
 app.get('/mwdk/widgets/1-mwdk/creators-guide', (req, res) => {
 	res.locals = Object.assign(res.locals, {
 		template: 'guide_page',
@@ -728,10 +731,14 @@ app.use(['/qsets/import', '/mwdk/saved_qsets'], (req, res) => {
 	res.json(saved_qsets);
 });
 
-// The play page frame that loads the widget player in an iframe
-app.get('/player/:id?', (req, res) => {
-	res.redirect('/preview/' + (req.params.id ? req.params.id : ''))
+// redirect to the player page
+app.get('/mwdk/player/:instance?', (req, res) => {
+	if (!req.params.instance) {
+		res.redirect('/mwdk/player/demo')
+	}
+	else res.redirect('/preview/' + (req.params.instance ? req.params.instance : ''))
 })
+
 app.get(['/preview/:id?'], (req, res) => {
 	let widget = yaml.parse(getInstall().toString());
 	res.locals = Object.assign(res.locals, { template: 'player_mwdk', instance: req.params.id || 'demo', widgetWidth: widget.general.width, widgetHeight: widget.general.height })
@@ -793,7 +800,6 @@ app.use('/api/json/play_logs_save', (req, res) => {
 	const logs = JSON.parse(req.body.data)[1];
 	try {
 		fs.writeFileSync(path.join(qsets, 'log.json'), JSON.stringify(logs));
-		hasPlayLogs = true;
 		console.log("========== Play Logs Received ==========\r\n", logs, "\r\n============END PLAY LOGS================");
 		res.json(true);
 	} catch(err) {
@@ -1243,6 +1249,6 @@ app.use(['/api/json/widget_instance_play_scores_get', '/api/json/guest_widget_in
 	res.json(result)
 })
 
-app.listen(8118, function () {
-	console.log('Listening on port 8118');
+app.listen(port, function () {
+	console.log(`Listening on port ${port}`);
 })

views/preview_blocked.hbs

@@ -1,16 +1,19 @@
-<h1 class='centered'>Preview Blocked</h1>
-<div class='centered'>
-	<p>
-		<a href='/player/{{instance}}' target='_blank'>Try Again</a>
-	</p>
+<!DOCTYPE html>
+
+<script type="text/javascript" src="/materia-assets/js/materia.enginecore.js"></script>
+<script src="/mwdk/mwdk-assets/js/mwdk-package.js"></script>
+<link rel='stylesheet' href='/mwdk/assets/css/mwdk-main.css' type='text/css' />
+
+<h1 class='center centered'>Preview Blocked</h1>
+<div class='center centered'>
 	<p>
-		<a id='close-button' href='#'>Close</a>
+		<a id='try-again-button' class='action_button' target='_blank'>Try Again</a>
 	</p>
 </div>
 
 <script type="text/javascript">
-	document.getElementById('close-button').onclick = (e) => {
-		window.parent.MWDK.Creator.onQuestionImportComplete();
+	document.getElementById('try-again-button').onclick = (e) => {
+		MWDK.Package.showPlayer();
 		return false
 	}
 </script>

webpack-widget.js

@@ -140,12 +140,24 @@ const getDefaultCopyList = () => {
 
 // Rules needed for common builds
 const getDefaultRules = () => ({
+	// process react files (.js and .jsx)
 	reactLoader: {
-		test: /\.js$/,
+		test: /\.(js|jsx)$/i,
 		exclude: /node_modules/,
-		use: {
-			loader: 'babel-loader'
-		}
+		resolve: {
+			extensions: ['.js', '.jsx']
+		},
+		use: [
+			{
+				loader: 'babel-loader',
+				options: {
+					presets: [
+						'@babel/preset-react', // transform jsx into js
+						'@babel/preset-env' // enable latest JS features
+					]
+				}
+			}
+		]
 	},
 	// process regular javascript files
 	// SKIPS the default webpack Javascript functionality
@@ -179,7 +191,7 @@ const getDefaultRules = () => ({
 	// in the src of the html files, this will tell webpack
 	// how to deal with those files
 	copyImages: {
-		test: /\.(jpe?g|png|gif|svg)$/i,
+		test: /\.(jpe?g|png|gif|svg|ico|ttf|eot|woff|woff2)$/i,
 		exclude: /node_modules/,
 		type: 'asset/resource',
 		generator: {