diff options
| -rw-r--r-- | README.md | 9 | ||||
| -rw-r--r-- | public/icon.png | bin | 0 -> 1208 bytes | |||
| -rw-r--r-- | public/index.html | 30 | ||||
| -rw-r--r-- | public/main.css | 125 | ||||
| -rw-r--r-- | public/main.js | 66 |
5 files changed, 230 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..522f451 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# Word + +Play with words. + +## Run + +```sh +python -m http.server -d public +``` diff --git a/public/icon.png b/public/icon.png Binary files differnew file mode 100644 index 0000000..f16af88 --- /dev/null +++ b/public/icon.png diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..02c5626 --- /dev/null +++ b/public/index.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="fr"> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width"> +<title>Word</title> +<link rel="stylesheet" href="/main.css"> +<link rel="icon" href="/icon.png"> + +<body> + <div class="g-CardsPage"> + <div class="g-Score">Score : 0</div> + <div class="g-Cards"> + <button>1</button> + <button>2</button> + <button>3</button> + <button>4</button> + <button>5</button> + </div> + </div> + + <div class="g-WordPage"> + <div class="g-Word"></div> + <div class="g-Buttons"> + <button class="g-Good">✔</button> + <button class="g-Bad">✘</button> + </div> + </div> +</body> + +<script src="/main.js"></script> diff --git a/public/main.css b/public/main.css new file mode 100644 index 0000000..2bf6052 --- /dev/null +++ b/public/main.css @@ -0,0 +1,125 @@ +:root { + /* Tol Vibrant */ + /* https://cran.r-project.org/web//packages//khroma/vignettes/tol.html */ + --color-orange: #e73; + --color-blue: #07b; + --color-light-blue: #3be; + --color-pink: #e37; + --color-red: #c31; + --color-green: #098; + --color-gray: #bbb; + --color-light-gray: #eee; +} + +html { + height: 100%; + font-family: sans-serif; +} + +body { + height: 100%; + margin: 0; +} + +/* Pages */ + +.g-CardsPage, .g-WordPage { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +/* Cards */ + +.g-Score { + position: absolute; + top: 3vw; + left: 0; + display: flex; + justify-content: center; + width: 100%; + color: black; + font-size: 4vw; + font-weight: bold; +} + +.g-Cards { + display: flex; + align-items: center; + justify-content: center; + gap: 5vw; + width: 100%; + height: 100%; +} + +.g-Cards > button { + color: var(--color-blue); + background-color: white; + border: 1vw solid var(--color-blue); + cursor: pointer; + border-radius: 1vw; + padding: 6vw 4vw; + font-size: 5vw; + font-weight: bold; +} + +.g-Cards > button:hover { + background-color: var(--color-light-gray); +} + +/* Word */ + +.g-WordPage { + display: none; + flex-direction: column; + justify-content: space-evenly; +} + +@keyframes appear { + from {opacity: 0} + to {opacity: 1} +} + +.g-Word { + display: flex; + align-items: center; + justify-content: center; + font-size: 10vw; + font-weight: bold; + color: var(--color-blue); + opacity: 0; + animation: appear 2s ease-in 2s 1 normal forwards; +} + +.g-Buttons { + display: flex; + width: 100%; + justify-content: center; + gap: 10vw; +} + +.g-Buttons > button { + padding: 1vw 3vw; + cursor: pointer; + font-size: 8vw; + border-width: 1vw; + border-style: solid; + border-radius: 1vw; + background-color: white; +} + +.g-Buttons > button:hover { + background-color: var(--color-light-gray); +} + +.g-Good { + color: var(--color-green); + border-color: var(--color-green); +} + +.g-Bad { + color: var(--color-red); + border-color: var(--color-red); +} diff --git a/public/main.js b/public/main.js new file mode 100644 index 0000000..5023943 --- /dev/null +++ b/public/main.js @@ -0,0 +1,66 @@ +// Words + +const words = {} + +words[0] = new Set([ 'BRANCHE', 'VOILE', 'VIKING', 'BUT', 'VIS', 'SÉRIE', 'VENGEANCE', 'MAFIA', 'GÉNIE', 'COCKTAIL', 'RAT', 'RAMADAN', 'RENARD', 'MONTAGNE', 'SOMBRERO', 'VEUVE NOIRE', 'CIMETIÈRE', 'TRÉSOR', 'MYTHE', 'GRUE', 'LUMIÈRE', 'CHEVALIER', 'SIROP', 'PIRATE', 'BUFFY', 'BOULANGER', 'POISON', 'MARTEAU', 'HOLLYWOOD', 'TABLEAU', 'CHAUSSON', 'GROTTE', 'SILEX', 'DINOSAURE', 'TONNERRE', 'MAMAN', 'JEUX OLYMPIQUES', 'TAPIS', 'BARBIE', 'PENSÉE', 'SOUPE', 'SERVIETTE', 'COCCINELLE', 'MUSIQUE', 'GOOGLE', 'PAPIERS', 'MIMIE MATHY', 'FOUR', 'PAPILLON', 'BARBECUE', 'CAVITÉ', 'SUCRE', 'CHAT', 'REGGAE', 'QUARTIER', 'PRISON', 'NOMBRE', 'ROI', 'TOILE', 'DARWIN', 'MIRAGE', 'GUILLOTINE', 'CÉSAR', 'COQUILLE', 'COUTEAU', 'EXPLOSION', 'CROCODILE', 'DE GAULLE', 'TATOUAGE', 'CŒUR', 'MELON', 'POIVRE', 'POLAIRE', 'FRANCE', 'FICELLE', 'MARIONNETTE', 'CERVEAU', 'SEUL', 'TOKYO', 'TRADITION', 'GÂTEAU', 'CHENILLE', 'PLASTIQUE', 'TERMINATOR', 'NINTENDO', 'MAISON', 'DISCOTHÈQUE', 'RADIO', 'SALADE', 'NAIN', 'TRAIN', 'ROCK', 'GRENADE', 'ALCATRAZ', 'GODZILLA', 'BATEAU', 'HALLOWEEN', 'ÉCHEC', 'MIROIR', 'ÉCHELLE', 'MOUSTACHE', 'AVATAR', 'FER', 'POMPE', 'BOUCHE', 'DOPAGE', 'GLACE', 'CANNE', 'CROISSANT', 'ASTÉRIX' ]) + +words[1] = new Set([ 'CENDRILLON', 'CHEDDAR', 'ALARME', 'PAIN', 'RÂTEAU', 'NID', 'CHEF', 'LARGE', 'DRACULA', 'MARIO', 'PINCE', 'ÉLASTIQUE', 'POLICE', 'CACAHUÈTE', 'TRÈFLE', 'DOCTEUR', 'CUPIDE', 'PILOTE', 'FACEBOOK', 'OPÉRATION', 'CANAPÉ', 'PAIX', 'FORÊT', 'VACANCES', 'VOLCAN', 'PARFUM', 'ÉTOILE', 'ALLEMAGNE', 'MOUSTIQUE', 'POMPIER', 'FEUILLE', 'FORD', 'ROBOT', 'JAUNE', 'JARDIN', 'BATTERIE', 'ESCALADE', 'PONEY', 'CHOCOLAT', 'FRANKENSTEIN', 'CANADA', 'VÉNUS', 'MOUTARDE', 'GORGE', 'ARC', 'PLAYSTATION', 'NINJA', 'PRISE', 'POUDRE', 'PANDA', 'MANCHE', 'THÉATRE', 'PALACE', 'FUMIER', 'ROCHET', 'TROU', 'DÉCATHLON', 'TUTU', 'VAMPIRE', 'TOMATE', 'RAMSES', 'MAGICIEN', 'NOUILLE', 'SHAKESPEARE', 'OREILLER', 'PINGOUIN', 'BIJOUX', 'CIGARETTE', 'SPIELBERG', 'MOSCOU', 'ANCRE', 'TRIANGLE', 'SOURIS', 'LUNE', 'AUSTRALIE', 'JEU', 'MASQUE', 'PATATE', 'TALON', 'SERPENT', 'ÉTALON', 'HUMOUR', 'BALEINE', 'LETTRE', 'PARI', 'PARRAIN', 'NOËL', 'POIRE', 'ÉTUDES', 'CIRQUE', 'CREVETTE', 'MÛR', 'FARCE', 'FUMÉE', 'UNIFORME', 'BOWLING', 'CIRCUIT', 'HISTOIRE', 'BAL', 'ANGE', 'BULLE', 'MOULIN', 'BATMAN', 'ALADDIN', 'CARROUSEL', 'AÏL', 'FLÛTE', 'MOUSQUETAIRE', 'FANTÔME', 'FOURRURE' ]) + +words[2] = new Set([ 'CRÊPE', 'SHREK', 'DANSE', 'DÉMON', 'ORDINATEUR', 'ÉPICE', 'URGENCE', 'MISSILE', 'LION', 'LIÈGE', 'AMAZON', 'POÊLE', 'SIMPSON', 'AMPOULE', 'BOUTON', 'FRAISE', 'PARAPLUIE', 'MICKEY', 'GLAND', 'RAP', 'MOZART', 'FLEUR', 'BALANCE', 'ELF', 'PASSION', 'FLAMME', 'LOUP', 'PAËLLA', 'LANCE', 'VERRE', 'PANTHÈRE', 'CASINO', 'COMÉDIE', 'CHAMPIGNON', 'PEINTURE', 'FÈTE FORRAINE', 'AVOCAT', 'COURONNE', 'NEIGE', 'ÉTAGÈRE', 'ZOO', 'PIEUVRE', 'SHERLOCK', 'AMÉRIQUE', 'MARS', 'BLOND', 'COUETTE', 'PÂQUES', 'PORCELAINE', 'RÊVE', 'OGRE', 'PELLE', 'ÉLECTION', 'LAC', 'TIGRE', 'PUNK', 'RHUM', 'GROUPE', 'MONOPOLY', 'PARACHUTE', 'FEU D’ARTIFICE', 'HOCKEY', 'CHAPEAU', 'GÉANT', 'BACH', 'CELLULE', 'MÉTRO', 'BRACELET', 'POMME', 'PISCINE', 'ISRAEL', 'POUPÉE', 'COLLIER', 'CAFÉTÉRIA', 'CHÂTEAU', 'VEGAS', 'CONCERT', 'VAGUE', 'POULET', 'COUPE', 'MEXIQUE', 'COIN', 'CARTON', 'CABARET', 'SEL', 'GUERRE', 'MODE', 'GLADIATEUR', 'GOTHIQUE', 'CÉLINE DION', 'CHAMBRE', 'TEMPLE', 'BROSSE', 'NOISETTE', 'PLUIE', 'CHURCHILL', 'BÉBÉ', 'BIÈRE', 'BAIN', 'FOU', 'CHAINE', 'JUNGLE', 'CHANSON', 'TUBE', 'PSYCHOPATHE', 'CUBE', 'CHAMPAGNE', 'FIL', 'PAILLE', 'TORNADE' ]) + +words[3] = new Set([ 'ÎLE', 'POLE', 'HULK', 'PRIMAIRE', 'STARBUCKS', 'ÉLÉPHANT', 'CROIX', 'MICROSOFT', 'CHAUSSETTE', 'VIOLON', 'TABAC', 'FLASH', 'ÉCLAIR', 'JEDI', 'FROMAGE', 'NUCLÉAIRE', 'BOND', 'ÉGOUT', 'OS', 'MUSE', 'ANNEAU', 'SUISSE', 'ZEUS', 'AIMANT', 'COQ', 'ZOMBIE', 'MITTÉRAND', 'EMPEREUR', 'PORTE-MONNAIE', 'WRAP', 'RÉVOLUTION', 'BONBON', 'LANGAGE', 'PIGEON', 'CABANE', 'KARATÉ', 'TOLKIEN', 'NOUVEAU', 'CRAVATE', 'ACCENT', 'PIPE', 'CYCLE', 'BOUTEILLE', 'CAFÉ', 'GOLF', 'IRIS', 'CHASSEUR', 'TUYAU', 'MARCHÉ', 'MARRIAGE', 'POKER', 'DUNE', 'MIEL', 'SINGE', 'AIGUILLE', 'SOIR', 'MÉTAL', 'ALCOOL', 'DESSIN ANIMÉ', 'CANON', 'CARREFOUR', 'BANANE', 'DENTISTE', 'ÉCUME', 'ÉPÉE', 'GANDHI', 'LUNETTES', 'MÉTÉO', 'SIRÈNE', 'LICORNE', 'CACTUS', 'ITALIE', 'FERME', 'POIGNÉE', 'GARDE', 'COFFRE-FORT', 'TROIE', 'ÉCOLE', 'HÉLICOPTER', 'PICASSO', 'BLANC', 'ANTARTIQUE', 'GALET', 'PARADIS', 'MANUEL', 'CORDE', 'STATION', 'SOLEIL', 'TITANIC', 'TONDEUSE', 'CLÉOPATRE', 'SABLE', 'COCHON', 'DIAMAND', 'FEU', 'RAM', 'CANTINE', 'DISCO', 'PUIT', 'CHEUVEUX', 'FORT', 'RELIGIEUX', 'NILE', 'CEINTURE', 'HERBE', 'ROCKY', 'SAFARI', 'TULIPE', 'ONGLE', 'PYRAMIDE' ]) + +words[4] = new Set([ 'TAXI', 'WESTERN', 'DÉSERT', 'TARZAN', 'BALLE', 'CARNAVAL', 'VALSE', 'SKI', 'VENDREDI', 'PÊCHE', 'RÈGLE', 'TUNNEL', 'JOURNAL', 'PIMENT', 'CHEWBACCA', 'LOTTERIE', 'RACINE', 'GALAXIE', 'PONT', 'DÉFENSE', 'PIZZA', 'CALENDRIER', 'CAFARD', 'FOURCHETTE', 'ÉLECTRICITÉ', 'JOKER', 'ANNIVERSAIRE', 'PAPE', 'FIN', 'GRÈCE', 'SAHARA', 'FONTAINE', 'COIFFEUR', 'PIKACHU', 'TRÊVE', 'PERROQUET', 'RIVIÈRE', 'TARANTINO', 'VENT', 'DOUCHE', 'LIVRE', 'OPÉRA', 'VIRUS', 'FIÈVRE', 'TICKET', 'MEMBRE', 'LÉGUME', 'RAILLES', 'COCON', 'NOMBRIL', 'TARTE', 'ENCEINTE', 'RAMBO', 'PHARE', 'SAVON', 'CARTE', 'THON', 'LAVE', 'HÔTEL', 'JUMELLES', 'PRINCESSE', 'JIMI HENDRIX', 'BLÉ', 'CAVE', 'VOL', 'OASIS', 'PIQÛRE', 'TOUR', 'BOXE', 'ORANGE', 'TENNIS', 'SCÈNE', 'BELGIQUE', 'OUTIL', 'MOUTON', 'AVION', 'REQUIN', 'LÉGO', 'COLONEL', 'MONTRE', 'CHAUVE', 'SAUCISSE', 'EVEREST', 'ŒUF', 'GEL', 'VIN', 'LAMPE', 'CÉRÉALE', 'MACHINE', 'PIERRE', 'FENÊTRE', 'FRITES', 'HUMAIN', 'ROSE', 'CASQUE', 'ESPION', 'PAIRE', 'PRÉSIDENT', 'FÉE', 'MATRIX', 'COOKIE', 'PÉTARD', 'CINÉMA', 'BAR', 'AUTOMNE', 'LAIT', 'ALIEN', 'IKEA', 'POTTER', 'BAGUE' ]) + +// Elements + +const cardsPageElem = document.querySelector('.g-CardsPage') +const scoreElem = document.querySelector('.g-Score') +const cardElems = Array.from(document.querySelector('.g-Cards').children) + +const wordPageElem = document.querySelector('.g-WordPage') +const wordElem = document.querySelector('.g-Word') +const goodButton = document.querySelector('.g-Good') +const badButton = document.querySelector('.g-Bad') + +let score = 0 +let selectedCardIndex + +function pickWord(index) { + const items = Array.from(words[index]) + const word = items[Math.floor(Math.random() * items.length)] + words[index].delete(word) + return word +} + +function showWord(word) { + cardsPageElem.style.display = 'none' + wordPageElem.style.display = 'flex' + wordElem.innerText = word +} + +function showCards() { + cardsPageElem.style.display = 'flex' + wordPageElem.style.display = 'none' +} + +cardElems.forEach((card, index) => { + card.addEventListener('click', () => { + const word = pickWord(index) + if (words[index].size == 0) { + cardElems[index].remove() + } + selectedCardIndex = index + showWord(word) + }) +}) + +goodButton.addEventListener('click', () => { + score += selectedCardIndex + 1 + scoreElem.innerText = `Score : ${score}` + showCards() +}) + +badButton.addEventListener('click', () => { + showCards() +}) |
