- {this.state.gardenItems.map((gardenItem, index) => {
- return (
-
);
}
diff --git a/app/Resources/js/components/garden/GardenPointCounter.js b/app/Resources/js/components/garden/GardenPointCounter.js
index 4700c72..03e18f0 100644
--- a/app/Resources/js/components/garden/GardenPointCounter.js
+++ b/app/Resources/js/components/garden/GardenPointCounter.js
@@ -19,19 +19,19 @@ var GardenPointCounter = React.createClass({
if (!prevProps.points && this.props.points) {
//ReactDOM.findDOMNode(this.refs);
}
- var node = ReactDOM.findDOMNode(this);
+ var node = ReactDOM.findDOMNode(this.refs.pointCounter);
node.classList.add('flash');
node.addEventListener("webkitAnimationEnd", this.endAnimation);
},
componentDidMount :function(){
- var node = ReactDOM.findDOMNode(this);
+ var node = ReactDOM.findDOMNode(this.refs.pointCounter);
node.classList.add('animated','fadeInDown');
node.addEventListener("webkitAnimationEnd", this.endAnimation);
},
componentWillUnmount :function(){
- var node = ReactDOM.findDOMNode(this);
+ var node = ReactDOM.findDOMNode(this.refs.pointCounter);
node.removeEventListener("webkitAnimationEnd", this.endAnimation);
},
@@ -42,8 +42,15 @@ var GardenPointCounter = React.createClass({
render() {
return (
-
-
{this.props.points}
+
+
+
+ {this.props.points}
+
+
+
+
+
);
}
diff --git a/app/Resources/js/components/utils/Preloader.js b/app/Resources/js/components/utils/Preloader.js
index 4473b6e..62e95a9 100644
--- a/app/Resources/js/components/utils/Preloader.js
+++ b/app/Resources/js/components/utils/Preloader.js
@@ -6,15 +6,15 @@ var Preloader = React.createClass({
render: function() {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
}
diff --git a/app/Resources/js/mixins/RootPathMixin.js b/app/Resources/js/mixins/RootPathMixin.js
new file mode 100644
index 0000000..64e82be
--- /dev/null
+++ b/app/Resources/js/mixins/RootPathMixin.js
@@ -0,0 +1,8 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var RootPathMixin = {
+ rootPath : './'
+};
+
+module.exports = RootPathMixin;
\ No newline at end of file
diff --git a/app/Resources/js/sources/GardenSource.js b/app/Resources/js/sources/GardenSource.js
index bb9dfc0..4db363d 100644
--- a/app/Resources/js/sources/GardenSource.js
+++ b/app/Resources/js/sources/GardenSource.js
@@ -1,47 +1,8 @@
var _ = require('underscore');
-var GardenItem = {
- id : 0,
- name_canonical: 'item-0',
- name : 'Item',
- type : 0,
- type_name : 'type',
- picto : 'ion-leaf',
- cl : 'picto-cl1',
- odr : 0,
- price : 100,
- infos : 'Texte explicatif de l\'item',
- vals:[
- {
- desc : 'description valeur 1',
- val : '+10',
- unit : '%',
- criteria: 0
- },
- {
- desc : 'description valeur 1',
- val : '+10',
- unit : '%',
- criteria: 1
- }
- ]
-};
-var pictos=['ion-leaf','ion-lightbulb','ion-bug','ion-film-marker','ion-trophy','ion-waterdrop','ion-bonfire','ion-earth','ion-umbrella'];
-var cl = ['engie-blueLight', 'engie-blue', 'engie-green', 'engie-yellow', 'engie-red', 'engie-purple', 'engie-pink'];
-var GardenItems = _.map( _.range(1, 10), function(num, key){
- return _.extend(_.clone(GardenItem), {
- id : key,
- odr : key,
- name : 'Item' + key,
- price: 100 * key,
- picto: pictos[key],
- cl : cl[key % cl.length]
- });
-});
-
var GardenIndicator = {
id : 0,
- name_canonical: 'indicator',
+ name_canonical: 'indicator-',
name : 'Indicator',
picto : 'picto-1',
cl : 'picto-cl1',
@@ -52,23 +13,76 @@ var GardenIndicator = {
unit : '%'
};
-var pictos2=['ion-heart','ion-thermometer','ion-flag'];
-var cl2 = ['engie-red', 'engie-purple', 'engie-green'];
-var GardenIndicators = _.map( _.range(1, 3), function(num, key){
+var pictos2=['pictos-09.svg','pictos-10.svg','pictos-11.svg'];
+var cl2 = ['engieYellow', 'engieRed', 'engieBlue','engieGreen'];
+var GardenIndicators = _.chain([1,2,3]).map(function(num, key){
var min = Math.floor(Math.random() * (3000 - 0)) + 0;
var max = Math.floor(Math.random() * (10000 - min)) + min;
- return _.extend(_.clone(GardenIndicator), {
+ var val = Math.floor(Math.random() * (max - min)) + min;
+ min = 0;
+ max = 100;
+ val = 0;
+
+ return _.chain(GardenIndicator).clone().extend({
id : key,
- name_canonical: 'indicator' + key,
+ name_canonical: 'indicator-' + key,
name : 'Indicator ' + key,
picto : pictos2[key],
- cl : cl2[key % cl.length],
+ cl : cl2[key % cl2.length],
criteria : key,
- val : Math.floor(Math.random() * (max - min)) + min,
+ val : val,
min : min,
max : max
- });
-});
+ }).value();
+
+}).indexBy('name_canonical').value();
+
+var GardenItem = {
+ id : 0,
+ name_canonical: 'item-',
+ name : 'Item',
+ type : 0,
+ type_name : 'type',
+ picto : 'ion-leaf',
+ cl : 'picto-cl1',
+ odr : 0,
+ price : 100,
+ infos : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in finibus urna.',
+ percs : null
+
+};
+var pictos=['pictos-01.svg','pictos-02.svg','pictos-03.svg','pictos-04.svg','pictos-05.svg','pictos-06.svg','pictos-07.svg','pictos-08.svg'];
+var cl = ['engieBlueLight', 'engieBlue', 'engieGreen', 'engieYellow', 'engieRed', 'engiePurple', 'engiePink'];
+var GardenItems = _.chain(_.range(1, 9)).map(function (num, key) {
+ var nbPercs = _.random(1, 3);
+ return _.chain(this).clone().extend({
+ id : key,
+ name_canonical: 'item-' + key,
+ odr : key,
+ name : 'Item' + key,
+ price : 100 * key,
+ picto : pictos[key],
+ cl : cl[key % cl.length],
+ percs : _.chain(GardenIndicators).clone().sample(nbPercs).map(function (cIndicator, key) {
+
+ //var val = _.random(-50, 50);
+ //val = val > 0 ? '+' + val : '' + val;
+ var val = _.random(-4, 16);
+ val = val > 0 ? '+' + val : '' + val;
+ return {
+ desc : cIndicator.name,
+ val : val,
+ unit : '',
+ indicator: cIndicator
+ };
+
+ }).indexBy(function (perc) {
+ return perc.indicator.name_canonical;
+ }).value()
+
+ }).value();
+}, GardenItem).indexBy('name_canonical').value();
+
var GardenTile = {
id : 0,
@@ -90,7 +104,7 @@ var GardenTiles = _.map( _.range(0, 25), function(num, key){
var GardenData = {
id: 0,
text: 'abudsqdqsd Dhabi',
- points: 400,
+ points: 4000,
indicators : GardenIndicators,
tiles : GardenTiles
};
@@ -98,6 +112,7 @@ var GardenData = {
var GardenSource = {
fetch: function (url) {
switch(url) {
+
case 'api/garden/1':
return new Promise(function(resolve, reject) {
@@ -106,6 +121,15 @@ var GardenSource = {
}, Math.random() * 1000 + 1000);
});
+ break;
+ case 'api/garden/1/tile':
+
+ return new Promise(function(resolve, reject) {
+ window.setTimeout(function() {
+ resolve( JSON.stringify(GardenData) );
+ }, Math.random() * 1000 + 1000);
+ });
+
break;
case 'api/gardenitems':
diff --git a/app/Resources/js/stores/GardenItemStore.js b/app/Resources/js/stores/GardenItemStore.js
index 63e150c..b0b398f 100644
--- a/app/Resources/js/stores/GardenItemStore.js
+++ b/app/Resources/js/stores/GardenItemStore.js
@@ -1,51 +1,52 @@
var alt = require('../alt');
-var GardenItemActions = require('../actions/GardenItemActions');
+var _ = require('underscore');
+var GardenActions = require('../actions/GardenActions');
class GardenItemStore {
constructor() {
- this.gardenItems = [];
+ this.gardenItems = null;
this.selectedItem = null;
this.errorMessage = null;
this.bindListeners({
- handleUpdateGardenItems: GardenItemActions.UPDATE_GARDEN_ITEMS,
- handleFetchGardenItems : GardenItemActions.FETCH_GARDEN_ITEMS,
- handleGardenItemsFailed: GardenItemActions.GARDEN_ITEMS_FAILED,
- handleSelectItem : GardenItemActions.GARDEN_SELECT_ITEM,
- handleReleaseItem : GardenItemActions.GARDEN_RELEASE_ITEM,
- handleFocusItem : GardenItemActions.GARDEN_FOCUS_ITEM,
- handleBlurItem : GardenItemActions.GARDEN_BLUR_ITEM
+ handleUpdateGardenItems: GardenActions.UPDATE_GARDEN_ITEMS,
+ handleFetchGardenItems : GardenActions.FETCH_GARDEN_ITEMS,
+ handleGardenItemsFailed: GardenActions.GARDEN_ITEMS_FAILED,
+ handleFocusGardenItem : GardenActions.FOCUS_GARDEN_ITEM,
+ handleBlurGardenItem : GardenActions.BLUR_GARDEN_ITEM,
+ handleSelectGardenItem : GardenActions.SELECT_GARDEN_ITEM,
+ handleReleaseGardenItem: GardenActions.RELEASE_GARDEN_ITEM
});
}
handleUpdateGardenItems(gardenItems) {
this.gardenItems = gardenItems;
- this.focusedItem = gardenItems[0];
+ this.focusedItem = _.findWhere(gardenItems, {odr: 0});
this.errorMessage = null;
}
handleFetchGardenItems() {
// reset the array while we're fetching new locations so React can
// be smart and render a spinner for us since the data is empty.
- this.gardenItems = [];
+ this.gardenItems = null;
this.selectedItem = null;
this.focusedItem = null;
}
- handleFocusItem(focusedItem){
- this.focusedItem = focusedItem;
+ handleSelectGardenItem(selectedItem){
+ this.selectedItem = selectedItem;
}
- handleBlurItem(focusedItem){
- this.focusedItem = null;
+ handleReleaseGardenItem(selectedItem){
+ this.selectedItem = null;
}
- handleSelectItem(selectedItem){
- this.selectedItem = selectedItem;
+ handleFocusGardenItem(focusedItem){
+ this.focusedItem = focusedItem;
}
- handleReleaseItem(selectedItem){
- this.selectedItem = null;
+ handleBlurGardenItem(focusedItem){
+ this.focusedItem = null;
}
handleGardenItemsFailed(errorMessage) {
diff --git a/app/Resources/js/stores/GardenStore.js b/app/Resources/js/stores/GardenStore.js
index 24e7003..f4c43ab 100644
--- a/app/Resources/js/stores/GardenStore.js
+++ b/app/Resources/js/stores/GardenStore.js
@@ -1,26 +1,42 @@
var alt = require('../alt');
+var _ = require('underscore');
var GardenActions = require('../actions/GardenActions');
-var GardenItemActions = require('../actions/GardenItemActions');
+var GardenItemStore = require('../stores/GardenItemStore');
class GardenStore {
constructor() {
this.garden = {};
this.isItems = false;
+ this.focusedItem = null;
this.selectedItem = null;
- this.droppedTile = null;
+ this.selectedTile = null;
this.errorMessage = null;
this.bindListeners({
- handleUpdateGarden : GardenActions.UPDATE_GARDEN,
- handleFetchGarden : GardenActions.FETCH_GARDEN,
- handleGardenFailed : GardenActions.GARDEN_FAILED,
- handleFetchGardenItems : GardenItemActions.FETCH_GARDEN_ITEMS,
- handleUpdateGardenItems: GardenItemActions.UPDATE_GARDEN_ITEMS
+ handleUpdateGarden : GardenActions.UPDATE_GARDEN,
+ handleFetchGarden : GardenActions.FETCH_GARDEN,
+ handleGardenFailed : GardenActions.GARDEN_FAILED,
+ handleFetchGardenItems : GardenActions.FETCH_GARDEN_ITEMS,
+ handleUpdateGardenItems : GardenActions.UPDATE_GARDEN_ITEMS,
+ handleFocusGardenItem : GardenActions.FOCUS_GARDEN_ITEM,
+ handleBlurGardenItem : GardenActions.BLUR_GARDEN_ITEM,
+ handleSelectGardenItem : GardenActions.SELECT_GARDEN_ITEM,
+ handleReleaseGardenItem : GardenActions.RELEASE_GARDEN_ITEM,
+ handleEnterGardenTile : GardenActions.ENTER_GARDEN_TILE,
+ handleLeaveGardenTile : GardenActions.LEAVE_GARDEN_TILE,
+ handleDropGardenTile : GardenActions.DROP_GARDEN_TILE
});
+
+ this.on('beforeEach', (payload, currentState) => {
+ //console.log(payload, currentState);
+ });
+
}
handleUpdateGarden(garden) {
+ this.waitFor(GardenItemStore);
this.garden = garden;
+ this.focusedItem = GardenItemStore.getState().focusedItem;
this.errorMessage = null;
}
@@ -29,6 +45,9 @@ class GardenStore {
// be smart and render a spinner for us since the data is empty.
this.garden = {};
this.isItems = false;
+ this.selectedItem = null;
+ this.focusedItem = null;
+ this.selectedTile = null;
}
handleFetchGardenItems() {
@@ -39,6 +58,50 @@ class GardenStore {
this.isItems = true;
}
+ handleFocusGardenItem(focusedItem){
+ this.waitFor(GardenItemStore);
+ this.focusedItem = GardenItemStore.getState().focusedItem;
+ }
+
+ handleBlurGardenItem(focusedItem){
+ this.waitFor(GardenItemStore);
+ this.focusedItem = GardenItemStore.getState().focusedItem;
+ }
+
+ handleSelectGardenItem(selectedItem){
+ this.waitFor(GardenItemStore);
+ this.selectedItem = GardenItemStore.getState().selectedItem;
+ }
+
+ handleReleaseGardenItem(releasedItem){
+ this.waitFor(GardenItemStore);
+ this.selectedItem = GardenItemStore.getState().selectedItem;
+ }
+
+ handleEnterGardenTile(enteredTile){
+ this.selectedTile = enteredTile;
+ }
+
+ handleLeaveGardenTile(leavedTile){
+ this.selectedTile = null;
+ }
+
+ handleDropGardenTile(tile){
+ this.garden.tiles[tile.id] = tile;
+ this.garden.points -= tile.item.price;
+ _.chain(tile.item.percs)
+ .map(function(perc, name_canonical){
+ if(this.hasOwnProperty(name_canonical)){
+ var indicator = this[name_canonical];
+ //var addVal = Math.round(((indicator.val - indicator.min) * parseInt(perc.val) / 100));
+ //this[name_canonical].val = this[name_canonical].val + addVal <= indicator.max ? this[name_canonical].val + addVal : indicator.max;
+ var addVal = parseInt(perc.val);
+ this[name_canonical].val = this[name_canonical].val + addVal <= indicator.max ? this[name_canonical].val + addVal : indicator.max;
+ }
+ return this;
+ }, this.garden.indicators);
+ }
+
handleGardenFailed(errorMessage) {
this.isItems = false;
this.errorMessage = errorMessage;
diff --git a/app/Resources/sass/colors.scss b/app/Resources/sass/colors.scss
new file mode 100644
index 0000000..6183024
--- /dev/null
+++ b/app/Resources/sass/colors.scss
@@ -0,0 +1,33 @@
+@import "mixins";
+
+$engieWhite: #fff;
+$engieGrey: #999;
+$engieBlueLight: #44A1DA;
+$engieBlue: #065FA9;
+$engieGreenLight: #BECD07;
+$engieGreen: #68AF2E;
+$engieGreenDark: #018737;
+$engieYellow: #FCC206;
+$engieRed: #E1071A;
+$engiePurple: #53257F;
+$engiePink: #E62E87;
+
+$engieColors: (
+ engieWhite: $engieWhite,
+ engieGrey: $engieGrey,
+ engieBlueLight: $engieBlueLight,
+ engieBlue: $engieBlue,
+ engieGreenLight: $engieGreenLight,
+ engieGreen: $engieGreen,
+ engieGreenDark: $engieGreenDark,
+ engieYellow: $engieYellow,
+ engieRed: $engieRed,
+ engiePurple: $engiePurple,
+ engiePink: $engiePink
+);
+
+@include decline-prop('.bg', background-color, $engieColors);
+@include decline-prop('.txt', color, $engieColors);
+
+$bgBloc : rgba(0,0,0,0.3);
+$txtBloc : #ffffff;
diff --git a/app/Resources/sass/main.css b/app/Resources/sass/main.css
new file mode 100644
index 0000000..009417b
--- /dev/null
+++ b/app/Resources/sass/main.css
@@ -0,0 +1,2 @@
+ write /Users/fabienchartrain/Projets/defaultvm/glop/web/styles/main.css
+ write /Users/fabienchartrain/Projets/defaultvm/glop/web/styles/main.css.map
diff --git a/app/Resources/sass/main.scss b/app/Resources/sass/main.scss
new file mode 100644
index 0000000..467bc7b
--- /dev/null
+++ b/app/Resources/sass/main.scss
@@ -0,0 +1,512 @@
+@import "mixins";
+@import "colors";
+
+/****************************************************************************/
+/*
+/* PARAMS
+/*
+/****************************************************************************/
+$miniPadding : 0.5rem;
+$smallPadding : 1rem;
+$mediumPadding : 2rem;
+$largePadding : 4rem;
+
+$pictiSize : 5rem;
+$topBarHeight : 6rem;
+$sideBarWidth : 18rem;
+$fieldWidth : 26rem;
+
+$itemsSize : 4rem;
+
+/****************************************************************************/
+/*
+/* INIT
+/*
+/****************************************************************************/
+
+html {
+ height:100%;
+}
+body {
+ height:100%;
+ font-size:12px;
+ background: $engieWhite;
+ background: url('../images/engie_garden-1800x1000.jpg') no-repeat center top;
+ background-attachment: fixed;
+ background-size: cover;
+ padding:0;
+ margin:0;
+ color:#333;
+}
+
+#app {
+ height: 100%;
+}
+
+#AppWrapper {
+ z-index: 1;
+ height: 100%;
+
+ #GardenPointCounterWrapper {
+ z-index: 5;
+ position: fixed;
+ box-sizing: border-box;
+ top:0;
+ height: $topBarHeight;
+ width: 100%;
+ padding: $mediumPadding $mediumPadding $mediumPadding $sideBarWidth + $mediumPadding;
+ background: url('../images/engie_garden-1800x1000.jpg') no-repeat center top;
+ background-attachment: fixed;
+ background-size: cover;
+ }
+
+ #GardenPictiWrapper{
+ position: fixed;
+ top: $topBarHeight;
+ width: 100%;
+ height:$pictiSize;
+ }
+
+ #GardenIndicatorWrapper {
+ z-index: 6;
+ position: fixed;
+ box-sizing: border-box;
+ top:0;
+ width: $sideBarWidth;
+ padding: $mediumPadding;
+ }
+
+ #GardenItemSelectorWrapper {
+ z-index: 4;
+ position:relative;
+ box-sizing: border-box;
+ float: right;
+ padding: $topBarHeight + $mediumPadding $mediumPadding $mediumPadding;
+ width: $sideBarWidth;
+ }
+
+ #GardenItemDescWrapper {
+ z-index: 4;
+ position: fixed;
+ box-sizing: border-box;
+ bottom: 0;
+ padding: $mediumPadding;
+ width: $sideBarWidth;
+ }
+
+ #GardenFieldWrapper {
+ z-index: 3;
+ position: fixed;
+ box-sizing: border-box;
+ bottom: $mediumPadding;
+ width: 100%;
+ padding: $mediumPadding;
+ }
+
+}
+
+
+/****************************************************************************/
+/*
+/* POINT COUNTER
+/*
+/****************************************************************************/
+
+.gardenPointCounter{
+ font-size:2rem;
+ text-align:center;
+ .topRight{
+ display: block;
+ float:right;
+ width: 16rem;
+ }
+ .topCenter{
+ display: block;
+ text-align:center;
+ }
+}
+
+/****************************************************************************/
+/*
+/* Picti
+/*
+/****************************************************************************/
+.gardenPictiWrapper{
+ width: 100%;
+ text-align:center;
+ img{
+ height:$pictiSize;
+ }
+}
+
+/****************************************************************************/
+/*
+/* ITEMS DESC
+/*
+/****************************************************************************/
+
+.gardenItemDesc{
+ z-index:5;
+ background: $bgBloc;
+ color:$txtBloc;
+ padding: $mediumPadding;
+ .gardenItemDescContent>img{
+ max-width:30%;
+ float:right;
+ }
+ h3{
+ text-transform:uppercase;
+ margin-top:0;
+ }
+ ul{
+ display:block;
+ padding:0;
+ text-align: center;
+ div.imageWrapper{
+ float:none;
+ display: inline-block;
+ vertical-align: bottom;
+ background:#fff;
+ border-radius:50%;
+ padding:2px;
+ margin: -1px 2px -2px -6px;
+ }
+ img{
+ height: 1.2em;
+ vertical-align: bottom;
+ }
+ li{
+ display: inline-block;
+ border-radius: 2rem;
+ padding: 0.2rem 0.5rem;
+ margin: 0.2rem;
+ text-align: center;
+ font-weight: bold;
+ @each $name, $color in $engieColors {
+ &.#{$name} {
+ color: $engieWhite;
+ background-color:$color;
+ }
+ }
+
+ }
+ }
+}
+
+/****************************************************************************/
+/*
+/* ITEMS SELECTOR
+/*
+/****************************************************************************/
+
+.gardenItemSelector{
+ z-index:4;
+ float:left;
+ height:100%;
+}
+.gardenItem{
+ display: block;
+ float: left;
+ position:relative;
+ overflow:hidden;
+ z-index:4;
+ list-style: none outside none;
+ width: $itemsSize;
+ line-height:$itemsSize;
+ text-align:center;
+ background:$bgBloc;
+ color:$txtBloc;
+ margin:1rem;
+ cursor:-webkit-grab;
+ border-radius: $itemsSize;
+ padding: $miniPadding;
+ &:focus {
+ box-shadow: 0px 0px 10px 0px #f8ff00;
+ outline:0;
+ }
+ i{
+ display:block;
+ font-size: $itemsSize;
+ position: absolute;
+ opacity:0.4;
+ color:$engieWhite;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 1rem 0;
+ z-index:1;
+ }
+ h3{
+ z-index:2;
+ display: block;
+ margin: 0;
+ position: relative;
+ height: $itemsSize;
+ font-size:3rem;
+ }
+ small{
+ position:absolute;
+ z-index:4;
+ bottom:-1.3rem;
+ width:2rem;
+ height:2rem;
+ border-radius: 2rem;
+ margin-left:-1.3rem;
+ background:$bgBloc;
+ border:$engieWhite 1px solid;
+ color: $txtBloc;
+ line-height:normal;
+ padding:0.3rem;
+ }
+ img{
+ position:absolute;
+ left:5%;
+ top:5%;
+ width:90%;
+ height:90%;
+
+ path, ellipse, polyline, polygon, circle, rect, line
+ {
+ stroke:#FFFFFF;
+ fill:#FFFFFF;
+ }
+ }
+ &.disabled{
+ background:contrast($bgBloc);
+ color:contrast($txtBloc);
+ cursor:pointer;
+ overflow:hidden;
+ i{
+ cursor:pointer;
+ overflow:hidden;
+ }
+ small{
+ color:$engieYellow;
+ border:#333 1px solid;
+ }
+ img{
+ opacity:0.3;
+ }
+ }
+}
+
+/****************************************************************************/
+/*
+/* FIELD
+/*
+/****************************************************************************/
+
+.gardenField{
+ width: $fieldWidth;
+ height:$fieldWidth;
+ position: relative;
+ margin:0 auto;
+}
+
+.gardenTable{
+ width: 100%;
+ height:100%;
+ position: absolute;
+ border:1px dashed #6B9B2E;
+}
+
+.gardenTile{
+ width:20%;
+ height:20%;
+ float:left;
+ box-sizing:border-box;
+ position: relative;
+ /*border:1px dashed #6B9B2E;*/
+
+ .gardenTileItem{
+ width: 100%;
+ height:100%;
+ text-align:center;
+ background:rgba(0,0,0,0.1);
+ border-radius: 100%;
+ }
+}
+
+/****************************************************************************/
+/*
+/* INDICATORS
+/*
+/****************************************************************************/
+
+.gardenIndicatorWrapper{
+ font-size:1rem;
+ text-transform:uppercase;
+ background: $bgBloc;
+ color: $txtBloc;
+ padding:1rem;
+
+ img{
+ margin:0 auto;
+ display: block;
+ margin-bottom: 2rem;
+ }
+
+ .gardenColorBar{
+ margin-bottom:2rem;
+ }
+
+}
+
+.gardenIndicator{
+ margin-bottom:1.5rem;
+ font-size:12px;
+ position:relative;
+ .meter {
+ position: relative;
+ background: rgba(255,255,255,0.3);
+ height: 0.8em;
+ padding: 0;
+ margin:1em 0 0 1.9em;
+ border-radius:0 0.4em 0.4em 0;
+ }
+
+ .meter > span {
+ display: block;
+ height: 100%;
+ border-radius:0 0.4em 0.4em 0;
+ box-shadow: inset 0 2px 9px rgba(255,255,255,0.2), inset 0 -2px 6px rgba(0,0,0,0.2);
+ position: relative;
+ overflow: hidden;
+ transition: width 0.5s;
+ }
+
+ .gardenIndicatorPicto{
+ z-index:6;
+ position: absolute;
+ left: 0;
+ top: -0.5em;
+ font-size: 1.2em;
+ background-color: $engieWhite;
+ padding: 0.2em;
+ line-height: 1.2em;
+ width: 1.2em;
+ border-radius: 50%;
+ text-align:center;
+ border:1px solid #000;
+
+ img{
+ height: 1.2em;
+ margin:0;
+ }
+
+ }
+
+ @each $name, $color in $engieColors {
+ &.#{$name} {
+ color: $color;
+
+ .gardenIndicatorPicto {
+ border-color: $color;
+ }
+
+ .meter > span{
+ background-color:$color;
+ }
+ }
+ }
+
+}
+
+/****************************************************************************/
+/*
+/* PRELOADER
+/*
+/****************************************************************************/
+
+@keyframes spinAround {
+ from {
+ transform: rotate(0deg)
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.sk-cube-grid {
+ width: 40px;
+ height: 40px;
+ margin: 100px auto;
+
+ .sk-cube {
+ width: 33%;
+ height: 33%;
+ float: left;
+ animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+ border-radius: 50%;
+ }
+
+ .sk-cube1 { animation-delay: 0.2s; }
+ .sk-cube2 { animation-delay: 0.3s; }
+ .sk-cube3 { animation-delay: 0.4s; }
+ .sk-cube4 { animation-delay: 0.1s; }
+ .sk-cube5 { animation-delay: 0.2s; }
+ .sk-cube6 { animation-delay: 0.3s; }
+ .sk-cube7 { animation-delay: 0s; }
+ .sk-cube8 { animation-delay: 0.1s; }
+ .sk-cube9 { animation-delay: 0.2s; }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+ 0%, 70%, 100% {
+ transform: scale3D(1, 1, 1);
+ } 35% {
+ transform: scale3D(0, 0, 1);
+ }
+}
+
+/****************************************************************************/
+/*
+/* COLOR BAR
+/*
+/****************************************************************************/
+
+.colorBar{
+ height:0.2rem;
+ position:relative;
+ & > div {
+ display:block;
+ position:absolute;
+ top:0;
+ height:100%;
+ border-radius:6px;
+ &.bgEngiePink{ left:66%; width:34%; }
+ &.bgEngieYellow{ left:50%; width:16%; }
+ &.bgEngieBlueLight{ left:32%; width:18%; }
+ &.bgEngieGreenLight{ left:10%; width:22%; }
+ &.bgEngieGreen{ left:0; width:10%; }
+ &.bgEngieGreenDark{ left: 6.5%; width: 6.5%; }
+ &.bgEngieBlue{ left: 27%; width: 9%; }
+ &.bgEngieGreenDark2{ left: 46.3%; width: 8.2%; background:$engieGreenDark; }
+ &.bgEngieRed{ left: 61.5%; width: 9.8%; }
+ &.bgEngiePurple{ left: 77.5%; width: 8%; }
+
+ }
+}
+
+.gardenColorBar{ width:100%; margin:0.5rem 0;}
+
+/****************************************************************************/
+/*
+/* DRAG & DROP
+/*
+/****************************************************************************/
+
+.dropActive {
+ background-color: rgba(0,0,0,0.3);
+ border-left:1px dashed #000;
+ border-bottom:1px dashed #000;
+ opacity:0.3;
+}
+
+.dropTarget {
+ background-color: transparent;
+}
+
+.dropActive.canDrop {
+ background-color: #ee8a37;
+}
\ No newline at end of file
diff --git a/app/Resources/sass/mixins.scss b/app/Resources/sass/mixins.scss
new file mode 100644
index 0000000..e52bffb
--- /dev/null
+++ b/app/Resources/sass/mixins.scss
@@ -0,0 +1,22 @@
+@function suffix-camel-case($string){
+ $firstL : str-slice($string, 0, 1);
+ $restL : str-slice($string, 2, str-length($string));
+ $firstL : to-upper-case($firstL);
+ @return #{$firstL}#{$restL};
+}
+
+@mixin decline-prop($pre, $prop, $list){
+ @each $name, $color in $list {
+ $name : suffix-camel-case($name);
+ #{$pre}#{$name} {
+ #{$prop}: $color;
+ }
+ }
+}
+
+@mixin decline-class($list){
+ @each $name, $color in $list {
+ &.#{$name}{
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/Resources/styles/main.css b/app/Resources/styles/main.css
deleted file mode 100644
index 5ffbcc0..0000000
--- a/app/Resources/styles/main.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body{
- background:#333333;
- color:#ffffff;
-}
\ No newline at end of file
diff --git a/app/Resources/views/base.html.twig b/app/Resources/views/base.html.twig
index 461601a..bafd28d 100644
--- a/app/Resources/views/base.html.twig
+++ b/app/Resources/views/base.html.twig
@@ -3,27 +3,11 @@
{% block title %}Welcome!{% endblock %}
- {% block stylesheets %}
-
-
-
-
- {% endblock %}
+ {% block stylesheets %}{% endblock %}
{% block body %}{% endblock %}
- {% block javascripts %}
- {% if app.environment == 'dev' %}
-
- {% else %}
-
-
-
-
-
-
- {% endif %}
- {% endblock %}
+ {% block javascripts %}{% endblock %}