Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 5 | |||
Software apps and online services | ||||||
 |
| |||||
 |
| |||||
Inspiration:
When I feel like playing a game I spend such a long time searching for a game that I want that I end up not having time to play anymore or just not feeling like playing anymore. So I want to create an organizer that allows me to quickly choose a game based on what I’m feeling like playing at that moment.
Idea:
Make a website with dropdowns of different categories that user selects based on what they want and filter through the games to find a match. And have each video game have a corresponding LED next to it so each game can be identified individually.
// Include Particle Device OS APIs
#include "Particle.h"
// Let Device OS manage the connection to the Particle Cloud
SYSTEM_MODE(AUTOMATIC);
// Show system, cloud connectivity, and application logs over USB
// View logs with CLI using 'particle serial monitor --follow'
int led1 = 2;
int led2 = 3;
int led3 = 0;
int led4 = 6;
int led5 = 10;
void setup() {
// We are going to tell our device that D0 and D7 (which we named led1 and led2 respectively) are going to be output
// (That means that we will be sending voltage to them, rather than monitoring voltage that comes from them)
// It's important you do this here, inside the setup() function rather than outside it or in the loop function.
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
pinMode(led3, OUTPUT);
pinMode(led4, OUTPUT);
pinMode(led5, OUTPUT);
Particle.function("blink1", blink1);
Particle.function("blink2", blink2);
Particle.function("blink3", blink3);
Particle.function("blink4", blink4);
Particle.function("blink5", blink5);
}
// Next we have the loop function, the other essential part of a microcontroller program.
// This routine gets repeated over and over, as quickly as possible and as many times as possible, after the setup function is called.
// Note: Code that blocks for too long (like more than 5 seconds), can make weird things happen (like dropping the network connection). The built-in delay function shown below safely interleaves required background activity, so arbitrarily long delays can safely be done if you need them.
void loop() {
}
int blink1(String param){
digitalWrite(led1, HIGH);
delay(5000);
digitalWrite(led1, LOW);
return 0;
}
int blink2(String param){
digitalWrite(led2, HIGH);
delay(1000);
digitalWrite(led2, LOW);
return 0;
}
int blink3(String param){
digitalWrite(led3, HIGH);
delay(1000);
digitalWrite(led3, LOW);
return 0;
}
int blink4(String param){
digitalWrite(led4, HIGH);
delay(1000);
digitalWrite(led4, LOW);
return 0;
}
int blink5(String param){
digitalWrite(led5, HIGH);
delay(1000);
digitalWrite(led5, LOW);
return 0;
}
<!DOCTYPE html>
<html lnag="en">
<head>
<meta charset="utf-18">
<title>Home Automation Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="modeDropdown" class="dropdown">
<div class="select">
<span class="selected"> Mode </span>
<div class="caret"></div>
</div>
<ul class="menu">
<li class="active" >Single-Player</li>
<li>Multi-Player</li>
<li>Both</li>
</ul>
</div>
<div id="playstationDropdown" class="dropdown">
<div class="select">
<span class="selected"> Console </span>
<div class="caret"></div>
</div>
<ul class="menu">
<li class="active"> PS5 </li>
<li >PS4</li>
<li>PS3</li>
<li>Xbox</li>
<li>Wii</li>
</ul>
</div>
<div id="genreDropdown" class="dropdown">
<div class="select">
<span class="selected"> Genre </span>
<div class="caret"></div>
</div>
<ul class="menu">
<li class="active" > RPG </li>
<li >Shooter</li>
<li>Sports</li>
<li>Horror</li>
<li>Fighting</li>
<li>Racing</li>
</ul>
</div>
<div id="titleDropdown" class="dropdown">
<div class="select">
<span class="selected"> Title </span>
<div class="caret"></div>
</div>
<ul class="menu">
<li class="active" > T1 </li>
<li >T2</li>
<li>T3</li>
<li>T4</li>
<li>T5</li>
</ul>
</div>
<button onclick="clicked()" > Select </button>
<script src="script.js"></script>
</body>
body{
font-family: Arial, Helvetica, sans-serif;
background: #23242a;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.dropdown{
min-width: 15em;
position: relative;
margin: 2em;
}
.dropdown *{
box-sizing: border-box;
}
.select{
background: #2a2f3b;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px #2a2f3b solid;
border-radius: 0.5 em;
padding: 1em;
cursor: pointer;
transition: background .3s;
}
.select-clicked{
border: 2px #26489a solid;
box-shadow: 0 0 0.8em #26489a;
}
.select:hover{
background: #323741;
}
.caret{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fff;
transition: .3s;
}
.caret-rotate{
transform: rotate(180deg);
}
.menu{
list-style: none;
padding: 0.2em .5em;
background: #323741;
border: 1px #363a43 solid;
box-shadow: 0 .5em 1em rgba(0,0,0, 0.2);
border-radius: .5em;
color: #9fa5b5;
position: absolute;
top: 3em;
left: 50%;
width: 100%;
transform: translateX(-50%);
opacity: 0;
display: none;
transition: .2s;
z-index: 1;
}
.menu li {
padding: .7em .5em;
margin: .3em 0;
border-radius: 0.5em;
cursor: pointer;
}
.menu li:hover{
background: #2a2d35;
}
.active{
background: #23242a;
}
.menu-open{
display: block;
opacity: 1;
}
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown=>{
const select = dropdown.querySelector('.select');
const caret= dropdown.querySelector('.caret');
const menu = dropdown.querySelector('.menu');
const options = dropdown.querySelectorAll('.menu li');
const selected = dropdown.querySelector('.selected');
select.addEventListener('click', ()=> {
select.classList.toggle('select-clicked');
caret.classList.toggle('caret-rotate');
menu.classList.toggle('menu-open');
});
options.forEach(option => {
option.addEventListener('click', () => {
selected.innerText = option.innerText;
select.classList.remove('select-clicked');
caret.classList.remove('caret-rotate');
menu.classList.remove('menu-open');
options.forEach(option => {
option.classList.remove('active');
});
option.classList.add('active');
});
});
});
/* link functions */
const MODE = {
SINGLE_PLAYER: "Single-Player",
MULTI_PLAYER: "Multi-Player",
BOTH: "Both"
}
const PLAYSTATION = {
PS5: "PS5",
PS4: "PS4",
PS3: "PS3",
XBOX: "Xbox",
WII: "Wii",
}
const GENRE = {
RPG: "RPG",
SHOOTER: "Shooter",
SPORTS: "Sports",
HORROR: "Horror",
FIGHTING: "Fighting",
RACING: "Racing",
}
const TITLE = {}
const WEBHOOK = [
"https://api.particle.io/v1/devices/0a10aced202194944a04bfd0/blinkled1/?access_token=9722374a5478a708ca4233274958f7bc801fa12d9",
"https://api.particle.io/v1/devices/0a10aced202194944a04bfd0/blink2/?access_token=9722374a5478a708ca4233274958f7bc801fa12d9",
"https://api.particle.io/v1/devices/0a10aced202194944a04bfd0/blink3/?access_token=9722374a5478a708ca4233274958f7bc801fa12d9",
"https://api.particle.io/v1/devices/0a10aced202194944a04bfd0/blink4/?access_token=9722374a5478a708ca4233274958f7bc801fa12d9",
"https://api.particle.io/v1/devices/0a10aced202194944a04bfd0/blink5/?access_token=9722374a5478a708ca4233274958f7bc801fa12d9",
]
function Game(mode, playstation, genre, title) {
return { mode, playstation, genre, title };
}
const ALL_GAMES = [
Game(MODE.BOTH, PLAYSTATION.PS4, GENRE.SPORTS, "Fifa"),
Game(MODE.SINGLE_PLAYER, PLAYSTATION.PS4, GENRE.RPG, "Assasin's Creed"),
Game(MODE.BOTH, PLAYSTATION.XBOX, GENRE.SHOOTER, "Call of Duty"),
Game(MODE.BOTH, PLAYSTATION.PS3, GENRE.HORROR, "Resident Evil"),
Game(MODE.BOTH, PLAYSTATION.PS4, GENRE.FIGHTING, "Mortal Kombat"),
]
function clicked(){
const filteredGames = filterGames(ALL_GAMES, getSelections);
location.reload()
filteredGames.forEach(index => {
fetch(WEBHOOK[index], {
method: "POST",
headers: {
"Content-Type": "application/json"
}
});
});
}
function filterGames(games, selectedValues) {
return games
.map((game, index) => ({ game, index }))
.filter(({ game }) => !selectedValues.mode || game.mode === selectedValues.mode)
.filter(({ game }) => !selectedValues.playstation || game.playstation === selectedValues.playstation)
.filter(({ game }) => !selectedValues.genre || game.genre === selectedValues.genre)
.filter(({ game }) => !selectedValues.title || game.title === selectedValues.title)
.map(({ index }) => index);
}
function getSelections() {
const mode = document.getElementById("modeDropdown")
.querySelector('.selected')?.innerText || null;
const playstation = document.getElementById("playstationDropdown")
.querySelector('.selected')?.innerText || null;
const genre = document.getElementById("genreDropdown")
.querySelector('.selected')?.innerText || null;
const title = document.getElementById("titleDropdown")
.querySelector('.selected')?.innerText || null;
return { mode, playstation, genre, title };
}
Comments
Please log in or sign up to comment.