mirror of
https://github.com/LucasVbr/EnglishRolePlayGame.git
synced 2026-05-13 17:11:50 +00:00
Edit
This commit is contained in:
LucasVbr
Generated
+5
@@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
Generated
+13
@@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
<orderEntry type="library" name="jquery-3.6.0" level="application" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
+16
@@ -0,0 +1,16 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
|
||||||
|
<option name="myCustomPropertiesEnabled" value="true" />
|
||||||
|
<option name="myIgnoreVendorSpecificProperties" value="false" />
|
||||||
|
<option name="myCustomPropertiesList">
|
||||||
|
<value>
|
||||||
|
<list size="1">
|
||||||
|
<item index="0" class="java.lang.String" itemvalue="user-select" />
|
||||||
|
</list>
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
Generated
+6
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="JavaScriptLibraryMappings">
|
||||||
|
<file url="PROJECT" libraries="{jquery-3.6.0}" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Generated
+8
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/EnglishRolePlayGame.iml" filepath="$PROJECT_DIR$/.idea/EnglishRolePlayGame.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Generated
+6
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@@ -15,6 +15,11 @@
|
|||||||
--dark-purple: #8e44ad;
|
--dark-purple: #8e44ad;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-y: hidden;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
.container {min-height: 100vh;}
|
.container {min-height: 100vh;}
|
||||||
|
|
||||||
#turn {
|
#turn {
|
||||||
@@ -24,34 +29,44 @@
|
|||||||
transition: 0.25s all ease-in-out;
|
transition: 0.25s all ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#turn.turn-hacker {
|
|
||||||
|
#particles-js {
|
||||||
|
transition: 0.25s all ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start {
|
||||||
|
background-color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.turn-hacker {
|
||||||
background-color: var(--red);
|
background-color: var(--red);
|
||||||
}
|
}
|
||||||
#turn.turn-cyber {
|
.turn-cyber {
|
||||||
background-color:var(--blue);
|
background-color:var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {margin: 100px 0;}
|
.title {margin: 100px 0;}
|
||||||
|
|
||||||
#answers_canvas.turn_hacker .choose-btn {
|
#answers_canvas.turn_hacker .choose-btn {
|
||||||
box-shadow: var(--red) 0px 0px 25px;
|
box-shadow: var(--red) 0 0 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#answers_canvas.turn_hacker .choose-btn {
|
#answers_canvas.turn_hacker .choose-btn {
|
||||||
box-shadow: var(--blue) 0px 0px 25px;
|
box-shadow: var(--blue) 0 0 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-btn {
|
.choose-btn {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
|
color: var(--white);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
transition: all 0.1s ease-out;
|
transition: all 0.1s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-btn:hover {
|
.choose-btn:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0px 0px 5px;
|
box-shadow: 0 0 5px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
+82
-58
@@ -1,73 +1,97 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Let's Hack the NASA</title>
|
<title>Let's Hack the NASA</title>
|
||||||
<!-- Required meta tags -->
|
<!-- Required meta tags -->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
<!-- Bootstrap CSS v5.0.2 -->
|
<!-- Bootstrap CSS v5.0.2 -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
||||||
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="container" class="container">
|
|
||||||
<!-- Header -->
|
|
||||||
<div style="visibility:hidden" id="turn_canvas" class="row text-center">
|
|
||||||
<h3 id=turn class="turn-hacker unselectable">Hacker's turn</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Question -->
|
<div style="z-index: -50; position: absolute; width: 100vw; height: 100vh;" class="start" id="particles-js"></div>
|
||||||
<div style="padding-top: 30vh;" class="row text-center">
|
|
||||||
<h1 id="title" class="unselectable">Input players pseudo</h1>
|
<div style="position: absolute">
|
||||||
|
<p>
|
||||||
|
Points:<br>
|
||||||
|
Hacker:<span id="hacker-points">0</span><br>
|
||||||
|
Cyber:<span id="cyber-points">0</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="container" class="container">
|
||||||
|
<!-- Header -->
|
||||||
|
<div style="visibility:hidden" id="turn_canvas" class="row text-center">
|
||||||
|
<h3 id=turn class="unselectable">Hacker's turn</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Question -->
|
||||||
|
<div style="padding-top: 30vh;" class="row text-center">
|
||||||
|
<h1 id="title" class="unselectable">Input players pseudo</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Input pseudo -->
|
||||||
|
<div id="pseudo_canvas" style="padding-bottom: 50px;" class="row text-center fixed-bottom">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input id="player_one_input" type="text" placeholder="Player 1"/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<!-- Input pseudo -->
|
<input id="player_two_input" type="text" placeholder="Player 2"/>
|
||||||
<div id="pseudo_canvas" style="padding-bottom: 50px;" class="row text-center fixed-bottom">
|
</div>
|
||||||
<div class="col-md-6">
|
<div style="margin-top: 100px;" class="col-md-12">
|
||||||
<input id="player_one_input" type="text" placeholder="Player 1"/>
|
<input onclick="startGame()" class="btn btn-primary" type="button" value="Let's start the game"/>
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<input id="player_two_input" type="text" placeholder="Player 2"/>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 100px;" class="col-md-12">
|
|
||||||
<input onclick="startGame()" class="btn btn-primary" type="button" value="Let's start the game"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Answers -->
|
|
||||||
<div id="answers_canvas" style="margin-bottom: 5px;" class="row text-center fixed-bottom">
|
|
||||||
<div class=" col-md-6">
|
|
||||||
<div onclick="nextTurn(turn)" id="answer1" class="btn choose-btn unselectable"></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div onclick="nextTurn(turn)" id="answer2" class="btn choose-btn unselectable"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Answers -->
|
||||||
<script>
|
<div id="answers_canvas" style="margin-bottom: 5px;" class="row text-center fixed-bottom">
|
||||||
let turnCanvasElement = document.getElementById("turn_canvas");
|
<div class=" col-md-6">
|
||||||
let turnTitle = document.getElementById("turn");
|
<div onclick="nextTurn(turn, 0)" id="answer1" class="btn choose-btn unselectable"></div>
|
||||||
|
</div>
|
||||||
let pseudoCanvasElement = document.getElementById("pseudo_canvas");
|
<div class="col-md-6">
|
||||||
let playerOneInput = document.getElementById("player_one_input");
|
<div onclick="nextTurn(turn, 1)" id="answer2" class="btn choose-btn unselectable"></div>
|
||||||
let playerTwoInput = document.getElementById("player_two_input");
|
</div>
|
||||||
|
</div>
|
||||||
let titleElement = document.getElementById("title");
|
</div>
|
||||||
|
|
||||||
let answersCanvasElement = document.getElementById("answers_canvas");
|
|
||||||
let answerOneInput = document.getElementById("answer1");
|
|
||||||
let answerTwoInput = document.getElementById("answer2");
|
|
||||||
|
|
||||||
answersCanvasElement.style.visibility = "hidden";
|
|
||||||
</script>
|
|
||||||
<script src="data.js"></script>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
|
|
||||||
<!-- Bootstrap JavaScript Libraries -->
|
<!-- Bootstrap JavaScript Libraries -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
</body>
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
|
||||||
|
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="./lib/particles.js-master/particles.js"></script>
|
||||||
|
|
||||||
|
<!-- My JS -->
|
||||||
|
<script>
|
||||||
|
let hackerPoints = document.getElementById("hacker-points");
|
||||||
|
let cyberPoints = document.getElementById("cyber-points");
|
||||||
|
|
||||||
|
let backgroundElement = document.getElementById("particles-js");
|
||||||
|
let turnCanvasElement = document.getElementById("turn_canvas");
|
||||||
|
let turnTitle = document.getElementById("turn");
|
||||||
|
|
||||||
|
let pseudoCanvasElement = document.getElementById("pseudo_canvas");
|
||||||
|
let playerOneInput = document.getElementById("player_one_input");
|
||||||
|
let playerTwoInput = document.getElementById("player_two_input");
|
||||||
|
|
||||||
|
let titleElement = document.getElementById("title");
|
||||||
|
|
||||||
|
let answersCanvasElement = document.getElementById("answers_canvas");
|
||||||
|
let answerOneInput = document.getElementById("answer1");
|
||||||
|
let answerTwoInput = document.getElementById("answer2");
|
||||||
|
|
||||||
|
answersCanvasElement.style.visibility = "hidden";
|
||||||
|
</script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
<script src="js/data.js"></script>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,118 @@
|
|||||||
|
particlesJS('particles-js',
|
||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 40,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 5,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 6,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "grab"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 200,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true,
|
||||||
|
"config_demo": {
|
||||||
|
"hide_card": false,
|
||||||
|
"background_color": "#b61924",
|
||||||
|
"background_image": "",
|
||||||
|
"background_position": "50% 50%",
|
||||||
|
"background_repeat": "no-repeat",
|
||||||
|
"background_size": "cover"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
+102
-82
@@ -1,82 +1,102 @@
|
|||||||
let data = [
|
let data = [
|
||||||
{
|
{
|
||||||
question:"You conceived a virus: do you sell it?",
|
question:"You conceived a virus: do you sell it?",
|
||||||
answers: ["Yes","No"]
|
answers: ["Yes","No"],
|
||||||
},
|
points: [3, 2]
|
||||||
{
|
},
|
||||||
question:"You have to protect the NASA from cyber attacks, what do you do?",
|
{
|
||||||
answers: ["I implement a password manager","I raise employee awareness"]
|
question:"You have to protect the NASA from cyber attacks, what do you do?",
|
||||||
},
|
answers: ["I implement a password manager","I raise employee awareness"],
|
||||||
{
|
points: [3, 2]
|
||||||
question: "Do you send a phishing email to E-Corp (a NASA subsidiary) with your virus?",
|
},
|
||||||
answers: ["Yes","No"]
|
{
|
||||||
},
|
question: "Do you send a phishing email to E-Corp (a NASA subsidiary) with your virus?",
|
||||||
{
|
answers: ["Yes","No"],
|
||||||
question: "Today, half of the company's computers have crashed: all the processors have imploded and caused a fire in the building, what do you do?",
|
points: [4, 1]
|
||||||
answers: ["I put water to put out the fire","I cut the company's power supply in an emergency"]
|
},
|
||||||
},
|
{
|
||||||
{
|
question: "Today, half of the company's computers have crashed: all the processors have imploded and caused a fire in the building, what do you do?",
|
||||||
question: "Do I get information about NASA employees?",
|
answers: ["I put water to put out the fire","I cut the company's power supply in an emergency"],
|
||||||
answers: ["Yes","No"]
|
points: [1, 4]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question:"Do you update the company's VPS virus database?",
|
question: "Do I get information about NASA employees?",
|
||||||
answers: ["Yes","No"]
|
answers: ["Yes","No"],
|
||||||
},
|
points: [3, 2]
|
||||||
{
|
},
|
||||||
question:"You develop a Trojan horse, do you want to publish it on the darkweb?",
|
{
|
||||||
answers: ["Yes","No"]
|
question:"Do you update the company's VPS virus database?",
|
||||||
},
|
answers: ["Yes","No"],
|
||||||
{
|
points: [3, 2]
|
||||||
question:"Do you spend all day surfing hacking forums?",
|
},
|
||||||
answers: ["Yes","No"]
|
{
|
||||||
},
|
question:"You develop a Trojan horse, do you want to publish it on the darkweb?",
|
||||||
{
|
answers: ["Yes","No"],
|
||||||
question:"Do you want to launch a DDoS attack on the delivery website of the local pizzeria?",
|
points: [4, 1]
|
||||||
answers: ["Yes","No"]
|
},
|
||||||
},
|
{
|
||||||
{
|
question:"Do you spend all day surfing hacking forums?",
|
||||||
question:"Although you have tried to protect the company, you are a victim of ransomware, what do you do?",
|
answers: ["Yes","No"],
|
||||||
answers: ["I disconnect all the power supplies and the company network","I wait for the director to pay the ransom"]
|
points: [2, 3]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question:"To protect your money do you convert it into Bitcoin?",
|
question:"Do you want to launch a DDoS attack on the delivery website of the local pizzeria?",
|
||||||
answers: ["Yes","No"]
|
answers: ["Yes","No"],
|
||||||
},
|
points: [3, 2]
|
||||||
{
|
},
|
||||||
question:"You have discovered a virus with interesting technology.",
|
{
|
||||||
answers: ["You try to trace the hacker from it","You show it to the police and inform the director"]
|
question:"Although you have tried to protect the company, you are a victim of ransomware, what do you do?",
|
||||||
},
|
answers: ["I disconnect all the power supplies and the company network","I wait for the director to pay the ransom"],
|
||||||
{
|
points: [3, 2]
|
||||||
question:"You become more and more known in the hacking world and you decide to set up a team, do you attack the NSA?",
|
},
|
||||||
answers: ["Yes","No"]
|
{
|
||||||
},
|
question:"To protect your money do you convert it into Bitcoin?",
|
||||||
{
|
answers: ["Yes","No"],
|
||||||
question:"While surfing on darkweb forums, you heard about the creation of a suspicious team of hackers.",
|
points: [3, 2]
|
||||||
answers: ["You try to infiltrate them","You hire someone to track them down"]
|
},
|
||||||
},
|
{
|
||||||
{
|
question:"You have discovered a virus with interesting technology.",
|
||||||
question:"A member of your team reported you to the authorities, what do you do?",
|
answers: ["You try to trace the hacker from it","You show it to the police and inform the director"],
|
||||||
answers: ["I move all my money to another bank and change my identity","I move to another country"]
|
points: [4, 1]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question:"You just got a promotion for your investment in the company. Do you invite your friends to celebrate this good news?",
|
question:"You become more and more known in the hacking world and you decide to set up a team, do you attack the NSA?",
|
||||||
answers: ["Yes","No, I'm already invited to another party"]
|
answers: ["Yes","No"],
|
||||||
},
|
points: [3, 2]
|
||||||
{
|
},
|
||||||
question:"Friends invite me to a party, do you go?",
|
{
|
||||||
answers: ["Yes, no worries, my group will carry out an attack during the night","No, I could be attacked when I'm away"]
|
question:"While surfing on darkweb forums, you heard about the creation of a suspicious team of hackers.",
|
||||||
},
|
answers: ["You try to infiltrate them","You hire someone to track them down"],
|
||||||
{
|
points: [3, 3]
|
||||||
question:"During your party you get a call from your boss who informs you that someone has entered the HoneyPot you set up.",
|
},
|
||||||
answers: ["I continue the party because I am confident in my technology","I leave the party and drive back to work (drink driving again...)"]
|
{
|
||||||
},
|
question:"A member of your team reported you to the authorities, what do you do?",
|
||||||
{
|
answers: ["I move all my money to another bank and change my identity","I move to another country"],
|
||||||
question:"You program a website that sells the NASA information, do you put up the information of your friend who works there?",
|
points: [4, 1]
|
||||||
answers: ["Yes","No"]
|
},
|
||||||
},
|
{
|
||||||
{
|
question:"You just got a promotion for your investment in the company. Do you invite your friends to celebrate this good news?",
|
||||||
question:"You hack the website and have access to the information of the hackers, do you want to reveal their identities to the public?",
|
answers: ["Yes","No, I'm already invited to another party"],
|
||||||
answers: ["Yes","No"]
|
points: [3, 2]
|
||||||
}
|
},
|
||||||
];
|
{
|
||||||
|
question:"Friends invite me to a party, do you go?",
|
||||||
|
answers: ["Yes, no worries, my group will carry out an attack during the night","No, I could be attacked when I'm away"],
|
||||||
|
points: [3, 2]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question:"During your party you get a call from your boss who informs you that someone has entered the HoneyPot you set up.",
|
||||||
|
answers: ["I continue the party because I am confident in my technology","I leave the party and drive back to work (drink driving again...)"],
|
||||||
|
points: [4, 1]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question:"You program a website that sells the NASA information, do you put up the information of your friend who works there?",
|
||||||
|
answers: ["Yes","No"],
|
||||||
|
points: [4, 1]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question:"You hack the website and have access to the information of the hackers, do you want to reveal their identities to the public?",
|
||||||
|
answers: ["Yes","No"],
|
||||||
|
points: [4, 1]
|
||||||
|
}
|
||||||
|
];
|
||||||
+27
-33
@@ -14,35 +14,40 @@ function main() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextTurn(id) {
|
function nextTurn(id, rep=0) {
|
||||||
var titles = [
|
const titles = [
|
||||||
"Hacker's turn (" + playerHacker + ")",
|
`Hacker's turn (${playerHacker})`,
|
||||||
"Cybersecurity engineer's turn (" + playerCyber + ")"
|
`Cybersecurity engineer's turn (${playerCyber})`
|
||||||
]
|
];
|
||||||
|
|
||||||
if (id != 20) {
|
if (id !== 20) {
|
||||||
turnTitle.innerText = titles[id % 2];
|
turnTitle.innerText = titles[id % 2];
|
||||||
|
|
||||||
if (id % 2 == 0) {
|
hackerPoints.innerHTML = expHacker;
|
||||||
|
cyberPoints.innerHTML = expCyber;
|
||||||
|
|
||||||
|
if (id % 2 === 0) {
|
||||||
/* Hacker Turn */
|
/* Hacker Turn */
|
||||||
turnTitle.classList.remove("turn-cyber");
|
backgroundElement.classList.remove("turn-cyber");
|
||||||
turnTitle.classList.add("turn-hacker");
|
backgroundElement.classList.add("turn-hacker");
|
||||||
|
|
||||||
answerOneInput.style.boxShadow = "var(--red) 0px 0px 25px";
|
answerOneInput.style.boxShadow = "var(--black) 0px 0px 25px";
|
||||||
answerTwoInput.style.boxShadow = "var(--red) 0px 0px 25px";
|
answerTwoInput.style.boxShadow = "var(--black) 0px 0px 25px";
|
||||||
|
|
||||||
|
expHacker += data[id].points[rep];
|
||||||
|
|
||||||
expHacker += Math.floor(1+ Math.random() * 4);
|
|
||||||
} else {
|
} else {
|
||||||
/* Cyber Turn */
|
/* Cyber Turn */
|
||||||
turnTitle.classList.remove("turn-hacker");
|
backgroundElement.classList.remove("turn-hacker");
|
||||||
turnTitle.classList.add("turn-cyber");
|
backgroundElement.classList.add("turn-cyber");
|
||||||
|
|
||||||
answerOneInput.style.boxShadow = "var(--blue) 0px 0px 25px";
|
answerOneInput.style.boxShadow = "var(--black) 0px 0px 25px";
|
||||||
answerTwoInput.style.boxShadow = "var(--blue) 0px 0px 25px";
|
answerTwoInput.style.boxShadow = "var(--black) 0px 0px 25px";
|
||||||
|
|
||||||
expCyber += Math.floor(1 + Math.random() * 4);
|
expCyber += data[id].points[rep];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
console.log(`expCyber:${expCyber}\nexpHacker:${expHacker}`);
|
console.log(`expCyber:${expCyber}\nexpHacker:${expHacker}`);
|
||||||
|
|
||||||
titleElement.innerText = data[id].question;
|
titleElement.innerText = data[id].question;
|
||||||
@@ -63,19 +68,8 @@ function nextTurn(id) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function startGame() {
|
function startGame() {
|
||||||
playerOneName = playerOneInput.value;
|
playerOneName = playerOneInput.value !== "" ? playerOneInput.value : "Player 1";
|
||||||
playerTwoName = playerTwoInput.value;
|
playerTwoName = playerTwoInput.value !== "" ? playerTwoInput.value : "Player 2";
|
||||||
|
|
||||||
if (playerOneName == "") {
|
|
||||||
playerOneName = "Player 1";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (playerTwoName == "") {
|
|
||||||
playerTwoName = "Player 2";
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(playerOneName);
|
|
||||||
console.log(playerTwoName);
|
|
||||||
|
|
||||||
/* Cacher le menu de d'input des pseudos */
|
/* Cacher le menu de d'input des pseudos */
|
||||||
pseudoCanvasElement.style.visibility = "hidden";
|
pseudoCanvasElement.style.visibility = "hidden";
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
particles.min.js
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015, Vincent Garreau
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
## particles.js
|
||||||
|
|
||||||
|
### A lightweight JavaScript library for creating particles.
|
||||||
|
|
||||||
|
------------------------------
|
||||||
|
### `Demo / Generator`
|
||||||
|
|
||||||
|
<a href="http://vincentgarreau.com/particles.js/" target="_blank"><img src="http://vincentgarreau.com/particles.js/assets/img/github-screen.jpg" alt="particles.js generator" /></a>
|
||||||
|
|
||||||
|
Configure, export, and share your particles.js configuration on CodePen: <br />
|
||||||
|
http://vincentgarreau.com/particles.js/
|
||||||
|
|
||||||
|
CodePen demo: <br />
|
||||||
|
http://codepen.io/VincentGarreau/pen/pnlso
|
||||||
|
|
||||||
|
-------------------------------
|
||||||
|
### `Usage`
|
||||||
|
|
||||||
|
Load particles.js and configure the particles:
|
||||||
|
|
||||||
|
**index.html**
|
||||||
|
```html
|
||||||
|
<div id="particles-js"></div>
|
||||||
|
|
||||||
|
<script src="particles.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
**app.js**
|
||||||
|
```javascript
|
||||||
|
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
|
||||||
|
particlesJS.load('particles-js', 'assets/particles.json', function() {
|
||||||
|
console.log('callback - particles.js config loaded');
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**particles.json**
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 10,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 80,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 300,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 2
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 12,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 800,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 800,
|
||||||
|
"size": 80,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 0.8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 400,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
-------------------------------
|
||||||
|
|
||||||
|
### `Options`
|
||||||
|
|
||||||
|
key | option type / notes | example
|
||||||
|
----|---------|------
|
||||||
|
`particles.number.value` | number | `40`
|
||||||
|
`particles.number.density.enable` | boolean | `true` / `false`
|
||||||
|
`particles.number.density.value_area` | number | `800`
|
||||||
|
`particles.color.value` | HEX (string) <br /> RGB (object) <br /> HSL (object) <br /> array selection (HEX) <br /> random (string) | `"#b61924"` <br /> `{r:182, g:25, b:36}` <br /> `{h:356, s:76, l:41}` <br /> `["#b61924", "#333333", "999999"]` <br /> `"random"`
|
||||||
|
`particles.shape.type` | string <br /> array selection | `"circle"` <br /> `"edge"` <br /> `"triangle"` <br /> `"polygon"` <br /> `"star"` <br /> `"image"` <br /> `["circle", "triangle", "image"]`
|
||||||
|
`particles.shape.stroke.width` | number | `2`
|
||||||
|
`particles.shape.stroke.color` | HEX (string) | `"#222222"`
|
||||||
|
`particles.shape.polygon.nb_slides` | number | `5`
|
||||||
|
`particles.shape.image.src` | path link <br /> svg / png / gif / jpg | `"assets/img/yop.svg"` <br /> `"http://mywebsite.com/assets/img/yop.png"`
|
||||||
|
`particles.shape.image.width` | number <br />(for aspect ratio) | `100`
|
||||||
|
`particles.shape.image.height` | number <br />(for aspect ratio) | `100`
|
||||||
|
`particles.opacity.value` | number (0 to 1) | `0.75`
|
||||||
|
`particles.opacity.random` | boolean | `true` / `false`
|
||||||
|
`particles.opacity.anim.enable` | boolean | `true` / `false`
|
||||||
|
`particles.opacity.anim.speed` | number | `3`
|
||||||
|
`particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25`
|
||||||
|
`particles.opacity.anim.sync` | boolean | `true` / `false`
|
||||||
|
`particles.size.value` | number | `20`
|
||||||
|
`particles.size.random` | boolean | `true` / `false`
|
||||||
|
`particles.size.anim.enable` | boolean | `true` / `false`
|
||||||
|
`particles.size.anim.speed` | number | `3`
|
||||||
|
`particles.size.anim.size_min` | number | `0.25`
|
||||||
|
`particles.size.anim.sync` | boolean | `true` / `false`
|
||||||
|
`particles.line_linked.enable` | boolean | `true` / `false`
|
||||||
|
`particles.line_linked.distance` | number | `150`
|
||||||
|
`particles.line_linked.color` | HEX (string) | `#ffffff`
|
||||||
|
`particles.line_linked.opacity` | number (0 to 1) | `0.5`
|
||||||
|
`particles.line_linked.width` | number | `1.5`
|
||||||
|
`particles.move.enable` | boolean | `true` / `false`
|
||||||
|
`particles.move.speed` | number | `4`
|
||||||
|
`particles.move.direction` | string | `"none"` <br /> `"top"` <br /> `"top-right"` <br /> `"right"` <br /> `"bottom-right"` <br /> `"bottom"` <br /> `"bottom-left"` <br /> `"left"` <br /> `"top-left"`
|
||||||
|
`particles.move.random` | boolean | `true` / `false`
|
||||||
|
`particles.move.straight` | boolean | `true` / `false`
|
||||||
|
`particles.move.out_mode` | string <br /> (out of canvas) | `"out"` <br /> `"bounce"`
|
||||||
|
`particles.move.bounce` | boolean <br /> (between particles) | `true` / `false`
|
||||||
|
`particles.move.attract.enable` | boolean | `true` / `false`
|
||||||
|
`particles.move.attract.rotateX` | number | `3000`
|
||||||
|
`particles.move.attract.rotateY` | number | `1500`
|
||||||
|
`interactivity.detect_on` | string | `"canvas", "window"`
|
||||||
|
`interactivity.events.onhover.enable` | boolean | `true` / `false`
|
||||||
|
`interactivity.events.onhover.mode` | string <br /> array selection | `"grab"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["grab", "bubble"]`
|
||||||
|
`interactivity.events.onclick.enable` | boolean | `true` / `false`
|
||||||
|
`interactivity.events.onclick.mode` | string <br /> array selection | `"push"` <br /> `"remove"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["push", "repulse"]`
|
||||||
|
`interactivity.events.resize` | boolean | `true` / `false`
|
||||||
|
`interactivity.events.modes.grab.distance` | number | `100`
|
||||||
|
`interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75`
|
||||||
|
`interactivity.events.modes.bubble.distance` | number | `100`
|
||||||
|
`interactivity.events.modes.bubble.size` | number | `40`
|
||||||
|
`interactivity.events.modes.bubble.duration` | number <br /> (second) | `0.4`
|
||||||
|
`interactivity.events.modes.repulse.distance` | number | `200`
|
||||||
|
`interactivity.events.modes.repulse.duration` | number <br /> (second) | `1.2`
|
||||||
|
`interactivity.events.modes.push.particles_nb` | number | `4`
|
||||||
|
`interactivity.events.modes.push.particles_nb` | number | `4`
|
||||||
|
`retina_detect` | boolean | `true` / `false`
|
||||||
|
|
||||||
|
-------------------------------
|
||||||
|
|
||||||
|
### `Packages install`
|
||||||
|
|
||||||
|
##### ***npm***
|
||||||
|
https://www.npmjs.com/package/particles.js
|
||||||
|
```
|
||||||
|
npm install particles.js
|
||||||
|
```
|
||||||
|
|
||||||
|
##### ***Bower***
|
||||||
|
```
|
||||||
|
bower install particles.js --save
|
||||||
|
```
|
||||||
|
|
||||||
|
##### ***Rails Assets***
|
||||||
|
```
|
||||||
|
gem 'rails-assets-particles.js'
|
||||||
|
```
|
||||||
|
|
||||||
|
##### ***Meteor***
|
||||||
|
https://atmospherejs.com/newswim/particles
|
||||||
|
```
|
||||||
|
meteor add newswim:particles
|
||||||
|
```
|
||||||
|
|
||||||
|
-------------------------------
|
||||||
|
|
||||||
|
### `Hosting / CDN`
|
||||||
|
|
||||||
|
***Please use this host or your own to load particles.js on your projects***
|
||||||
|
|
||||||
|
http://www.jsdelivr.com/#!particles.js
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "particles.js",
|
||||||
|
"main": "particles.js",
|
||||||
|
"homepage": "https://github.com/VincentGarreau/particles.js",
|
||||||
|
"authors": [
|
||||||
|
"Vincent Garreau <vin.garreau@gmail.com>"
|
||||||
|
],
|
||||||
|
"description": "A lightweight JavaScript library for creating particles.",
|
||||||
|
"keywords": [
|
||||||
|
"particle",
|
||||||
|
"particles"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
/* =============================================================================
|
||||||
|
HTML5 CSS Reset Minified - Eric Meyer
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
|
||||||
|
body{line-height:1}
|
||||||
|
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
|
||||||
|
nav ul{list-style:none}
|
||||||
|
blockquote,q{quotes:none}
|
||||||
|
blockquote:before,blockquote:after,q:before,q:after{content:none}
|
||||||
|
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
|
||||||
|
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
|
||||||
|
del{text-decoration:line-through}
|
||||||
|
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
|
||||||
|
table{border-collapse:collapse;border-spacing:0}
|
||||||
|
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
|
||||||
|
input,select{vertical-align:middle}
|
||||||
|
li{list-style:none}
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
My CSS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* ---- base ---- */
|
||||||
|
|
||||||
|
html,body{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background:#111;
|
||||||
|
}
|
||||||
|
|
||||||
|
html{
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font:normal 75% Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas{
|
||||||
|
display:block;
|
||||||
|
vertical-align:bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---- stats.js ---- */
|
||||||
|
|
||||||
|
.count-particles{
|
||||||
|
background: #000022;
|
||||||
|
position: absolute;
|
||||||
|
top: 48px;
|
||||||
|
left: 0;
|
||||||
|
width: 80px;
|
||||||
|
color: #13E8E9;
|
||||||
|
font-size: .8em;
|
||||||
|
text-align: left;
|
||||||
|
text-indent: 4px;
|
||||||
|
line-height: 14px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-count-particles{
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats,
|
||||||
|
.count-particles{
|
||||||
|
-webkit-user-select: none;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats{
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-particles{
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---- particles.js container ---- */
|
||||||
|
|
||||||
|
#particles-js{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #b61924;
|
||||||
|
background-image: url('');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>particles.js</title>
|
||||||
|
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
|
||||||
|
<meta name="author" content="Vincent Garreau" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<link rel="stylesheet" media="screen" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- particles.js container -->
|
||||||
|
<div id="particles-js"></div>
|
||||||
|
|
||||||
|
<!-- scripts -->
|
||||||
|
<script src="../particles.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
/* -----------------------------------------------
|
||||||
|
/* How to use? : Check the GitHub README
|
||||||
|
/* ----------------------------------------------- */
|
||||||
|
|
||||||
|
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
|
||||||
|
/*
|
||||||
|
particlesJS.load('particles-js', 'particles.json', function() {
|
||||||
|
console.log('particles.js loaded - callback');
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Otherwise just put the config content (json): */
|
||||||
|
|
||||||
|
particlesJS('particles-js',
|
||||||
|
|
||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 5,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 6,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "grab"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 200,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true,
|
||||||
|
"config_demo": {
|
||||||
|
"hide_card": false,
|
||||||
|
"background_color": "#b61924",
|
||||||
|
"background_image": "",
|
||||||
|
"background_position": "50% 50%",
|
||||||
|
"background_repeat": "no-repeat",
|
||||||
|
"background_size": "cover"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
@@ -0,0 +1,149 @@
|
|||||||
|
/**
|
||||||
|
* @author mrdoob / http://mrdoob.com/
|
||||||
|
*/
|
||||||
|
|
||||||
|
var Stats = function () {
|
||||||
|
|
||||||
|
var startTime = Date.now(), prevTime = startTime;
|
||||||
|
var ms = 0, msMin = Infinity, msMax = 0;
|
||||||
|
var fps = 0, fpsMin = Infinity, fpsMax = 0;
|
||||||
|
var frames = 0, mode = 0;
|
||||||
|
|
||||||
|
var container = document.createElement( 'div' );
|
||||||
|
container.id = 'stats';
|
||||||
|
container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
|
||||||
|
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
|
||||||
|
|
||||||
|
var fpsDiv = document.createElement( 'div' );
|
||||||
|
fpsDiv.id = 'fps';
|
||||||
|
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
|
||||||
|
container.appendChild( fpsDiv );
|
||||||
|
|
||||||
|
var fpsText = document.createElement( 'div' );
|
||||||
|
fpsText.id = 'fpsText';
|
||||||
|
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||||
|
fpsText.innerHTML = 'FPS';
|
||||||
|
fpsDiv.appendChild( fpsText );
|
||||||
|
|
||||||
|
var fpsGraph = document.createElement( 'div' );
|
||||||
|
fpsGraph.id = 'fpsGraph';
|
||||||
|
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
|
||||||
|
fpsDiv.appendChild( fpsGraph );
|
||||||
|
|
||||||
|
while ( fpsGraph.children.length < 74 ) {
|
||||||
|
|
||||||
|
var bar = document.createElement( 'span' );
|
||||||
|
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
|
||||||
|
fpsGraph.appendChild( bar );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var msDiv = document.createElement( 'div' );
|
||||||
|
msDiv.id = 'ms';
|
||||||
|
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
|
||||||
|
container.appendChild( msDiv );
|
||||||
|
|
||||||
|
var msText = document.createElement( 'div' );
|
||||||
|
msText.id = 'msText';
|
||||||
|
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||||
|
msText.innerHTML = 'MS';
|
||||||
|
msDiv.appendChild( msText );
|
||||||
|
|
||||||
|
var msGraph = document.createElement( 'div' );
|
||||||
|
msGraph.id = 'msGraph';
|
||||||
|
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
|
||||||
|
msDiv.appendChild( msGraph );
|
||||||
|
|
||||||
|
while ( msGraph.children.length < 74 ) {
|
||||||
|
|
||||||
|
var bar = document.createElement( 'span' );
|
||||||
|
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
|
||||||
|
msGraph.appendChild( bar );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var setMode = function ( value ) {
|
||||||
|
|
||||||
|
mode = value;
|
||||||
|
|
||||||
|
switch ( mode ) {
|
||||||
|
|
||||||
|
case 0:
|
||||||
|
fpsDiv.style.display = 'block';
|
||||||
|
msDiv.style.display = 'none';
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
fpsDiv.style.display = 'none';
|
||||||
|
msDiv.style.display = 'block';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateGraph = function ( dom, value ) {
|
||||||
|
|
||||||
|
var child = dom.appendChild( dom.firstChild );
|
||||||
|
child.style.height = value + 'px';
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
|
||||||
|
REVISION: 12,
|
||||||
|
|
||||||
|
domElement: container,
|
||||||
|
|
||||||
|
setMode: setMode,
|
||||||
|
|
||||||
|
begin: function () {
|
||||||
|
|
||||||
|
startTime = Date.now();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
end: function () {
|
||||||
|
|
||||||
|
var time = Date.now();
|
||||||
|
|
||||||
|
ms = time - startTime;
|
||||||
|
msMin = Math.min( msMin, ms );
|
||||||
|
msMax = Math.max( msMax, ms );
|
||||||
|
|
||||||
|
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
|
||||||
|
updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
|
||||||
|
|
||||||
|
frames ++;
|
||||||
|
|
||||||
|
if ( time > prevTime + 1000 ) {
|
||||||
|
|
||||||
|
fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
|
||||||
|
fpsMin = Math.min( fpsMin, fps );
|
||||||
|
fpsMax = Math.max( fpsMax, fps );
|
||||||
|
|
||||||
|
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
|
||||||
|
updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
|
||||||
|
|
||||||
|
prevTime = time;
|
||||||
|
frames = 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return time;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function () {
|
||||||
|
|
||||||
|
startTime = this.end();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( typeof module === 'object' ) {
|
||||||
|
|
||||||
|
module.exports = Stats;
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 5,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 6,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true,
|
||||||
|
"config_demo": {
|
||||||
|
"hide_card": false,
|
||||||
|
"background_color": "#b61924",
|
||||||
|
"background_image": "",
|
||||||
|
"background_position": "50% 50%",
|
||||||
|
"background_repeat": "no-repeat",
|
||||||
|
"background_size": "cover"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "particles.js",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"description": "A lightweight JavaScript library for creating particles",
|
||||||
|
"homepage": "http://vincentgarreau.com/particles.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/VincentGarreau/particles.js.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"particles",
|
||||||
|
"particle",
|
||||||
|
"canvas"
|
||||||
|
],
|
||||||
|
"author": "Vincent Garreau",
|
||||||
|
"license": "MIT",
|
||||||
|
"files": [
|
||||||
|
"particles.js",
|
||||||
|
"particles.min.js"
|
||||||
|
],
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/VincentGarreau/particles.js/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/VincentGarreau/particles.js"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
+110
@@ -0,0 +1,110 @@
|
|||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 10,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 80,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 300,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 2
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 12,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 800,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 800,
|
||||||
|
"size": 80,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 0.8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 400,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user