diff --git a/src/App.js b/src/App.js
index d598dd5..e65d906 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,32 +1,53 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
import './App.css';
import Pane from './Components/pane';
import DeviceFrame from './Components/deviceFrame';
+import waterMarkPng from './images/water-mark.png'
var mockProjects = [{"Name":"AN_战斗模拟","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/AN_战斗模拟/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"AN_美女被困","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_美女被困/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"获得钥匙商店|获得鸡腿商店|胜利失败"}},{"Name":"AN_解开锁链","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_解开锁链/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"第一把锁商店|第二把锁商店|全部锁胜利失败"}},{"Name":"GOG_DIY帆船","OldSlectType":"1|2|2","HtmlUrl":"PlayableData/GOG_DIY帆船/index.html","TextObjStr":{"TopText":"黑胡子|女海盗|铁面男","MiddText":"商店|结算|无","CentText":"只选船舵|全部选择|无"}},{"Name":"GOG_DIY飞艇","OldSlectType":"2|2|2","HtmlUrl":"PlayableData/GOG_DIY飞艇/index.html","TextObjStr":{"TopText":"黑胡子|美人鱼|无立绘","MiddText":"商店|结算|无","CentText":"只选飞艇|全部选择|无"}},{"Name":"GOG_抢滩登陆","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_抢滩登陆/index.html","TextObjStr":{"TopText":"有立绘|无立绘|无","MiddText":"胜利失败|跳转商店|无","CentText":"第二关|第一关|无"}},{"Name":"GOG_潜入营救","OldSlectType":"2|1|2","HtmlUrl":"PlayableData/GOG_潜入营救/index.html","TextObjStr":{"TopText":"立辉|无立辉|无","MiddText":"结算|商店|无","CentText":"胜利失败|杀一层|杀二层"}},{"Name":"GOG_船舱杀敌","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_船舱杀敌/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"KOA_救治组装","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/KOA_救治组装/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"SS_页游换装备","OldSlectType":"2|1|1","HtmlUrl":"PlayableData/SS_页游换装备/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}}]
function App() {
var [mode, setMode] = useState("normal")
var [projects, setProjects] = useState([])
- var [selectedProject, setSelectedProject] = useState()
+ var [selectedProject, setSelectedProject] = useState({})
+ var [device, setDevice] = useState('android-h')
Promise.resolve().then(() => {
setProjects(mockProjects)
})
+ var htmlUrl = useMemo(() => selectedProject ? selectedProject.HtmlUrl : '', [selectedProject])
+
+ // fetch('http://123.56.161.61:1157/home/GetServerJsonData').then((v) => console.log(v))
+
return (
setMode(_mode) }
projects={projects}
- onProjectSelect={(project) => setSelectedProject(project)}/>
+ onProjectSelect={(project) => {
+ console.log('xxx', project)
+ setSelectedProject(project)
+ }}
+ onDeviceChange={(_device) => setDevice(_device)}/>
+
{
mode === "normal"
?
+ htmlUrl={htmlUrl}
+ device={device}/>
:
setting content
}
+
);
}
diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js
index 713f0c6..26325a8 100644
--- a/src/Components/deviceFrame/index.js
+++ b/src/Components/deviceFrame/index.js
@@ -1,14 +1,96 @@
import './index.css'
+import androidHPng from '../../images/android-h.png'
+import androidVPng from '../../images/android-v.png'
+import iphoneHPng from '../../images/iphone-h.png'
+import iphoneVPng from '../../images/iphone-v.png'
+import ipadHPng from '../../images/iPad-h.png'
+import ipadVPng from '../../images/iPad-v.png'
+import refreshButtonPng from '../../images/refresh-button.png'
+import { useEffect, useState } from 'react'
var baseUrl = "http://123.56.161.61:1157/"
+var configMap = {
+ "android-h": {
+ bkg: androidHPng,
+ width: '512px',
+ height: '286px'
+ },
+ "android-v": {
+ bkg: androidVPng,
+ width: '286px',
+ height: '512px'
+ },
+ "iphone-h": {
+ bkg: iphoneHPng,
+ width: '628px',
+ height: '322px'
+ },
+ "iphone-v": {
+ bkg: iphoneVPng,
+ width: '322px',
+ height: '628px'
+ },
+ "ipad-h": {
+ bkg: ipadHPng,
+ width: '433px',
+ height: '324px'
+ },
+ "ipad-v": {
+ bkg: ipadVPng,
+ width: '324px',
+ height: '433px'
+ },
+}
function DeviceFrame(props) {
+ var [config, setConfig] = useState({})
+ var [iframeKey, setIframeKey] = useState(100000);
+
+ useEffect(() => {
+ setConfig(configMap[props.device])
+ console.log(props.device, config)
+ }, [props.device, config])
+
+ var refresh = () => setIframeKey(Math.round(Math.random() * 10000));
+
+ useEffect(() => {
+ refresh()
+ }, [props.htmlUrl])
+
+
return (
-
- hello, {props.htmlUrl}
- {
- props.htmlUrl &&
- }
+
+
refresh()} style={{
+ position: 'absolute',
+ left: '20px',
+ bottom: '20px',
+ cursor: 'pointer'
+ }}/>
+
+
+ {
+ props.htmlUrl
+ &&
)
}
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css
index c0da2c8..ba7794b 100644
--- a/src/Components/pane/index.css
+++ b/src/Components/pane/index.css
@@ -1,7 +1,7 @@
.Pane {
width: 25vw;
min-width: 200px;
- background-color: blue;
+ background-color: rgb(52, 90, 176);
height: 100vh;
}
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index fc82c1d..7625fce 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -23,8 +23,8 @@ var deviceConfigs = [
{
name: 'iPad',
icon: ipadPng,
- vertical: 'iPad-v',
- horizental: 'iPad-h'
+ vertical: 'ipad-v',
+ horizental: 'ipad-h'
},
];
@@ -47,7 +47,7 @@ function Pane(props) {
var projectSelect = (e) => {
var projectName = e.target.value
setProject(projectName)
- var projectObj = props.projects.find((p) => p.Name = projectName)
+ var projectObj = props.projects.find((p) => p.Name === projectName)
props.onProjectSelect(projectObj)
}
@@ -64,7 +64,9 @@ function Pane(props) {
sx={{
width: '100%',
border: 'none',
- background: 'white'
+ background: 'rgb(69, 115, 191)',
+ color: 'white',
+ fontWeight: 'bold'
}}
>
@@ -76,7 +78,8 @@ function Pane(props) {
@@ -84,7 +87,10 @@ function Pane(props) {
deviceChange(_device.horizental)}
- color={ device === _device.horizental ? 'success' : 'default'}/>
+ color={ device === _device.horizental ? 'success' : 'default'}
+ sx={{
+ marginRight: '10px'
+ }}/>
deviceChange(_device.vertical)}
color={ device === _device.vertical ? 'success' : 'default'}/>
@@ -101,9 +107,15 @@ function Pane(props) {
value={project}
onChange={(e) => projectSelect(e)}
placeholder='选择项目'
+ sx={{
+ background: 'rgb(115, 158, 211)',
+ marginTop: '50px',
+ width: '80%',
+ color: 'white'
+ }}
>
{
- props.projects.map(p => )
+ props.projects.map((p, i) => )
}
}
diff --git a/src/images/iPad 横屏.png b/src/images/iPad-h.png
similarity index 100%
rename from src/images/iPad 横屏.png
rename to src/images/iPad-h.png
diff --git a/src/images/iPad 竖屏.png b/src/images/iPad-v.png
similarity index 100%
rename from src/images/iPad 竖屏.png
rename to src/images/iPad-v.png
diff --git a/src/images/iphone 横屏.png b/src/images/iphone-h.png
similarity index 100%
rename from src/images/iphone 横屏.png
rename to src/images/iphone-h.png
diff --git a/src/images/iphone 竖屏.png b/src/images/iphone-v.png
similarity index 100%
rename from src/images/iphone 竖屏.png
rename to src/images/iphone-v.png
diff --git a/src/images/refresh-button.png b/src/images/refresh-button.png
new file mode 100644
index 0000000..0a14835
Binary files /dev/null and b/src/images/refresh-button.png differ
diff --git a/src/images/water-mark.png b/src/images/water-mark.png
new file mode 100644
index 0000000..a7a90ab
Binary files /dev/null and b/src/images/water-mark.png differ