d

d

SRC/public/css/frontend.css

@@ -172,7 +172,22 @@ button.level:active {
     cursor:pointer;
     background-position: center center;
     background-size:cover;
+    line-height:100px;
+    font-weight:bold;
+    font-size:40px;
 }
 #imgRef:active {
     cursor:wait;
 }
+
+.trophy-text {
+    font-weight: bold;
+    line-height: 40px;
+    font-size: 25px;
+    color: gold;
+    display: inline-block;
+    padding: 0 15px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7)
+}

SRC/public/js/fire-work.js

@@ -0,0 +1,254 @@
+var SCREEN_WIDTH = window.innerWidth,
+    SCREEN_HEIGHT = window.innerHeight,
+    mousePos = {
+        x: 400,
+        y: 300
+    },
+
+// create canvas
+    canvas = document.createElement('canvas'),
+    context = canvas.getContext('2d'),
+    particles = [],
+    rockets = [],
+    MAX_PARTICLES = 400,
+    colorCode = 0;
+
+
+
+// update mouse position
+window.addEventListener('mousemove', function(e) {
+    e.preventDefault();
+    mousePos = {
+        x: e.clientX,
+        y: e.clientY
+    };
+});
+
+// launch more rockets!!!
+window.addEventListener('mousedown', function(e) {
+    for (var i = 0; i < 5; i++) {
+        launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
+    }
+});
+
+function launch() {
+    launchFrom(mousePos.x);
+}
+
+function launchFrom(x) {
+    if (rockets.length < 10) {
+        var rocket = new Rocket(x);
+        rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
+        rocket.vel.y = Math.random() * -3 - 4;
+        rocket.vel.x = Math.random() * 6 - 3;
+        rocket.size = 8;
+        rocket.shrink = 0.999;
+        rocket.gravity = 0.01;
+        rockets.push(rocket);
+    }
+}
+
+function loop() {
+    // update screen size
+    if (SCREEN_WIDTH != window.innerWidth) {
+        canvas.width = SCREEN_WIDTH = window.innerWidth;
+    }
+    if (SCREEN_HEIGHT != window.innerHeight) {
+        canvas.height = SCREEN_HEIGHT = window.innerHeight;
+    }
+
+    // clear canvas
+    context.fillStyle = "rgba(0, 0, 0, 0.05)";
+    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+    var existingRockets = [];
+
+    for (var i = 0; i < rockets.length; i++) {
+        // update and render
+        rockets[i].update();
+        rockets[i].render(context);
+
+        // calculate distance with Pythagoras
+        var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
+
+        // random chance of 1% if rockets is above the middle
+        var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;
+
+        /* Explosion rules
+         - 80% of screen
+         - going down
+         - close to the mouse
+         - 1% chance of random explosion
+         */
+        if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
+            rockets[i].explode();
+        } else {
+            existingRockets.push(rockets[i]);
+        }
+    }
+
+    rockets = existingRockets;
+
+    var existingParticles = [];
+
+    for (var i = 0; i < particles.length; i++) {
+        particles[i].update();
+
+        // render and save particles that can be rendered
+        if (particles[i].exists()) {
+            particles[i].render(context);
+            existingParticles.push(particles[i]);
+        }
+    }
+
+    // update array with existing particles - old particles should be garbage collected
+    particles = existingParticles;
+
+    while (particles.length > MAX_PARTICLES) {
+        particles.shift();
+    }
+}
+
+function Particle(pos) {
+    this.pos = {
+        x: pos ? pos.x : 0,
+        y: pos ? pos.y : 0
+    };
+    this.vel = {
+        x: 0,
+        y: 0
+    };
+    this.shrink = .97;
+    this.size = 2;
+
+    this.resistance = 1;
+    this.gravity = 0;
+
+    this.flick = false;
+
+    this.alpha = 1;
+    this.fade = 0;
+    this.color = 0;
+}
+
+Particle.prototype.update = function() {
+    // apply resistance
+    this.vel.x *= this.resistance;
+    this.vel.y *= this.resistance;
+
+    // gravity down
+    this.vel.y += this.gravity;
+
+    // update position based on speed
+    this.pos.x += this.vel.x;
+    this.pos.y += this.vel.y;
+
+    // shrink
+    this.size *= this.shrink;
+
+    // fade out
+    this.alpha -= this.fade;
+};
+
+Particle.prototype.render = function(c) {
+    if (!this.exists()) {
+        return;
+    }
+
+    c.save();
+
+    c.globalCompositeOperation = 'lighter';
+
+    var x = this.pos.x,
+        y = this.pos.y,
+        r = this.size / 2;
+
+    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
+    gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
+    gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
+    gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
+
+    c.fillStyle = gradient;
+
+    c.beginPath();
+    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
+    c.closePath();
+    c.fill();
+
+    c.restore();
+};
+
+Particle.prototype.exists = function() {
+    return this.alpha >= 0.1 && this.size >= 1;
+};
+
+function Rocket(x) {
+    Particle.apply(this, [{
+        x: x,
+        y: SCREEN_HEIGHT}]);
+
+    this.explosionColor = 0;
+}
+
+Rocket.prototype = new Particle();
+Rocket.prototype.constructor = Rocket;
+
+Rocket.prototype.explode = function() {
+    var count = Math.random() * 10 + 80;
+
+    for (var i = 0; i < count; i++) {
+        var particle = new Particle(this.pos);
+        var angle = Math.random() * Math.PI * 2;
+
+        // emulate 3D effect by using cosine and put more particles in the middle
+        var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
+
+        particle.vel.x = Math.cos(angle) * speed;
+        particle.vel.y = Math.sin(angle) * speed;
+
+        particle.size = 10;
+
+        particle.gravity = 0.2;
+        particle.resistance = 0.92;
+        particle.shrink = Math.random() * 0.05 + 0.93;
+
+        particle.flick = true;
+        particle.color = this.explosionColor;
+
+        particles.push(particle);
+    }
+};
+
+Rocket.prototype.render = function(c) {
+    if (!this.exists()) {
+        return;
+    }
+
+    c.save();
+
+    c.globalCompositeOperation = 'lighter';
+
+    var x = this.pos.x,
+        y = this.pos.y,
+        r = this.size / 2;
+
+    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
+    gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
+    gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");
+
+    c.fillStyle = gradient;
+
+    c.beginPath();
+    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
+    c.closePath();
+    c.fill();
+
+    c.restore();
+};
+
+
+document.body.appendChild(canvas);
+canvas.width = SCREEN_WIDTH;
+canvas.height = SCREEN_HEIGHT;
+setInterval(launch, 800);
+setInterval(loop, 1000 / 50);

SRC/resources/views/frontend/games.blade.php

@@ -4,7 +4,7 @@
 @section('content')
     <div style="text-align:center">
         
-        <div id="imgRef" style="background-image:url('{{ $ref -> image }}'); line-height:100px;font-weight:bold;">
+        <div id="imgRef" style="background-image:url('{{ $ref -> image }}');">
         </div>
         <br>
         
@@ -15,15 +15,18 @@
         <br>
         <div style="display:inline-block;">
             <img style="height:100px; vertical-align:middle;width:100px" src="{{ URL::to('imgs/trophees/bronze.png') }}"><br>
-            {{$nbBronze}}
+            <div class="trophy-text" style="color:chocolate;">{{$nbBronze}}</div>
+
         </div>
         <div style="display:inline-block;">
             <img style="height:100px; vertical-align:middle;width:100px" src="{{ URL::to('imgs/trophees/argent.png') }}"><br>
-            {{$nbArgent}}
+            <div class="trophy-text" style="color:#c0c0c0;">{{$nbArgent}}</div>
+
         </div>
         <div style="display:inline-block;">
             <img style="height:100px; vertical-align:middle;width:100px" src="{{ URL::to('imgs/trophees/or.png') }}"><br>
-            {{$nbOr}}
+            <div class="trophy-text" style="color:gold;">{{$nbOr}}</div>
+
         </div>
     </div>
 @endsection

SRC/resources/views/frontend/puzzle.blade.php

@@ -6,15 +6,49 @@
     <script type="text/javascript">
 
         function getPieceWidth(w,h) {
+
+            //cas où l'image rentre dans l'écran, on ne fais rien
+            if(h<y && w<x) {
+                return w * ratioImage;
+            }
+
+            //cas où l'image est plus large et haute, on prend le meilleur ratio pour pas redimensionner 2 fois
+
+            if(h/y > w/x) { //il faut redimensionner en hauteur
+                console.log("il faut redimensionner en hauteur")
+                return w * y/h * ratioImage;
+            } else { //on redimensionne en largeur
+                return x * ratioImage;
+            }
+        }
+
+        function getPieceHeight(w,h) {
+            if(h<y && w<x) {
+                return h * ratioImage;
+            }
+
+            if(h/y > w/x) { //il faut redimensionner en hauteur
+                return y * ratioImage;
+            } else {
+                return h * x/w * ratioImage;
+            }
+        }
+
+
+
+
+
+
+        /*function getPieceWidthOld(w,h) {
             //if(h>w) {
                 return w * (y * ratioImage)/h;
             //} else return x * ratioImage;
         }
-        function getPieceHeight(w,h) {
+        function getPieceHeightOld(w,h) {
             //if(h>w) {
                 return y * ratioImage;
             //} else return h * (x * ratioImage)/w;
-        }
+        }*/
         function preload () {
             game.load.spritesheet('balls', '{{ URL::to('imgs/puzzle/balls.png') }}', 17, 17);
             game.load.image('trophy3', '{{ URL::to('imgs/trophees/or.png') }}');
@@ -61,19 +95,20 @@
 
                 }
             }  
-            dateDebut = new Date();
         }
-        function drawGrid() {
+        function drawGrid(idTab) {
-            pieces.forEach(function(item){
 
+                var graphics = game.add.graphics();
+                graphics.lineStyle(2, 0xff0000, 1);
 
+                graphics.moveTo(10, 10);
+                graphics.lineTo(Math.floor(getPieceWidth(selection[idTab-1].width, selection[idTab-1].height)) + 10,
+                 10);
 
+                 graphics.lineTo(Math.floor(getPieceWidth(selection[idTab-1].width, selection[idTab-1].height)) + 10,
+                 Math.floor(getPieceHeight(selection[idTab-1].width, selection[idTab-1].height)) + 10);
 
-            });
+                 graphics.lineTo(10,10);
-                var graphics = game.add.graphics(0, 0);
-                graphics.lineStyle(1, 0xff0000, 1);
-                graphics.moveTo(800, 0);
-                graphics.lineTo(100, 0);
         }
         function create () {
             this.button3 = this.add.button(0, 0, 'previous', changePage);
@@ -82,6 +117,8 @@
 
             this.physics.startSystem(Phaser.Physics.ARCADE);
             createPiecesFor(1);
+            drawGrid(1);
+            dateDebut = new Date();
         }
         function changePage() {
             if (confirm('Quitter le jeu ?')) {
@@ -170,13 +207,13 @@
                     if(piece.placed == true) cpt++
                 });
                 if(cpt==pieces.length) {
+                    pieces.forEach(function(item){item.input.draggable = false;});
+                    if(nbToPlay == currentPlayed)
+                    {
                         var temps = Math.ceil(((new Date()) - dateDebut)/60000);
                         var texteADire = (temps <= 1) ? "Bravo, tu as mis moins d'une minute." :
                         "Bravo, tu as mis "+temps+" minutes. ";;
                         responsiveVoice.speak(texteADire, "French Female");
-                    pieces.forEach(function(item){item.input.draggable = false;});
-                    if(nbToPlay == currentPlayed)
-                    {
                         leftEmitter = game.add.emitter(50, 50);
                         leftEmitter.bounce.setTo(0.8, 0.8);
                         leftEmitter.setXSpeed(100, 200);
@@ -236,7 +273,8 @@
         }
             
         var leftEmitter, rightEmitter;
-            var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
+            var x = window.innerWidth;
+            var y = window.innerHeight;
             var pieces = null;
             var dateDebut = null;