update
parent
4c9a0ad3f0
commit
d8611230d6
|
|
@ -1,7 +1,17 @@
|
|||
<div class="container" style="padding-top:20px;text-align: center">
|
||||
<div class="col-sm"><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
|
||||
<div class="col-sm"><?=__('Design - Create - Experience')?></div>
|
||||
<div class="col-sm">-</div>
|
||||
<div class="col-sm"><?=__('Choose a project from your list above or create a new one')?></div>
|
||||
<div class="col-sm"><button style="margin-top: 20px; border-radius: 2px;" onclick=""><?=__('Create new Project')?></button></div>
|
||||
</div>
|
||||
<script>
|
||||
function new3DProject() {
|
||||
new R3.Project.D3({
|
||||
name : 'New Project'
|
||||
});
|
||||
}
|
||||
function new2DProject() {
|
||||
new R3.Project.D2();
|
||||
}
|
||||
|
||||
</script>
|
||||
<div><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
|
||||
<div><?=__('Design - Create - Experience')?></div>
|
||||
<div>-</div>
|
||||
<div><?=__('Choose a project from your list above or create a new one')?></div>
|
||||
<div><button class="button" onclick="new3DProject()"><?=__('Create a new 3D Project')?></button></div>
|
||||
<div><button class="button" onclick="new2DProject()"><?=__('Create a new 2D Project')?></button></div>
|
||||
|
|
|
|||
|
|
@ -2,25 +2,20 @@
|
|||
|
||||
use Cake\Utility\Inflector;
|
||||
|
||||
//clientId = 772773861137-e40sf4u13c8faj1u2uivhcngk96fk7fs.apps.googleusercontent.com
|
||||
//clientSecret = auUeUzlL31k58q8Yrwt2Vlcr
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta name="google-signin-scope" content="profile email">
|
||||
<meta name="google-signin-client_id" content="906972333574-e6ub0ckcdu4ejju66jvtco2moc3senib.apps.googleusercontent.com">
|
||||
<meta name="google-signin-client_id" content="772773861137-e40sf4u13c8faj1u2uivhcngk96fk7fs.apps.googleusercontent.com">
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
|
||||
<title>- ECS - Editor</title>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121323464-1"></script>
|
||||
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-141744867-1');
|
||||
</script>
|
||||
<?= $this->Html->charset() ?>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
|
|
@ -35,31 +30,25 @@ use Cake\Utility\Inflector;
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://source.r3js.org/build/r3.js" type="text/javascript"></script>
|
||||
<script src="js/config.js" type="text/javascript"></script>
|
||||
<script src="https://api.r3js.org/r3.js"></script>
|
||||
<script src="https://api.r3js.org/config.js"></script>
|
||||
<script src="https://api.r3js.org/three.js"></script>
|
||||
<script src="https://api.r3js.org/OrbitControls.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
|
||||
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<?= $this->Flash->render() ?>
|
||||
<div id="divBackground" class="sticky">
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="/">r3.js - editor</a>
|
||||
<div class="div-main">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1">
|
||||
<a class="navbar-brand" href="/" onclick="alert('You shouldn\'t navigate away from this page - unless you want to lose all your changes'); return false;">r3.js - editor</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/menu"><?=__('Menu') ?></a>
|
||||
<button id="button-menu" class="button-menu"><?=__('Menu') ?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectProject" class="nav-link"><option><?=__('Select Project') ?></option></select>
|
||||
|
|
@ -74,39 +63,36 @@ use Cake\Utility\Inflector;
|
|||
<select id="selectCreateComponent" class="nav-link"><option><?=__('Create Component') ?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/create"><?=__('Create')?></a>
|
||||
<button id="button-create" class="button-menu"><?=__('Create')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectCustomCodeComponent" class="nav-link"><option><?=__('Select Code') ?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/code-editor"><?=__('Code Editor')?></a>
|
||||
<button id="button-code-editor" class="button-menu"><?=__('Code Editor')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectMode" class="nav-link"><option><?=__('Edit Mode')?></option><option><?=__('Run Mode')?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/action/start"><?=__('Start')?></a>
|
||||
<button id="button-start" class="button-menu"><?=__('Start')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/action/pause"><?=__('Pause')?></a>
|
||||
<button id="button-pause" class="button-menu"><?=__('Pause')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/action/restart"><?=__('Restart')?></a>
|
||||
<button id="button-restart" class="button-menu"><?=__('Restart')?></button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="aSave" href="/action/save"><?=__('Save')?></a>
|
||||
<button id="button-save" class="button-menu" disabled="disabled"><?=__('Save')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="aDelete" href="/action/delete"><?=__('Delete')?></a>
|
||||
<button id="button-delete" class="button-menu" disabled="disabled"><?=__('Delete')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="aUpload" href="/action/upload"><?=__('Upload')?></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div id="divSignOut"></div>
|
||||
<button id="button-sign-out" class="button-menu" disabled="disabled" onclick="signOut()"><?=__('Sign Out')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
|
||||
|
|
@ -114,58 +100,128 @@ use Cake\Utility\Inflector;
|
|||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
</div>
|
||||
<div id="div-workarea" class="div-home">
|
||||
<?= $this->fetch('content') ?>
|
||||
</div>
|
||||
<footer>
|
||||
<a href="http://www.icondrawer.com/"></a>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
function onSignIn(googleUser) {
|
||||
// Useful data for your client-side scripts:
|
||||
var profile = googleUser.getBasicProfile();
|
||||
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
|
||||
console.log('Full Name: ' + profile.getName());
|
||||
console.log('Given Name: ' + profile.getGivenName());
|
||||
console.log('Family Name: ' + profile.getFamilyName());
|
||||
console.log("Image URL: " + profile.getImageUrl());
|
||||
console.log("Email: " + profile.getEmail());
|
||||
|
||||
// The ID token you need to pass to your backend:
|
||||
var id_token = googleUser.getAuthResponse().id_token;
|
||||
console.log("ID Token: " + id_token);
|
||||
R3.GraphicsRuntimes = [
|
||||
new R3.Runtime.Graphics.Three()
|
||||
];
|
||||
|
||||
document.getElementById('divSignOut').innerHTML = '';
|
||||
var a = document.createElement('a');
|
||||
a.innerText = 'Sign Out';
|
||||
a.setAttribute('class', 'nav-link');
|
||||
a.addEventListener('click', signOut);
|
||||
document.getElementById('divSignOut').appendChild(a);
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_RUNTIME,
|
||||
function(component) {
|
||||
|
||||
document.getElementById('aSave').setAttribute('class', 'nav-link');
|
||||
document.getElementById('aDelete').setAttribute('class', 'nav-link');
|
||||
document.getElementById('aUpload').setAttribute('class', 'nav-link');
|
||||
var graphics = R3.GraphicsRuntimes[0];
|
||||
|
||||
/**
|
||||
* Now send the token to our API
|
||||
*/
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', 'https://api.r3js.org/signin');
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.onload = function() {
|
||||
console.log('Signed in as: ' + xhr.responseText);
|
||||
};
|
||||
xhr.send('idtoken=' + id_token);
|
||||
return {
|
||||
graphics : graphics
|
||||
}
|
||||
|
||||
function signOut() {
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.COMPONENT_REGISTER,
|
||||
function(data) {
|
||||
|
||||
var select = null;
|
||||
|
||||
var option = null;
|
||||
|
||||
if (data.component instanceof R3.Project) {
|
||||
|
||||
select = document.getElementById('selectProject');
|
||||
|
||||
option = document.createElement('option');
|
||||
|
||||
option.appendChild( document.createTextNode(data.component.name) );
|
||||
|
||||
option.value = data.component.id;
|
||||
|
||||
select.appendChild(option);
|
||||
|
||||
select.selectedIndex = select.options.length - 1;
|
||||
|
||||
}
|
||||
|
||||
select = document.getElementById('selectComponent');
|
||||
|
||||
option = document.createElement('option');
|
||||
|
||||
option.appendChild(document.createTextNode(data.component.name));
|
||||
|
||||
option.value = data.component.id;
|
||||
|
||||
select.appendChild(option);
|
||||
|
||||
select.selectedIndex = select.options.length - 1;
|
||||
|
||||
if (data.component instanceof R3.Canvas) {
|
||||
var workarea = document.getElementById('div-workarea');
|
||||
workarea.innerHTML = '';
|
||||
workarea.appendChild(data.component.instance);
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_API_URL,
|
||||
function() {
|
||||
return {
|
||||
apiUrl : R3.Config.api.url,
|
||||
queryApiUrl : R3.Config.queryApi.url,
|
||||
apiAuthorization : R3.Config.api.clientPassword
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.storageSystem = new R3.System.Storage();
|
||||
R3.storageSystem.start();
|
||||
|
||||
onSignIn = function(googleUser) {
|
||||
|
||||
R3.Event.Async(
|
||||
R3.Event.SIGN_IN,
|
||||
{
|
||||
user : googleUser
|
||||
},
|
||||
function(data) {
|
||||
console.log('signed in');
|
||||
document.getElementById('button-sign-out').removeAttribute('disabled');
|
||||
document.getElementById('button-save').removeAttribute('disabled');
|
||||
document.getElementById('button-delete').removeAttribute('disabled');
|
||||
},
|
||||
function(error) {
|
||||
console.log('An error occured during Sign-In: ' + error);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
signOut = function() {
|
||||
var auth2 = gapi.auth2.getAuthInstance();
|
||||
auth2.signOut().then(function () {
|
||||
R3.Event.Async(
|
||||
R3.Event.SIGN_OUT,
|
||||
null,
|
||||
function(data) {
|
||||
console.log('User signed out.');
|
||||
document.getElementById('divSignOut').innerHTML = '';
|
||||
document.getElementById('aSave').setAttribute('class', 'nav-link disabled');
|
||||
document.getElementById('aDelete').setAttribute('class', 'nav-link disabled');
|
||||
document.getElementById('aUpload').setAttribute('class', 'nav-link disabled');
|
||||
document.getElementById('button-sign-out').setAttribute('disabled', 'disabled');
|
||||
document.getElementById('button-save').setAttribute('disabled', 'disabled');
|
||||
document.getElementById('button-delete').setAttribute('disabled', 'disabled');
|
||||
},
|
||||
function(error) {
|
||||
console.log('An error occured during Sign-Out: ' + error);
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,103 @@
|
|||
html {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color:#666666;
|
||||
background-color:#000000;
|
||||
}
|
||||
|
||||
div.sticky {
|
||||
position:fixed;
|
||||
height:100%;
|
||||
width:100%;
|
||||
background-color:#111111;
|
||||
z-index:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
div.centered {
|
||||
text-align: center;
|
||||
/*div.sticky {*/
|
||||
/* position:fixed;*/
|
||||
/* height: 100%;*/
|
||||
/* width:100%;*/
|
||||
/* background-color:#111111;*/
|
||||
/*}*/
|
||||
|
||||
/*div.centered {*/
|
||||
/* text-align: center;*/
|
||||
/*}*/
|
||||
|
||||
/*canvas {*/
|
||||
/* bottom:0;*/
|
||||
/* width:100%;*/
|
||||
/* height:100%;*/
|
||||
/*}*/
|
||||
.button:hover {
|
||||
box-shadow: 0 0 10px 10px #00cc2b;
|
||||
}
|
||||
|
||||
canvas {
|
||||
bottom:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:1;
|
||||
.button:focus {
|
||||
outline:unset;
|
||||
border: 2px #2ca02c solid;
|
||||
}
|
||||
|
||||
div.content {
|
||||
z-index:2;
|
||||
.button {
|
||||
transition: box-shadow 0.5s;
|
||||
border: 2px transparent solid;
|
||||
margin-top: 20px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 0 10px 0px #00cc2b;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding-top:10px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right:10px;
|
||||
|
||||
.button-menu:focus {
|
||||
outline:unset;
|
||||
border:2px #2ca02c solid;
|
||||
}
|
||||
|
||||
button.round {
|
||||
border-radius:5px;
|
||||
.button-menu:hover {
|
||||
box-shadow: 2px 3px 20px 0px #00cc2b;
|
||||
}
|
||||
|
||||
.button-menu:disabled {
|
||||
box-shadow: 2px 3px 7px 0px #ff898599;
|
||||
color: #ec6c6c78;
|
||||
}
|
||||
|
||||
|
||||
.button-menu {
|
||||
border: 2px transparent solid;
|
||||
transition: box-shadow 0.5s, border 0.5s;
|
||||
height: 35px;
|
||||
background-color: transparent;
|
||||
color: #7b7b7b;
|
||||
box-shadow: 2px 3px 7px 0px #012300a3;
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.div-main {
|
||||
height:100%;
|
||||
padding:0;
|
||||
background-color: #000000ad;
|
||||
}
|
||||
|
||||
.div-home {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000000ad;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*label {*/
|
||||
/* margin-right:10px;*/
|
||||
/*}*/
|
||||
|
||||
/*button.round {*/
|
||||
/* border-radius:5px;*/
|
||||
/*}*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue