4 | StarCraft 2 Campaign Manager 5 |

25 | JSON 26 | 27 | 28 |

37 |         </div>
38 |     );
39 | }
40 | 
41 | export default ManifestEditorJson;

--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const webpack = require("webpack");
 3 | 
 4 | module.exports = {
 5 | 	entry: "./renderer.tsx",
 6 | 	target: "electron-renderer",
 7 | 	mode: "development",
 8 | 	module: {
 9 | 		rules: [
10 | 			{
11 | 				test: /\.(js|jsx)$/,
12 | 				exclude: /(node_modules|bower_components)/,
13 | 				loader: "babel-loader",
14 | 				//options: { presets: ["@babel/env"] }
15 | 			},
16 | 			{ 
17 | 				test: /\.tsx?$/, 
18 | 				loader: "awesome-typescript-loader" 
19 | 			},
20 | 			
21 | 			{
22 | 				test: /\.css$/,
23 | 				use: ["style-loader", "css-loader"]
24 | 			},
25 | 			{
26 | 				test: /\.scss$/,
27 | 				use: [
28 | 					"style-loader", 
29 | 					"css-loader",
30 | 					"sass-loader"
31 | 				]
32 | 			},
33 | 			{ 
34 | 				enforce: "pre", 
35 | 				test: /\.js$/, 
36 | 				loader: "source-map-loader" 
37 | 			}
38 |         ]
39 |     },
40 | 	resolve: { 
41 | 		extensions: ["*", ".js", ".jsx", ".ts", ".tsx", ".json"] 
42 | 	},
43 | 	/*externals: {
44 |         "react": "React",
45 |         "react-dom": "ReactDOM"
46 |     },*/
47 | 	output: {
48 | 		path: path.join(__dirname, "/dist/"),
49 | 		publicPath: "./dist/",
50 | 		filename: "../bundle.js"
51 | 	},
52 | 	devServer: {
53 | 		contentBase: path.join(__dirname, "public/"),
54 | 		port: 3000,
55 | 		publicPath: "http://localhost:3000/dist/",
56 | 		hotOnly: true
57 | 	},
58 | 	plugins: [new webpack.HotModuleReplacementPlugin()]
59 | };
60 |

--------------------------------------------------------------------------------
/src/store/campaign/selectors.ts:
--------------------------------------------------------------------------------
 1 | import { ICampaign } from "../../classes/Campaign";
 2 | 
 3 | export interface IFilter {
 4 | 	key?:string,
 5 | 	val?:string,
 6 | 	[x: string]: string
 7 | }
 8 | export const filterCampaigns = (
 9 | 	campaigns: ICampaign[],
10 | 	filter: IFilter
11 | ): ICampaign[] => {
12 | 	const {key,val} = filter
13 | 	console.log("filterCampaigns",filter)
14 | 	return val !== ""
15 | 		? campaigns.filter(c => {
16 | 			const type = typeof c[key];
17 | 			switch (type) {
18 |                 case "string":
19 | 					return (c[key] as string).toUpperCase().includes(val.toUpperCase())
20 | 				case "number":
21 | 					return c[key] === (parseInt(val,10))
22 | 			}
23 | 
24 | 		})
25 | 		: campaigns;
26 | };
27 | 
28 | export const sortCampaigns = (
29 | 	campaigns: ICampaign[],
30 | 	key: string
31 | ): ICampaign[] => {
32 | 	if (key !== "") {
33 | 		return campaigns.sort((c1, c2) => {
34 | 			const type = typeof c1[key];
35 | 			switch (type) {
36 |                 case "string":
37 |                     console.log("string")
38 | 					const [val1, val2] = [
39 | 						(c1[key] as string).toUpperCase().replace(/^THE /gi,"").replace(/^Starcraft:* 2*:* */gi,""),
40 | 						(c2[key] as string).toUpperCase().replace(/^THE /gi,"").replace(/^Starcraft:* 2*:* */gi,"")
41 | 					];
42 | 					return val1.localeCompare(val2, 'en', {sensitivity: 'base'});
43 | 				case "number":
44 | 					return (c1[key] as number) - (c2[key] as number);
45 | 			}
46 | 		});
47 | 	}
48 | 	else return campaigns;
49 | };
50 |

--------------------------------------------------------------------------------
/src/classes/Mapster.ts:
--------------------------------------------------------------------------------
 1 | import {scrapper as mscrap} from  "sc2mapster-crawler";
 2 | import Campaign, { ICampaign, IScreenshot, ISC2Component, ISC2Map } from "./Campaign";
 3 | import path from 'path'
 4 | import h2m from 'h2m'
 5 | const conn = new mscrap.MapsterConnection();
 6 | 
 7 | export const getCampaignFromMapster = async (projectId:string):Promise<ICampaign> => {
 8 |     const project = await conn.getProjectOverview(projectId);
 9 |     const screenshots:IScreenshot[] = (await conn.getProjectImages(projectId)).images.map(img =>({
10 |         src:img.imageUrl,
11 |         description:h2m(img.caption)
12 |     }));
13 |     let maps:ISC2Component[] = []
14 |     
15 |     for await(const f of await conn.getProjectFilesList(projectId)){
16 |         const fileData = await conn.getProjectFile(projectId,f.id);
17 |         const map:ISC2Component = {
18 |             name:fileData.title,
19 |             description:h2m(fileData.description.html),
20 |             destination:`maps/${fileData.filename}`,
21 |             source:`https://www.sc2mapster.com/projects/${projectId}/files/${fileData.id}/download`,
22 |             sourceFormat:path.extname(fileData.filename),
23 |             fileEntry:""
24 |         }
25 |         maps.push(map);
26 |     }
27 |     return {
28 |         ...Campaign.emptyCampaign(),
29 |         id: projectId,
30 |         name:project.base.name,
31 |         description: h2m(project.description.html),
32 |         author:project.owner.name,
33 |         thumbnail:project.base.thumbnail,
34 |         lastUpdated:project.updatedAt.toISOString(),
35 |         patchNotes:[],
36 |         videos:[],
37 |         screenshots,
38 |         maps,
39 |         mods:[]
40 |     }
41 | }

--------------------------------------------------------------------------------
/src/containers/ScrapperPane.tsx:
--------------------------------------------------------------------------------
 1 | import { getCampaignFromMapster } from "../classes/Mapster";
 2 | import React, { FC, ChangeEvent, useState } from "react";
 3 | import Campaign, { ICampaign } from "../classes/Campaign";
 4 | 
 5 | const ScrapperPane: FC<any> = props => {
 6 | 	const [id, setId] = useState("")
 7 | 	const [output, setOutput] = useState("")
 8 | 	const [campaign, setCampaign] = useState<ICampaign>(Campaign.emptyCampaign())
 9 | 	const generateCampaign = async () => {
10 | 		const campaign = await getCampaignFromMapster(id);
11 | 		setCampaign(campaign)
12 | 		const json = JSON.stringify(campaign, null, 4);
13 | 		console.log()
14 | 		setOutput(json);
15 | 	}
16 | 	const saveToDisk = () => {
17 | 		Campaign.writeToDisk(campaign)
18 | 	}
19 | 	return (
20 | 		<form>
21 | 			<fieldset className="form-group">
22 | 				<label htmlFor="scrapper-id">Id:</label>
23 | 				<div className="input-group">
24 | 					<input
25 | 						id="scrapper-id"
26 | 						className="form-control"
27 | 						type="text"
28 | 						value={id}
29 | 						onChange={(e) => setId(e.target.value)}
30 | 					/>
31 | 					<div className="input-group-append">
32 | 						<button
33 | 							className="btn btn-info"
34 | 							type="button"
35 | 							onClick={(s) => generateCampaign()}
36 | 						>
37 | 							Scrape
38 | 						</button>
39 | 					</div>
40 | 
41 | 				</div>
42 | 				<label htmlFor="scrapper-output">Output:</label>
43 | 				<textarea
44 | 					id="scrapper-output"
45 | 					className="form-control disabled"
46 | 					readOnly
47 | 					rows={15}
48 | 					value={output}
49 | 				/>
50 | 			</fieldset>
51 | 			<button
52 | 				className="btn btn-info"
53 | 				type="button"
54 | 				onClick={(s) => saveToDisk()}
55 | 			>
56 | 				Save to Disk
57 | 			</button>
58 | 		</form>
59 | 	)
60 | }
61 | 
62 | export default ScrapperPane;

--------------------------------------------------------------------------------
/src/components/CampaignListItem.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect, MapDispatchToProps } from "react-redux";
 3 | import DownloadBar from './DownloadBar'
 4 | import { ICampaign } from '../classes/Campaign';
 5 | import { selectCampaign } from '../store/campaign/actions';
 6 | 
 7 | interface ICampaignListItemProps {
 8 | 	campaign: ICampaign,
 9 | 	index: number,
10 | 	selectedIndex?: number,
11 | 	selectedId: string,
12 | 	onClick?: (id: string) => void
13 | 	onAuthorClick: (author: string) => void
14 | }
15 | 
16 | const CampaignListItem = (props: ICampaignListItemProps) => {
17 | 	const { campaign, selectedId, onClick, onAuthorClick } = props;
18 | 	const { id, thumbnail, author, name, progress } = campaign;
19 | 	const downloadProgress = (progress) ? progress : 0;
20 | 	//const dispatch = () =>{; props.selectCampaign(campaign);}
21 | 	return (
22 | 		<button
23 | 			type="button"
24 | 			className={"campaign-item list-group-item list-group-item-action" + ((selectedId === id) ? " active" : "")}
25 | 			onClick={() => onClick(id)}
26 | 		>
27 | 			<figure className="campaign-thumbnail-container float-left mb-0">
28 | 				<img
29 | 					width="64"
30 | 					height="64"
31 | 					alt=""
32 | 					className="campaign-thumbnail border-0 rounded-circle"
33 | 					src={thumbnail}
34 | 				/>
35 | 			</figure>
36 | 			<div className="campaign-item-details">
37 | 				<h5 className="campaign-item-shortname mb-1">{name}</h5>
38 | 				<small>By
39 | 					<button
40 | 						onClick={() => onAuthorClick(author)}
41 | 						className="ml-1 btn btn-link badge badge-light"
42 | 					>
43 | 						{author}
44 | 					</button>
45 | 				</small>
46 | 				<DownloadBar progress={downloadProgress} />
47 | 				{/* <p className="campaign-item-summary mb-1">{summmary}</p> */}
48 | 			</div>
49 | 
50 | 		</button>
51 | 	);
52 | }
53 | 
54 | export default CampaignListItem;

--------------------------------------------------------------------------------
/public/sources.json:
--------------------------------------------------------------------------------
 1 | [
 2 | 	"https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/abandoment-campaign.json",
 3 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/alaraks-conquest-campaign.json",
 4 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/antioch-chronicles-remastered.json",
 5 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/brood.json",
 6 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/campaign-ascension-of-duran-reimagined.json",
 7 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/campaign-broods-wrath.json",
 8 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/campaign-evolution-swarm.json",
 9 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/campaign-race-with-destiny.json",
10 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/campaign-shadow-of-the-past.json",
11 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/campaign-wrath-taldarim.json",
12 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/ignos.json",
13 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/noir-automata.json",
14 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/noir-evolution.json",
15 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/proditor-campaign.json",
16 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/starcraft-ii-annihilation-campaign.json",
17 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/starcraft-mass-recall.json",
18 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/thoughts-in-chaos.json",
19 | "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/master/sources/ued-first-light.json",
20 | 	"https://raw.githubusercontent.com/abrahamYG/sc2-campaign-sources/refs/heads/master/sources/sc-evocomplete.json"
21 | ]
22 | 
23 |

--------------------------------------------------------------------------------
/src/components/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { HashRouter as Router, Route, NavLink } from "react-router-dom";
 3 | //import { use } from 'builder-util';
 4 | 
 5 | interface NavBarProps {
 6 | 	"selectedPane"?:string
 7 | }
 8 | 
 9 | function NavBar(props:NavBarProps) {
10 | 	const {selectedPane} = props;
11 | 	const filterActive = (Math.random()>0.5)?"updated":"installed";
12 | 	const filterInstalledActive = ((filterActive === "installed")?" active":" ");
13 | 	const filterUpdatedActive = ((filterActive === "updated")?" active":" ");
14 | 	return (
15 | 		<nav className="top-bar navbar navbar-expand-sm navbar-dark">
16 | 			<div className="collapse navbar-collapse">
17 | 				<ul className="nav nav-pills">
18 | 				<li className="nav-item">
19 | 					<NavLink to="/campaign" className="nav-link" activeClassName="active">
20 | 						Campaigns {
21 | 							//<span className="campaign-count badge badge-dark">{campaignCount}</span>
22 | 						}
23 | 					</NavLink>
24 | 				</li>
25 | 				<li className="nav-item">
26 | 					<NavLink to="/settings" className="nav-link" activeClassName="active">
27 | 						Settings
28 | 					</NavLink>
29 | 				</li>
30 | 				<li className="nav-item">
31 | 					<NavLink to="/mapmakers" className="nav-link" activeClassName="active">
32 | 						Manifest Editor
33 | 					</NavLink>
34 | 				</li>
35 | 				<li className="nav-item">
36 | 					<NavLink to="/scrapper" className="nav-link" activeClassName="active">
37 | 						Mapster Scrapper
38 | 					</NavLink>
39 | 				</li> 
40 | 				</ul>
41 | 				{/*
42 | 				<ul className="navbar-nav">
43 | 				<li className="nav-item">
44 | 					<a className={"nav-link"+filterInstalledActive} href="#">
45 | 						<span className="badge badge-warning">  </span> Installed
46 | 					</a>
47 | 				</li>
48 | 				<li className="nav-item">
49 | 					<a className={"nav-link"+filterUpdatedActive} href="#">
50 | 					<span className="badge badge-info">  </span> Updated
51 | 					</a>
52 | 				</li>
53 | 				</ul>
54 | 				*/}
55 | 			</div>  
56 | 		</nav>
57 | 	);
58 | }
59 | 
60 | export default NavBar;

--------------------------------------------------------------------------------
/src/components/CampaignList.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { ChangeEvent } from 'react';
 3 | import { ICampaign } from '../classes/Campaign';
 4 | import CampaignListItem from './CampaignListItem'
 5 | import { IFilter } from '../store/campaign/selectors';
 6 | 
 7 | 
 8 | 
 9 | interface ICampaignListProps {
10 | 	campaigns?: Array<ICampaign>,
11 | 	selectedIndex?: number,
12 | 	selectedId?: string
13 | 	onItemClick?: (id: string) => void,
14 | 	onFilterSet: (filter: IFilter) => any
15 | 	filter:IFilter
16 | }
17 | 
18 | 
19 | const CampaignList = (props: ICampaignListProps) => {
20 | 	const { campaigns, selectedIndex, selectedId, onItemClick,filter,onFilterSet } = props;
21 | 	console.log("CampaignList", props)
22 | 	const onFilterChange = (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
23 | 		console.log(e.target.name)
24 | 		const { name, value } = e.target
25 | 		const newFilter: IFilter = { [name]: value }
26 | 		onFilterSet({...filter, ...newFilter})
27 | 	}
28 | 	return (
29 | 		<nav className="campaign-list-pane list-group list-group-flush">
30 | 			<form  >
31 | 				<div className="input-group">
32 | 					<div className="input-group-prepend">
33 | 						<select
34 | 							name="key"
35 | 							onChange={onFilterChange}
36 | 							className="form-control input-group-text"
37 | 							value={filter.key}
38 | 						>
39 | 							<option value="name">Name</option>
40 | 							<option value="author">Author</option>
41 | 						</select>
42 | 					</div>
43 | 					<input
44 | 						type="text"
45 | 						name="val"
46 | 						onChange={onFilterChange}
47 | 						className="form-control mb-2"
48 | 						placeholder="Filter"
49 | 						value={filter.val}
50 | 					/>
51 | 				</div>
52 | 			</form>
53 | 			{campaigns.map((campaign, index) =>
54 | 				<CampaignListItem
55 | 					key={campaign.id}
56 | 					index={index}
57 | 					campaign={campaign}
58 | 					selectedId={selectedId}
59 | 					onClick={onItemClick}
60 | 					onAuthorClick={(author)=>{onFilterSet({key:"author",val:author})}}
61 | 				/>
62 | 			)}
63 | 		</nav>
64 | 
65 | 	);
66 | 
67 | }
68 | export default CampaignList;

--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
  1 | @import '~bootstrap/scss/bootstrap.scss';
  2 | 
  3 | *::-webkit-scrollbar {
  4 |     width: 6px !important;
  5 |     height: 6px !important;
  6 | }
  7 | *::-webkit-scrollbar-thumb {
  8 |     background-color: rgba(0, 0, 0, 0.2);
  9 | }
 10 | *::-webkit-scrollbar-track {
 11 |     background: rgba(255, 255, 255, 0.08);
 12 | }
 13 | 
 14 | body{
 15 | 	overflow: hidden;
 16 | }
 17 | 
 18 | 
 19 | progress[value="0"] {
 20 | 	/* Reset the default appearance */
 21 | 	visibility: hidden;
 22 |   }
 23 | 
 24 | progress[value] {
 25 | 	/* Reset the default appearance */
 26 | 	-webkit-appearance: none;
 27 | 	 appearance: none;
 28 | 	 border-radius: .25rem;
 29 | 	width: 100%;
 30 | 	height: 14px;
 31 |   }
 32 | 
 33 | progress[value]::-webkit-progress-bar {
 34 | 	background-color: #e9ecef;
 35 |     border-radius: .25rem;
 36 |   }
 37 | 
 38 | progress[value]::-webkit-progress-value {
 39 | 	@extend .bg-success;
 40 | 	transition: width .2s ease;
 41 | 	border-radius: .25rem;
 42 | }
 43 | 
 44 | .top-bar{
 45 | 	background: rgb(37, 42, 58);
 46 | 	-webkit-app-region: drag;
 47 | 	-webkit-user-select: none;
 48 |   	-webkit-app-region: drag;
 49 | 	button, a {
 50 | 		-webkit-app-region: no-drag;
 51 | 	  }
 52 | }
 53 | .sidebar, .campaign-details-pane,.manifest-editor-pane{
 54 | 	height: calc(100vh - 56px);
 55 | 	overflow-y: scroll;
 56 | }
 57 | 
 58 | .campaign-details-pane,.manifest-editor-pane {
 59 | 	min-width: 400px;
 60 | }
 61 | 
 62 | .sidebar {
 63 | 	min-width: 400px;
 64 | }
 65 | 
 66 | .campaign-item-shortname{
 67 | 	font-size: 16px;
 68 | }
 69 | 
 70 | .campaign-item-summary{
 71 | 	font-size: 14px;
 72 | }
 73 | .campaign-item {
 74 | 	transition: background-color 0.25s, color 0.25s;
 75 | 	.campaign-thumbnail-container {
 76 | 		position:static;
 77 | 	}
 78 | 	.campaign-item-details {
 79 | 		margin-left: 72px;
 80 | 	}
 81 | }
 82 | 
 83 | .campaign-form-map {
 84 | 	margin-left: 1rem;
 85 | }
 86 | 
 87 | .settings-pane{
 88 | 	overflow: scroll;
 89 | 	max-height: 70vh;
 90 | }
 91 | 
 92 | .campaign-description img {
 93 | 	max-width: 100%;
 94 | }
 95 | 
 96 | .manifesteditor-views {
 97 | 	@extend .btn-group; 
 98 | 	@extend .mt-2;
 99 | 	@extend .float-right;
100 | }

--------------------------------------------------------------------------------
/src/components/ManifestList.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Campaign, { ICampaign } from '../classes/Campaign';
 3 | import { connect, MapStateToProps, MapDispatchToProps } from "react-redux";
 4 | import ManifestListItem from './ManifestListItem';
 5 | import { AppState } from '../store';
 6 | import { setCampaignsLocal } from '../store/campaign/actions';
 7 | 
 8 | 
 9 | 
10 | interface IManifestListProps{
11 | 	campaigns?:Array<ICampaign>, 
12 | 	selectedIndex?:number, 
13 | 	setCampaigns?:typeof setCampaignsLocal
14 | 	
15 | }
16 | 
17 | const ManifestList = (props:IManifestListProps) => {
18 | 	const {campaigns, selectedIndex} = props;
19 | 	const addCampaign = () => {
20 | 		const id = prompt("Enter an ID","");
21 | 		const campaign:ICampaign = {...Campaign.emptyCampaign(), "id":id}
22 | 		props.setCampaigns([...campaigns,campaign])
23 | 	}
24 | 	console.log("ManifestList",props)
25 | 	return (
26 | 		<nav className="campaign-list-pane list-group list-group-flush">
27 | 			
28 | 			<div className="btn-group mb-2" role="group" aria-label="">
29 | 				<button 
30 | 					type="button"
31 | 					className="btn btn-primary"
32 | 					onClick={addCampaign}
33 | 				>
34 | 					Add Campaign
35 | 				</button>
36 | 				
37 | 			</div>
38 | 			{campaigns.map((campaign,index) =>
39 | 				<ManifestListItem 
40 | 					key={campaign.id} 
41 | 					index={index}
42 | 					campaign={campaign} 
43 | 					selectedIndex={selectedIndex} 
44 | 				/>
45 | 			)}
46 | 		</nav>
47 | 		
48 | 	);
49 | 	
50 | }
51 | 
52 | 
53 | 
54 | 
55 | const mapStateToProps:MapStateToProps<IManifestListProps,IManifestListProps,AppState> = (state,ownProps) => {
56 | 	const {campaignState} = state;
57 | 	const {campaignsLocal,selectedIndexLocal} = campaignState
58 | 	const props: typeof ownProps = {
59 | 		...ownProps,
60 | 		"campaigns":campaignsLocal, 
61 | 		"selectedIndex":selectedIndexLocal
62 | 	}
63 | 	
64 | 	return {...ownProps, ...props};
65 | };
66 | 
67 | 
68 | const mapDispatchToProps:MapDispatchToProps<IManifestListProps,IManifestListProps> = (dispatch,ownProps) => {
69 | 	return {
70 | 		...ownProps,
71 | 		setCampaigns: (campaigns) => {
72 | 			return dispatch(setCampaignsLocal(campaigns));
73 | 		}
74 | 	};
75 | };
76 | 
77 | export default connect(
78 | 	mapStateToProps,//mapStateToProps,
79 | 	mapDispatchToProps
80 |   )(ManifestList);

--------------------------------------------------------------------------------
/src/containers/SettingsPane.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, FC } from 'react';
 2 | import Config, {IConfig} from '../classes/Config'
 3 | import SettingsForm from '../components/SettingsForm'
 4 | import { connect } from "react-redux";
 5 | import { AppState } from '../store';
 6 | import { setConfig } from '../store/config/actions';
 7 | 
 8 | 
 9 | export const SettingsPane: FC = (props:any) =>{
10 | 	const [installDir, setInstallDir] = useState(Config.getInstallDir());
11 | 	const [runCommand, setRunCommand] = useState(Config.getRunCommand());
12 | 	const [runParams, setRunParams] = useState(Config.getRunParams().join(" "));
13 | 	const [feed, setFeed] = useState(Config.getFeed());
14 | 	const [campaignSources, setCampaignSources] = useState(Config.getSources().join("\n"));
15 | 	const [campaignLocalSources, setCampaignLocalSources] = useState(Config.getLocalSources().join("\n"));
16 | 	const [disabledForm, setDisabledForm] = useState(false);
17 | 	const {config, onClick} = props
18 | 	
19 | 	const formProps ={installDir, setInstallDir,
20 | 		runCommand, setRunCommand,
21 | 		runParams, setRunParams,
22 | 		feed, setFeed,
23 | 		disabledForm, setDisabledForm,
24 | 		campaignSources, setCampaignSources,
25 | 		campaignLocalSources, setCampaignLocalSources,
26 | 	fullForm: true}
27 | 	const handleSave = ():void => {
28 | 		Config.writeToDisk({
29 | 			installDir, 
30 | 			runCommand, 
31 | 			runParams,
32 | 			feed,
33 | 			campaignSources:campaignSources.split("\n"),
34 | 			campaignLocalSources:campaignLocalSources.split("\n")
35 | 		});
36 | 	}
37 | 	return(
38 | 		<div>
39 | 		<header className="modal-header">
40 | 			<h5 className="modal-title">Settings</h5>
41 | 		</header>
42 | 		<section className="settings-pane modal-body">
43 | 			<p></p>
44 | 			<SettingsForm {...formProps} />
45 | 		</section>
46 | 		<footer className="modal-footer">
47 | 		{/*
48 | 			<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
49 | 		*/}
50 | 			<button onClick={handleSave} type="button" className="btn btn-primary">Save changes</button>
51 | 		</footer>
52 | 		</div>
53 | 	);
54 | }
55 | 
56 | 
57 | const mapStateToProps = (state:AppState,ownProps:any):any => {
58 | 	const {configState} = state;
59 | 	return {...configState,...ownProps};
60 | };
61 | 
62 | 
63 | const mapDispatchToProps = (dispatch:any) => {
64 | 	return {
65 | 		onClick: (config:IConfig) => {
66 | 			dispatch(setConfig(config));
67 | 		}
68 | 	};
69 | };
70 | 
71 | export default connect(
72 | 	mapStateToProps,//mapStateToProps,
73 | 	mapDispatchToProps
74 |   )(SettingsPane);

--------------------------------------------------------------------------------
/types/reactn.d.ts:
--------------------------------------------------------------------------------
 1 | export = index;
 2 | declare function index(t: any): any;
 3 | declare namespace index {
 4 | 	namespace Children {
 5 | 		function count(children: any): any;
 6 | 		function forEach(children: any, forEachFunc: any, forEachContext: any): any;
 7 | 		function map(children: any, func: any, context: any): any;
 8 | 		function only(children: any): any;
 9 | 		function toArray(children: any): any;
10 | 	}
11 | 	class Component {
12 | 		constructor(...args: any[]);
13 | 		componentWillUnmount(): void;
14 | 		forceUpdate(callback: any): void;
15 | 		setGlobal(t: any, ...args: any[]): any;
16 | 		setState(partialState: any, callback: any): void;
17 | 	}
18 | 	const Fragment: symbol;
19 | 	class PureComponent {
20 | 		constructor(...args: any[]);
21 | 		componentWillUnmount(): void;
22 | 		forceUpdate(callback: any): void;
23 | 		setGlobal(t: any, ...args: any[]): any;
24 | 		setState(partialState: any, callback: any): void;
25 | 	}
26 | 	const StrictMode: symbol;
27 | 	const Suspense: symbol;
28 | 	function addCallback(t: any): any;
29 | 	function addReducer(t: any, e: any): any;
30 | 	function cloneElement(element: any, props: any, children: any, ...args: any[]): any;
31 | 	function createContext(defaultValue: any, calculateChangedBits: any): any;
32 | 	function createElement(type: any, props: any, children: any, ...args: any[]): any;
33 | 	function createFactory(type: any): any;
34 | 	function createProvider(...args: any[]): any;
35 | 	function createRef(): any;
36 | 	function forwardRef(render: any): any;
37 | 	function getGlobal(): any;
38 | 	function isValidElement(object: any): any;
39 | 	function lazy(ctor: any): any;
40 | 	function memo(type: any, compare: any): any;
41 | 	function removeCallback(t: any): any;
42 | 	function resetGlobal(): any;
43 | 	function setGlobal(t: any, ...args: any[]): any;
44 | 	const unstable_ConcurrentMode: symbol;
45 | 	const unstable_Profiler: symbol;
46 | 	function useCallback(callback: any, inputs: any): any;
47 | 	function useContext(Context: any, unstable_observedBits: any, ...args: any[]): any;
48 | 	function useDebugValue(value: any, formatterFn: any): any;
49 | 	function useEffect(create: any, inputs: any): any;
50 | 	function useGlobal(t: any, ...args: any[]): any;
51 | 	function useImperativeHandle(ref: any, create: any, inputs: any): any;
52 | 	function useLayoutEffect(create: any, inputs: any): any;
53 | 	function useMemo(create: any, inputs: any): any;
54 | 	function useReducer(reducer: any, initialArg: any, init: any): any;
55 | 	function useRef(initialValue: any): any;
56 | 	function useState(initialState: any): any;
57 | 	const version: string;
58 | 	function withGlobal(...args: any[]): any;
59 | }
60 |

--------------------------------------------------------------------------------
/src/store/campaign/types.ts:
--------------------------------------------------------------------------------
 1 | import {ICampaign} from '../../classes/Campaign'
 2 | import { Action, AnyAction } from 'redux';
 3 | 
 4 | export const ADD_CAMPAIGN = "ADD_CAMPAIGN";
 5 | export const SELECT_CAMPAIGN = "SELECT_CAMPAIGN";
 6 | export const SELECT_CAMPAIGN_LOCAL = "SELECT_CAMPAIGN_LOCAL";
 7 | export const SELECT_CAMPAIGN_REMOTE = "SELECT_CAMPAIGN_REMOTE";
 8 | 
 9 | export const SET_CAMPAIGNS = "SET_CAMPAIGNS";
10 | export const SET_CAMPAIGNS_LOCAL = "SET_CAMPAIGNS_LOCAL";
11 | export const SET_CAMPAIGNS_REMOTE = "SET_CAMPAIGNS_REMOTE";
12 | 
13 | export const SET_CAMPAIGN = "SET_CAMPAIGN";
14 | export const SET_CAMPAIGN_LOCAL = "SET_CAMPAIGN_LOCAL";
15 | 
16 | export const SET_FILTER = "SET_FILTER";
17 | 
18 | export interface ICampaignState {
19 | 	campaigns:Array<ICampaign>,
20 | 	campaignsLocal:Array<ICampaign>,
21 | 	campaignsRemote:Array<ICampaign>,
22 | 	campaignsById:{[key: string]: ICampaign},
23 | 	campaignIds:Array<string>,
24 | 	selectedId: string,
25 | 	selectedIdLocal:string,
26 | 	selectedIndex:number,
27 | 	selectedIndexRemote:number
28 | 	selectedIndexLocal:number
29 | }
30 | 
31 | interface ISelectCampaignPayload {
32 | 	campaign: ICampaign
33 | 	index:number
34 | }
35 | 
36 | export interface SetCampaignsAction  extends Action<typeof SET_CAMPAIGNS>{
37 | 	payload: Array<ICampaign>
38 | }
39 | 
40 | 
41 | export interface SetCampaignsLocalAction extends Action<typeof SET_CAMPAIGNS_LOCAL> {
42 | 	payload: Array<ICampaign>
43 | }
44 | 
45 | 
46 | export interface SetCampaignsRemoteAction  extends Action<typeof SET_CAMPAIGNS_REMOTE> {
47 | 	payload: Array<ICampaign>
48 | }
49 | 
50 | 
51 | export interface AddCampaignAction  extends Action<typeof ADD_CAMPAIGN>{
52 | 	payload: ICampaign
53 | }
54 | 
55 | export interface SelectCampaignAction extends Action<typeof SELECT_CAMPAIGN> {
56 | 	payload:ISelectCampaignPayload
57 | }
58 | 
59 | 
60 | export interface SelectCampaignLocalAction  extends Action<typeof SELECT_CAMPAIGN_LOCAL>{
61 | 	payload: ISelectCampaignPayload
62 | }
63 | 
64 | export interface SelectCampaignRemoteAction extends Action<typeof SELECT_CAMPAIGN_REMOTE> {
65 | 	payload: ISelectCampaignPayload
66 | }
67 | 
68 | export interface SetCampaignAction extends Action<typeof SET_CAMPAIGN>{
69 | 	payload: ISelectCampaignPayload
70 | }
71 | export interface SetCampaignLocalAction extends Action<typeof SET_CAMPAIGN_LOCAL>{
72 | 	payload: ISelectCampaignPayload
73 | }
74 | 
75 | export type CampaignActionTypes = SetCampaignsAction | 
76 | 									AddCampaignAction | 
77 | 									SelectCampaignAction | 
78 | 									SetCampaignsRemoteAction |
79 | 									SetCampaignsLocalAction | 
80 | 									SelectCampaignLocalAction |
81 | 									SelectCampaignRemoteAction | 
82 | 									SetCampaignAction |
83 | 									SetCampaignLocalAction;
84 | 
85 | 
86 |

--------------------------------------------------------------------------------
/src/store/campaign/actions.ts:
--------------------------------------------------------------------------------
 1 | import { CampaignActionTypes, 
 2 | 	ADD_CAMPAIGN, 
 3 | 	SELECT_CAMPAIGN, 
 4 | 	SET_FILTER, 
 5 | 	SET_CAMPAIGNS, 
 6 | 	SET_CAMPAIGNS_LOCAL, 
 7 | 	SELECT_CAMPAIGN_LOCAL, 
 8 | 	SET_CAMPAIGN,
 9 | 	SET_CAMPAIGN_LOCAL, AddCampaignAction, SelectCampaignAction, SelectCampaignLocalAction, SetCampaignsAction, SetCampaignsLocalAction, SetCampaignLocalAction, SetCampaignsRemoteAction, SET_CAMPAIGNS_REMOTE, SetCampaignAction } from "./types";
10 | import Campaign, { ICampaign } from "../../classes/Campaign";
11 | import { ActionCreator, bindActionCreators,Dispatch, Action } from "redux";
12 | import store from "../../configureStore";
13 | 
14 | let nextTodoId = 0;
15 | 
16 | export const addCampaign = (campaign:ICampaign):AddCampaignAction => ({
17 | 	type: ADD_CAMPAIGN,
18 | 	payload: campaign
19 | });
20 | 
21 | export const selectCampaign = (campaign:ICampaign, index:number):SelectCampaignAction => ({
22 | 	type: SELECT_CAMPAIGN,
23 | 	payload:{ campaign,index}
24 | });
25 | 
26 | export const selectCampaignLocal = (campaign:ICampaign, index:number):SelectCampaignLocalAction => ({
27 | 	type: SELECT_CAMPAIGN_LOCAL,
28 | 	payload: {campaign,index}
29 | });
30 | 
31 | export const setCampaigns = (campaigns:Array<ICampaign>):SetCampaignsAction => ({
32 | 	type: SET_CAMPAIGNS,
33 | 	payload: campaigns
34 | });
35 | 
36 | 
37 | 
38 | export const setCampaignsRemote = (campaigns:Array<ICampaign>):SetCampaignsRemoteAction => ({
39 | 	type: SET_CAMPAIGNS_REMOTE,
40 | 	payload: campaigns
41 | });
42 | 
43 | 
44 | export const setCampaignsLocal = (campaigns:Array<ICampaign>):SetCampaignsLocalAction => ({
45 | 	type: SET_CAMPAIGNS_LOCAL,
46 | 	payload: campaigns
47 | });
48 | 
49 | 
50 | export const setCampaign = (campaign:ICampaign, index:number):SetCampaignAction => ({
51 | 	type: SET_CAMPAIGN,
52 | 	payload: {campaign,index}
53 | });
54 | 
55 | export const setCampaignLocal = (campaign:ICampaign, index:number):SetCampaignLocalAction => ({
56 | 	type: SET_CAMPAIGN_LOCAL,
57 | 	payload: {campaign,index}
58 | });
59 | 
60 | export const getCampaignsRemote = async () => {
61 | 	const campaigns  = await Campaign.getCampaignsRemote()
62 | 	store.dispatch(setCampaignsRemote(campaigns.map(
63 | 		campaign => ({
64 | 			...campaign,
65 | 			state:"ready",
66 | 			installed:Campaign.isCampaignInstalled(campaign)
67 | 		})
68 | 	)))
69 | }
70 | 
71 | 
72 | export const getCampaignsLocal = async () => {
73 | 	const campaigns  = await Campaign.getCampaignsLocal()
74 | 	console.log("getcampaignslocal",campaigns)
75 | 	store.dispatch(setCampaignsLocal(campaigns.map(
76 | 		campaign => ({
77 | 			...campaign,
78 | 			state:"ready",
79 | 			installed:Campaign.isCampaignInstalled(campaign)
80 | 		})
81 | 	))) 
82 | }
83 | 
84 | //export const setFilter = filter => ({ type: SET_FILTER, payload: { filter } });
85 |

--------------------------------------------------------------------------------
/src/pages/InitialSetup.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import Config from '../classes/Config'
 3 | import SettingsForm from '../components/SettingsForm'
 4 | 
 5 | 
 6 | export default function InitialSetup(props:any){
 7 | 	const [installDir, setInstallDir] = useState(Config.getInstallDir());
 8 | 	const [runCommand, setRunCommand] = useState(Config.getRunCommand());
 9 | 	const [runParams, setRunParams] = useState(Config.getRunParams().join(" "));
10 | 	const [campaignSources, setCampaignSources] = useState(Config.getSources().join("\n"));
11 | 	const [campaignLocalSources, setCampaignLocalSources] = useState(Config.getLocalSources().join("\n"));
12 | 	const [disabledForm, setDisabledForm] = useState(true);
13 | 	const formProps ={installDir, setInstallDir,
14 | 		runCommand, setRunCommand,
15 | 		runParams, setRunParams,
16 | 		disabledForm, setDisabledForm,
17 | 		campaignSources, setCampaignSources,
18 | 		campaignLocalSources, setCampaignLocalSources,
19 | 	fullForm: false}
20 | 	const handleSave = ():void => {
21 | 		Config.writeToDisk({
22 | 			installDir, 
23 | 			runCommand:Config.getRunCommand(installDir), 
24 | 			runParams,
25 | 			campaignSources:campaignSources.split("\n")
26 | 		});
27 | 		props.onSave(true);
28 | 	}
29 | 	useEffect(() => {
30 | 		(async () =>{
31 | 			const result = await Config.getInstallDirFromRegistry();
32 | 			console.log("getInstallDirFromRegistry", result);
33 | 			setInstallDir((result)?result:Config.getInstallDir());
34 | 			setRunCommand((result)?Config.getRunCommand(result):runCommand);
35 | 
36 | 			const sources:Array<string> = await Config.getSourcesRemote();
37 | 			setCampaignSources(sources?sources.join("\n"):campaignSources)
38 | 			setDisabledForm(false);
39 | 		})();
40 | 	}, []);
41 | 	return(
42 | 		<section className="modal d-block bg-dark" tabIndex={-1} role="dialog">
43 | 			<div className="modal-dialog modal-xl modal-dialog-centered" role="document">
44 | 				<div className="modal-content">
45 | 					<header className="modal-header">
46 | 						<h5 className="modal-title">First-time Set Up</h5>
47 | 						{/*
48 | 						<button type="button" className="close" data-dismiss="modal" aria-label="Close">
49 | 							<span aria-hidden="true">×</span>
50 | 						</button>
51 | 						*/}
52 | 					</header>
53 | 					<section className="modal-body">
54 | 						<p>Welcome to the StarCraft II Custom Campaign Manager!</p>
55 | 						<p>Before we begin, we need to make sure everything is set up correctly. 
56 | 							Please review if the following settings are right.</p>
57 | 							<SettingsForm {...formProps} />
58 | 					</section>
59 | 					<footer className="modal-footer">
60 | 					{/*
61 | 						<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
62 | 					*/}
63 | 						<button onClick={handleSave} type="button" className="btn btn-primary">Save changes</button>
64 | 					</footer>
65 | 				</div>
66 | 			</div>
67 | 		</section>
68 | 	);
69 | }

--------------------------------------------------------------------------------
/src/store/campaign/reducer.ts:
--------------------------------------------------------------------------------
  1 | import { CampaignActionTypes, ADD_CAMPAIGN, SELECT_CAMPAIGN, SET_CAMPAIGNS, SET_CAMPAIGNS_LOCAL, SELECT_CAMPAIGN_LOCAL, SET_CAMPAIGN_LOCAL, SELECT_CAMPAIGN_REMOTE, SET_CAMPAIGNS_REMOTE, SET_CAMPAIGN } from "./types";
  2 | import _ from 'lodash';
  3 | import { Reducer } from "redux";
  4 | import { ICampaignState } from "./types";
  5 | 
  6 | 
  7 | 
  8 | const campaignState:ICampaignState = {
  9 | 	campaigns: [],
 10 | 	campaignsRemote:[],
 11 | 	campaignsLocal:[],
 12 | 	campaignsById:{},
 13 | 	campaignIds:[],
 14 | 	selectedId: "",
 15 | 	selectedIdLocal:"",
 16 | 	selectedIndex:-1,
 17 | 	selectedIndexRemote:-1,
 18 | 	selectedIndexLocal:-1
 19 | };
 20 | 
 21 |  const campaignReducer:Reducer<ICampaignState,CampaignActionTypes> =(state = campaignState, action) => {
 22 | 	switch (action.type) {
 23 | 		case SET_CAMPAIGNS: {
 24 | 			const campaigns = [...action.payload];
 25 | 			const campaignsById = _.keyBy(campaigns, c=>c.id);
 26 | 			const campaignIds = campaigns.map(c=> c.id)
 27 | 			return {
 28 | 				...state, 
 29 | 				campaigns,
 30 | 				campaignsById,
 31 | 				campaignIds
 32 | 			};
 33 | 		}
 34 | 		case SET_CAMPAIGNS_LOCAL: {
 35 | 			const campaignsLocal = action.payload;
 36 | 			return {
 37 | 				...state, 
 38 | 				campaignsLocal
 39 | 			};
 40 | 		}
 41 | 		
 42 | 		case SET_CAMPAIGNS_REMOTE: {
 43 | 			const campaignsRemote = action.payload;
 44 | 			return {
 45 | 				...state, 
 46 | 				campaignsRemote
 47 | 			};
 48 | 		}
 49 | 		case ADD_CAMPAIGN: {
 50 | 			const campaign = action.payload;
 51 | 			const {id} = campaign;
 52 | 			return {
 53 | 				...state,
 54 | 				campaigns: [...state.campaigns, campaign],
 55 | 				campaignsById: {...state.campaignsById, [id]: campaign},
 56 | 				campaignIds: [ ...state.campaignIds, id]
 57 | 			};
 58 | 		}
 59 | 		case SELECT_CAMPAIGN: {
 60 | 			const {campaign:selectedCampaign,index} = action.payload;
 61 | 			const selectedId = selectedCampaign.id;
 62 | 			const selectedIndex = index;
 63 | 			return {...state, selectedCampaign, selectedId,selectedIndex};
 64 | 		}
 65 | 		case SELECT_CAMPAIGN_LOCAL: {
 66 | 			const selectedIndexLocal = action.payload.index
 67 | 			return {...state, selectedIndexLocal};
 68 | 		}
 69 | 		
 70 | 		case SELECT_CAMPAIGN_REMOTE: {
 71 | 			const selectedIndexRemote = action.payload.index
 72 | 			return {...state, selectedIndexRemote};
 73 | 		}
 74 | 		case SET_CAMPAIGN: {
 75 | 			const {campaign, index} = action.payload;
 76 | 			const {campaigns} = state;
 77 | 			return {
 78 | 				...state,
 79 | 				campaigns:Object.assign(
 80 | 					[...campaigns], 
 81 | 					{[index]:campaign}
 82 | 				)
 83 | 			}
 84 | 		}
 85 | 		case SET_CAMPAIGN_LOCAL: {
 86 | 			const {campaign, index} = action.payload;
 87 | 			const {campaignsLocal} = state;
 88 | 			return {
 89 | 				...state,
 90 | 				campaignsLocal:Object.assign(
 91 | 					[...campaignsLocal], 
 92 | 					{[index]:campaign}
 93 | 				)
 94 | 			}
 95 | 		}
 96 | 		default:
 97 | 		return state;
 98 | 	}
 99 | }
100 | 
101 | export default campaignReducer;

--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, FC } from 'react';
 2 | import { HashRouter as Router, Route, Link, Redirect } from "react-router-dom";
 3 | 
 4 | import Campaign, { ICampaign } from '../classes/Campaign'
 5 | import NavBar from '../components/NavBar';
 6 | import CampaignPane from '../containers/CampaignPane';
 7 | import MapMakerPane from '../containers/MapMakerPane'
 8 | import SettingsPane from '../containers/SettingsPane'
 9 | import { setCampaigns, setCampaignsLocal, setCampaignsRemote, getCampaignsLocal, getCampaignsRemote } from '../store/campaign/actions';
10 | import { MapDispatchToProps, connect } from 'react-redux';
11 | import Downloader from '../classes/Downloader';
12 | import ScrapperPane from '../containers/ScrapperPane';
13 | 
14 | interface IHomeState {
15 | 	"campaigns": Array<ICampaign>,
16 | 	"authors": Array<Object>,
17 | 	"selectedCampaign": ICampaign,
18 | 	"selectedCampaignAuthor": Object,
19 | 	"selectedPane": string
20 | }
21 | 
22 | interface IHomeProps {
23 | 	setCampaigns?: typeof setCampaigns
24 | 	setCampaignsLocal?: typeof setCampaignsLocal
25 | 	setCampaignsRemote?: typeof setCampaignsRemote
26 | 	getCampaignsLocal?: typeof getCampaignsLocal
27 | 	getCampaignsRemote?: typeof getCampaignsRemote 
28 | }
29 | 
30 | 
31 | export const NewHome:FC<IHomeProps> = props  => {
32 | 	return (
33 | 	<Router>
34 | 		<>
35 | 		<NavBar />
36 | 		<main className="container-fluid w-100 h-100">
37 | 			<Route path="/" exact render={()=><Redirect to="/campaign"/>} />
38 | 			<Route path="/campaign" component={CampaignPane} />
39 | 			<Route path="/mapmakers" component={MapMakerPane} />
40 | 			<Route path="/settings" component={SettingsPane} />
41 | 			<Route path="/scrapper" component={ScrapperPane} />
42 | 		</main>
43 | 		</>
44 | 	</Router>
45 | 	);
46 | }
47 | 
48 | class Home extends Component<IHomeProps, IHomeState> {
49 | 	constructor(props: IHomeProps) {
50 | 		super(props);
51 | 		const selectedPaneLocal = (localStorage.getItem('selectedPane') !== null) ? localStorage.getItem('selectedPane') : "campaigns";
52 | 		const selectedCampaignLocal = (localStorage.getItem('selectedCampaign') !== null) ? localStorage.getItem('selectedCampaign') : null;
53 | 		console.log("Home props")
54 | 		
55 | 		props.getCampaignsRemote();
56 | 		props.getCampaignsLocal();
57 | 	}
58 | 
59 | 	render() {
60 | 		
61 | 		return (
62 | 			<Router>
63 | 				<>
64 | 				<NavBar />
65 | 				<main className="container-fluid w-100 h-100">
66 | 					<Route path="/" exact render={()=><Redirect to="/campaign"/>} />
67 | 					<Route path="/campaign" component={CampaignPane} />
68 | 					<Route path="/mapmakers" component={MapMakerPane} />
69 | 					<Route path="/settings" component={SettingsPane} />
70 | 			<Route path="/scrapper" component={ScrapperPane} />
71 | 				</main>
72 | 				</>
73 | 			</Router>
74 | 		);
75 | 	}
76 | }
77 | 
78 | const mapDispatchToProps:MapDispatchToProps<IHomeProps,IHomeProps> = (dispatch,ownProps) =>{
79 | 	return {
80 | 		...ownProps,
81 | 		setCampaigns: campaigns => dispatch(setCampaigns(campaigns)),
82 | 		setCampaignsLocal: campaigns => dispatch(setCampaignsLocal(campaigns)),
83 | 		setCampaignsRemote: campaigns => dispatch(setCampaignsRemote(campaigns)),
84 | 		getCampaignsLocal,
85 | 		getCampaignsRemote
86 | 	};
87 | }
88 | 
89 | export default connect(
90 | 	null,//mapStateToProps,
91 | 	mapDispatchToProps
92 |   )(Home);
93 |

--------------------------------------------------------------------------------
/src/containers/MapMakerPane.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Component, FC } from 'react';
  2 | import ManifestList from '../components/ManifestList';
  3 | import ManifestEditor from '../components/ManifestEditor';
  4 | 
  5 | import Campaign, { ICampaign } from '../classes/Campaign'
  6 | import { setCampaignsLocal, selectCampaignLocal } from '../store/campaign/actions';
  7 | import { MapDispatchToProps, connect, MapStateToProps } from 'react-redux';
  8 | import { AppState } from '../store';
  9 | 
 10 | 
 11 | interface IMapMakerPaneProps {
 12 | 	"campaigns": Array<ICampaign>,
 13 | 	"authors": any,
 14 | 	"selectedIndex"?: number,
 15 | 	"selectedCampaignAuthor": any
 16 | 	selectCampaignLocal: typeof selectCampaignLocal
 17 | 	setCampaignsLocal: typeof setCampaignsLocal
 18 | }
 19 | 
 20 | interface IMapMakerPaneState {
 21 | 	"campaigns": Array<ICampaign>,
 22 | 	"authors": any,
 23 | 	"selectedCampaign": ICampaign,
 24 | 	"selectedCampaignAuthor": any
 25 | }
 26 | 
 27 | export const NewMapMakerPane: FC<IMapMakerPaneProps> = props => {
 28 | 	const { selectedIndex, campaigns } = props;
 29 | 	return (
 30 | 		<div className="row">
 31 | 			<section className="sidebar col-3 bg-secondary pr-0 pl-0">
 32 | 				{(campaigns) &&
 33 | 					<ManifestList />
 34 | 				}
 35 | 			</section>
 36 | 			<section className="manifest-editor-pane col bg-light">
 37 | 				{(selectedIndex >= 0) &&
 38 | 					<ManifestEditor />
 39 | 				}
 40 | 				{(selectedIndex < 0) &&
 41 | 					<div className="pure-u">
 42 | 						<p>No data Loaded</p>
 43 | 					</div>
 44 | 				}
 45 | 			</section>
 46 | 		</div>
 47 | 	)
 48 | }
 49 | export class MapMakerPane extends Component<IMapMakerPaneProps, IMapMakerPaneState> {
 50 | 	constructor(props: IMapMakerPaneProps) {
 51 | 		super(props);
 52 | 
 53 | 	}
 54 | 	render() {
 55 | 		const { selectedIndex, campaigns } = this.props;
 56 | 		return (
 57 | 			<div className="row">
 58 | 				<section className="sidebar col-3 bg-secondary pr-0 pl-0">
 59 | 					{(campaigns) &&
 60 | 						<ManifestList />
 61 | 					}
 62 | 				</section>
 63 | 				<section className="manifest-editor-pane col bg-light">
 64 | 					{(selectedIndex >= 0) &&
 65 | 						<ManifestEditor />
 66 | 					}
 67 | 					{(selectedIndex < 0) &&
 68 | 						<div className="pure-u">
 69 | 							<p>No data Loaded</p>
 70 | 						</div>
 71 | 					}
 72 | 				</section>
 73 | 			</div>
 74 | 		);
 75 | 	}
 76 | 
 77 | }
 78 | 
 79 | 
 80 | 
 81 | const mapStateToProps: MapStateToProps<IMapMakerPaneProps, IMapMakerPaneProps, AppState> = (state, ownProps) => {
 82 | 	const { campaignState } = state;
 83 | 	const { campaignsLocal, selectedIndexLocal, selectedIdLocal } = campaignState
 84 | 	const props = {
 85 | 		"campaigns": campaignsLocal,
 86 | 		"selectedIndex": selectedIndexLocal,
 87 | 		"selectedId": selectedIdLocal
 88 | 	}
 89 | 
 90 | 	return { ...ownProps, ...props };
 91 | };
 92 | 
 93 | const mapDispatchToProps: MapDispatchToProps<IMapMakerPaneProps, IMapMakerPaneProps> = (dispatch, ownProps) => {
 94 | 	return {
 95 | 		...ownProps,
 96 | 		setCampaignsLocal: (campaigns) => {
 97 | 			return dispatch(setCampaignsLocal(campaigns));
 98 | 		},
 99 | 		selectCampaignLocal: (campaign, index) => {
100 | 			return dispatch(selectCampaignLocal(campaign, index));
101 | 		}
102 | 	};
103 | };
104 | 
105 | 
106 | 
107 | export default connect(
108 | 	mapStateToProps,//mapStateToProps,
109 | 	mapDispatchToProps
110 | )(NewMapMakerPane);

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "sc2-campaign-manager",
  3 | 	"version": "0.5.4-alpha",
  4 | 	"description": "A Campaign Manager for StarCraft II.  ",
  5 | 	"main": "main.js",
  6 | 	"build": {
  7 | 		"appId": "com.sc2mapster.campaignmanager",
  8 | 		"mac": {
  9 | 			"category": "demo.app"
 10 | 		},
 11 | 		"win": {
 12 | 			"icon": "build/s2icon.png",
 13 | 			"target": "nsis"
 14 | 		},
 15 | 		"nsis": {
 16 | 			"oneClick":false,
 17 | 			"perMachine":false, 
 18 | 			"allowToChangeInstallationDirectory":true
 19 | 
 20 | 		}
 21 | 	},
 22 | 	"scripts": {
 23 | 		"dev": "cross-env NODE_ENV=dev webpack --watch",
 24 | 		"start": "nf start",
 25 | 		"webpack": "webpack",
 26 | 		"electron": "cross-env NODE_ENV=dev electron .",
 27 | 		"build": "cross-env NODE_ENV=prod electron-builder"
 28 | 	},
 29 | 	"repository": "https://github.com/abrahamYG/sc2-campaign-manager",
 30 | 	"keywords": [
 31 | 		"Starcraft",
 32 | 		"demo"
 33 | 	],
 34 | 	"author": "abrahamYG",
 35 | 	"license": "CC0-1.0",
 36 | 	"devDependencies": {
 37 | 		"@babel/cli": "^7.2.3",
 38 | 		"@babel/core": "^7.4.3",
 39 | 		"@babel/plugin-proposal-class-properties": "^7.4.0",
 40 | 		"@babel/preset-env": "^7.3.1",
 41 | 		"@babel/preset-react": "^7.0.0",
 42 | 		"@babel/register": "^7.4.0",
 43 | 		"@fortawesome/fontawesome-free": "^5.8.1",
 44 | 		"awesome-typescript-loader": "^5.2.1",
 45 | 		"babel": "^6.23.0",
 46 | 		"babel-cli": "^6.26.0",
 47 | 		"babel-loader": "^8.0.5",
 48 | 		"babel-preset-flow": "^6.23.0",
 49 | 		"cross-env": "^5.2.0",
 50 | 		"css-loader": "^2.1.0",
 51 | 		"electron": "^4.0.4",
 52 | 		"electron-builder": "^20.41.0",
 53 | 		"electron-devtools-installer": "^2.2.4",
 54 | 		"font-awesome-loader": "^1.0.2",
 55 | 		"foreman": "^3.0.1",
 56 | 		"react-hot-loader": "^4.7.0",
 57 | 		"sass-loader": "^7.1.0",
 58 | 		"source-map-loader": "^0.2.4",
 59 | 		"style-loader": "^0.23.1",
 60 | 		"typescript": "^3.4.2",
 61 | 		"webpack": "^4.29.5",
 62 | 		"webpack-cli": "^3.2.3",
 63 | 		"webpack-dev-server": "^3.1.14"
 64 | 	},
 65 | 	"dependencies": {
 66 | 		"@types/debug": "^4.1.3",
 67 | 		"@types/download": "^6.2.4",
 68 | 		"@types/electron": "^1.6.10",
 69 | 		"@types/fs-extra": "^7.0.0",
 70 | 		"@types/lodash": "^4.14.130",
 71 | 		"@types/react": "^16.8.13",
 72 | 		"@types/react-dom": "^16.8.3",
 73 | 		"@types/react-images": "^0.5.1",
 74 | 		"@types/react-jsonschema-form": "^1.3.2",
 75 | 		"@types/react-redux": "^7.0.9",
 76 | 		"@types/react-router-dom": "^4.3.1",
 77 | 		"@types/yauzl": "^2.9.1",
 78 | 		"babel-core": "^6.26.3",
 79 | 		"bootstrap": "^4.3.1",
 80 | 		"concurrently": "^4.1.0",
 81 | 		"download": "^7.1.0",
 82 | 		"electron-dl": "^1.13.0",
 83 | 		"electron-reload": "^1.4.0",
 84 | 		"fs-extra": "^7.0.1",
 85 | 		"h2m": "^0.7.0",
 86 | 		"immutability-helper": "^3.0.0",
 87 | 		"jquery": "^3.4.0",
 88 | 		"lodash": "^4.17.11",
 89 | 		"node-sass": "^4.11.0",
 90 | 		"open-iconic": "^1.1.1",
 91 | 		"popper.js": "^1.15.0",
 92 | 		"rage-edit": "^1.2.0",
 93 | 		"react": "^16.8.6",
 94 | 		"react-dom": "^16.8.2",
 95 | 		"react-images": "^0.5.19",
 96 | 		"react-jsonschema-form": "^1.3.0",
 97 | 		"react-jsonschema-form-bs4": "^1.5.1",
 98 | 		"react-lightbox-component": "^1.2.1",
 99 | 		"react-markdown": "^4.0.6",
100 | 		"react-redux": "^7.0.3",
101 | 		"react-router-dom": "^4.3.1",
102 | 		"redux": "^4.0.1",
103 | 		"sc2mapster-crawler": "git+https://github.com/SC2Mapster/sc2mapster-crawler.git",
104 | 		"yarn": "^1.13.0",
105 | 		"yauzl": "^2.10.0"
106 | 	}
107 | }
108 |

--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at . All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |

--------------------------------------------------------------------------------
/src/components/ManifestEditorScreenshotItem.tsx:
--------------------------------------------------------------------------------
 1 | import { ISC2Map, IScreenshot } from "../classes/Campaign";
 2 | import React, { ChangeEvent, FC } from "react";
 3 | 
 4 | interface IManifestEditorScreenshotProps{
 5 | 	"index":number,
 6 | 	"screenshot": IScreenshot,
 7 | 	"setCampaignScreenshot":(screen:IScreenshot,index:number)=>void
 8 | }
 9 | 
10 | const ManifestEditorScreenshot:FC<IManifestEditorScreenshotProps> = (props) => {
11 | 	const {screenshot, index, setCampaignScreenshot} = props;
12 | 	const {src,description} = screenshot;
13 | 	const onChange = (e:ChangeEvent<HTMLInputElement>|ChangeEvent<HTMLTextAreaElement>|ChangeEvent<HTMLSelectElement>)=>{
14 | 		console.log(e);
15 | 		const newScreen = {
16 | 			...screenshot,
17 | 			[e.currentTarget.name]:e.currentTarget.value
18 | 		}
19 | 		console.log(newScreen)
20 | 		setCampaignScreenshot(newScreen,index);
21 | 	};
22 | 
23 | 	return (
24 | 		<div className="card border-secondary mb-3 mr-0 ml-1">
25 |   			<div className="card-header text-white bg-secondary">
26 | 			  <button className="btn btn-primary float-right" type="button" data-toggle="collapse" data-target={`map-${index}-body`} aria-expanded="false" aria-controls="collapseExample">
27 |     				Collapse
28 |   				</button>
29 | 			  <h5 className="card-title">Screenshot {index.toString()}</h5>
30 | 				
31 |   			</div>
32 |   			<div className="card-body mr-3" id={`map-${index}-body`}>
33 | 				{/*<h5 className="card-title">{type?type:"Map"} {index.toString()}</h5>*/}
34 |                 <div className="media">
35 |                     <img style={{width:"64px",height:"64px"}}className="align-self-start mr-3" src={src} alt={description} />
36 |                     <fieldset className="form-group campaign-form-map media-body">
37 |                         <div className="form-group row">
38 |                             <label htmlFor={`screenshot-${index}-src`} className="col-sm-2 col-form-label">Source</label>
39 |                             <input 
40 |                                 id={`screenshot-${index}-src`}
41 |                                 value={src}
42 |                                 onChange={onChange}
43 |                                 type="text" 
44 |                                 className="form-control col-sm-10"
45 |                                 name="src" 
46 |                                 aria-describedby="runParamsHelp" 
47 |                                 placeholder="Enter an url for the screenshot" 
48 |                                 />
49 |                         </div>
50 |                         <div className="form-group row">
51 |                             <label htmlFor={`screenshot-${index}-description`} className="col-sm-2 col-form-label">Description</label>
52 |                             <textarea 
53 |                                 id={`screenshot-${index}-description`}
54 |                                 value={description}
55 |                                 onChange={onChange}
56 |                                 className="form-control col-sm-10"
57 |                                 name="description" 
58 |                                 aria-describedby="runParamsHelp" 
59 |                                 placeholder="Enter a description for the screenshot" 
60 |                                 />
61 |                         </div>
62 | 				    </fieldset>
63 |                 </div>
64 | 			</div>
65 | 			<div className="card-footer">
66 | 				<div className="btn-group" role="group" aria-label="Basic example">
67 | 					<button type="button" className="btn btn-primary">Up</button>
68 | 					<button type="button" className="btn btn-primary">Down</button>
69 | 					<button type="button" className="btn btn-danger">Delete</button>
70 | 				</div>
71 | 			</div>
72 | 		</div>
73 | 	);
74 | }
75 | 
76 | export default ManifestEditorScreenshot;

--------------------------------------------------------------------------------
/electron/Download.js:
--------------------------------------------------------------------------------
  1 | function getModSource(mod){
  2 | 	const {source, sourceFormat} = mod;
  3 | 	let sourceData = {
  4 | 		"source":source,
  5 | 		"format":sourceFormat,
  6 | 		"files":[],
  7 | 		"progress":0
  8 | 	}
  9 | 	return sourceData;
 10 | }
 11 | 
 12 | 
 13 | const  getSourceFromFilename = (sources, fileName) => {
 14 | 	return sources[source].files.find(e => fileName === e.fileEntry);
 15 | }
 16 | 
 17 | 
 18 | function extractZipData(sourceData){
 19 | 	const {installDir, sources, source, data} = sourceData;
 20 | 	const zipBaseDir = installDir;
 21 | 	const zipBaseName = path.basename(source)
 22 | 	console.log("zipBaseDir:", zipBaseDir)
 23 | 	console.log("zipBaseName:", zipBaseName)
 24 | 	const zipPath = path.join(zipBaseDir, zipBaseName);
 25 | 	console.log("zip:", zipPath);
 26 | 	fs.writeFileSync(zipPath, data);
 27 | 	yauzl.open(zipPath, {lazyEntries: true}, function(err, zipfile) {
 28 | 		if (err){ throw err;}
 29 | 		zipfile.readEntry();
 30 | 		zipfile.on("entry", function(entry) {
 31 | 			console.log(entry.fileName);
 32 | 			if (/\/$/.test(entry.fileName)){
 33 | 				zipfile.readEntry();
 34 | 			}
 35 | 			else {
 36 | 				const entryData = getSourceFromFilename(sources, entry.fileName);
 37 | 				if(entryData){
 38 | 					const entryBasePath = installDir;	
 39 | 					const entryBaseName = entryData.destination;
 40 | 					const entryFullPath = path.join(entryBasePath,entryBaseName);
 41 | 					console.log("entryFullPath",entryFullPath)
 42 | 					fs.ensureDirSync(path.dirname(entryFullPath));
 43 | 					const destStream = fs.createWriteStream(entryFullPath);
 44 | 					zipfile.openReadStream(entry, function(err, readStream) {
 45 | 						if (err) throw err;
 46 | 						readStream.on("end", function() {
 47 | 							zipfile.readEntry();
 48 | 						});
 49 | 						readStream.pipe(destStream);
 50 | 					});
 51 | 				}
 52 | 				else{
 53 | 					zipfile.readEntry();
 54 | 				}
 55 | 			}
 56 | 			
 57 | 		});
 58 | 		zipfile.once("end", function() {
 59 | 			zipfile.close();
 60 | 		});
 61 | 	});
 62 | }
 63 | 
 64 | ipcMain.on(msg.DOWNLOAD_CAMPAIGN, async (event, campaign) => {
 65 | 	let timer = Date.now();
 66 | 	const {maps, mods,installDir} = campaign;
 67 | 	const downloadtracker = {downloads:[], totalProgress:0}
 68 | 	const mapsmods = [...mods, ...maps];
 69 | 	console.log("maps and mods:",mapsmods)
 70 | 	const sources = {};
 71 | 	try {
 72 | 		mapsmods.map(mod => {
 73 | 			const {sourceFormat} = mod;
 74 | 			let sourceData;
 75 | 			if (!sources[mod.source]){
 76 | 				sources[mod.source] = getModSource(mod)
 77 | 				downloadtracker.downloads.push(sources[mod.source])
 78 | 			}
 79 | 			if(sources[mod.source].format === "zip") {
 80 | 				sources[mod.source].files.push(mod);
 81 | 			}
 82 | 			else{ 
 83 | 				sources[mod.source].files = mod;
 84 | 			}
 85 | 		});
 86 | 	} catch (error) {
 87 | 		console.log("Error!:",error);
 88 | 	}
 89 | 	
 90 | 	const myPromises = [];
 91 | 	console.log("sources: ",sources)
 92 | 	for(let source in sources){
 93 | 		console.log("current source:", source);
 94 | 		const promise = download(source).on('downloadProgress', progress => {
 95 | 			const dlitem = downloadtracker.downloads.find(dl => source === dl.source)
 96 | 			dlitem.progress = progress.percent;
 97 | 			downloadtracker.totalProgress = downloadtracker.downloads.reduce((total, {progress}) => total + progress,0.0) / downloadtracker.downloads.length;
 98 | 			if((Date.now() - timer) > 1000 || progress.percent >= 1){
 99 | 				//console.log("DOWNLOADTRACKER",downloadtracker);
100 | 				mainWindow.setProgressBar(downloadtracker.totalProgress);
101 | 				event.sender.send(msg.DOWNLOAD_CAMPAIGN_STATUS, {campaignId: campaign.id, progress: downloadtracker.totalProgress})
102 | 				timer = Date.now();
103 | 			}
104 | 		}).then(data =>{
105 | 			console.log("finished:", source)
106 | 			if(sources[source].format==="zip"){
107 | 				extractZipData({installDir, sources, source, data})
108 | 				
109 | 			}
110 | 			else {
111 | 				const destBaseDir = installDir;
112 | 				const destBasename = sources[source].files.destination;
113 | 				console.log("destBaseDir:", destBaseDir)
114 | 				console.log("destBasename:", destBasename)
115 | 				const destPath = path.join(destBaseDir, destBasename);
116 | 				console.log("nozip: ", destPath);
117 | 				fs.ensureDirSync(path.dirname(destPath));
118 | 				fs.writeFileSync(destPath, data);
119 | 			}
120 | 		}).catch((reason) =>{
121 | 			console.log("Rejected promise:", reason)
122 | 		})
123 | 		console.log("promise: ", promise)
124 | 		myPromises.push(promise);
125 | 	}
126 | 	console.log("end loop!")
127 | 	Promise.all(myPromises).then(() => {
128 | 		console.log("All downloads finished?");
129 | 		event.sender.send(msg.DOWNLOAD_CAMPAIGN_FINISH, {campaignId: campaign.id, progress: downloadtracker.totalProgress})
130 | 	});
131 | })
132 | 
133 | ipcMain.on(msg.PLAY_CAMPAIGN, async (event, campaign) => {
134 | 	const {command, params} = campaign;
135 | 	console.log(command, params)
136 | 	execFile(campaign.command,params,function(error, stdout, stderr) {
137 | 		console.log(error)
138 | 		console.log(stdout);
139 | 	});
140 | });

--------------------------------------------------------------------------------
/src/components/ManifestEditorMapItem.tsx:
--------------------------------------------------------------------------------
  1 | import { ISC2Map } from "../classes/Campaign";
  2 | import React, { ChangeEvent, FC } from "react";
  3 | 
  4 | interface IManifestEditorMapItemProps{
  5 | 	"index":number,
  6 | 	"map": ISC2Map,
  7 | 	"type"?:string,
  8 | 	"setCampaignMap":(map:ISC2Map,index:number)=>void
  9 | }
 10 | 
 11 | const ManifestEditorMapItem:FC<IManifestEditorMapItemProps> = (props) => {
 12 | 	const {map, index, setCampaignMap,type} = props;
 13 | 	const {name,destination,description, fileEntry, source, sourceFormat} = map;
 14 | 	const onChange = (e:ChangeEvent<HTMLInputElement>|ChangeEvent<HTMLTextAreaElement>|ChangeEvent<HTMLSelectElement>)=>{
 15 | 		console.log(e);
 16 | 		const newMap = {
 17 | 			...map,
 18 | 			[e.currentTarget.name]:e.currentTarget.value
 19 | 		}
 20 | 		console.log(newMap)
 21 | 		setCampaignMap(newMap,index);
 22 | 	};
 23 | 
 24 | 	return (
 25 | 		<div className="card border-secondary mb-3 mr-0 ml-1">
 26 |   			<div className="card-header text-white bg-secondary">
 27 | 			  <button className="btn btn-primary float-right" type="button" data-toggle="collapse" data-target={`map-${index}-body`} aria-expanded="false" aria-controls="collapseExample">
 28 |     				Collapse
 29 |   				</button>
 30 | 			  <h5 className="card-title">{type?type:"Map"} {index.toString()}</h5>
 31 | 				
 32 |   			</div>
 33 |   			<div className="card-body mr-3" id={`map-${index}-body`}>
 34 | 				{/*<h5 className="card-title">{type?type:"Map"} {index.toString()}</h5>*/}
 35 | 				
 36 | 				<fieldset className="form-group campaign-form-map">
 37 | 					<div className="form-group row">
 38 | 					<label htmlFor={`map-${index}-name`} className="col-sm-2 col-form-label">name</label>
 39 | 					<input 
 40 | 						id={`map-${index}-name`}
 41 | 						value={name}
 42 | 						onChange={onChange}
 43 | 						type="text" 
 44 | 						className="form-control col-sm-10"
 45 | 						name="name" 
 46 | 						aria-describedby="runParamsHelp" 
 47 | 						placeholder="Enter an name for the map" 
 48 | 					/>
 49 | 					</div>
 50 | 					<div className="form-group row">
 51 | 					<label htmlFor={`map-${index}-destination`} className="col-sm-2 col-form-label">destination</label>
 52 | 					<input 
 53 | 						id={`map-${index}-destination`}
 54 | 						value={destination}
 55 | 						onChange={onChange}
 56 | 						type="text" 
 57 | 						className="form-control col-sm-10"
 58 | 						name="destination" 
 59 | 						aria-describedby="runParamsHelp" 
 60 | 						placeholder="Enter a destination for the map" 
 61 | 					/>
 62 | 					</div>
 63 | 					<div className="form-group row">
 64 | 					<label htmlFor={`map-${index}-description`} className="col-sm-2 col-form-label">Description</label>
 65 | 					<textarea 
 66 | 						id={`map-${index}-description`}
 67 | 						value={description}
 68 | 						onChange={onChange}
 69 | 						className="form-control col-sm-10"
 70 | 						name="description" 
 71 | 						aria-describedby="runParamsHelp" 
 72 | 						placeholder="Enter a description for the map" 
 73 | 						rows={4}
 74 | 					/>
 75 | 					</div>
 76 | 					<div className="form-group row">
 77 | 					
 78 | 					<label htmlFor={`map-${index}-fileEntry`} className="col-sm-2 col-form-label">fileEntry</label>
 79 | 					<input 
 80 | 						id={`map-${index}-fileEntry`}
 81 | 						value={fileEntry}
 82 | 						onChange={onChange}
 83 | 						type="text" 
 84 | 						className="form-control col-sm-10"
 85 | 						name="fileEntry" 
 86 | 						aria-describedby="runParamsHelp" 
 87 | 						placeholder="Enter a fileEntry for the map" 
 88 | 					/>
 89 | 					</div>
 90 | 					<div className="form-group row">
 91 | 					<label htmlFor={`map-${index}-source`} className="col-sm-2 col-form-label">source</label>
 92 | 					<input 
 93 | 						id={`map-${index}-source`}
 94 | 						value={source}
 95 | 						onChange={onChange}
 96 | 						type="text" 
 97 | 						className="form-control col-sm-10"
 98 | 						name="source" 
 99 | 						aria-describedby="runParamsHelp" 
100 | 						placeholder="Enter a source for the map" 
101 | 					/>
102 | 					</div>
103 | 					<div className="form-group row">
104 | 					<label htmlFor={`map-${index}-sourceFormat`} className="col-sm-2 col-form-label">sourceFormat</label>
105 | 					<select
106 | 						id={`map-${index}-sourceFormat`}
107 | 						value={sourceFormat}
108 | 						onChange={onChange}
109 | 						className="form-control col-sm-10"
110 | 						name="sourceFormat" 
111 | 						aria-describedby="runParamsHelp" 
112 | 						placeholder="Enter a sourceFormat for the map"
113 | 					>
114 | 						<option value="sc2map">SC2Map</option>
115 | 						<option value="zip">Zip</option>
116 | 					</select>
117 | 					</div>
118 | 				</fieldset>
119 | 			</div>
120 | 			<div className="card-footer">
121 | 				<div className="btn-group" role="group" aria-label="Basic example">
122 | 					<button type="button" className="btn btn-primary">Up</button>
123 | 					<button type="button" className="btn btn-primary">Down</button>
124 | 					<button type="button" className="btn btn-danger">Delete</button>
125 | 				</div>
126 | 			</div>
127 | 		</div>
128 | 	);
129 | }
130 | 
131 | export default ManifestEditorMapItem;

--------------------------------------------------------------------------------
/src/classes/Config.ts:
--------------------------------------------------------------------------------
  1 | const os = require('electron').remote.require('os');
  2 | //const path = require('electron').remote.require('path');
  3 | const {app,dialog} = require('electron').remote.require('electron');
  4 | const {Registry} = require('electron').remote.require('rage-edit')
  5 | const {currentPlatform, platforms} = require("./Platform")
  6 | //const fs = require('fs');
  7 | import path from 'path'
  8 | import fs from 'fs'	
  9 | 
 10 | export const manifestFeed = "https://raw.githubusercontent.com/abrahamYG/sc2-campaign-manager/master/public/sources.json";
 11 | export interface IConfig {
 12 | 	installDir:string, 
 13 | 	runCommand:string, 
 14 | 	runParams:string,
 15 | 	feed:string,
 16 | 	campaignSources:Array<string>
 17 | 	campaignLocalSources:Array<string>
 18 | }
 19 | 
 20 | export default class Config {
 21 | 	static getConfigFilePath():string{
 22 | 		const filename = `config-${app.getVersion()}.json`
 23 | 		return path.join(app.getPath("userData"), filename)
 24 | 	}
 25 | 
 26 | 	static showInstallDirOpenDialog(path:string, callback:(filePaths:Array<string>)=>void){
 27 | 		const browserWindow:any = null;
 28 | 		const options:any = {
 29 | 			properties: ["openDirectory"],
 30 | 			defaultPath: path
 31 | 		}
 32 | 		dialog.showOpenDialog(browserWindow, options, callback)
 33 | 	}
 34 | 	static configFileExists():boolean{
 35 | 		const configFile = this.getConfigFilePath();
 36 | 		return fs.existsSync(configFile);
 37 | 	}
 38 | 	static getSourcesRemote = async () => {
 39 | 		const response:Response = await fetch(manifestFeed);
 40 | 		const sources:Array<string> = await response.json();
 41 | 		return sources;
 42 | 	}
 43 | 	static loadFromDisk():any{
 44 | 		let configs = {};
 45 | 		const configFileExists =this.configFileExists();
 46 | 		console.log("configFileExists",configFileExists); 
 47 | 		if(configFileExists){
 48 | 			const configFile = this.getConfigFilePath();
 49 | 			const data:Buffer = fs.readFileSync(configFile);
 50 | 			configs = JSON.parse(data.toString());
 51 | 			
 52 | 		}
 53 | 		return configs;
 54 | 	}
 55 | 	static writeToDisk(configs:object):boolean{
 56 | 		const jsonConfigs = JSON.stringify(configs,null,4);
 57 | 		const configFile = this.getConfigFilePath();
 58 | 		fs.writeFileSync(configFile, jsonConfigs);
 59 | 		return true;
 60 | 	}
 61 | 	static installDirFromRegistry:string = "";
 62 | 	static async getInstallDirFromRegistry() {
 63 | 		if (currentPlatform === platforms.WINDOWS) {
 64 | 			const result = await Registry.get('HKLM\\SOFTWARE\\Wow6432Node\\Microsoft\\Windows\\CurrentVersion\\Uninstall\\StarCraft II', 'InstallLocation');
 65 | 			this.installDirFromRegistry = result? result:"";
 66 | 			return this.installDirFromRegistry;
 67 | 		}
 68 | 		else{
 69 | 			//return this.installDir;
 70 | 		}
 71 | 	}
 72 | 	static getFeed():string {
 73 | 		return Config.configFileExists()&&Config.loadFromDisk().feed?(Config.loadFromDisk().feed):manifestFeed;
 74 | 	}
 75 | 	static getSources():Array<string> {
 76 | 		return  Config.configFileExists()&&Config.loadFromDisk().campaignSources? (Config.loadFromDisk().campaignSources):[""];
 77 | 	}
 78 | 	
 79 | 	static getLocalSourcesPath():string {
 80 | 		const basePath = path.join(app.getPath("userData"), "manifests/");
 81 | 		return  basePath;//Config.configFileExists()&&Config.loadFromDisk().campaignLocalSources? (Config.loadFromDisk().campaignLocalSources):[""];
 82 | 	}
 83 | 	static getLocalSources():Array<string> {
 84 | 		const basePath = Config.getLocalSourcesPath();
 85 | 		const localSources:Array<string> = (fs.existsSync(basePath))?fs.readdirSync(basePath).
 86 | 			filter(file => path.extname(file) === ".json").
 87 | 			map(source => path.join(basePath,source)):[];
 88 | 		return  localSources;//Config.configFileExists()&&Config.loadFromDisk().campaignLocalSources? (Config.loadFromDisk().campaignLocalSources):[""];
 89 | 	}
 90 | 	static getInstallDir():string {
 91 | 		const fromRegistry = this.installDirFromRegistry;
 92 | 		const dir:any = {
 93 | 			WINDOWS:fromRegistry?fromRegistry:"C:\\Program Files (x86)\\StarCraft II",
 94 | 			MAC:"/Applications/StarCraft II",
 95 | 			LINUX:"C:\\Program Files (x86)\\StarCraft II"
 96 | 		};
 97 | 		console.log("this.installDirFromRegistry",fromRegistry);
 98 | 		console.log("dir[currentPlatform]",dir[currentPlatform]);
 99 | 		return Config.configFileExists()? (Config.loadFromDisk().installDir):dir[currentPlatform];
100 | 	}
101 | 	static getRunCommand(baseDir?:string):string {
102 | 
103 | 		const commands:any = {
104 | 			WINDOWS:path.join(baseDir?baseDir:Config.getInstallDir(),"Support64/" ,"SC2Switcher_x64.exe"),
105 | 			MAC:"open",
106 | 			LINUX:"wine \"C:\\Program Files (x86)\\StarCraft II\\StarCraft II.exe\""
107 | 		};
108 | 		return Config.configFileExists()? (Config.loadFromDisk().runCommand):commands[currentPlatform];
109 | 	}
110 | 	static getRunParams():Array<string> {
111 | 		const defaultParams:any = {
112 | 			WINDOWS:'-run {map} -reloadcheck',
113 | 			MAC:"-a {map} \"sc2switcher\"",
114 | 			LINUX:"-run {map} -reloadcheck"
115 | 		};
116 | 		const params = Config.configFileExists()&&Config.loadFromDisk().params? (Config.loadFromDisk().params):defaultParams[currentPlatform];
117 | 		return params.split(" ");
118 | 	}
119 | 	
120 | }

--------------------------------------------------------------------------------
/src/components/SettingsForm.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Config, {IConfig} from '../classes/Config'
  3 | import { connect } from "react-redux";
  4 | import { AppState } from '../store';
  5 | import { setConfig } from '../store/config/actions';
  6 | 
  7 | const SettingsForm = (props:any) => {
  8 | 	const {
  9 | 		installDir, setInstallDir,
 10 | 		runCommand, setRunCommand,
 11 | 		runParams, setRunParams,
 12 | 		feed, setFeed,
 13 | 		campaignSources, setCampaignSources,
 14 | 		campaignLocalSources, setCampaignLocalSources,
 15 | 		disabledForm, setDisabledForm,
 16 | 		fullForm, config
 17 | 	} = props;
 18 | 	const openInstallDirDialog = ()=> {
 19 | 		Config.showInstallDirOpenDialog(installDir, (filePaths:Array<string>)=>{
 20 | 			setInstallDir(filePaths[0]);
 21 | 		});
 22 | 
 23 | 	}
 24 | 	return(
 25 | 	<form>
 26 | 		<fieldset className="form-group" disabled={disabledForm}>
 27 | 			<label htmlFor="installdir">StarCraft II Installation Directory</label>
 28 | 				<div className="input-group">
 29 | 					<input 
 30 | 						value={installDir}
 31 | 						onChange={e => setInstallDir(e.target.value)}
 32 | 						type="text" 
 33 | 						className="form-control" 
 34 | 						name="installdir" 
 35 | 						aria-describedby="installdirHelp" 
 36 | 						placeholder="Enter a directory" 
 37 | 					/>
 38 | 					<div className="input-group-append">
 39 | 						<button 
 40 | 							className="btn btn-info" 
 41 | 							type="button"
 42 | 							onClick={openInstallDirDialog}
 43 | 						>
 44 | 							Browse...
 45 | 						</button>
 46 | 					</div>
 47 | 				</div>
 48 | 				<small id="installdirHelp" className="form-text text-muted">
 49 | 					StarCraft II requires its maps and mods files to be placed on its installation directory.
 50 | 					Default value will be taken from your possible installation directory, make sure it is correctly set.
 51 | 				</small>
 52 | 			</fieldset>
 53 | 			{fullForm &&
 54 | 			<fieldset className="form-group">
 55 | 				<label htmlFor="runcommand">StarCraft II Run Map Command</label>
 56 | 				<div className="input-group">
 57 | 					<input 
 58 | 						value={runCommand}
 59 | 						onChange={e => setRunCommand(e.target.value)}
 60 | 						type="text" 
 61 | 						className="form-control" 
 62 | 						name="runcommand" 
 63 | 						aria-describedby="runcommandHelp" 
 64 | 						placeholder="Enter a command" 
 65 | 					/>
 66 | 					<div className="input-group-append">
 67 | 						<button 
 68 | 							className="btn btn-info" 
 69 | 							type="button"
 70 | 							onClick={openInstallDirDialog}
 71 | 						>
 72 | 							Browse...
 73 | 						</button>
 74 | 					</div>
 75 | 				</div>
 76 | 				<small id="runcommandHelp" className="form-text text-muted">
 77 | 					This value is used to run StarCraft II  and directly load the campaign of your choice.
 78 | 					Default value is guessed based on the possible StarCraft II Installation directory, but make sure it is correctly set.
 79 | 				</small>	
 80 | 				<label htmlFor="runParams">StarCraft II Run Map Parameters</label>
 81 | 				<input 
 82 | 					value={runParams}
 83 | 					onChange={e => setRunParams(e.target.value)}
 84 | 					type="text" 
 85 | 					className="form-control" 
 86 | 					name="runParams" 
 87 | 					aria-describedby="runParamsHelp" 
 88 | 					placeholder="Enter a set of parameters" 
 89 | 				/>
 90 | 				<small id="runParamsHelp" className="form-text text-muted">
 91 | 					These are parameters used to run the map and set additional settings when running StarcCraft II.
 92 | 					If you are not sure what to write here, you can happily leave the default values.
 93 | 				</small>
 94 | 
 95 | 				<label htmlFor="feed">Campaign Feed</label>
 96 | 				<input 
 97 | 					value={feed}
 98 | 					onChange={e => setFeed(e.target.value)}
 99 | 					type="text" 
100 | 					className="form-control" 
101 | 					name="feed" 
102 | 					aria-describedby="feedHelp" 
103 | 					placeholder="Enter a set of parameters" 
104 | 				/>
105 | 				<small id="feedHelp" className="form-text text-muted">
106 | 					A remote feed that provides a set of campaigns available to download
107 | 				</small>
108 | 				<label htmlFor="campaignSources">Campaign Sources</label>
109 | 				<textarea 
110 | 					name="campaignSources"
111 | 					aria-describedby="campaignSourcesHelp" 
112 | 					value={campaignSources} 
113 | 					onChange={e => setCampaignSources(e.target.value)} 
114 | 					className="form-control"
115 | 					rows={4}
116 | 				/>
117 | 				<small id="campaignSourcesHelp" className="form-text text-muted">
118 | 					These are the sources the app uses to retrieve campaign data.
119 | 					If you have an specific set of sources you are free to add them, 
120 | 					otherwise you can leave the default settings just fine.
121 | 				</small>
122 | 				<label htmlFor="campaignLocalSources">Campaign Local Sources</label>
123 | 				<textarea 
124 | 					name="campaignLocalSources"
125 | 					aria-describedby="campaignLocalSourcesHelp" 
126 | 					value={campaignLocalSources} 
127 | 					onChange={e => setCampaignLocalSources(e.target.value)} 
128 | 					className="form-control"
129 | 					rows={4}
130 | 				/>
131 | 				<small id="campaignLocalSourcesHelp" className="form-text text-muted">
132 | 					These are the sources from your local system the app uses to retrieve campaign data.
133 | 					If you have an specific set of sources you are free to add them, 
134 | 					otherwise you can leave the default settings just fine.
135 | 				</small>
136 | 			</fieldset>
137 | 			}
138 | 	</form>
139 | 	);
140 | 
141 | }
142 | 
143 | 
144 | const mapStateToProps = (state:AppState,ownProps:any):any => {
145 | 	const {configState} = state;
146 | 	return configState;
147 | };
148 | 
149 | 
150 | const mapDispatchToProps = (dispatch:any) => {
151 | 	return {
152 | 		onClick: (config:IConfig) => {
153 | 			dispatch(setConfig(config));
154 | 		}
155 | 	};
156 | };
157 | 
158 | export default connect(
159 | 	mapStateToProps,//mapStateToProps,
160 | 	null
161 |   )(SettingsForm);

--------------------------------------------------------------------------------
/src/containers/CampaignPane.tsx:
--------------------------------------------------------------------------------
  1 | import React, { FC, useState, useEffect } from 'react';
  2 | import { ipcRenderer } from 'electron';
  3 | import CampaignList from '../components/CampaignList';
  4 | import CampaignDetails from '../components/CampaignDetails';
  5 | import Campaign, { ICampaign } from '../classes/Campaign'
  6 | import msg from '../constants/ipcmessages';
  7 | import { connect, MapDispatchToProps, MapStateToProps } from "react-redux";
  8 | import { AppState } from '../store';
  9 | import { setCampaigns, setCampaign } from '../store/campaign/actions';
 10 | import { filterCampaigns, sortCampaigns,IFilter } from '../store/campaign/selectors';
 11 | interface ICampaignPaneProps {
 12 | 	campaigns: Array<ICampaign>,
 13 | 	selectedCampaign: ICampaign,
 14 | 	setCampaigns?: typeof setCampaigns,
 15 | 	setCampaign: typeof setCampaign,
 16 | 	selectedCampaignAuthor: object
 17 | 	onDownloadCampaignClick: (campaign: ICampaign) => void
 18 | 
 19 | }
 20 | 
 21 | interface ICampaignPaneState {
 22 | 	campaigns: Array<ICampaign>,
 23 | 	authors: Array<Object>,
 24 | 	selectedCampaign: ICampaign,
 25 | 	selectedCampaignAuthor: Object
 26 | }
 27 | 
 28 | export const NewCampaignPane: FC<ICampaignPaneProps> = props => {
 29 | 	
 30 | 	useEffect(()=>{
 31 | 		ipcRenderer.on(msg.DOWNLOAD_CAMPAIGN_FINISH, (event: any, arg: any) => {
 32 | 			const {campaigns} = props;
 33 | 			const index = campaigns.findIndex(c => c.id === arg.campaignId)
 34 | 			const campaign = {
 35 | 				...campaigns[index],
 36 | 				installed: Campaign.isCampaignInstalled(campaigns[index])
 37 | 			};
 38 | 			console.log("DOWNLOAD_CAMPAIGN_FINISH", campaign)
 39 | 			props.setCampaign(campaign, index)
 40 | 		});
 41 | 	},[])
 42 | 
 43 | 	const [selectedId, setSelectedId]= useState("");
 44 | 	const [filter, setFilter] = useState<IFilter>({key:"name",val:""});
 45 | 	const campaigns = filterCampaigns(
 46 | 		sortCampaigns(props.campaigns,"name"),
 47 | 		filter
 48 | 	);
 49 | 
 50 | 	useEffect(()=>{
 51 | 		//setFilter(["author","CybrosX"])
 52 | 	},[])
 53 | 
 54 | 	const handleDownloadClick = Campaign.downloadCampaign;
 55 | 	const handlePlayClick = Campaign.playCampaign;
 56 | 	
 57 | 	return (
 58 | 		<div className="row">
 59 | 			<section className="sidebar col-3 bg-secondary pr-0 pl-0">
 60 | 				{(campaigns) &&
 61 | 					<CampaignList 
 62 | 						onFilterSet={setFilter}
 63 | 						filter={filter}
 64 | 						campaigns={campaigns}
 65 | 						selectedId={selectedId} 
 66 | 						onItemClick={setSelectedId}
 67 | 					/>
 68 | 				}
 69 | 			</section>
 70 | 			<section className="campaign-details-pane col bg-white">
 71 | 				{(selectedId !== "") &&
 72 | 					<CampaignDetails
 73 | 						selectedId={selectedId} 
 74 | 						onDownloadCampaignClick={handleDownloadClick}
 75 | 						onPlayCampaignClick={handlePlayClick}
 76 | 					/>
 77 | 				}
 78 | 				{(selectedId === "") &&
 79 | 					<div>
 80 | 						<h3>Please select a Campaign</h3>
 81 | 					</div>
 82 | 				}
 83 | 			</section>
 84 | 		</div>
 85 | 	);
 86 | }
 87 | /*
 88 | class CampaignPane extends React.Component<ICampaignPaneProps, ICampaignPaneState> {
 89 | 
 90 | 	constructor(props: ICampaignPaneProps) {
 91 | 		super(props);
 92 | 	}
 93 | 	handleCampaignItemClick = (campaign: ICampaign) => {
 94 | 		localStorage.setItem('selectedCampaign', campaign.id)
 95 | 		//this.setState({selectedCampaign: campaign});
 96 | 	};
 97 | 
 98 | 	handleDownloadClick = Campaign.downloadCampaign;
 99 | 	handlePlayClick = Campaign.playCampaign;
100 | 
101 | 	componentDidMount() {
102 | 		const campaigns = this.props.campaigns.map((campaign, index) => {
103 | 			return { ...campaign, installed: Campaign.isCampaignInstalled(campaign) }
104 | 		});
105 | 		this.props.setCampaigns(campaigns);
106 | 		//this.setState({campaigns});
107 | 
108 | 		ipcRenderer.on(msg.DOWNLOAD_CAMPAIGN_STATUS, (event: any, arg: any) => {
109 | 			const campaigns = [...this.props.campaigns];
110 | 			const index = campaigns.findIndex(c => c.id === arg.campaignId)
111 | 			const campaign = {
112 | 				...campaigns[index],
113 | 				progress: arg.progress.toFixed(2)
114 | 			};
115 | 			campaigns[index] = campaign;
116 | 			this.props.setCampaign(campaign, index)
117 | 			console.log("DOWNLOAD_CAMPAIGN_STATUS", campaign.progress)
118 | 			//this.setState({campaigns})
119 | 		});
120 | 		
121 | 	}
122 | 	render() {
123 | 		const { selectedCampaign, campaigns } = this.props
124 | 		console.log(this.props)
125 | 		return (
126 | 			<div className="row">
127 | 				<section className="sidebar col-3 bg-secondary pr-0 pl-0">
128 | 					{(campaigns) &&
129 | 						<CampaignList />
130 | 					}
131 | 				</section>
132 | 				<section className="campaign-details-pane col bg-white">
133 | 					{(selectedCampaign) &&
134 | 						<CampaignDetails
135 | 							selectedId=""
136 | 							onDownloadCampaignClick={this.handleDownloadClick}
137 | 							onPlayCampaignClick={this.handlePlayClick}
138 | 						/>
139 | 					}
140 | 					{(!selectedCampaign) &&
141 | 						<div>
142 | 							<h3>Please select a Campaign</h3>
143 | 						</div>
144 | 					}
145 | 				</section>
146 | 			</div>
147 | 		);
148 | 	}
149 | }
150 | */
151 | 
152 | const mapStateToProps: MapStateToProps<ICampaignPaneProps, ICampaignPaneProps, AppState> = (state, ownprops) => {
153 | 	const { campaignState } = state
154 | 	const { campaigns, selectedIndex } = campaignState;
155 | 	return {
156 | 		...campaignState,
157 | 		campaigns,
158 | 		selectedCampaign: campaigns[selectedIndex],
159 | 		...ownprops
160 | 	};
161 | };
162 | 
163 | 
164 | const mapDispatchToProps: MapDispatchToProps<ICampaignPaneProps, ICampaignPaneProps> = (dispatch, ownProps) => {
165 | 	return {
166 | 		setCampaigns: (campaigns) => {
167 | 			return dispatch(setCampaigns(campaigns));
168 | 		},
169 | 		setCampaign: (campaign, index) => {
170 | 			return dispatch(setCampaign(campaign, index));
171 | 		},
172 | 		...ownProps
173 | 	};
174 | };
175 | 
176 | export default connect(
177 | 	mapStateToProps,//mapStateToProps,
178 | 	mapDispatchToProps,
179 | )(NewCampaignPane);
180 | //export default CampaignList

--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | CC0 1.0 Universal
 2 | ==================
 3 | 
 4 | Statement of Purpose
 5 | ---------------------
 6 | 
 7 | The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work").
 8 | 
 9 | Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others.
10 | 
11 | For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights.
12 | 
13 | 1. Copyright and Related Rights.
14 | --------------------------------
15 | A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following:
16 | 
17 | i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;
18 | ii. moral rights retained by the original author(s) and/or performer(s);
19 | iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work;
20 | iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below;
21 | v. rights protecting the extraction, dissemination, use and reuse of data in a Work;
22 | vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and
23 | vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.
24 | 
25 | 2. Waiver.
26 | -----------
27 | To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose.
28 | 
29 | 3. Public License Fallback.
30 | ----------------------------
31 | Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose.
32 | 
33 | 4. Limitations and Disclaimers.
34 | --------------------------------
35 | 
36 | a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.
37 | b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law.
38 | c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work.
39 | d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work.
40 |

--------------------------------------------------------------------------------
/src/classes/Campaign.ts:
--------------------------------------------------------------------------------
  1 | import {ipcRenderer} from 'electron';
  2 | import path from 'path';
  3 | import fs from 'fs';
  4 | import {promisify} from 'util';
  5 | //const path = require('electron').remote.require('path');
  6 | //const fs = require('electron').remote.require('fs');
  7 | //const { promisify } = require('electron').remote.require('util')
  8 | import yauzl from 'yauzl';
  9 | import {remote} from 'electron'
 10 | 
 11 | const {app,dialog} = remote.require('electron');
 12 | import download from 'download'
 13 | 
 14 | const readFileAsync = promisify(fs.readFile)
 15 | const writeFileAsync = promisify(fs.writeFile)
 16 | const fsPromises = fs.promises;
 17 | 
 18 | import Config from './Config';
 19 | import msg from '../constants/ipcmessages';
 20 | import Downloader from './Downloader';
 21 | /**
 22 |  * Interface type for Campaign Objects
 23 |  */
 24 | export interface IScreenshot {
 25 | 	src:string,
 26 | 	description?:string
 27 | }
 28 | 
 29 | export interface IPatchNote {
 30 | 	version:string,
 31 | 	date:string,
 32 | 	notes:string
 33 | }
 34 | export interface ICampaign {
 35 | 	/**Campaign Id*/
 36 | 	"id":string,
 37 | 	"name":string,
 38 | 	"author":string,
 39 | 	"thumbnail":string,
 40 | 	"description":string,
 41 | 	"progress":number,
 42 | 	"installed":boolean,
 43 | 	"entryPoint":string,
 44 | 	/**Maps used by the campaign */
 45 | 	"maps":Array<ISC2Map>,
 46 | 	"mods":Array<ISC2Mod>,
 47 | 	"lastUpdated":string,
 48 | 	"patchNotes":Array<IPatchNote>,
 49 | 	"screenshots":Array<IScreenshot>,
 50 | 	"videos"?:Array<string>,
 51 | 	"state"?:string,
 52 | 	[key: string]: string|number|object|boolean|ISC2Map|ISC2Mod
 53 | };
 54 | 
 55 | export interface ISC2Component{
 56 | 	"name": string,
 57 | 	"description": string,
 58 | 	"destination": string,
 59 | 	"source": string,
 60 | 	"sourceFormat": string,
 61 | 	"fileEntry": string
 62 | }
 63 | /**
 64 |  * Defines a Map within a campaign
 65 |  */
 66 | export interface ISC2Map extends ISC2Component {};
 67 | 
 68 | export interface ISC2Mod  extends ISC2Component{};
 69 | 
 70 | export interface IAuthor {
 71 | 	"id":string,
 72 | 	"name":string,
 73 | 	"email":string,
 74 | 	"campaigns":Array<object>
 75 | 
 76 | }
 77 | export default class Campaign {
 78 | 	static getCampaignLocal = async (source:string):Promise<ICampaign> => {
 79 | 		const fullPath = source;// path.join(app.getPath("userData"),"manifests/", source)
 80 | 		
 81 | 		const response:Buffer = await readFileAsync(fullPath);
 82 | 		const json = response.toString();
 83 | 		const campaign:ICampaign = JSON.parse(json);
 84 | 		return campaign;
 85 | 	}
 86 | 	
 87 | 	static writeToDisk(campaign:ICampaign):boolean{
 88 | 		const campaignJSON = JSON.stringify(campaign,null,4);
 89 | 		const campaignFile = path.join(Config.getLocalSourcesPath(),campaign.id+".json");
 90 | 		fs.writeFileSync(campaignFile, campaignJSON);
 91 | 		return true;
 92 | 	}
 93 | 	static getCampaignRemote = async (source:string) => {
 94 | 		const response:Response = await fetch(source);
 95 | 		const campaign:ICampaign = await response.json();
 96 | 		return campaign;
 97 | 	}
 98 | 	static getRunCommand = (campaign:ICampaign):string => {
 99 | 		console.group("getCampaignRunCommand");
100 | 		const entryPoint = (campaign.entryPoint)?campaign.entryPoint:campaign.maps[0].destination;
101 | 		const entryPointPath = path.join(Campaign.getCampaignsInstallDir(),entryPoint)
102 | 		const command = Config.getRunCommand().replace("{map}",entryPointPath);
103 | 		console.log("command", command)
104 | 		console.groupEnd();
105 | 		return command;
106 | 	}
107 | 	static getRunParams = (campaign:ICampaign,mapIndex:number):Array<string> => {
108 | 		console.group("getCampaignRunParams")
109 | 		console.log(mapIndex);
110 | 		const {entryPoint, maps} = campaign
111 | 		const entry = (mapIndex>=0)?maps[mapIndex].destination:(entryPoint)?entryPoint:maps[0].destination
112 | 		const entryPath = path.join(Campaign.getCampaignsInstallDir(),entry)
113 | 		const params = Config.getRunParams().map(e=>e.replace("{map}",entryPath))
114 | 		
115 | 		console.log("params", params)
116 | 		console.groupEnd();
117 | 		return params;
118 | 	}
119 | 	
120 | 	static getCampaignsRemote = async (): Promise<Array<ICampaign>> => {
121 | 		const feed = Config.getFeed();
122 | 		const sources:Array<string> = (feed !=="")?(await (await fetch(feed)).json()):Config.getSources()
123 | 		const campaigns:Array<ICampaign> = await Promise.all(sources.map((source:string) => Campaign.getCampaignRemote(source)));
124 | 		return campaigns;
125 | 	}
126 | 	static getCampaignsLocal = async ():Promise<Array<ICampaign>> => {
127 | 		const campaigns = await Promise.all(Config.getLocalSources().map((source:string) => {
128 | 			return Campaign.getCampaignLocal(source) 
129 | 		}));
130 | 		console.log("getCampaignsLocal",campaigns)
131 | 		return campaigns;
132 | 	}
133 | 	static getCampaignsInstallDir = ():string => {
134 | 		return Config.getInstallDir();
135 | 	}
136 | 	static getCampaignsInstalled = (campaigns:Array<ICampaign>) => {
137 | 		return campaigns.map(campaign => {
138 | 			return {...campaign, installed: Campaign.isCampaignInstalled(campaign) }
139 | 		})
140 | 	}
141 | 	static isCampaignInstalled = (campaign:ICampaign) => {
142 | 		const installDir = Campaign.getCampaignsInstallDir();
143 | 		const mapsExist = campaign.maps.reduce((existtotal, map) => {
144 | 			return existtotal && fs.existsSync(path.join(installDir,map.destination))
145 | 		},true);
146 | 		const modsExist = campaign.mods.reduce((existtotal, mod) => {
147 | 			return existtotal && fs.existsSync(path.join(installDir,mod.destination))
148 | 		},true);
149 | 		return mapsExist && modsExist;
150 | 	}
151 | 
152 | 	static downloadCampaign = (campaign:ICampaign) => {
153 | 		const installDir = Campaign.getCampaignsInstallDir();
154 | 		
155 | 		Downloader.pushCampaign(campaign);
156 | 		//ipcRenderer.send(msg.DOWNLOAD_CAMPAIGN, {...campaign, installDir:Campaign.getCampaignsInstallDir()});
157 | 		
158 | 	}
159 | 	static playCampaign = (campaign:ICampaign,mapIndex:number=-1) => {
160 | 
161 | 		console.group("playCampaign")
162 | 		const data = {
163 | 			...campaign, 
164 | 			installDir:Campaign.getCampaignsInstallDir(), 
165 | 			command: Campaign.getRunCommand(campaign),
166 | 			params:Campaign.getRunParams(campaign,mapIndex)
167 | 		};
168 | 		console.log("data", data);
169 | 		ipcRenderer.send(msg.PLAY_CAMPAIGN, data);
170 | 		console.groupEnd();
171 | 	}
172 | 	static emptyMap = ():ISC2Map => {
173 | 		return {
174 | 			"name": "",
175 | 			"description": "",
176 | 			"destination": "",
177 | 			"source": "",
178 | 			"sourceFormat": "",
179 | 			"fileEntry": ""
180 | 		};
181 | 	}
182 | 	static emptyCampaign = ():ICampaign => {
183 | 		return {
184 | 			"id":"",
185 | 			"name":"",
186 | 			"thumbnail":"",
187 | 			"progress":0,
188 | 			"author":"",
189 | 			"description":"",
190 | 			"maps":[],
191 | 			"mods":[],
192 | 			"lastUpdated":"",
193 | 			"patchNotes":[],
194 | 			"screenshots":[],
195 | 			"entryPoint":"",
196 | 			"installed":false
197 | 		};
198 | 	}
199 | }
200 | 
201 | export const playCampaign = Campaign.playCampaign;

--------------------------------------------------------------------------------
/electron/main.js:
--------------------------------------------------------------------------------
  1 | const {app, BrowserWindow} = require('electron');
  2 | const execFile = require('child_process').execFile;
  3 | const { ipcMain } = require('electron');
  4 | const { session } = require('electron');
  5 | const path = require('path');
  6 | const fs = require('fs-extra');
  7 | const download = require('download');
  8 | const os   = require('os');
  9 | const yauzl = require('yauzl');
 10 | //const download = require('./electron/Download');
 11 | //const {download} = require('electron-dl');
 12 | 
 13 | 
 14 | const msg = require('../src/constants/ipcmessages');
 15 | 
 16 | let mainWindow;
 17 | 
 18 | //DownloadManager.register();
 19 | 
 20 | 
 21 | require('electron-reload')(__dirname, {
 22 | 	// Note that the path to electron may vary according to the main file
 23 | 	electron: require(`${__dirname}/node_modules/electron`)
 24 | });
 25 | 
 26 | function createWindow () {
 27 | 	mainWindow = new BrowserWindow({
 28 | 		width: 900,
 29 | 		height: 720,
 30 | 		//frame: false,
 31 | 		titleBarStyle:"hidden",
 32 | 		webPreferences: {
 33 | 			nodeIntegration: true
 34 | 		}
 35 | 	});
 36 | 	
 37 | 	mainWindow.loadFile('../index.html');
 38 | 	/*mainWindow.webContents.openDevTools({
 39 | 		mode:"detach" 
 40 | 	});*/
 41 | 	mainWindow.on('closed', function () {
 42 | 		mainWindow = null;
 43 | 	})
 44 | 	
 45 | 	
 46 | }
 47 | 
 48 | function initSessionData(){
 49 | 	
 50 | 	//mainWindow.webContents.downloadURL("https://github.com/danielthepirate/StarCraftPlus/blob/master/Build/StarCraftPlus.SC2Mod?raw=true");
 51 | }
 52 | 
 53 | function onReady(){
 54 | 	
 55 | 	createWindow();
 56 | 	initSessionData();
 57 | }
 58 | 
 59 | app.on('ready', onReady)
 60 | 
 61 | app.on('window-all-closed', function () {
 62 | 	if (process.platform !== 'darwin') {
 63 | 		app.quit();
 64 | 	}
 65 | })
 66 | 
 67 | app.on('activate', function () {
 68 | 	if (mainWindow === null) {
 69 | 		createWindow();
 70 | 	}
 71 | });
 72 | 
 73 | ipcMain.on(msg.DOWNLOAD_MAP, async (event, arg) => {
 74 | 	let test;
 75 | 	//console.log(arg)
 76 | 	const {source, file,installDir} = arg;
 77 | 	const fileName = file.replace(/^.*[\\\/]/, '')
 78 | 	const filePath = installDir+file.replace(fileName,"")
 79 | 	const fullFilePath = path.join(filePath, fileName);
 80 | 	console.log({fileName, filePath});
 81 | 	const win = BrowserWindow.getFocusedWindow();
 82 | 	
 83 | 	const data = await download(source).on('downloadProgress', progress => {
 84 | 		// Report download progress
 85 | 		console.log(`${fileName}: ${progress.percent}`);
 86 | 		event.sender.send(msg.DOWNLOAD_MAP_STATUS, {fileName, progress: progress.percent})
 87 | 	})
 88 | 	fs.writeFileSync(fullFilePath, data);
 89 | 	//.then(data => {
 90 | 	//});
 91 | 	
 92 | 	
 93 | })
 94 | 
 95 | ipcMain.on(msg.DOWNLOAD_CAMPAIGN, async (event, campaign) => {
 96 | 	let timer = Date.now();
 97 | 	const {maps, mods,installDir} = campaign;
 98 | 	const downloadtracker = {downloads:[], totalProgress:0}
 99 | 	const mapsmods = [...mods, ...maps];
100 | 	console.log("maps and mods:",mapsmods)
101 | 	const sources = {};
102 | 	try {
103 | 		mapsmods.map(mod => {
104 | 			const {sourceFormat} = mod;
105 | 			if (!sources[mod.source]){
106 | 				sources[mod.source] = {
107 | 					format: sourceFormat,
108 | 					files:[]
109 | 				}
110 | 				downloadtracker.downloads.push({ source: mod.source, progress:0})
111 | 			}
112 | 			if(sources[mod.source].format === "zip") {
113 | 				sources[mod.source].files.push(mod);
114 | 			}
115 | 			else{ 
116 | 				sources[mod.source].files = mod;
117 | 			}
118 | 		});
119 | 	} catch (error) {
120 | 		console.log("Error!:",error);
121 | 	}
122 | 	
123 | 	const myPromises = [];
124 | 	console.log("sources: ",sources)
125 | 	for(let source in sources){
126 | 		console.log("current source:", source);
127 | 		const promise = download(source).on('downloadProgress', progress => {
128 | 			const dlitem = downloadtracker.downloads.find(dl => source === dl.source)
129 | 			dlitem.progress = progress.percent;
130 | 			downloadtracker.totalProgress = downloadtracker.downloads.reduce((total, {progress}) => total + progress,0.0) / downloadtracker.downloads.length;
131 | 			if((Date.now() - timer) > 1000 || progress.percent >= 1){
132 | 				//console.log("DOWNLOADTRACKER",downloadtracker);
133 | 				mainWindow.setProgressBar(downloadtracker.totalProgress);
134 | 				event.sender.send(msg.DOWNLOAD_CAMPAIGN_STATUS, {campaignId: campaign.id, progress: downloadtracker.totalProgress})
135 | 				timer = Date.now();
136 | 			}
137 | 		}).then(data =>{
138 | 			console.log("finished:", source)
139 | 			if(sources[source].format==="zip"){
140 | 				const zipBaseDir = installDir;
141 | 				const zipBaseName = path.basename(source)
142 | 				console.log("zipBaseDir:", zipBaseDir)
143 | 				console.log("zipBaseName:", zipBaseName)
144 | 				const zipPath = path.join(zipBaseDir, zipBaseName);
145 | 				console.log("zip:", zipPath);
146 | 				fs.writeFileSync(zipPath, data);
147 | 				yauzl.open(zipPath, {lazyEntries: true}, function(err, zipfile) {
148 | 					if (err){ throw err;}
149 | 					zipfile.readEntry();
150 | 					zipfile.on("entry", function(entry) {
151 | 						console.log(entry.fileName);
152 | 						if (/\/$/.test(entry.fileName)){
153 | 							zipfile.readEntry();
154 | 						}
155 | 						else {
156 | 							const entryData = sources[source].files.find(e => entry.fileName === e.fileEntry)
157 | 							if(entryData){
158 | 								const entryBasePath = installDir;	
159 | 								const entryBaseName = entryData.destination;
160 | 								const entryFullPath = path.join(entryBasePath,entryBaseName);
161 | 								console.log("entryFullPath",entryFullPath)
162 | 								fs.ensureDirSync(path.dirname(entryFullPath));
163 | 								const destStream = fs.createWriteStream(entryFullPath);
164 | 								zipfile.openReadStream(entry, function(err, readStream) {
165 | 									if (err) throw err;
166 | 									readStream.on("end", function() {
167 | 										zipfile.readEntry();
168 | 									});
169 | 									readStream.pipe(destStream);
170 | 								});
171 | 							}
172 | 							else{
173 | 								zipfile.readEntry();
174 | 							}
175 | 						}
176 | 						
177 | 					});
178 | 					zipfile.once("end", function() {
179 | 						zipfile.close();
180 | 					});
181 | 				});
182 | 				
183 | 			}
184 | 			else {
185 | 				const destBaseDir = installDir;
186 | 				const destBasename = sources[source].files.destination;
187 | 				console.log("destBaseDir:", destBaseDir)
188 | 				console.log("zipBaseName:", zipBaseName)
189 | 				const destPath = path.join(destBaseDir, destBasename);
190 | 				console.log("nozip: ", destPath);
191 | 				fs.ensureDirSync(path.dirname(destPath));
192 | 				fs.writeFileSync(destPath, data);
193 | 			}
194 | 		}).catch((reason) =>{
195 | 			console.log("Rejected promise:", reason)
196 | 		})
197 | 		console.log("promise: ", promise)
198 | 		myPromises.push(promise);
199 | 	}
200 | 	console.log("end loop!")
201 | 	Promise.all(myPromises).then(() => {
202 | 		console.log("All downloads finished?");
203 | 		event.sender.send(msg.DOWNLOAD_CAMPAIGN_FINISH, {campaignId: campaign.id, progress: downloadtracker.totalProgress})
204 | 	});
205 | })
206 | 
207 | ipcMain.on(msg.PLAY_CAMPAIGN, async (event, campaign) => {
208 | 	const {command, params} = campaign;
209 | 	console.log(command, params)
210 | 	execFile(campaign.command,params,function(error, stdout, stderr) {
211 | 		console.log(error)
212 | 		console.log(stdout);
213 | 	});
214 | });

--------------------------------------------------------------------------------
/src/classes/Downloader.ts:
--------------------------------------------------------------------------------
  1 | import Campaign, { ICampaign, ISC2Component } from "./Campaign";
  2 | import download = require("download");
  3 | import _ from "lodash";
  4 | import electron, { remote, ipcRenderer } from "electron";
  5 | import path from "path";
  6 | import fs from "fs-extra";
  7 | import { Progress } from "got";
  8 | import yauzl from "yauzl";
  9 | import msg from "../constants/ipcmessages";
 10 | import store from "../configureStore";
 11 | import { setCampaign } from "../store/campaign/actions";
 12 | 
 13 | const app: Electron.App = remote.require("electron").app;
 14 | interface ISource {
 15 | 	url?: string;
 16 | 	name: string;
 17 | 	format?: string;
 18 | 	files?: Array<ISC2Component>;
 19 | 	progress?: number;
 20 | 	campaignId?: string;
 21 | }
 22 | 
 23 | interface IDownload {
 24 | 	sources: ISource[];
 25 | 	progress: number;
 26 | }
 27 | interface IDownloadSet {
 28 | 	[key: string]: IDownload;
 29 | }
 30 | 
 31 | const getCampaignFromStore = (campaignId:string) => {
 32 | 	const campaigns = store.getState().campaignState.campaigns;
 33 | 	const campaignIndex = campaigns.findIndex(c => c.id === campaignId);
 34 | 	return campaigns[campaignIndex]
 35 | 		
 36 | }
 37 | 
 38 | const setCampaignInStore = (campaignId:string,campaign:ICampaign) => {
 39 | 	const campaigns = store.getState().campaignState.campaigns;
 40 | 	const campaignIndex = campaigns.findIndex(c => c.id === campaignId);
 41 | 	store.dispatch(setCampaign(campaign,campaignIndex));
 42 | }
 43 | 
 44 | export default class Downloader {
 45 | 	static downloads: IDownloadSet;
 46 | 	static progress: number = 0;
 47 | 
 48 | 	static pushCampaign(campaign: ICampaign) {
 49 | 
 50 | 		console.log("pushCampaign");
 51 | 
 52 | 		const mods: Array<ISC2Component> = [...campaign.mods, ...campaign.maps];
 53 | 		const sources = _.uniqWith<ISource>(
 54 | 			mods.map(
 55 | 				({ source: url, sourceFormat: format }): ISource => ({
 56 | 					url,
 57 | 					name: path.basename(url),
 58 | 					format,
 59 | 					files: mods.filter(mod => mod.source === url),
 60 | 					progress: 0,
 61 | 					campaignId: campaign.id
 62 | 				})
 63 | 			),
 64 | 			_.isEqual
 65 | 		);
 66 | 
 67 | 		console.log("Downloader.pushCampaign urls", sources);
 68 | 		this.downloads = {
 69 | 			...this.downloads,
 70 | 			[campaign.id]: { sources, progress: 0 }
 71 | 		};
 72 | 		console.log("Downloader downloads", this.downloads);
 73 | 		const promises = sources.map((source, index) =>
 74 | 			this.downloadSource(source, index)
 75 | 		);
 76 | 		Promise.all(promises).then(data => {
 77 | 			console.log("downloads have finished for", campaign.id);
 78 | 			const newCampaign:ICampaign = {
 79 | 				...getCampaignFromStore(campaign.id),
 80 | 				installed:Campaign.isCampaignInstalled(getCampaignFromStore(campaign.id)),
 81 | 				progress:0,
 82 | 				state:"ready"
 83 | 			};
 84 | 			setCampaignInStore(newCampaign.id,newCampaign)
 85 | 		});
 86 | 		
 87 | 		const newCampaign:ICampaign = {
 88 | 			...getCampaignFromStore(campaign.id),
 89 | 			state:"downloading"
 90 | 		};
 91 | 		setCampaignInStore(newCampaign.id,newCampaign)
 92 | 		
 93 | 	}
 94 | 	static async downloadSource(source: ISource, index: number) {
 95 | 		let timer = Date.now();
 96 | 		const tempPath = path.join(
 97 | 			app.getPath("temp"),
 98 | 			app.getName(),
 99 | 			source.campaignId
100 | 		);
101 | 		let tempName = source.name;
102 | 		let tempFullName = path.join(tempPath, tempName);
103 | 		fs.ensureDirSync(tempPath);
104 | 
105 | 		const dl = download(source.url)
106 | 			.on("response", response => {
107 | 				console.log(response);
108 | 				tempName = path.basename(response.url);
109 | 				tempFullName = path.join(tempPath, tempName);
110 | 				const ws = fs.createWriteStream(tempFullName);
111 | 				ws.once("close", () => {
112 | 					console.log("close streamm");
113 | 					if (source.format === "zip") {
114 | 						this.extractContents(source, tempFullName);
115 | 					} else {
116 | 						this.copyMaps(source.files[0], tempFullName);
117 | 					}
118 | 					const newCampaign:ICampaign = {
119 | 						...getCampaignFromStore(source.campaignId),
120 | 						installed:Campaign.isCampaignInstalled(getCampaignFromStore(source.campaignId)),
121 | 						state:"ready"
122 | 					};
123 | 					setCampaignInStore(newCampaign.id,newCampaign)
124 | 				});
125 | 				dl.pipe(ws);
126 | 			})
127 | 			.on("downloadProgress", (progress: Progress) => {
128 | 				if (Date.now() - timer > 1000 || progress.percent >= 1) {
129 | 					this.onDownloadProgress(source, index, progress);
130 | 					timer = Date.now();
131 | 				}
132 | 			});
133 | 		return dl;
134 | 	}
135 | 	static copyMaps(mod: ISC2Component, originPath: string) {
136 | 		const destBaseDir = Campaign.getCampaignsInstallDir();
137 | 		const destBasename = mod.destination;
138 | 		const destPath = path.join(destBaseDir, destBasename);
139 | 		console.log("nozip: ", destPath);
140 | 		fs.ensureDirSync(path.dirname(destPath));
141 | 		fs.copyFileSync(originPath, destPath);
142 | 	}
143 | 	static extractContents(source: ISource, zipPath: string) {
144 | 		console.log("extractContents zipPath", zipPath);
145 | 		console.log("extractContents yazul", yauzl);
146 | 		const installPath = Campaign.getCampaignsInstallDir();
147 | 		ipcRenderer.send(msg.UNZIP_CAMPAIGN, {
148 | 			source,
149 | 			zipPath,
150 | 			installPath
151 | 		});
152 | 		//YAUZL doesnt seem to work within the renderer part of electron, hmph!
153 | 		/*
154 | 		yauzl.open(zipPath, { lazyEntries: true }, (err, zipfile) => {
155 | 			if (err) {
156 | 				throw err;
157 | 			}
158 | 			zipfile.readEntry();
159 | 			zipfile.on("entry", (entry: yauzl.Entry) => {
160 | 				console.log(entry.fileName);
161 | 				if (/\/$/.test(entry.fileName)) {
162 | 					zipfile.readEntry();
163 | 				} else {
164 | 					const mod = source.files.find(
165 | 						mod => entry.fileName === mod.fileEntry
166 | 					);
167 | 					if (mod) {
168 | 						const entryBasePath = Campaign.getCampaignsInstallDir();
169 | 						const entryBaseName = mod.destination;
170 | 						const entryFullPath = path.join(
171 | 							entryBasePath,
172 | 							entryBaseName
173 | 						);
174 | 						console.log("entryFullPath", entryFullPath);
175 | 						fs.ensureDirSync(path.dirname(entryFullPath));
176 | 						const ds = fs.createWriteStream(entryFullPath);
177 | 						zipfile.openReadStream(entry, function(
178 | 							err,
179 | 							readStream
180 | 						) {
181 | 							if (err) throw err;
182 | 							readStream.on("end", function() {
183 | 								zipfile.readEntry();
184 | 							});
185 | 							readStream.pipe(ds);
186 | 						});
187 | 					} else {
188 | 						zipfile.readEntry();
189 | 					}
190 | 				}
191 | 			});
192 | 			zipfile.once("end", function() {
193 | 				zipfile.close();
194 | 			});
195 | 		});
196 | 		*/
197 | 	}
198 | 	static onDownloadProgress(
199 | 		source: ISource,
200 | 		index: number,
201 | 		progress: Progress
202 | 	) {
203 | 		const newSource = {
204 | 			...source,
205 | 			progress: progress.percent
206 | 		};
207 | 		const { campaignId } = source;
208 | 		const downloads = this.downloads;
209 | 		const sources = Object.assign([...downloads[campaignId].sources], {
210 | 			[index]: newSource
211 | 		});
212 | 
213 | 		const download: IDownload = {
214 | 			...downloads[campaignId],
215 | 			sources,
216 | 			progress:
217 | 				sources
218 | 					.map(src => src.progress)
219 | 					.reduce(
220 | 						(total, progress, index, array) => total + progress,
221 | 						0.0
222 | 					) / sources.length
223 | 		};
224 | 		this.downloads = {
225 | 			...this.downloads,
226 | 			[campaignId]: download
227 | 		};
228 | 		console.log(campaignId, download.progress);
229 | 		const newCampaign:ICampaign = {
230 | 			...getCampaignFromStore(campaignId),
231 | 			progress:download.progress
232 | 		};
233 | 		setCampaignInStore(campaignId,newCampaign)
234 | 	}
235 | }
236 |

--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | const {app, BrowserWindow} = require('electron');
  2 | const execFile = require('child_process').execFile;
  3 | const { ipcMain } = require('electron');
  4 | const { session } = require('electron');
  5 | const path = require('path');
  6 | const fs = require('fs-extra');
  7 | const download = require('download');
  8 | //const os   = require('os');
  9 | const yauzl = require('yauzl');
 10 | //const download = require('./electron/Download');
 11 | //const {download} = require('electron-dl');
 12 | 
 13 | 
 14 | const msg = require('./src/constants/ipcmessages');
 15 | 
 16 | let mainWindow;
 17 | 
 18 | 
 19 | 
 20 | //DownloadManager.register();
 21 | 
 22 | 
 23 | /*require('electron-reload')(__dirname, {
 24 | 	// Note that the path to electron may vary according to the main file
 25 | 	electron: require(`${__dirname}/node_modules/electron`)
 26 | });
 27 | */
 28 | 
 29 | const loadDevTools = () =>{
 30 | 	console.log("NODE_ENV",process.env)
 31 | 	if(process.env.NODE_ENV === 'dev'){
 32 | 		const { default: installExtension, REACT_DEVELOPER_TOOLS,REDUX_DEVTOOLS } = require('electron-devtools-installer');
 33 | 	installExtension(REACT_DEVELOPER_TOOLS)
 34 | 		.then((name) => console.log(`Added Extension:  ${name}`))
 35 | 		.catch((err) => console.log('An error occurred: ', err));
 36 | 	installExtension(REDUX_DEVTOOLS)
 37 | 		.then((name) => console.log(`Added Extension:  ${name}`))
 38 | 		.catch((err) => console.log('An error occurred: ', err));
 39 | 	}
 40 | }
 41 | 
 42 | function createWindow () {
 43 | 	mainWindow = new BrowserWindow({
 44 | 		width: 900,
 45 | 		height: 720,
 46 | 		//frame: false,
 47 | 		titleBarStyle:"hidden",
 48 | 		webPreferences: {
 49 | 			nodeIntegration: true
 50 | 		}
 51 | 	});
 52 | 	loadDevTools();
 53 | 	
 54 | 	mainWindow.loadFile('index.html');
 55 | 	/*mainWindow.webContents.openDevTools({
 56 | 		mode:"detach" 
 57 | 	});*/
 58 | 	mainWindow.on('closed', () => {
 59 | 		mainWindow = null;
 60 | 	})
 61 | 	
 62 | 	
 63 | }
 64 | 
 65 | function initSessionData(){
 66 | 	
 67 | 	//mainWindow.webContents.downloadURL("https://github.com/danielthepirate/StarCraftPlus/blob/master/Build/StarCraftPlus.SC2Mod?raw=true");
 68 | }
 69 | 
 70 | function onReady(){
 71 | 	
 72 | 	createWindow();
 73 | 	initSessionData();
 74 | }
 75 | 
 76 | app.on('ready', onReady)
 77 | 
 78 | app.on('window-all-closed', () => {
 79 | 	if (process.platform !== 'darwin') {
 80 | 		app.quit();
 81 | 	}
 82 | })
 83 | 
 84 | app.on('activate', () => {
 85 | 	if (mainWindow === null) {
 86 | 		createWindow();
 87 | 	}
 88 | });
 89 | 
 90 | ipcMain.on(msg.DOWNLOAD_MAP, async (event, arg) => {
 91 | 	let test;
 92 | 	//console.log(arg)
 93 | 	const {source, file,installDir} = arg;
 94 | 	const fileName = file.replace(/^.*[\\\/]/, '')
 95 | 	const filePath = installDir+file.replace(fileName,"")
 96 | 	const fullFilePath = path.join(filePath, fileName);
 97 | 	console.log({fileName, filePath});
 98 | 	const win = BrowserWindow.getFocusedWindow();
 99 | 	
100 | 	const data = await download(source).on('downloadProgress', progress => {
101 | 		// Report download progress
102 | 		console.log(`${fileName}: ${progress.percent}`);
103 | 		event.sender.send(msg.DOWNLOAD_MAP_STATUS, {fileName, progress: progress.percent})
104 | 	})
105 | 	fs.writeFileSync(fullFilePath, data);
106 | 	//.then(data => {
107 | 	//});
108 | 	
109 | 	
110 | })
111 | 
112 | ipcMain.on(msg.UNZIP_CAMPAIGN,async (event, {source, zipPath, installPath}) =>{
113 | 	yauzl.open(zipPath, { lazyEntries: true }, (err, zipfile) => {
114 | 		if (err) {
115 | 			throw err;
116 | 		}
117 | 		zipfile.readEntry();
118 | 		zipfile.on("entry", (entry) => {
119 | 			console.log(entry.fileName);
120 | 			if (/\/$/.test(entry.fileName)) {
121 | 				zipfile.readEntry();
122 | 			} else {
123 | 				const mod = source.files.find(
124 | 					mod => entry.fileName === mod.fileEntry
125 | 				);
126 | 				if (mod) {
127 | 					const entryBasePath = installPath;
128 | 					const entryBaseName = mod.destination;
129 | 					const entryFullPath = path.join(
130 | 						entryBasePath,
131 | 						entryBaseName
132 | 					);
133 | 					console.log("entryFullPath", entryFullPath);
134 | 					fs.ensureDirSync(path.dirname(entryFullPath));
135 | 					const ds = fs.createWriteStream(entryFullPath);
136 | 					zipfile.openReadStream(entry, function(
137 | 						err,
138 | 						readStream
139 | 					) {
140 | 						if (err) throw err;
141 | 						readStream.on("end", function() {
142 | 							zipfile.readEntry();
143 | 						});
144 | 						readStream.pipe(ds);
145 | 					});
146 | 				} else {
147 | 					zipfile.readEntry();
148 | 				}
149 | 			}
150 | 		});
151 | 		zipfile.once("end", function() {
152 | 			zipfile.close();
153 | 		});
154 | 	});
155 | });
156 | 
157 | ipcMain.on(msg.DOWNLOAD_CAMPAIGN, async (event, campaign) => {
158 | 	let timer = Date.now();
159 | 	const {maps, mods,installDir} = campaign;
160 | 	const downloadtracker = {downloads:[], totalProgress:0}
161 | 	const mapsmods = [...mods, ...maps];
162 | 	console.log("maps and mods:",mapsmods)
163 | 	const sources = {};
164 | 	try {
165 | 		mapsmods.map(mod => {
166 | 			const {sourceFormat} = mod;
167 | 			if (!sources[mod.source]){
168 | 				sources[mod.source] = {
169 | 					format: sourceFormat,
170 | 					files:[]
171 | 				}
172 | 				downloadtracker.downloads.push({ source: mod.source, progress:0})
173 | 			}
174 | 			if(sources[mod.source].format === "zip") {
175 | 				sources[mod.source].files.push(mod);
176 | 			}
177 | 			else{ 
178 | 				sources[mod.source].files = mod;
179 | 			}
180 | 		});
181 | 	} catch (error) {
182 | 		console.log("Error!:",error);
183 | 	}
184 | 	
185 | 	const myPromises = [];
186 | 	console.log("sources: ",sources)
187 | 	for(let source in sources){
188 | 		console.log("current source:", source);
189 | 		const promise = download(source).on('downloadProgress', progress => {
190 | 			const dlitem = downloadtracker.downloads.find(dl => source === dl.source)
191 | 			dlitem.progress = progress.percent;
192 | 			downloadtracker.totalProgress = downloadtracker.downloads.reduce((total, {progress}) => total + progress,0.0) / downloadtracker.downloads.length;
193 | 			if((Date.now() - timer) > 1000 || progress.percent >= 1){
194 | 				//console.log("DOWNLOADTRACKER",downloadtracker);
195 | 				mainWindow.setProgressBar(downloadtracker.totalProgress);
196 | 				event.sender.send(msg.DOWNLOAD_CAMPAIGN_STATUS, {campaignId: campaign.id, progress: downloadtracker.totalProgress})
197 | 				timer = Date.now();
198 | 			}
199 | 		}).then(data =>{
200 | 			console.log("finished:", source)
201 | 			if(sources[source].format==="zip"){
202 | 				const zipBaseDir = installDir;
203 | 				const zipBaseName = path.basename(source)
204 | 				console.log("zipBaseDir:", zipBaseDir)
205 | 				console.log("zipBaseName:", zipBaseName)
206 | 				const zipPath = path.join(zipBaseDir, zipBaseName);
207 | 				console.log("zip:", zipPath);
208 | 				fs.writeFileSync(zipPath, data);
209 | 				yauzl.open(zipPath, {lazyEntries: true}, function(err, zipfile) {
210 | 					if (err){ throw err;}
211 | 					zipfile.readEntry();
212 | 					zipfile.on("entry", function(entry) {
213 | 						console.log(entry.fileName);
214 | 						if (/\/$/.test(entry.fileName)){
215 | 							zipfile.readEntry();
216 | 						}
217 | 						else {
218 | 							const entryData = sources[source].files.find(e => entry.fileName === e.fileEntry)
219 | 							if(entryData){
220 | 								const entryBasePath = installDir;	
221 | 								const entryBaseName = entryData.destination;
222 | 								const entryFullPath = path.join(entryBasePath,entryBaseName);
223 | 								console.log("entryFullPath",entryFullPath)
224 | 								fs.ensureDirSync(path.dirname(entryFullPath));
225 | 								const destStream = fs.createWriteStream(entryFullPath);
226 | 								zipfile.openReadStream(entry, function(err, readStream) {
227 | 									if (err) throw err;
228 | 									readStream.on("end", function() {
229 | 										zipfile.readEntry();
230 | 									});
231 | 									readStream.pipe(destStream);
232 | 								});
233 | 							}
234 | 							else{
235 | 								zipfile.readEntry();
236 | 							}
237 | 						}
238 | 						
239 | 					});
240 | 					zipfile.once("end", function() {
241 | 						zipfile.close();
242 | 					});
243 | 				});
244 | 				
245 | 			}
246 | 			else {
247 | 				const destBaseDir = installDir;
248 | 				const destBasename = sources[source].files.destination;
249 | 				console.log("destBaseDir:", destBaseDir)
250 | 				console.log("destBasename:", destBasename)
251 | 				const destPath = path.join(destBaseDir, destBasename);
252 | 				console.log("nozip: ", destPath);
253 | 				fs.ensureDirSync(path.dirname(destPath));
254 | 				fs.writeFileSync(destPath, data);
255 | 			}
256 | 		}).catch((reason) =>{
257 | 			console.log("Rejected promise:", reason)
258 | 		})
259 | 		console.log("promise: ", promise)
260 | 		myPromises.push(promise);
261 | 	}
262 | 	console.log("end loop!")
263 | 	Promise.all(myPromises).then(() => {
264 | 		console.log("All downloads finished?");
265 | 		event.sender.send(msg.DOWNLOAD_CAMPAIGN_FINISH, {campaignId: campaign.id, progress: downloadtracker.totalProgress})
266 | 	});
267 | })
268 | 
269 | ipcMain.on(msg.PLAY_CAMPAIGN, async (event, campaign) => {
270 | 	const {command, params} = campaign;
271 | 	console.log(command, params)
272 | 	execFile(campaign.command,params,function(error, stdout, stderr) {
273 | 		console.log(error)
274 | 		console.log(stdout);
275 | 	});
276 | });
277 | 
278 | 
279 | ipcMain.on(msg.PLAY_MAP, async (event, map) => {
280 | 	const {command, params} = campaign;
281 | 	console.log(command, params)
282 | 	execFile(campaign.command,params,function(error, stdout, stderr) {
283 | 		console.log(error)
284 | 		console.log(stdout);
285 | 	});
286 | });

--------------------------------------------------------------------------------
/src/components/CampaignDetails.tsx:
--------------------------------------------------------------------------------
  1 | import React, { FC } from 'react';
  2 | import { HashRouter as Router, Route, NavLink, Redirect, Switch } from "react-router-dom";
  3 | import ReactMarkdown from 'react-markdown'
  4 | 
  5 | import Campaign, { ICampaign, IAuthor, IPatchNote } from '../classes/Campaign'
  6 | //import Lightbox as Lightbox2 from 'react-lightbox-component';
  7 | import DownloadBar from './DownloadBar'
  8 | import Lightbox from 'react-images'
  9 | import { MapStateToProps, MapDispatchToProps, connect } from 'react-redux';
 10 | import { AppState } from '../store';
 11 | 
 12 | 
 13 | const emptyAuthor: IAuthor = {
 14 | 	"id": "",
 15 | 	"name": "",
 16 | 	"email": "",
 17 | 	"campaigns": []
 18 | };
 19 | 
 20 | function PatchNotes(props: any) {
 21 | 	const patchNotes: Array<IPatchNote> = props.patchNotes;
 22 | 	console.log("PatchNotes", patchNotes)
 23 | 	return (
 24 | 		<React.Fragment>
 25 | 			{patchNotes.map((patchNote, i: number) =>
 26 | 				<section key={i}>
 27 | 					<h3>{patchNote.version} (<time>{(new Date(patchNote.date)).toDateString()}</time>)</h3>
 28 | 					<ReactMarkdown source={patchNote.notes} />
 29 | 				</section>
 30 | 			)}
 31 | 		</React.Fragment>
 32 | 	);
 33 | }
 34 | 
 35 | interface ICampaignDetailsProps {
 36 | 	selectedId:string,
 37 | 	campaign?: ICampaign,
 38 | 	path?: string,
 39 | 	selectedCampaignAuthor?: IAuthor,
 40 | 	onPlayCampaignClick: (campaign: ICampaign, mapIndex?: number) => void,
 41 | 	onUpdateCampaignClick?: (campaign: ICampaign) => void,
 42 | 	onDownloadCampaignClick: (campaign: ICampaign) => void
 43 | }
 44 | 
 45 | const CampaignDetails: FC<ICampaignDetailsProps> = (props) => {
 46 | 	const {
 47 | 		selectedCampaignAuthor,
 48 | 		onPlayCampaignClick,
 49 | 		onUpdateCampaignClick,
 50 | 		onDownloadCampaignClick,
 51 | 		path
 52 | 	} = props
 53 | 	const campaign = (props.campaign) ? props.campaign : Campaign.emptyCampaign();
 54 | 	const {
 55 | 		id,
 56 | 		name,
 57 | 		author,
 58 | 		description,
 59 | 		maps,
 60 | 		lastUpdated,
 61 | 		patchNotes,
 62 | 		screenshots,
 63 | 		videos,
 64 | 		installed,
 65 | 		progress,
 66 | 		state
 67 | 	} = campaign;
 68 | 	const basePath = path ? path : "/campaign"
 69 | 
 70 | 	//const author:IAuthor = (selectedCampaignAuthor)?selectedCampaignAuthor:emptyAuthor;
 71 | 	const isCampaignInstalled: boolean = installed;//!Campaign.isCampaignInstalled(campaign);
 72 | 
 73 | 	const onDownloadClick = onDownloadCampaignClick;
 74 | 	const downloadProgress: number = (progress) ? progress : 0;
 75 | 	return (
 76 | 		<Router basename={basePath}>
 77 | 
 78 | 			<section className="campaign-content">
 79 | 				<Route exact path="/" render={() => (
 80 | 					<Redirect to="/description" />
 81 | 				)} />
 82 | 				<header className="campaign-content-header mb-2">
 83 | 					<div className="campaign-content-controls float-right" role="group">
 84 | 						{(isCampaignInstalled) && (maps.length > 0) &&
 85 | 							<React.Fragment>
 86 | 								<button
 87 | 									onClick={() => onPlayCampaignClick(campaign)}
 88 | 									className="btn btn-primary"
 89 | 								>
 90 | 									Play
 91 | 								</button>
 92 | 								{/* <button onClick={() => onUpdateCampaignClick(campaign)} className="btn btn-outline-primary">Update</button> */}
 93 | 							</React.Fragment>
 94 | 						}
 95 | 						{(!isCampaignInstalled) && (maps.length > 0) && (state!=="downloading") &&
 96 | 							<button
 97 | 								onClick={(e) => onDownloadClick(campaign)}
 98 | 								className="btn btn-primary"
 99 | 							>
100 | 								Download
101 | 							</button>
102 | 						}
103 | 						{(!isCampaignInstalled) && (maps.length > 0) && (state==="downloading") &&
104 | 							<button
105 | 								onClick={() => {}}
106 | 								className="btn btn-primary disabled"
107 | 								disabled
108 | 							>
109 | 								Downloading
110 | 							</button>
111 | 						}
112 | 						{(maps.length === 0) &&
113 | 							<>
114 | 								<button
115 | 									disabled
116 | 									className="btn btn-primary disabled float-right"
117 | 								>
118 | 									Download
119 | 						</button>
120 | 								<p><small className="text-warning">This campaign has no maps listed.</small></p>
121 | 							</>
122 | 						}
123 | 
124 | 					</div>
125 | 					<h1 className="campaign-content-title">{name}</h1>
126 | 					<p className="campaign-content-subtitle">
127 | 						By <a href={"mailto:" + author}>{author}</a>. Last Updated: <time>{lastUpdated}</time>
128 | 					</p>
129 | 					<p className="campaign-content-subtitle">
130 | 						Project URL: 
131 | 					<a target="_blank" href={`https://www.sc2mapster.com/projects/${id}`}>
132 | 							https://www.sc2mapster.com/projects/{id}
133 | 						</a>
134 | 					</p>
135 | 					{/*
136 | 					<p className="campaign-content-subtitle">
137 | 					Tagged under 
138 | 					{(isCampaignInstalled) &&
139 | 						<span> <i className="campaign-filter-installed"></i>Installed</span>
140 | 					}
141 | 					{(!isCampaignInstalled) &&
142 | 						<span> <i className="campaign-filter-updated"></i>Updated</span>
143 | 					}
144 | 				</p>
145 | 				*/}
146 | 					{(!isCampaignInstalled) &&
147 | 						<DownloadBar progress={downloadProgress} />
148 | 					}
149 | 
150 | 
151 | 				</header>
152 | 
153 | 				<div className="campaign-content-body">
154 | 					<div className="btn-group" role="group" aria-label="...">
155 | 						<NavLink to="/description" className="btn btn-outline-primary" activeClassName="btn-primary active">
156 | 							Description
157 | 					</NavLink>
158 | 						<NavLink to={`/screenshots`} className="btn btn-outline-primary" activeClassName="btn-primary active">
159 | 							Screenshots
160 | 					</NavLink>
161 | 						<NavLink to={`/patchNotes`} className="btn btn-outline-primary" activeClassName="btn-primary active">
162 | 							Patch Notes
163 | 					</NavLink>
164 | 						<NavLink to={`/maps`} className="btn btn-outline-primary" activeClassName="btn-primary active">
165 | 							Maps
166 | 					</NavLink>
167 | 					</div>
168 | 					<ul>
169 | 						<li>Maps: {maps.length}</li>
170 | 					</ul>
171 | 
172 | 					<article>
173 | 						<Switch>
174 | 							<Route path="/description" render={() =>
175 | 								<section>
176 | 									{(videos) &&
177 | 										<iframe
178 | 											width="638"
179 | 											height="358"
180 | 											src={`https://www.youtube.com/embed/${videos[0]}`}
181 | 											frameBorder="0"
182 | 											allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
183 | 											allowFullScreen
184 | 										></iframe>
185 | 
186 | 									}
187 | 									<ReactMarkdown
188 | 
189 | 										source={description}
190 | 										className={"campaign-description"}
191 | 										skipHtml={true}
192 | 										linkTarget={() => "_blank"}
193 | 									/>
194 | 								</section>
195 | 							} />
196 | 							<Route path={`/screenshots`} render={() =>
197 | 								<section>
198 | 									{
199 | 										screenshots.map(({ src, description }) => {
200 | 											return (
201 | 												<figure className="figure" key={src}>
202 | 													<img className="figure-img img-fluid rounded mw-100" src={src} />
203 | 													<figcaption className="figure-caption">{description ? description : "Caption"}</figcaption>
204 | 												</figure>
205 | 											);
206 | 										})
207 | 									}
208 | 								</section>
209 | 							} />
210 | 
211 | 							<Route path={`/patchNotes`} render={() =>
212 | 								<PatchNotes patchNotes={patchNotes} />
213 | 							} />
214 | 							<Route path={`/maps`} render={() =>
215 | 								<dl>
216 | 									{maps.map(({ name, description, destination }, index) =>
217 | 										<React.Fragment key={destination}>
218 | 											<div className="media border rounded border-light p-1 mb-2">
219 | 												<div className="media-body">
220 | 													<h4>{name}</h4>
221 | 													{description &&
222 | 														<>
223 | 															<p><strong>Description:</strong></p>
224 | 															<ReactMarkdown
225 | 																source={description}
226 | 																className={"campaign-description"}
227 | 																skipHtml={true}
228 | 																linkTarget={() => "_blank"}
229 | 															/>
230 | 														</>
231 | 													}
232 | 												</div>
233 | 												<div className="media-right align-self-center">
234 | 													<button
235 | 														onClick={() => onPlayCampaignClick(campaign, index)}
236 | 														className={"btn btn-info " + (isCampaignInstalled ? "" : "disabled")}
237 | 														disabled={!isCampaignInstalled}
238 | 													>
239 | 														Launch
240 | 									</button>
241 | 												</div>
242 | 											</div>
243 | 										</React.Fragment>
244 | 									)}
245 | 								</dl>
246 | 							} />
247 | 						</Switch>
248 | 					</article>
249 | 				</div>
250 | 			</section>
251 | 		</Router>
252 | 
253 | 	);
254 | }
255 | 
256 | 
257 | 
258 | 
259 | const mapStateToProps: MapStateToProps<ICampaignDetailsProps, ICampaignDetailsProps, AppState> = (state, ownProps) => {
260 | 	const { campaignState } = state;
261 | 	const { selectedIndex, campaigns, campaignsById } = campaignState;
262 | 	const {selectedId} = ownProps;
263 | 	const props = {
264 | 		"campaign": campaignsById[selectedId],
265 | 		"index": selectedIndex
266 | 	}
267 | 	return { ...ownProps, ...props };
268 | };
269 | 
270 | const mapDispatchToProps: MapDispatchToProps<ICampaignDetailsProps, ICampaignDetailsProps> = (dispatch, ownProps) => {
271 | 	return {
272 | 		...ownProps,
273 | 		/*setCampaign: (campaign, index) => {
274 | 			return dispatch(setCampaignLocal(campaign,index));
275 | 		}*/
276 | 	};
277 | };
278 | 
279 | export default connect(
280 | 	mapStateToProps,
281 | 	mapDispatchToProps,
282 | )(CampaignDetails);

--------------------------------------------------------------------------------
/src/components/ManifestEditor.tsx:
--------------------------------------------------------------------------------
  1 | import React, { ChangeEvent, FC } from 'react';
  2 | import Form from 'react-jsonschema-form';
  3 | import Campaign, { ICampaign, ISC2Map, ISC2Mod, IScreenshot } from '../classes/Campaign';
  4 | import { MapStateToProps, MapDispatchToProps, connect } from 'react-redux';
  5 | import { setCampaignLocal } from '../store/campaign/actions';
  6 | import ManifestEditorMapItem from './ManifestEditorMapItem';
  7 | import { AppState } from '../store';
  8 | import { HashRouter as Router, Route , NavLink, Redirect } from 'react-router-dom';
  9 | import CampaignDetails from './CampaignDetails';
 10 | import ManifestEditorScreenshot from './ManifestEditorScreenshotItem';
 11 | import ManifestEditorJson from './ManifestEditorJson';
 12 | import _ from 'lodash'
 13 | 
 14 | interface IManifestEditorProps{
 15 | 	"campaign"?:ICampaign,
 16 | 	"index"?:number,
 17 | 	"setCampaign"?:typeof setCampaignLocal
 18 | }
 19 | 
 20 | const ManifestEditor:FC<IManifestEditorProps> = (props) => {
 21 | 	const {campaign,index, setCampaign} = props;
 22 | 	const {maps,mods,screenshots} = campaign;
 23 | 	const saveCampaign = () => Campaign.writeToDisk(campaign);
 24 | 	const onChange = (e:ChangeEvent<HTMLInputElement>|ChangeEvent<HTMLTextAreaElement>|ChangeEvent<HTMLSelectElement>)=>{
 25 | 		console.log(e);
 26 | 		const newCampaign = {
 27 | 			...campaign,
 28 | 			[e.currentTarget.name]:e.currentTarget.value
 29 | 		}
 30 | 		//const property:string = e.currentTarget.name;
 31 | 		//newCampaign[property] = e.currentTarget.value;
 32 | 		console.log(newCampaign)
 33 | 		setCampaign(newCampaign, index);
 34 | 	};
 35 | 	const addMap = ()=>{
 36 | 		const newCampaign:ICampaign = {
 37 | 			...campaign,
 38 | 			maps:[...campaign.maps, Campaign.emptyMap()]
 39 | 		}
 40 | 		setCampaign(newCampaign,index);
 41 | 	}
 42 | 	
 43 | 	const addMod = ()=>{
 44 | 		const newCampaign:ICampaign = {
 45 | 			...campaign,
 46 | 			mods:[...campaign.mods, Campaign.emptyMap()]
 47 | 		}
 48 | 		setCampaign(newCampaign,index);
 49 | 	}
 50 | 	const addScreenshot = ()=>{
 51 | 		const newCampaign:ICampaign = {
 52 | 			...campaign,
 53 | 			screenshots:[...campaign.screenshots, {src:"",description:""}]
 54 | 		}
 55 | 		setCampaign(newCampaign,index);
 56 | 	}
 57 | 	const loadFromZip = () =>{
 58 | 
 59 | 	}
 60 | 	const setCampaignMap = (map:ISC2Map,mapIndex:number)=>{
 61 | 		const maps = [...campaign.maps];
 62 | 		//const index = maps.findIndex(v => v.destination === map.destination);
 63 | 		console.log("setCampaignMap", campaign);
 64 | 		console.log("setCampaignMap", maps);
 65 | 		maps[mapIndex] = map;
 66 | 		const newCampaign:ICampaign = {
 67 | 			...campaign,
 68 | 			maps
 69 | 		};
 70 | 		setCampaign(newCampaign,index);
 71 | 	}
 72 | 	const removeMap = (maps:ISC2Map[],mapIndex:number) =>{
 73 | 		setCampaign({
 74 | 			...campaign,
 75 | 			maps:_.xor(maps, [maps[mapIndex]])
 76 | 		},index);
 77 | 	};
 78 | 	
 79 | 	
 80 | 	const setCampaignMod = (mod:ISC2Mod,modIndex:number)=>{
 81 | 		const mods = [...campaign.mods];
 82 | 		//const index = maps.findIndex(v => v.destination === map.destination);
 83 | 		console.log("setCampaignMap", campaign);
 84 | 		console.log("setCampaignMap", mods);
 85 | 		mods[modIndex] = mod;
 86 | 		const newCampaign:ICampaign = {
 87 | 			...campaign,
 88 | 			mods
 89 | 		};
 90 | 		setCampaign(newCampaign,index);
 91 | 	}
 92 | 	const setCampaignScreenshot = (screenshot:IScreenshot,screenindex:number)=>{
 93 | 		const screenshots = [...campaign.screenshots];
 94 | 		screenshots[screenindex] = screenshot;
 95 | 		const newCampaign:ICampaign = {
 96 | 			...campaign,
 97 | 			screenshots
 98 | 		};
 99 | 		setCampaign(newCampaign,index);
100 | 	}
101 | 	console.log("ManifestEditor props", props)
102 | 	return (
103 | 		<Router basename="/mapmakers">
104 | 		<form className="mr-3">
105 | 			<Route exact path="/" render={() => (
106 | 					<Redirect to="/editor"/>
107 | 			)}/>
108 | 			<div className="manifesteditor-views" role="group" aria-label="">
109 | 				<NavLink to="/editor" className="manifesteditor-viewoption btn btn-outline-primary" activeClassName="btn-primary active">
110 | 					Editor
111 | 				</NavLink>
112 | 				<NavLink to="/json" className="manifesteditor-viewoption btn btn-outline-primary" activeClassName="btn-primary active">
113 | 					JSON
114 | 				</NavLink>
115 | 				<NavLink to="/preview" className="manifesteditor-viewoption btn btn-outline-primary" activeClassName="btn-primary active">
116 | 					Preview
117 | 				</NavLink>
118 | 			</div>
119 | 			<h1>Manifest Editor</h1>
120 | 			<div className="btn-group mb-2" role="group" aria-label="">
121 | 				<button 
122 | 					type="button"
123 | 					className="btn btn-primary"
124 | 					onClick={saveCampaign}
125 | 				>
126 | 					Save Campaign to Disk
127 | 				</button>
128 | 				
129 | 			</div>
130 | 			<Route exact path="/editor" render={() => (
131 | 				<Redirect to="/editor/description"/>
132 | 			)}/>
133 | 			<Route path={"/editor"} render={()=>
134 | 				<fieldset className="form-group">
135 | 					<ul className="nav nav-tabs mb-2">
136 | 						<li className="nav-item">
137 | 							<NavLink to="/editor/description" className="nav-link" activeClassName="active">
138 | 								Description
139 | 							</NavLink>
140 | 						</li>
141 | 						<li className="nav-item">
142 | 							<NavLink to="/editor/screenshots" className="nav-link" activeClassName="active">
143 | 								Screenshots
144 | 							</NavLink>
145 | 						</li>
146 | 						<li className="nav-item">
147 | 							<NavLink to="/editor/patchnotes" className="nav-link" activeClassName="active">
148 | 								PatchNotes
149 | 							</NavLink>
150 | 						</li>
151 | 						<li className="nav-item">
152 | 							<NavLink to="/editor/maps" className="nav-link" activeClassName="active">
153 | 								Maps and Mods
154 | 							</NavLink>
155 | 						</li>
156 | 					</ul>
157 | 					<div className="form-group row">
158 | 						
159 | 						<label htmlFor="campaign-id" className="col-sm-2 col-form-label">ID</label>
160 | 						<input 
161 | 							id="campaign-id"
162 | 							value={campaign.id}
163 | 							onChange={onChange}
164 | 							type="text" 
165 | 							className="form-control col-sm-10"
166 | 							name="id" 
167 | 							aria-describedby="runParamsHelp" 
168 | 							placeholder="Enter an ID for the campaign" 
169 | 							readOnly={true}
170 | 						/>
171 | 					</div>
172 | 					<Route path="/editor/description" render={()=>
173 | 					<>
174 | 						<div className="form-group row">
175 | 							<label className="col-sm-2 col-form-label" htmlFor="campaign-name">Name</label>
176 | 							<input 
177 | 								id="campaign-name"
178 | 								value={campaign.name}
179 | 								onChange={onChange}
180 | 								type="text" 
181 | 								className="form-control col-sm-10"
182 | 								name="name" 
183 | 								aria-describedby="runParamsHelp" 
184 | 								placeholder="Enter a name for the campaign" 
185 | 								/>
186 | 						</div>
187 | 						<div className="form-group row">
188 | 							<label className="col-sm-2 col-form-label" htmlFor="campaign-description">Description</label>
189 | 							<textarea 
190 | 								id="campaign-description"
191 | 								value={campaign.description}
192 | 								onChange={onChange}
193 | 								className="form-control col-sm-10"
194 | 								name="description" 
195 | 								aria-describedby="runParamsHelp" 
196 | 								placeholder="Enter a description for the campaign" 
197 | 								rows={10}
198 | 								/>
199 | 						</div>
200 | 						<div className="form-group row">
201 | 						<label className="col-sm-2 col-form-label" htmlFor="campaign-author">author</label>
202 | 						<input 
203 | 							id="campaign-author"
204 | 							value={campaign.author}
205 | 							onChange={onChange}
206 | 							type="text" 
207 | 							className="form-control col-sm-10"
208 | 							name="author" 
209 | 							aria-describedby="runParamsHelp" 
210 | 							placeholder="Enter a author for the campaign" 
211 | 							/>
212 | 						</div>
213 | 						<div className="form-group row">
214 | 						<label className="col-sm-2 col-form-label" htmlFor="campaign-lastUpdated">lastUpdated</label>
215 | 						<input 
216 | 							id="campaign-lastUpdated"
217 | 							value={new Date(campaign.lastUpdated).toISOString().slice(0,10)}
218 | 							onChange={onChange}
219 | 							type="date" 
220 | 							className="form-control col-sm-10"
221 | 							name="lastUpdated" 
222 | 							aria-describedby="runParamsHelp" 
223 | 							placeholder="Enter a author for the campaign" 
224 | 							/>
225 | 						</div>
226 | 					</>
227 | 					}/>
228 | 					<Route path="/editor/screenshots" render={()=>
229 | 					<>
230 | 						<h2>Screenshots</h2>
231 | 						{screenshots.map((screenshot,index)=>{
232 | 							return (
233 | 								
234 | 								<ManifestEditorScreenshot
235 | 								key={index} 
236 | 								index={index} 
237 | 								screenshot={screenshot} 
238 | 								setCampaignScreenshot={setCampaignScreenshot}
239 | 								/>);
240 | 							})}
241 | 						<button 
242 | 							type="button"
243 | 							className="btn btn-primary"
244 | 							onClick={addScreenshot}
245 | 						>
246 | 							Add Screenshot
247 | 						</button>
248 | 					</>
249 | 					} />
250 | 					<Route path="/editor/patchnotes" render={()=>
251 | 					<>
252 | 						<h2>Patch Notes</h2>
253 | 					</>
254 | 					} />
255 | 					<Route path="/editor/maps" render={()=>
256 | 					<>
257 | 						<h2>Maps</h2>
258 | 						<button 
259 | 						type="button"
260 | 						className="btn btn-primary"
261 | 						onClick={loadFromZip}
262 | 						>
263 | 							Import Maps
264 | 						</button>
265 | 						{maps.map((map,index)=>{
266 | 							return (
267 | 								
268 | 								<ManifestEditorMapItem 
269 | 								key={index} 
270 | 								index={index} 
271 | 								map={map} 
272 | 								setCampaignMap={setCampaignMap}
273 | 								/>);
274 | 							})}
275 | 							<button 
276 | 							type="button"
277 | 							className="btn btn-primary"
278 | 							onClick={addMap}
279 | 							>
280 | 							Add Map
281 | 						</button>
282 | 						<h2>Mods</h2>
283 | 						<button 
284 | 							type="button"
285 | 							className="btn btn-primary"
286 | 							onClick={loadFromZip}
287 | 							>
288 | 							Import Maps
289 | 						</button>
290 | 						{mods.map((mod,index)=>{
291 | 							return (
292 | 								
293 | 								<ManifestEditorMapItem 
294 | 								key={index} 
295 | 								index={index} 
296 | 								map={mod}
297 | 								type="Mod"
298 | 								setCampaignMap={setCampaignMod}
299 | 								/>);
300 | 							})}
301 | 						<button 
302 | 							type="button"
303 | 							className="btn btn-primary"
304 | 							onClick={addMod}
305 | 							>
306 | 							Add Mod
307 | 						</button>
308 | 					</>
309 | 				}/>
310 | 				</fieldset>
311 | 			} />
312 | 			<Route path="/json" render={()=>
313 | 				<ManifestEditorJson campaign={campaign} />
314 | 			}/>
315 | 			<Route path="/preview" render={(path)=>{
316 | 				console.log(path);
317 | 				return (
318 | 				<CampaignDetails 
319 | 				campaign={campaign}
320 | 				selectedId={campaign.id}
321 | 				path={"mapmakers/preview/"}
322 | 				onDownloadCampaignClick={()=>{}}
323 | 					onPlayCampaignClick={()=>{}}
324 | 				/>
325 | 				)
326 | 			}}/>
327 | 		</form>
328 | 		</Router>
329 | 	);
330 | }
331 | 	
332 | 	
333 | const mapStateToProps:MapStateToProps<IManifestEditorProps,IManifestEditorProps,AppState> = (state,ownProps) => {
334 | 	const {campaignState} = state;
335 | 	const {selectedIndexLocal, campaignsLocal} = campaignState
336 | 	const props = {
337 | 		"campaign":campaignsLocal[selectedIndexLocal],
338 | 		"index": selectedIndexLocal
339 | 	}
340 | 	return {...ownProps, ...props};
341 | };
342 | 
343 | const mapDispatchToProps:MapDispatchToProps<IManifestEditorProps,IManifestEditorProps> = (dispatch,ownProps) => {
344 | 	return {
345 | 		...ownProps,
346 | 		setCampaign: (campaign, index) => {
347 | 			return dispatch(setCampaignLocal(campaign,index));
348 | 		}
349 | 	};
350 | };
351 | 
352 | 
353 | 
354 | export default connect(
355 | 	mapStateToProps,//mapStateToProps,
356 | 	mapDispatchToProps
357 |   )(ManifestEditor);

--------------------------------------------------------------------------------