YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactoring a lot of code

Browse Source
This commit is contained in:
Dominic Masters
2018-04-09 07:05:06 +10:00
parent 914b1beef8
commit 63d1e21b9a
26 changed files with 314 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/3d/phone.json → public/3d/models/phone.json
View File

0
public/3d/pvm.json → public/3d/models/pvm.json
View File

61
public/3d/scenes/AboutScene.jsx Normal file
View File

@@ -0,0 +1,61 @@
/*
* About Scene.
* About that one lad.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/08
*/
import SceneComponent from './SceneComponent';
import * as THREE from 'three';
import PVM from './../models/pvm.json';
import * as Easing from './../../animation/Easing.js';
class AboutScene extends SceneComponent {
constructor(props) {
super(props);
}
onSetup(scene, camera, renderer) {
this.loader = this.loader || new THREE.ObjectLoader();
this.pvm = this.pvm || this.loader.parse(PVM);
if(typeof this.screenMaterial === typeof undefined) {
let child = this.pvm.children[0].children[27];//TV Screen
this.screenMaterial = child.material;
}
this.pvm.position.x = 0.7;
this.pvm.position.z = -0.7;
scene.add(this.pvm);
}
onUpdate(scene, camera, renderer) {
var dur = 1500;
let time = new Date().getTime();
let t = (time % dur) / dur;
let h = ((time+dur/4) % dur) / dur;
let d;
let q;
if(t < 0.5) {
d = Easing.easeInOutQuad(t, 0, 1, 0.5);
} else {
d = Easing.easeInOutQuad(t-0.5, 1, -1, 0.5);
}
if(h < 0.5) {
q = Easing.easeInOutQuad(h, 0, 1, 0.5);
} else {
q = Easing.easeInOutQuad(h-0.5, 1, -1, 0.5);
}
this.pvm.rotation.x = THREE.Math.degToRad((d*10) - 90);
this.pvm.rotation.z = THREE.Math.degToRad(134-(q*2));
this.pvm.position.y = (0.5 - q)/11;
this.screenMaterial.color = new THREE.Color(q/8, q/4, 0.5+q/2);
}
}
export default AboutScene;

55
public/components/sections/ThreeSection.jsx → public/3d/scenes/SceneComponent.jsx
View File

@@ -1,44 +1,53 @@
/*
* ThreeJS Section
* Section for Three JS.
* Scene Component
* About that one lad.
*
* Dependencies:
* styles/components/_scene-component.scss
*
* Version:
* 1.0.0 - 2018/03/10
* 1.0.0 - 2018/04/08
*/
import React from 'react';
import Section from './../Section';
import { connect } from 'react-redux';
import * as THREE from 'three';
class ThreeSection extends React.Component {
class SceneComponet extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
if(typeof this.scene !== typeof undefined) return;
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(17, window.innerWidth / window.innerHeight, 0.1, 1000 );
this.camera = new THREE.PerspectiveCamera(
17,
window.innerWidth / window.innerHeight,
0.1,
1000
);
this.isAlive = true;
this.renderer = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.camera.position.z = 5;
this.camera.position.z = 1;
//this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
//this.scene.add(this.ambient1);
//this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
//this.scene.add(this.ambient2);
this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
this.scene.add(this.ambient1);
this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
this.scene.add(this.ambient2);
this.light = new THREE.DirectionalLight(0x22BBFF, 0.3);
this.light.position.x = this.camera.position.x;
this.light.position.y = this.camera.position.y;
this.light.position.z = this.camera.position.z + 5;
this.light.position.z = this.camera.position.z;
this.scene.add(this.light);
if(typeof this.props.onSetup !== typeof undefined) {
this.props.onSetup(this.scene, this.camera, this.renderer);
if(typeof this.onSetup !== typeof undefined) {
this.onSetup(this.scene, this.camera, this.renderer);
}
this.onFrame();
@@ -68,25 +77,25 @@ class ThreeSection extends React.Component {
this.camera.fov = vfovRad * 180 / Math.PI;
this.camera.updateProjectionMatrix();
if(typeof this.props.onRender !== typeof undefined) {
this.props.onRender(diff);
if(typeof this.onUpdate !== typeof undefined) {
this.onUpdate(diff);
}
this.renderer.render(this.scene, this.camera);
this.lastTime = now;
//requestAnimationFrame(this.onFrame.bind(this));
requestAnimationFrame(this.onFrame.bind(this));
}
render() {
return (
<Section section="three" full>
<div className="c-section--style-three__canvas" ref="canvasSpace"></div>
<canvas ref="canvas" className="c-section--style-three__canvas">
<div className="c-scene-component">
<div className="c-scene-component__canvas-space" ref="canvasSpace"></div>
<canvas ref="canvas" className="c-scene-component__canvas">
</canvas>
</Section>
)
</div>
);
}
}
export default ThreeSection;
export default SceneComponet;

61
public/components/pages/AboutPage.jsx
View File

@@ -12,20 +12,11 @@
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Page from './../Page';
import Poly from './../sections/Poly';
import TitleSection from './../sections/TitleSection';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import VideoTitle from './../title/VideoTitle';
import Window95 from './../w95/Window95';
import domsHead from './../../images/profile.png';
import aboutMP4 from './../../videos/about/about.mp4';
import programmingMP4 from './../../videos/about/programming.mp4';
import apiMP4 from './../../videos/about/api.mp4';
import otherMP4 from './../../videos/about/other.mp4';
import AboutScene from './../../3d/scenes/AboutScene';
class AboutPage extends React.Component {
constructor(props) {
@@ -35,52 +26,16 @@ class AboutPage extends React.Component {
render() {
return (
<Page className="c-page--style-about">
<Poly />
{/* Bio */}
<SplitSection
className="c-page--style-about__bio-section"
leftClass="c-page--style-about__profile-container"
left={ <img src={domsHead} className="c-page--style-about__profile" /> }
right={
<Window95 title="Bio" className="c-window--style-about">
<div className="c-text-field">
<p>{ Language.get("about.descriptions.welcome") }</p>
</div>
</Window95>
}
rightClass="c-page--style-about__blurb"
<TitleSection
title="about.titles.me"
scene={<AboutScene />}
/>
{/* About Me */}
<BodySection
className="c-about-page__body-section"
title={
<VideoTitle
title="about.titles.me" mp4={aboutMP4}
/>
}
>
{ Language.get("about.descriptions.me") }
<BodySection>
Test
</BodySection>
{/* Programming */}
<BodySection className="c-about-page__body-section" title={[
<VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
<VideoTitle title="about.titles.apis" mp4={apiMP4} to="/about/api" />,
<VideoTitle title="about.titles.other" mp4={otherMP4} to="/about/other" />
]}></BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(AboutPage);
export default AboutPage;

15
public/components/pages/ContactPage.jsx
View File

@@ -12,8 +12,8 @@
import React from 'react';
import Page from './../Page';
import PhoneSection from './../sections/PhoneSection';
import BodySection from './../sections/BodySection';
import TitleSection from './../sections/TitleSection';
import ContactForm from './../forms/ContactForm';
@@ -28,15 +28,16 @@ class ContactPage extends React.Component {
render() {
return (
<Page>
<PhoneSection />
<TitleSection title="contact.form.title" />
<BodySection>
<h1>{Language.get("contact.form.title")}</h1>
<p>
{Language.get("contact.form.info")}
</p>
<div className="c-page--style-container__split">
<ContactForm className="c-page--style-container__split-part" />
<div className="c-page--style-container__split-part"></div>
<div className="c-page--style-container__split-part">
<p>
{Language.get("contact.form.info")}
</p>
</div>
</div>
</BodySection>
</Page>

11
public/components/pages/IndexPage.jsx
View File

@@ -12,7 +12,6 @@
import React from 'react';
import Page from './../Page';
import Poly from './../sections/Poly';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import { connect } from 'react-redux';
@@ -26,9 +25,13 @@ class IndexPage extends React.Component {
render() {
return (
<Page>
<Poly />
<BodySection unpadded>
<SplitSection left={
"test"
} right={
"tost"
}
/>
<BodySection>
<h1>Lorem</h1>
</BodySection>
</Page>

2
public/components/pages/KitchenSinkPage.jsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import Page from './../Page';
import Poly from './../sections/Poly';
import BodySection from './../sections/BodySection';
class KitchenSinkPage extends React.Component {
@@ -12,7 +11,6 @@ class KitchenSinkPage extends React.Component {
render() {
return (
<Page>
<Poly />
<BodySection>
<h1>This is the primary heading and there should only be one of these per page</h1>

84
public/components/pages/OldAboutPage.jsx Normal file
View File

@@ -0,0 +1,84 @@
/*
* About Page
* About that one lad.
*
* Dependencies:
* styles/components/_page--style-about.scss
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Page from './../Page';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import VideoTitle from './../title/VideoTitle';
import Window95 from './../w95/Window95';
import domsHead from './../../images/profile.png';
import aboutMP4 from './../../videos/about/about.mp4';
import programmingMP4 from './../../videos/about/programming.mp4';
import apiMP4 from './../../videos/about/api.mp4';
import otherMP4 from './../../videos/about/other.mp4';
class AboutPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-about">
{/* Bio */}
<SplitSection
className="c-page--style-about__bio-section"
leftClass="c-page--style-about__profile-container"
left={ <img src={domsHead} className="c-page--style-about__profile" /> }
right={
<Window95 title="Bio" className="c-window--style-about">
<div className="c-text-field">
<p>{ Language.get("about.descriptions.welcome") }</p>
</div>
</Window95>
}
rightClass="c-page--style-about__blurb"
/>
{/* About Me */}
<BodySection
className="c-about-page__body-section"
title={
<VideoTitle
title="about.titles.me" mp4={aboutMP4}
/>
}
>
{ Language.get("about.descriptions.me") }
</BodySection>
{/* Programming */}
<BodySection className="c-about-page__body-section" title={[
<VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
<VideoTitle title="about.titles.apis" mp4={apiMP4} to="/about/api" />,
<VideoTitle title="about.titles.other" mp4={otherMP4} to="/about/other" />
]}></BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(AboutPage);

41
public/components/pages/TestAboutPage.jsx
View File

@@ -1,41 +0,0 @@
/*
* About Page
* About that one lad.
*
* Dependencies:
* styles/components/_page--style-about.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
import React from 'react';
import { connect } from 'react-redux';
import Page from './../Page';
import Poly from './../sections/Poly';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import Language from './../../language/Language';
class TestAboutPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-about">
About
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(TestAboutPage);

3
public/components/pages/about/APIPage.jsx
View File

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
import Language from './../../../language/Language';
import Page from './../../Page';
import Poly from './../../sections/Poly';
import BodySection from './../../sections/BodySection';
import VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
@@ -28,8 +27,6 @@ class APIPage extends React.Component {
render() {
return (
<Page className="c-page--style-api-skills">
<Poly />
<BodySection
title={
<VideoTitle

2
public/components/pages/about/OtherSkillsPage.jsx
View File

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
import Language from './../../../language/Language';
import Page from './../../Page';
import Poly from './../../sections/Poly';
import BodySection from './../../sections/BodySection';
import VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
@@ -28,7 +27,6 @@ class OtherSkillsPage extends React.Component {
render() {
return (
<Page className="c-page--style-other-skills">
<Poly />
<BodySection
title={

2
public/components/pages/about/ProgrammingPage.jsx
View File

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
import Language from './../../../language/Language';
import Page from './../../Page';
import Poly from './../../sections/Poly';
import BodySection from './../../sections/BodySection';
import VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
@@ -28,7 +27,6 @@ class ProgrammingPage extends React.Component {
render() {
return (
<Page className="c-page--style-programming">
<Poly />
<BodySection
title={

28
public/components/sections/CenterSection.jsx
View File

@@ -1,28 +0,0 @@
/*
* Center Section
* Section for centered items.
*
* Dependencies:
* styles/components/_section--style-center.scss
*
* Version:
* 1.0.0 - 2018/03/21
*/
import React from 'react';
import Section from './../Section';
class CenterSection extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Section section="center" className={this.props.className}>
</Section>
)
}
}
export default CenterSection;

62
public/components/sections/PhoneSection.jsx
View File

@@ -1,62 +0,0 @@
/*
* Poly
* Poly styled section.
*
* Dependencies:
* styles/components/_section--style-phone.scss
*
* Version:
* 1.1.0 - 2018/03/10
*/
import React from 'react';
import ThreeSection from './ThreeSection';
import * as THREE from 'three';
import * as Easing from './../../animation/Easing';
import PhoneModel from './../../3d/phone.json';
class PhoneSection extends React.Component {
constructor(props) {
super(props);
}
onSetup(scene) {
this.loader = new THREE.JSONLoader();
this.data = this.loader.parse(PhoneModel);
this.material = new THREE.MeshLambertMaterial({
color: 0xff66ab
});
this.mesh = new THREE.Mesh(this.data.geometry, this.material);
this.mesh.position.z = 2;
scene.add(this.mesh);
}
getV(j) {
var x = new Date().getTime() % j;
var h = x;
if(x > (j/2)) h = (j/2) - (x - (j/2));
h *= 2;
return Easing.easeInOutQuart(h, 0, 1, j);
}
onRender(diff) {
this.mesh.rotation.set(
THREE.Math.degToRad(this.getV(25000)*5),
THREE.Math.degToRad(this.getV(15000)*10),
THREE.Math.degToRad(this.getV(40000)*20)
);
}
render() {
return (
<ThreeSection
onRender={this.onRender.bind(this)}
onSetup={this.onSetup.bind(this)}
/>
)
}
}
export default PhoneSection;

136
public/components/sections/Poly.jsx
View File

@@ -1,136 +0,0 @@
/*
* Poly
* Poly styled section.
*
* Dependencies:
* styles/components/_section--style-poly.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import ThreeSection from './ThreeSection';
import * as THREE from 'three';
import pvm from './../../3d/pvm.json';
import staticGIF from './../../images/static.gif';
const CUBES = [
{
size: [1, 1, 1],
pos: [-4,-1,1],
velocity: [0.3, 0.1, 0],
color: 0xFFFFFF,
pvm: true
},
{
size: [1, 1, 1],
pos: [0.5,-0,-0.3],
velocity: [-0.3, 0.05, 0.1],
color: 0xCCFFFF,
pvm: true
},
{
size: [1, 1, 1],
pos: [-3,1,0.3],
velocity: [0.2, 0.5, 0],
color: 0xaaffb9,
pvm: true
},
{
size: [0.8, 0.8, 0.8],
pos: [3.4,-0.6,0.3],
velocity: [1, 0.1, -0.1],
color: 0xff66ab,
pvm: true
}
];
class Poly extends React.Component {
constructor(props) {
super(props);
}
onSetup(scene) {
this.cubes = [];
this.outlines = [];
this.loader = this.loader || new THREE.ObjectLoader();
this.textureLoader = new THREE.TextureLoader();
this.pvmData = this.pvmData || this.loader.parse(pvm);
this.pvmData.scale.multiplyScalar(1.5);
console.log(staticGIF);
for(var i = 0; i < CUBES.length; i++) {
let c = CUBES[i];
let cube;
if(c.pvm) {
cube = this.pvmData.clone();
let children = cube.children[0].children;
if(typeof this.screenMaterial === typeof undefined) {
let child = children[27];//TV Screen
this.screenMaterial = child.material;
}
} else {
let geometry = new THREE.BoxGeometry(c.size[0],c.size[1],c.size[2]);
let material = new THREE.MeshLambertMaterial( { color: c.color } );
cube = new THREE.Mesh(geometry, material);
}
cube.position.x = c.pos[0];
cube.position.y = c.pos[1];
cube.position.z = c.pos[2];
cube.rotation.x = Math.random()*360;
cube.rotation.y = Math.random()*360;
cube.rotation.z = Math.random()*360;
cube.velocity = c.velocity;
scene.add(cube);
this.cubes.push(cube);
if(typeof c.outline !== typeof undefined) {
let outline = new THREE.MeshBasicMaterial( { color: c.outline, side: THREE.BackSide } );
let outlineMesh = new THREE.Mesh( geometry, outline );
outlineMesh.position.x = cube.position.x;
outlineMesh.position.y = cube.position.y;
outlineMesh.position.z = cube.position.z;
outlineMesh.scale.multiplyScalar(1.05);
this.outlines[i] = outlineMesh;
scene.add( outlineMesh );
}
}
}
onRender(diff) {
for(var i = 0; i < this.cubes.length; i++) {
let e = this.cubes[i];
let o = this.outlines[i];
let c = CUBES[i];
e.rotation.x += c.velocity[0] * diff;
e.rotation.y += c.velocity[1] * diff;
e.rotation.z += c.velocity[2] * diff;
if(typeof o !== typeof undefined) {
o.rotation.x = e.rotation.x;
o.rotation.y = e.rotation.y;
o.rotation.z = e.rotation.z;
}
}
}
render() {
return (
<ThreeSection
onRender={this.onRender.bind(this)}
onSetup={this.onSetup.bind(this)}
/>
)
}
}
export default Poly;

50
public/components/sections/TitleSection.jsx Normal file
View File

@@ -0,0 +1,50 @@
/*
* Title Section
* Simple title section used for most pages.
*
* Dependencies:
* styles/components/_section--style-title.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Section from './../Section';
class TitleSection extends React.Component {
constructor(props) {
super(props);
}
render() {
let children = [];
if(this.props.scene) {
//3D Model to add to the title, naisu
children.push(
<div className="c-section--style-title__model-container" key="model">
{ this.props.scene }
</div>
);
}
return (
<Section section="title">
<h1 className="c-section--style-title__title">
{ Language.get(this.props.title) }
</h1>
{ children }
</Section>
)
}
}
const mapStateToProps = function(state) {
return { code: state.language.code }
}
export default connect(mapStateToProps)(TitleSection);

1
public/language/Language.jsx
View File

@@ -19,6 +19,7 @@ class Language {
}
get(key) {
if(typeof key === typeof undefined) return "Key \"undefined\".";
let j = this.getRecursive(key.split("."));
if(typeof j === typeof undefined || j == null) return "Missing \"" + key + "\"";
return j;

4
public/styles/components/_navbar.scss
View File

@@ -69,8 +69,8 @@ $c-navbar--link-offset: 5px;
@include t-media-query($s-small-up) {
.c-navbar {
width: 90%;
top:3em;
left: 2%;
top: 1em;
left: 1em;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}

3
public/styles/components/_page.scss
View File

@@ -12,9 +12,10 @@
.c-page {
min-height: 100%;
@include t-flex-grow(1);
//@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
padding-bottom: 5em;
//background-attachment: fixed;
//background-color: #000019;
//background-image: url('./../images/space.png');

27
public/styles/components/_scene-component.scss Normal file
View File

@@ -0,0 +1,27 @@
/*
* Scene Component
* Styles for THREE JS Scene elements.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/08
*/
.c-scene-component {
position: relative;
width: 100%;
height: 100%;
}
.c-scene-component__canvas-space {
width: 100%;
height: 100%;
}
.c-scene-component__canvas {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

3
public/styles/components/_section--style-body.scss
View File

@@ -19,9 +19,6 @@
}
@include t-media-query($s-small-up) {
.c-section--style-body {
padding-left: 4%;
}
.c-section--style-body__inner {
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));

10
public/styles/components/_section--style-poly.scss
View File

@@ -1,10 +0,0 @@
/*
* Section Style Poly
* Styles for poly section elements
*
* Dependencies:
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/

24
public/styles/components/_section--style-three.scss
View File

@@ -1,24 +0,0 @@
/*
* Section Style Three
* Styles for Three JS section elements
*
* Dependencies:
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-three {
height: 60vmin;
position: relative;
z-index: 0;
overflow-y: visible;
}
.c-section--style-three__canvas {
width: 100%;
height: 100vh;
top: 0;
left: 0;
position: absolute;
}

29
public/styles/components/_section--style-title.scss Normal file
View File

@@ -0,0 +1,29 @@
/*
* Section Title Style
* Styles for title section
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/06
*/
$c-section--style-title__title-z-index: 5;
.c-section--style-title {
padding-top: 30vmin;
padding-bottom: 20vmin;
padding-left: 1em;
position: relative;
}
.c-section--style-title__model-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-section--style-title__title {
position: relative;
z-index: $c-section--style-title__title-z-index;
}

4
public/styles/index.scss
View File

@@ -53,12 +53,12 @@
@import './components/_menu.scss';
@import './components/_navbar.scss';
@import './components/_page.scss';
@import './components/_scene-component.scss';
@import './components/_section.scss';
@import './components/_section--style-blank-promo.scss';
@import './components/_section--style-body.scss';
@import './components/_section--style-poly.scss';
@import './components/_section--style-split.scss';
@import './components/_section--style-three.scss';
@import './components/_section--style-title.scss';
@import './components/_w95.scss';
@import './components/_page--style-about.scss';