pascal.lafourcade
/
makeittrue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive

Browse Source
master
pisouvigne 5 years ago
parent 8ae1e1089c
commit 06a3ee82fc
5 changed files with 97 additions and 38 deletions
Show Stats Download Patch File Download Diff File

25
site/vue/css/style.css
Unescape View File

@ -24,6 +24,11 @@ body {
font-size: 8vh; font-size: 8vh;
} }
#play_container{
display: flex;
height: 100%;
}
#menu-selection { #menu-selection {
position: absolute; position: absolute;
left: 0; left: 0;
@ -245,6 +250,8 @@ hr{
} }
#playPage{ #playPage{
display: none; display: none;
flex-direction: column;
height: 50%;
} }
.border{ .border{
border-radius: 15px; border-radius: 15px;
@ -271,4 +278,22 @@ hr{
.fa-star{ .fa-star{
font-size: 10vh; font-size: 10vh;
cursor: default; cursor: default;
}
@media screen and (max-width:900px){
.fa {
font-size: 1em;
}
#titleGame{
font-size: 2em;
margin-top:35%;
}
.far {
font-size:5em;
margin: 0;
}
#setting_int{
font-size: 0.6em;
}
} }

9
site/vue/js/const.js
Unescape View File

@ -41,4 +41,11 @@ var liveColonneNumber = [];
var niveauActuel = 1; var niveauActuel = 1;
var isTuto = true; var isTuto = true;
//window
var windowWidth = 0;
var windowHeight = 0;
var mobile = false;

71
site/vue/js/func.js
Unescape View File

@ -1,8 +1,9 @@
function openModal(modal) { function openModal(modalId) {
var modal = document.getElementById(modal); var modal = document.getElementById(modalId);
modal.style.display = "block"; modal.style.display = "block";
} }
function closeModal(modal) { function closeModal(modal) {
var modal = document.getElementById(modal); var modal = document.getElementById(modal);
@ -37,7 +38,7 @@ function dysFont() {
function setColor(color) { function setColor(color) {
if (color == "black") { if (color == "black") {
var backgroundToChange = document.querySelectorAll(".background"); var backgroundToChange = document.querySelectorAll(".background");
backgroundToChange.forEach(function(element){ backgroundToChange.forEach(function (element) {
element.style.backgroundColor = blackColor; element.style.backgroundColor = blackColor;
}); });
document.body.style.color = whiteColor; document.body.style.color = whiteColor;
@ -46,14 +47,14 @@ function setColor(color) {
hr.forEach(function (item) { hr.forEach(function (item) {
item.setAttribute("style", "border : 3px solid " + whiteColor); item.setAttribute("style", "border : 3px solid " + whiteColor);
}); });
document.querySelectorAll(".border").forEach(function(element){ document.querySelectorAll(".border").forEach(function (element) {
element.style.border = "5px solid" + whiteColor; element.style.border = "5px solid" + whiteColor;
}); });
} else { } else {
document.body.style.color = blackColor; document.body.style.color = blackColor;
var backgroundToChange = document.querySelectorAll(".background"); var backgroundToChange = document.querySelectorAll(".background");
backgroundToChange.forEach(function(element){ backgroundToChange.forEach(function (element) {
element.style.backgroundColor = whiteColor; element.style.backgroundColor = whiteColor;
}); });
document.getElementById("setting_int").style.color = blackColor; document.getElementById("setting_int").style.color = blackColor;
@ -61,7 +62,7 @@ function setColor(color) {
hr.forEach(function (item) { hr.forEach(function (item) {
item.setAttribute("style", "border : 3px solid " + blackColor); item.setAttribute("style", "border : 3px solid " + blackColor);
}); });
document.querySelectorAll(".border").forEach(function(element){ document.querySelectorAll(".border").forEach(function (element) {
element.style.border = "5px solid" + blackColor; element.style.border = "5px solid" + blackColor;
}); });
} }
@ -126,7 +127,7 @@ function changeLineColor(idLine) {
var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive; var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
line.stroke(colorline); line.stroke(colorline);
} }
function changeLineColorInput(idLine,color) { function changeLineColorInput(idLine, color) {
let line = stage.findOne("#" + idLine); let line = stage.findOne("#" + idLine);
console.log("changer"); console.log("changer");
line.stroke(color); line.stroke(color);
@ -248,7 +249,7 @@ function checkEnd() {
} }
} }
function nextLevel(){ function nextLevel() {
niveauActuel++; niveauActuel++;
timeTot = timeTot + timer.getTimeValues().seconds; timeTot = timeTot + timer.getTimeValues().seconds;
launchGameOne(); launchGameOne();
@ -299,24 +300,24 @@ document.querySelector("#active_line_picker").addEventListener("input", activeLi
document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false); document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false);
document.querySelector("#inactive_end_picker").addEventListener("input", inactiveEndInput, false); document.querySelector("#inactive_end_picker").addEventListener("input", inactiveEndInput, false);
function changeAllSwitchColorActive(color){ function changeAllSwitchColorActive(color) {
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function (element) {
var switche = stage.findOne("#"+element.id); var switche = stage.findOne("#" + element.id);
if(switche.fill() == colorSwitchActiveBackground){ if (switche.fill() == colorSwitchActiveBackground) {
switche.fill(color); switche.fill(color);
} }
}); });
colorSwitchActiveBackground = color; colorSwitchActiveBackground = color;
layer.draw(); layer.draw();
} }
function changeEndColorInActive(color){ function changeEndColorInActive(color) {
stage.findOne("#end").fill(color); stage.findOne("#end").fill(color);
layer.draw(); layer.draw();
} }
function changeAllSwitchColorInActive(color){ function changeAllSwitchColorInActive(color) {
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function (element) {
var switche = stage.findOne("#"+element.id); var switche = stage.findOne("#" + element.id);
if(switche.fill() == colorSwitchInnactiveBackground){ if (switche.fill() == colorSwitchInnactiveBackground) {
switche.fill(color); switche.fill(color);
} }
}); });
@ -324,48 +325,48 @@ function changeAllSwitchColorInActive(color){
layer.draw(); layer.draw();
} }
function changeAllLineColorActive(color){ function changeAllLineColorActive(color) {
var line1 = stage.findOne("#line2"); var line1 = stage.findOne("#line2");
var line2 = stage.findOne("#line3"); var line2 = stage.findOne("#line3");
var line3 = stage.findOne("#line4"); var line3 = stage.findOne("#line4");
if(line1.stroke() === colorLineActive){ if (line1.stroke() === colorLineActive) {
line1.stroke(color); line1.stroke(color);
} }
if(line2.stroke() === colorLineActive){ if (line2.stroke() === colorLineActive) {
line2.stroke(color); line2.stroke(color);
} }
if(line3.stroke() === colorLineActive){ if (line3.stroke() === colorLineActive) {
line3.stroke(color); line3.stroke(color);
} }
colorLineActive = color; colorLineActive = color;
layer.draw(); layer.draw();
} }
function changeAllLineColorInActive(color){ function changeAllLineColorInActive(color) {
var line1 = stage.findOne("#line2"); var line1 = stage.findOne("#line2");
var line2 = stage.findOne("#line3"); var line2 = stage.findOne("#line3");
var line3 = stage.findOne("#line4"); var line3 = stage.findOne("#line4");
if(line1.stroke() === colorLineInnactive){ if (line1.stroke() === colorLineInnactive) {
line1.stroke(color); line1.stroke(color);
} }
if(line2.stroke() === colorLineInnactive){ if (line2.stroke() === colorLineInnactive) {
line2.stroke(color); line2.stroke(color);
} }
if(line3.stroke() === colorLineInnactive){ if (line3.stroke() === colorLineInnactive) {
line3.stroke(color); line3.stroke(color);
} }
colorLineInnactive = color; colorLineInnactive = color;
layer.draw(); layer.draw();
} }
function play(){ function play() {
niveauActuel = 1; niveauActuel = 1;
document.querySelector("#mainPage").style.display = 'none'; document.querySelector("#mainPage").style.display = 'none';
document.querySelector("#playPage").style.display = 'block'; document.querySelector("#playPage").style.display = 'flex';
timeTot = 0; timeTot = 0;
launchGameOne(); launchGameOne();
} }
function launchGameOne(){ function launchGameOne() {
document.querySelector(".niveau").innerHTML = niveauActuel; document.querySelector(".niveau").innerHTML = niveauActuel;
timer.stop(); timer.stop();
timer.reset(); timer.reset();
@ -373,14 +374,14 @@ function launchGameOne(){
gameOne(); gameOne();
} }
function clearArray(arr){ function clearArray(arr) {
while(arr.length > 0) { while (arr.length > 0) {
arr.pop(); arr.pop();
} }
return arr.splice(0,arr.length); return arr.splice(0, arr.length);
} }
function closeGame(){ function closeGame() {
timer.stop(); timer.stop();
document.querySelector("#mainPage").style.display = 'block'; document.querySelector("#mainPage").style.display = 'block';
document.querySelector("#playPage").style.display = 'none'; document.querySelector("#playPage").style.display = 'none';
@ -388,10 +389,10 @@ function closeGame(){
tutoCreateLayer(); tutoCreateLayer();
} }
var rotated = false; var rotated = false;
function flip(){ function flip() {
document.querySelectorAll(".fa").forEach(function(element){ document.querySelectorAll(".fa").forEach(function (element) {
deg = rotated ? 0 : 360; deg = rotated ? 0 : 360;
element.style.transform = 'rotate('+deg+'deg)'; element.style.transform = 'rotate(' + deg + 'deg)';
}); });
rotated = !rotated; rotated = !rotated;
} }

4
site/vue/js/init.js
Unescape View File

@ -1,7 +1,7 @@
function initAllSwitch() { function initAllSwitch() {
switchs.forEach(function (element) { switchs.forEach(function (element) {
let switche = stage.findOne("#" + element); let switche = stage.findOne("#" + element);
switche.on('click', function () { switche.on('click touchstart', function () {
let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground; let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground;
switche.fill(colorrect); switche.fill(colorrect);
@ -10,7 +10,7 @@ function initAllSwitch() {
layer.draw(); layer.draw();
checkEnd(); checkEnd();
}); });
switche.on('mouseover', function () { switche.on('mousedown', function () {
document.body.style.cursor = "pointer"; document.body.style.cursor = "pointer";
}); });
switche.on('mouseout', function () { switche.on('mouseout', function () {

26
site/vue/js/main.js
Unescape View File

@ -20,6 +20,7 @@ tutoCreateLayer();
function tutoCreateLayer() { function tutoCreateLayer() {
isTuto = true; isTuto = true;
width = window.innerWidth - window.innerWidth / 100 * 30; width = window.innerWidth - window.innerWidth / 100 * 30;
height = window.innerHeight /2.5;
stage = new Konva.Stage({ stage = new Konva.Stage({
container: 'setting_container', container: 'setting_container',
width: width, width: width,
@ -64,6 +65,8 @@ function gameOne() {
} }
function createGameOne(niveau){ function createGameOne(niveau){
windowWidth = window.innerWidth;
windowHeight = window.innerHeight ;
var numberColonne1 = 2; var numberColonne1 = 2;
var numberColonne2 = 1; var numberColonne2 = 1;
var isEtNonAllowed = false; var isEtNonAllowed = false;
@ -110,6 +113,7 @@ function createGameOne(niveau){
break; break;
} }
timeEnd = 500;
isTuto = false; isTuto = false;
stage = new Konva.Stage({ stage = new Konva.Stage({
container: 'play_container', container: 'play_container',
@ -168,6 +172,28 @@ function createGameOne(niveau){
initAllSwitch(); initAllSwitch();
createEnd(); createEnd();
initEnd(); initEnd();
console.log(layer.scaleX());
checkAllSortieLogique(); checkAllSortieLogique();
}
window.addEventListener('resize', changeStage);
function changeStage(){
if(window.innerWidth <= 900){
console.log("mobile");
if(!mobile){
stage.rotate(90);
stage.x(stage.getX() + stage.height());
mobile = true;
}
}else{
stage.scaleX(window.innerWidth / windowWidth);
console.log(document.querySelector("#play_container").offsetHeight);
stage.scaleY(window.innerHeight / windowHeight);
}
stage.draw();
} }
Write Preview
Loading…
Cancel
Save