v0.4.0-alpha

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sc2-campaign-manager",
-  "version": "0.3.0-alpha",
+  "version": "0.4.0-alpha",
   "description": "A Campaign Manager for StarCraft II.  ",
   "main": "main.js",
   "build": {
@@ -58,6 +58,8 @@
     "@types/electron": "^1.6.10",
     "@types/react": "^16.8.13",
     "@types/react-dom": "^16.8.3",
+    "@types/react-images": "^0.5.1",
+    "@types/react-jsonschema-form": "^1.3.2",
     "@types/react-router-dom": "^4.3.1",
     "babel-core": "^6.26.3",
     "bootstrap": "^4.3.1",
@@ -73,6 +75,7 @@
     "rage-edit": "^1.2.0",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
+    "react-images": "^0.5.19",
     "react-jsonschema-form": "^1.3.0",
     "react-lightbox-component": "^1.2.1",
     "react-markdown": "^4.0.6",

src/App.scss

@@ -11,6 +11,11 @@
     background: rgba(255, 255, 255, 0.08);
 }
 
+progress[value="0"] {
+	/* Reset the default appearance */
+	visibility: hidden;
+  }
+
 progress[value] {
 	/* Reset the default appearance */
 	-webkit-appearance: none;

src/components/CampaignDetails.tsx

@@ -4,9 +4,9 @@ import  ReactMarkdown from 'react-markdown'
 
 import Campaign, {ICampaign, IAuthor} from '../classes/Campaign'
 import PropTypes  from 'prop-types';
-import Lightbox from 'react-lightbox-component';
+//import Lightbox as Lightbox2 from 'react-lightbox-component';
 import DownloadBar from './DownloadBar'
-
+import Lightbox from 'react-images'
 
 
 
@@ -66,6 +66,7 @@ class CampaignDetails extends Component<any,any> {
 		const {
 			id, 
 			name, 
+			author,
 			description, 
 			maps, 
 			lastUpdated, 
@@ -75,7 +76,7 @@ class CampaignDetails extends Component<any,any> {
 			progress
 		} = campaign;
 
-		const author:IAuthor = (selectedCampaignAuthor)?selectedCampaignAuthor:emptyAuthor;
+		//const author:IAuthor = (selectedCampaignAuthor)?selectedCampaignAuthor:emptyAuthor;
 		const isCampaignInstalled:boolean = installed;//!Campaign.isCampaignInstalled(campaign);
 
 		const onDownloadClick = onDownloadCampaignClick;
@@ -91,7 +92,7 @@ class CampaignDetails extends Component<any,any> {
 						{(isCampaignInstalled) &&
 							<React.Fragment>
 								<button onClick={() => onPlayCampaignClick(campaign)} className="btn btn-primary">Play</button>
-								<button onClick={() => onUpdateCampaignClick(campaign)} className="btn btn-outline-primary">Update</button>
+								{/* <button onClick={() => onUpdateCampaignClick(campaign)} className="btn btn-outline-primary">Update</button> */}
 							</React.Fragment>
 						}
 						{(!isCampaignInstalled) &&
@@ -101,9 +102,10 @@ class CampaignDetails extends Component<any,any> {
 					</div>
 					<h1 className="campaign-content-title">{name}</h1>
 					<p className="campaign-content-subtitle">
-						By <a href={"mailto:"+author.email}>{author.name}</a>. Last Updated: <time>{lastUpdated}</time>
+						By <a href={"mailto:"+author}>{author}</a>. Last Updated: <time>{lastUpdated}</time>
 					</p>
-					<p className="campaign-content-subtitle">
+					{/*
+						<p className="campaign-content-subtitle">
 						Tagged under 
 						{(installed) &&
 							<span> <i className="campaign-filter-installed"></i>Installed</span>
@@ -112,6 +114,7 @@ class CampaignDetails extends Component<any,any> {
 							<span> <i className="campaign-filter-updated"></i>Updated</span>
 						}
 					</p>
+					*/}
 					{(!isCampaignInstalled) &&
 						<DownloadBar progress={downloadProgress} />
 					}
@@ -121,7 +124,7 @@ class CampaignDetails extends Component<any,any> {
 
 				<div className="campaign-content-body">
 					<div className="btn-group" role="group" aria-label="...">
-						<NavLink to="/campaign/description" className="btn btn-outline-primary" activeClassName="btn-primary active">
+						<NavLink to="/campaign" exact className="btn btn-outline-primary" activeClassName="btn-primary active">
 							Description
 						</NavLink>
 						<NavLink to="/campaign/screenshots" className="btn btn-outline-primary" activeClassName="btn-primary active">
@@ -140,18 +143,11 @@ class CampaignDetails extends Component<any,any> {
 
 					<article>
 					<Switch>
-					<Route path="/campaign/description" render={()=>
+					<Route path="/campaign" exact render={()=>
 						<ReactMarkdown source={description} />
 					} />
 					<Route path="/campaign/screenshots" render={()=>
-						<ul>
-						{screenshots.map((screenshot:any) =>
-							<React.Fragment key={screenshot.src}>
-							<li>{screenshot.src}</li>	
-							</React.Fragment>
-						)}
 						<Lightbox images={screenshots} />
-						</ul>
 					} />
 
 					<Route path="/campaign/patchNotes" render={()=>

src/components/CampaignList.tsx

@@ -10,15 +10,16 @@ function CampaignListItem(props:any) {
 	const downloadProgress = (progress)?progress:0;
 	return (
 		<button type="button" className={"campaign-item list-group-item list-group-item-action"+((selectedId === id)?" active":"")} onClick={() => props.onClick(campaign)} >
-			<figure className="campaign-thumbnail-container float-left">
+			<figure className="campaign-thumbnail-container float-left mb-0">
 				<img width="64" height="64" alt="" className="campaign-thumbnail" src={thumbnail} />
 			</figure>
 			<div className="campaign-item-details">
 				<h5 className="campaign-item-shortname mb-1">{shortName}</h5>
 				<small>By {author}</small>
+				<DownloadBar progress={downloadProgress} />
 				{/* <p className="campaign-item-summary mb-1">{summmary}</p> */}
 			</div>
-			<DownloadBar progress={downloadProgress} />
+
 		</button>
 	);
 }

src/components/NavBar.tsx

@@ -35,6 +35,7 @@ function NavBar(props:NavBarProps) {
 					</NavLink>
 				</li>    
 				</ul>
+				{/*
 				<ul className="navbar-nav">
 				<li className="nav-item">
 					<a className={"nav-link"+filterInstalledActive} href="#">
@@ -47,6 +48,7 @@ function NavBar(props:NavBarProps) {
 					</a>
 				</li>
 				</ul>
+				*/}
 			</div>  
 		</nav>
 	);