From a190ac0ea589c677a19c09a9686b9dd3dc430f9b Mon Sep 17 00:00:00 2001 From: Azaaxin Date: Wed, 4 Mar 2020 10:01:48 +0100 Subject: [PATCH] first commit --- css/style.css | 8 +++ gameboard.html | 40 +++++++++++++ index.php | 32 ++++++++++ scripts/blockamount.js | 4 ++ scripts/gameboard.js | 131 +++++++++++++++++++++++++++++++++++++++++ scripts/main.js | 55 +++++++++++++++++ style.css | 106 +++++++++++++++++++++++++++++++++ 7 files changed, 376 insertions(+) create mode 100644 css/style.css create mode 100644 gameboard.html create mode 100644 index.php create mode 100644 scripts/blockamount.js create mode 100644 scripts/gameboard.js create mode 100644 scripts/main.js create mode 100644 style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..238780b --- /dev/null +++ b/css/style.css @@ -0,0 +1,8 @@ +.title{ + background-color: rgb(88, 0, 0); + padding:10px; +} +.content{ + background-color: rgb(88, 0, 0); + padding: 10px; +} \ No newline at end of file diff --git a/gameboard.html b/gameboard.html new file mode 100644 index 0000000..168bede --- /dev/null +++ b/gameboard.html @@ -0,0 +1,40 @@ + + +
+ + +
diff --git a/index.php b/index.php new file mode 100644 index 0000000..6588cce --- /dev/null +++ b/index.php @@ -0,0 +1,32 @@ + + + + + My Electron Frameless Window + + + + + + +
+
+ Blocks +
+
+ + + +
+
+ +
+
+
+ + +
+ + + + diff --git a/scripts/blockamount.js b/scripts/blockamount.js new file mode 100644 index 0000000..9f51821 --- /dev/null +++ b/scripts/blockamount.js @@ -0,0 +1,4 @@ + + +$("

Include this using jquery

").appendTo("body"); +console.log($("body").html()); \ No newline at end of file diff --git a/scripts/gameboard.js b/scripts/gameboard.js new file mode 100644 index 0000000..b9b439b --- /dev/null +++ b/scripts/gameboard.js @@ -0,0 +1,131 @@ +// Game settings +var viewspeed = 500; // time the player can see the answers MS +var timeout = 1000; // Time after all cards showed +var health = 5; +var level = 9; +var difficulty = 3; +var showcontent = false; // show numbers inside the cards +// Game settings end + +var play_array = []; +var anim = 0; +var y = 1; +var correct_answers = 0; + + +function initiate(){ // Call all the functions + calc_difficulty(); + console.log(level); + make_playground(); + randomized(); + animation(); + console.log(difficulty); +} +// function animation(){ +// for(anim = 0; play_array.length > anim; anim++){ +// // document.getElementById(play_array[anim]).style.border = "3px solid green"; +// console.log(anim); +// // $("#"+play_array[anim]).addClass('animations'); + +// // setTimeout(function () { +// // $("#"+play_array[anim]).removeClass('animations'); +// // }, 2000); + + +// } +// } +function animation () { + setTimeout(function () { + $("#"+play_array[anim]).addClass('animations') + anim++; + if (play_array.length > anim) { + animation(); + }else{ + basic_timeout(); + } + }, viewspeed) + } + function basic_timeout () { + setTimeout(function () { + $(".card").removeClass('animations'); + }, timeout) + } +function clear_values(){ + play_array = []; + randoms = null; +} +function calc_difficulty(){ + if (level < 9){ // The level value cannot be lower than 9. + level = 9; + } else{ + level = level + 1; + } + difficulty = (35/100) * level + difficulty; //calc the difficulty to scale with the level + difficulty = Math.round(difficulty) // Makes the difficulty value a integer +} +function make_playground(){ + //Loop out cards on the playground + var i; + for (i = 1; i < level; i++) { //Creates a new div for each loop wth the attributes and content set below. + var div = document.createElement('div'); + if(showcontent == true){ + div.textContent = i; + } + div.setAttribute('class', 'card'); + div.setAttribute('id', i); + div.setAttribute('onClick', 'reply_click(this.id)'); // add an onClick event to the div that sends the id of it to the funcition reply_click() + document.getElementById("wrapper").appendChild(div); + } +} +function clear_playground(){ //When called, makes the playground empty + document.getElementById("wrapper").innerHTML = ""; + clear_values(); +} //hello + +function randomized(){ // Fills the array with random numbers. Max number determines by level + while(play_array.length < difficulty){ + var randoms = Math.floor(Math.random() * level) + 1; + if(play_array.indexOf(randoms) === -1){ + play_array.push(randoms); + } + } +} + +function reply_click(clicked_id){ // Grabs the value from the id on the div/card when it's clicked on. + clicked_id = Number(clicked_id); + console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id); // Console info + + if(play_array.includes(clicked_id)){ // Takes the id from the div and searches in the array for it. Returns either true or false. + document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green + document.getElementById(clicked_id).style.backgroundColor = "green"; + correct_answers++; + if(play_array.length == correct_answers) + { + alert("You survived this round!"); + } + }else{ + document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red + document.getElementById(clicked_id).style.backgroundColor = "red"; + health--; + console.log("Liv: " + health); + if(health == 0) + { + alert("Game over!"); + } + } + document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing +} +/* +pseudocode:' +/ + if (exists) clicked_id= randomized[x] = true + if (value already added skip(Done with array, if exists/contains)) = false + variable add 1 + if variable(int) == all answers(int) = true + next round + add score + else + health - 1 + if health < 5 + gameover +*/ \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..a4c87bf --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,55 @@ +// Modules to control application life and create native browser window +const {app, BrowserWindow} = require('electron') +const path = require('path') + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the JavaScript object is garbage collected. +let mainWindow + +function createWindow () { + // Create the browser window. + mainWindow = new BrowserWindow({ + width: 800, + height: 600, + frame: false, + webPreferences: { + preload: path.join(__dirname, 'preload.js'), + nodeIntegration: true + } + }) + + // and load the index.html of the app. + mainWindow.loadFile('index.html') + + // Open the DevTools. + // mainWindow.webContents.openDevTools() + + // Emitted when the window is closed. + mainWindow.on('closed', function () { + // Dereference the window object, usually you would store windows + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null + }) +} + +// This method will be called when Electron has finished +// initialization and is ready to create browser windows. +// Some APIs can only be used after this event occurs. +app.on('ready', createWindow) + +// Quit when all windows are closed. +app.on('window-all-closed', function () { + // On macOS it is common for applications and their menu bar + // to stay active until the user quits explicitly with Cmd + Q + if (process.platform !== 'darwin') app.quit() +}) + +app.on('activate', function () { + // On macOS it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (mainWindow === null) createWindow() +}) + +// In this file you can include the rest of your app's specific main process +// code. You can also put them in separate files and require them here. diff --git a/style.css b/style.css new file mode 100644 index 0000000..618a13d --- /dev/null +++ b/style.css @@ -0,0 +1,106 @@ + body { + background-color: #1d1e22; + } + + #wrapper { + /* max-width: 1200px; */ + max-width: 741px; + margin: 30px auto; + padding: 0 20px; + width: 100%; + display: grid; + grid-auto-rows: 100px; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + grid-gap: 1em; + } + .flexwrap{ + display: flex; + align-items: center; + justify-content: center; + } + .card { + border-radius: 10px; + padding: 20px; + color: rgb(255, 255, 255); + background-color:rgb(0, 94, 165); + transition: 0.5s; + } + .animations{ + border: 1px solid pink; + background-color: pink; + } + .card:hover { + box-shadow: 0 0 10px purple; + } + /* + .card:nth-child(odd) { + background-color: #55BBE9; + } + + .card:nth-child(even) { + background-color: #afbe29; + }*/ + body { + padding: 0px; + margin: 0px; + } + + #title-bar { + -webkit-app-region: drag; + height: 40px; + text-align: center; + line-height: 40px; + vertical-align: middle; + background-color: #494949; + padding: none; + margin: 0px; + } + + #title { + position: fixed; + top: 0px; + left: 6px; + color:white; + + } + + #title-bar-btns { + -webkit-app-region: no-drag; + position: fixed; + top: 0px; + right: 6px; + } + * { + box-sizing: border-box; + } +body{ + background-color: #1d1e22; +} + .wrapper { + max-width: 1200px; + margin: 30px auto; + padding: 0 20px; + width: 100%; + display: grid; + grid-auto-rows: 100px; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + grid-gap: 1em; + } + + .diavo { + border-radius: 10px; + padding: 20px; + color: #fff; + } +.diavo:hover { + box-shadow: 0 0 10px purple; + } + + .diavo:nth-child(odd) { + background-color: #55BBE9; + } + + .diavo:nth-child(even) { + background-color: #afbe29; + } + \ No newline at end of file