Games list css

DApps/TestGame2/b.client.js

@@ -0,0 +1,5 @@
+
+console.log('my test dapp client')
+setInterval(function(){
+	console.log('work - my test dapp client')
+}, 5000)

DApps/TestGame2/b.server.js

@@ -0,0 +1,7 @@
+
+
+console.log('my test dapp server')
+
+setInterval(function(){
+	console.log('ok')
+}, 2500)

DApps/TestGame2/dapp.manifest

@@ -0,0 +1,8 @@
+{
+	"name" : "TestGame1",
+
+	"run" : {
+		"client" : "b.client.js",
+		"server" : "b.server.js"
+	}
+}

public/server.electron.js

@@ -63,7 +63,7 @@ const DApps = {
 				callback(dapp_data)
 			}
 			// tempory disable server part
-			return;
+			return
 			// if (!dapp_config.run.server) {
 			// 	return
 			// }
@@ -72,6 +72,29 @@ const DApps = {
 			// console.log('module_path', module_path)
 			// require(module_path)
 		})
+
+		setInterval(()=>{
+			this.readDirs()
+		}, 5000)
+	},
+
+	readDirs(){
+		this.list = {}
+		fse.readdirSync(dapps_path).forEach(dir=>{
+			const full_path   = dapps_path+dir+'/'
+			const dapp_config = this.readManifest( full_path+'dapp.manifest' )
+			if (!dapp_config) {
+				console.log('Cant find manifest for ', dir)
+				return
+			}
+
+			const dapp_data = {
+				config : dapp_config,
+				path   : full_path,
+			}
+
+			this.list[dir] = dapp_data
+		})
 	},
 
 	readManifest: function(path){
@@ -112,7 +135,7 @@ const DApps = {
 			return
 		}
 
-		const full_path = dapps_path+dir+'/'
+		const full_path = dapps_path+key+'/'
 		console.log('Remove folder ', full_path)
 		fse.removeSync(full_path)
 		delete(this.list[key])
@@ -155,7 +178,8 @@ const DApps = {
 
 		// remove game
 		if (request.url.indexOf('DApps/remove')>-1) {
-			let folder = request.url.split('/').slice(-1)
+			let folder = request.url.split('/').slice(-1)[0]
+			console.log('Remove folder', folder)
 			this.remove( folder )
 			response.end(JSON.stringify({removed:true}), 'utf-8')
 			return true

src/model/DApps.js

@@ -37,6 +37,14 @@ export default new class DApps {
 		this.loadAll()
 	}
 
+
+	remove(key, callback){
+		fetch(_config.server+'/DApps/remove/'+key).then( r => {
+			delete(this.List[key])
+			callback()
+		})
+	}
+
 	loadAll(){
 		fetch(_config.server+'/DApps/list/').then( r => { return r.json() }).then( list => {
 			this.List = Object.assign({},list)

src/server.electron.js

@@ -63,7 +63,7 @@ const DApps = {
 				callback(dapp_data)
 			}
 			// tempory disable server part
-			return;
+			return
 			// if (!dapp_config.run.server) {
 			// 	return
 			// }
@@ -72,6 +72,29 @@ const DApps = {
 			// console.log('module_path', module_path)
 			// require(module_path)
 		})
+
+		setInterval(()=>{
+			this.readDirs()
+		}, 5000)
+	},
+
+	readDirs(){
+		this.list = {}
+		fse.readdirSync(dapps_path).forEach(dir=>{
+			const full_path   = dapps_path+dir+'/'
+			const dapp_config = this.readManifest( full_path+'dapp.manifest' )
+			if (!dapp_config) {
+				console.log('Cant find manifest for ', dir)
+				return
+			}
+
+			const dapp_data = {
+				config : dapp_config,
+				path   : full_path,
+			}
+
+			this.list[dir] = dapp_data
+		})
 	},
 
 	readManifest: function(path){
@@ -112,7 +135,7 @@ const DApps = {
 			return
 		}
 
-		const full_path = dapps_path+dir+'/'
+		const full_path = dapps_path+key+'/'
 		console.log('Remove folder ', full_path)
 		fse.removeSync(full_path)
 		delete(this.list[key])
@@ -155,7 +178,8 @@ const DApps = {
 
 		// remove game
 		if (request.url.indexOf('DApps/remove')>-1) {
-			let folder = request.url.split('/').slice(-1)
+			let folder = request.url.split('/').slice(-1)[0]
+			console.log('Remove folder', folder)
 			this.remove( folder )
 			response.end(JSON.stringify({removed:true}), 'utf-8')
 			return true

src/view/components/screens/dev/dapps_list.less

@@ -1,42 +1,44 @@
 
+dapps_list {
+	caption, h3 {
+	text-transform:uppercase; font-size:18px; letter-spacing:2px;
+	padding:10px 25px 10px 10px; text-align:right;
+	cursor: default;
+	text-shadow: -1px -1px  #111, 0 1px 0 #2a2a2a;
+	color: #222;
+
+
+	text-shadow:none;
+	color:#ccc; opacity:0.2; font-weight:200;
+}
+}
+
 table#dapps_list {
 	width:100%;
 	margin:10px 0 20px 0;
 
-	caption {
-		text-transform:uppercase; font-size:18px; letter-spacing:2px;
-		padding:10px 10px 5px 10px; text-align:right;
-		cursor: default;
-		text-shadow: -1px -1px  #111, 0 1px 0 #2a2a2a;
-		color: #222;
-	}
-
-	caption {
-		text-shadow:none;
-		color:#ccc; opacity:0.2; font-weight:200;
-	}
-
 	th, td { padding:7px 5px 7px 15px; font-size:13px;
 		white-space:nowrap;
-		span, a {
+		a {
 			overflow:hidden; text-overflow: ellipsis;
 			white-space:nowrap;
 			display:inline-block;
 			max-width:100px;
 		}
 	}
 
+	th.actions { text-align: right; }
 	th {
 		background:rgba(100,100,100,0.1);
 		font-weight:normal; text-transform:uppercase; letter-spacing:1px;
 		font-size:10px;
 		font-weight:300;
 	}
 
-	td pre {
-		word-break: break-all;
-		white-space: pre-wrap;
-		max-width: 85%;
+
+	.actions {
+		text-align: right;
+		padding-right: 25px;
 	}
 
 	a {
@@ -89,7 +91,7 @@ table#dapps_list {
 .box__icon
 {
 	display: none;
-	path { fill: #444; }
+	path { fill: #333; }
 }
 .box.has-advanced-upload .box__dragndrop
 {
@@ -212,3 +214,23 @@ table#dapps_list {
 {
 	background-color: #000;
 }
+
+
+
+
+pre {
+
+	&, * { word-break: break-all;
+	white-space: pre-wrap;
+	max-width: 85%;
+	} 
+.json-key {
+   color: brown;
+   }
+.json-value {
+   color: navy;
+   }
+.json-string {
+   color: olive;
+   }
+}

src/view/components/screens/dev/upload_game.tag → src/view/components/screens/dev/dapps_list.tag

@@ -1,12 +1,34 @@
 import DApps from 'DApps'
 import './dapps_list.less'
-<upload_game>
+<dapps_list>
 	<script>
+
+		const prettyJson = {
+			replacer: function(match, pIndent, pKey, pVal, pEnd) {
+				var key = '<span class=json-key>';
+				var val = '<span class=json-value>';
+				var str = '<span class=json-string>';
+				var r = pIndent || '';
+				if (pKey)
+				 r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
+				if (pVal)
+				 r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
+				return r + (pEnd || '');
+			},
+			print: function(obj) {
+				var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
+				return JSON.stringify(obj, null, 3)
+				 .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
+				 .replace(/</g, '&lt;').replace(/>/g, '&gt;')
+				 .replace(jsonLine, prettyJson.replacer);
+			}
+		}
+
 		this.on('mount', ()=>{
 			setInterval(()=>{
 				this.dapps = DApps.List 
 				this.update()
-			}, 1000)
+			}, 2000)
 
 			const form = this.refs.form
 			form.classList.add( 'has-advanced-upload' ); // letting the CSS part to know drag&drop is supported by the browser
@@ -50,40 +72,50 @@ import './dapps_list.less'
 			})
 		})
 
+
+		this.remove = e =>{
+			e.preventDefault()
+			let key = e.item.dapp.config.name
+			if (confirm(`You should want to remove ${key} dapp?`)) {
+				DApps.remove(key, ()=>{
+					alert('Dapp removed')
+				})
+			}
+		}
+
+		this.jsonPrint = (d)=>{
+			return prettyJson.print( Object.assign( d.config, {path:d.path} ))
+		}
 	</script>
 
 	<table id="dapps_list">
 		<caption>DApps</caption>
 		<thead>
 			<tr>
 				<th>Code</th>
-				<th></th>
-				<th>Actions</th>
+				<th>Config</th>
+				<th class="actions">Actions</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr each={dapp in dapps}>
 				<td class="code">{dapp.config.name}</td>
-				<td><pre>{JSON.stringify(dapp)}</pre></td>
-				<td>
-					<a href="#remove">remove</a>
+				<td><pre><raw html={this.jsonPrint(dapp)}" /></pre></td>
+				<td class="actions">
+					<a onclick={remove} href="#remove">remove</a>
 				</td>
 			</tr>
 		</tbody>
 	</table>
 
+	<h3>Upload new game</h3>
 	<form ref="form" method="post" action="?" enctype="multipart/form-data" novalidate class="box">
-
 		<div if={this.upload_procces}> Upload process </div>
 
 		<div class="box__input">
 			<svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"/></svg>
 
-			<!-- <input type="file" name="files[]" id="file" class="box__file" data-multiple-caption="{count} files selected" multiple /> -->
-
 			<label for="file"><strong>Drag game folder</strong><span class="box__dragndrop"> here</span>.</label>
-
-			<!-- <button type="submit" class="box__button">Upload</button> -->
 		</div>
 
 
@@ -95,4 +127,4 @@ import './dapps_list.less'
 	<style type="less">
 
 	</style>
-</upload_game>
+</dapps_list>

src/view/components/screens/dev/dev.tag

@@ -14,7 +14,7 @@
 	<div id="dev" class={screen:true, loading:this.loading}>
 
 		<div class="upload-area">
-			<upload_game></upload_game>
+			<dapps_list></dapps_list>
 		</div>
 
 

src/view/components/utils/lang.tag

@@ -0,0 +1,24 @@
+<lang>
+	<script>
+		this.text = ''
+		this.on('mount',()=>{
+			let lang = App.view.lang
+
+			this.text = lang.i18n.localise( this.opts.word )
+			this.update()
+
+			lang.state.on('change', ()=>{
+				this.text = lang.i18n.localise( this.opts.word )
+				this.update()
+			})
+		})
+
+		this.on('update',()=>{
+		})
+	</script>
+
+	<span class="lang">
+		{text}
+	</span>
+
+</lang>