From ec13d0861875320b3d8d7ddd350463f5cbab9dd9 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Thu, 1 Jan 2026 13:35:18 +0100 Subject: Add init version --- README.md | 9 ++++ public/icon.png | Bin 0 -> 1208 bytes public/index.html | 30 +++++++++++++ public/main.css | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ public/main.js | 66 ++++++++++++++++++++++++++++ 5 files changed, 230 insertions(+) create mode 100644 README.md create mode 100644 public/icon.png create mode 100644 public/index.html create mode 100644 public/main.css create mode 100644 public/main.js 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 new file mode 100644 index 0000000..f16af88 Binary files /dev/null and b/public/icon.png differ 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 @@ + + + + +Word + + + + +
+
Score : 0
+
+ + + + + +
+
+ +
+
+
+ + +
+
+ + + 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() +}) -- cgit v1.2.3