update
parent
4c9a0ad3f0
commit
d8611230d6
|
@ -1,7 +1,17 @@
|
||||||
<div class="container" style="padding-top:20px;text-align: center">
|
<script>
|
||||||
<div class="col-sm"><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
|
function new3DProject() {
|
||||||
<div class="col-sm"><?=__('Design - Create - Experience')?></div>
|
new R3.Project.D3({
|
||||||
<div class="col-sm">-</div>
|
name : 'New Project'
|
||||||
<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>
|
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;
|
use Cake\Utility\Inflector;
|
||||||
|
|
||||||
|
//clientId = 772773861137-e40sf4u13c8faj1u2uivhcngk96fk7fs.apps.googleusercontent.com
|
||||||
|
//clientSecret = auUeUzlL31k58q8Yrwt2Vlcr
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta name="google-signin-scope" content="profile email">
|
<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>
|
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||||
|
|
||||||
<title>- ECS - Editor</title>
|
<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() ?>
|
<?= $this->Html->charset() ?>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<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">
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
|
@ -35,31 +30,25 @@ use Cake\Utility\Inflector;
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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://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="https://api.r3js.org/r3.js"></script>
|
||||||
<script src="js/config.js" type="text/javascript"></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>
|
<div class="div-main">
|
||||||
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
|
<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>
|
||||||
<?= $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>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav">
|
<ul class="navbar-nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/menu"><?=__('Menu') ?></a>
|
<button id="button-menu" class="button-menu"><?=__('Menu') ?></button>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<select id="selectProject" class="nav-link"><option><?=__('Select Project') ?></option></select>
|
<select id="selectProject" class="nav-link"><option><?=__('Select Project') ?></option></select>
|
||||||
|
@ -74,98 +63,165 @@ use Cake\Utility\Inflector;
|
||||||
<select id="selectCreateComponent" class="nav-link"><option><?=__('Create Component') ?></option></select>
|
<select id="selectCreateComponent" class="nav-link"><option><?=__('Create Component') ?></option></select>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/create"><?=__('Create')?></a>
|
<button id="button-create" class="button-menu"><?=__('Create')?></button>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<select id="selectCustomCodeComponent" class="nav-link"><option><?=__('Select Code') ?></option></select>
|
<select id="selectCustomCodeComponent" class="nav-link"><option><?=__('Select Code') ?></option></select>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<select id="selectMode" class="nav-link"><option><?=__('Edit Mode')?></option><option><?=__('Run Mode')?></option></select>
|
<select id="selectMode" class="nav-link"><option><?=__('Edit Mode')?></option><option><?=__('Run Mode')?></option></select>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/action/start"><?=__('Start')?></a>
|
<button id="button-start" class="button-menu"><?=__('Start')?></button>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/action/pause"><?=__('Pause')?></a>
|
<button id="button-pause" class="button-menu"><?=__('Pause')?></button>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/action/restart"><?=__('Restart')?></a>
|
<button id="button-restart" class="button-menu"><?=__('Restart')?></button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="navbar-nav ml-auto">
|
<ul class="navbar-nav ml-auto">
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" id="aUpload" href="/action/upload"><?=__('Upload')?></a>
|
<button id="button-sign-out" class="button-menu" disabled="disabled" onclick="signOut()"><?=__('Sign Out')?></button>
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<div id="divSignOut"></div>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
|
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="content">
|
</div>
|
||||||
|
<div id="div-workarea" class="div-home">
|
||||||
<?= $this->fetch('content') ?>
|
<?= $this->fetch('content') ?>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<a href="http://www.icondrawer.com/"></a>
|
|
||||||
</footer>
|
</footer>
|
||||||
<script>
|
<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:
|
R3.GraphicsRuntimes = [
|
||||||
var id_token = googleUser.getAuthResponse().id_token;
|
new R3.Runtime.Graphics.Three()
|
||||||
console.log("ID Token: " + id_token);
|
];
|
||||||
|
|
||||||
document.getElementById('divSignOut').innerHTML = '';
|
R3.Event.Subscribe(
|
||||||
var a = document.createElement('a');
|
R3.Event.GET_RUNTIME,
|
||||||
a.innerText = 'Sign Out';
|
function(component) {
|
||||||
a.setAttribute('class', 'nav-link');
|
|
||||||
a.addEventListener('click', signOut);
|
|
||||||
document.getElementById('divSignOut').appendChild(a);
|
|
||||||
|
|
||||||
document.getElementById('aSave').setAttribute('class', 'nav-link');
|
var graphics = R3.GraphicsRuntimes[0];
|
||||||
document.getElementById('aDelete').setAttribute('class', 'nav-link');
|
|
||||||
document.getElementById('aUpload').setAttribute('class', 'nav-link');
|
|
||||||
|
|
||||||
/**
|
return {
|
||||||
* Now send the token to our API
|
graphics : graphics
|
||||||
*/
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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();
|
var auth2 = gapi.auth2.getAuthInstance();
|
||||||
auth2.signOut().then(function () {
|
auth2.signOut().then(function () {
|
||||||
|
R3.Event.Async(
|
||||||
|
R3.Event.SIGN_OUT,
|
||||||
|
null,
|
||||||
|
function(data) {
|
||||||
console.log('User signed out.');
|
console.log('User signed out.');
|
||||||
document.getElementById('divSignOut').innerHTML = '';
|
document.getElementById('button-sign-out').setAttribute('disabled', 'disabled');
|
||||||
document.getElementById('aSave').setAttribute('class', 'nav-link disabled');
|
document.getElementById('button-save').setAttribute('disabled', 'disabled');
|
||||||
document.getElementById('aDelete').setAttribute('class', 'nav-link disabled');
|
document.getElementById('button-delete').setAttribute('disabled', 'disabled');
|
||||||
document.getElementById('aUpload').setAttribute('class', 'nav-link disabled');
|
},
|
||||||
|
function(error) {
|
||||||
|
console.log('An error occured during Sign-Out: ' + error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,37 +1,103 @@
|
||||||
|
html {
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color:#666666;
|
color:#666666;
|
||||||
background-color:#000000;
|
background-color:#000000;
|
||||||
}
|
|
||||||
|
|
||||||
div.sticky {
|
|
||||||
position:fixed;
|
|
||||||
height: 100%;
|
|
||||||
width:100%;
|
|
||||||
background-color:#111111;
|
|
||||||
z-index:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.centered {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
bottom:0;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
height:100%;
|
||||||
z-index:1;
|
width:100%;
|
||||||
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.content {
|
/*div.sticky {*/
|
||||||
z-index:2;
|
/* position:fixed;*/
|
||||||
color:#fff;
|
/* height: 100%;*/
|
||||||
padding-top:10px;
|
/* 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
.button:focus {
|
||||||
margin-right:10px;
|
outline:unset;
|
||||||
|
border: 2px #2ca02c solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.round {
|
.button {
|
||||||
border-radius:5px;
|
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: 5px 10px 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.button-menu:focus {
|
||||||
|
outline:unset;
|
||||||
|
border:2px #2ca02c solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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