diff --git a/index.html b/jeux-de-waterloo/index.html
similarity index 98%
rename from index.html
rename to jeux-de-waterloo/index.html
index 85b18a3..c0e61bc 100644
--- a/index.html
+++ b/jeux-de-waterloo/index.html
@@ -1,6 +1,7 @@
+
Les Jeux de Waterloo
diff --git a/script.js b/jeux-de-waterloo/script.js
similarity index 100%
rename from script.js
rename to jeux-de-waterloo/script.js
diff --git a/style.css b/jeux-de-waterloo/style.css
similarity index 97%
rename from style.css
rename to jeux-de-waterloo/style.css
index 8afa0eb..8a07f37 100644
--- a/style.css
+++ b/jeux-de-waterloo/style.css
@@ -52,8 +52,17 @@ body {
}
@keyframes pulse {
- 0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.05); }
+ 0%, 100% {
+ text-shadow:
+ 3px 3px 0px #000,
+ 0 0 20px rgba(212, 175, 55, 0.8);
+ }
+ 50% {
+ text-shadow:
+ 3px 3px 0px #000,
+ 0 0 35px rgba(255, 215, 0, 1),
+ 0 0 50px rgba(212, 175, 55, 0.9);
+ }
}
.start-content h2 {
@@ -136,10 +145,7 @@ body {
animation: pulse 2s ease-in-out infinite;
}
-@keyframes pulse {
- 0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.05); }
-}
+
.header-content h2 {
font-size: clamp(1.2em, 4vw, 1.8em);
diff --git a/tiles/bear.png b/jeux-de-waterloo/tiles/bear.png
similarity index 100%
rename from tiles/bear.png
rename to jeux-de-waterloo/tiles/bear.png
diff --git a/tiles/belier.png b/jeux-de-waterloo/tiles/belier.png
similarity index 100%
rename from tiles/belier.png
rename to jeux-de-waterloo/tiles/belier.png
diff --git a/tiles/door.png b/jeux-de-waterloo/tiles/door.png
similarity index 100%
rename from tiles/door.png
rename to jeux-de-waterloo/tiles/door.png
diff --git a/tiles/elephant.png b/jeux-de-waterloo/tiles/elephant.png
similarity index 100%
rename from tiles/elephant.png
rename to jeux-de-waterloo/tiles/elephant.png
diff --git a/tiles/giraffe.png b/jeux-de-waterloo/tiles/giraffe.png
similarity index 100%
rename from tiles/giraffe.png
rename to jeux-de-waterloo/tiles/giraffe.png
diff --git a/tiles/koala.png b/jeux-de-waterloo/tiles/koala.png
similarity index 100%
rename from tiles/koala.png
rename to jeux-de-waterloo/tiles/koala.png
diff --git a/tiles/lion.png b/jeux-de-waterloo/tiles/lion.png
similarity index 100%
rename from tiles/lion.png
rename to jeux-de-waterloo/tiles/lion.png
diff --git a/tiles/panda.png b/jeux-de-waterloo/tiles/panda.png
similarity index 100%
rename from tiles/panda.png
rename to jeux-de-waterloo/tiles/panda.png
diff --git a/tiles/paon.png b/jeux-de-waterloo/tiles/paon.png
similarity index 100%
rename from tiles/paon.png
rename to jeux-de-waterloo/tiles/paon.png
diff --git a/tiles/pingouin.png b/jeux-de-waterloo/tiles/pingouin.png
similarity index 100%
rename from tiles/pingouin.png
rename to jeux-de-waterloo/tiles/pingouin.png
diff --git a/tiles/player.png b/jeux-de-waterloo/tiles/player.png
similarity index 100%
rename from tiles/player.png
rename to jeux-de-waterloo/tiles/player.png
diff --git a/tiles/singe.png b/jeux-de-waterloo/tiles/singe.png
similarity index 100%
rename from tiles/singe.png
rename to jeux-de-waterloo/tiles/singe.png
diff --git a/tiles/sky.png b/jeux-de-waterloo/tiles/sky.png
similarity index 100%
rename from tiles/sky.png
rename to jeux-de-waterloo/tiles/sky.png
diff --git a/tiles/sol.png b/jeux-de-waterloo/tiles/sol.png
similarity index 100%
rename from tiles/sol.png
rename to jeux-de-waterloo/tiles/sol.png
diff --git a/tiles/stairs.png b/jeux-de-waterloo/tiles/stairs.png
similarity index 100%
rename from tiles/stairs.png
rename to jeux-de-waterloo/tiles/stairs.png
diff --git a/tiles/tileset.png b/jeux-de-waterloo/tiles/tileset.png
similarity index 100%
rename from tiles/tileset.png
rename to jeux-de-waterloo/tiles/tileset.png
diff --git a/tiles/wall.png b/jeux-de-waterloo/tiles/wall.png
similarity index 100%
rename from tiles/wall.png
rename to jeux-de-waterloo/tiles/wall.png
diff --git a/tiles/wind.png b/jeux-de-waterloo/tiles/wind.png
similarity index 100%
rename from tiles/wind.png
rename to jeux-de-waterloo/tiles/wind.png
diff --git a/style.css.backup b/style.css.backup
deleted file mode 100644
index 8afa0eb..0000000
--- a/style.css.backup
+++ /dev/null
@@ -1,387 +0,0 @@
-body {
- font-family: 'Courier New', monospace;
- text-align: center;
- margin: 0;
- padding: 0;
- overflow: hidden;
- background: linear-gradient(180deg, #2c1810 0%, #4a2c1a 100%);
- color: #f4e4c1;
- height: 100vh;
- display: flex;
- flex-direction: column;
-}
-
-/* Start Screen */
-.start-screen {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: linear-gradient(180deg, #1a0f08 0%, #2c1810 50%, #4a2c1a 100%);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 2000;
- animation: fadeIn 0.5s ease-in;
-}
-
-.start-screen.hidden {
- display: none;
-}
-
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-.start-content {
- text-align: center;
- padding: 30px;
- max-width: 600px;
-}
-
-.start-content h1 {
- font-size: clamp(1.3em, 5vw, 2.3em);
- color: #d4af37;
- text-shadow:
- 3px 3px 0px #000,
- 0 0 20px rgba(212, 175, 55, 0.8);
- margin-bottom: 20px;
- animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
- 0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.05); }
-}
-
-.start-content h2 {
- font-size: clamp(1.2em, 4vw, 1.8em);
- color: #ffd700;
- text-shadow: 2px 2px 0px #000;
- margin: 20px 0;
-}
-
-.start-description {
- font-size: clamp(1em, 3vw, 1.2em);
- color: #e8d4a0;
- text-shadow: 1px 1px 0px #000;
- line-height: 1.1;
- margin: 30px 0;
-}
-
-.start-btn {
- padding: 15px 20px;
- font-size: clamp(1.1em, 3vw, 1.5em);
- font-family: 'Courier New', monospace;
- font-weight: bold;
- border: 4px solid #8b6914;
- background: linear-gradient(180deg, #d4af37 0%, #b8941f 100%);
- color: #2c1810;
- cursor: pointer;
- text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
- box-shadow:
- 0 6px 0 #5a4010,
- 0 8px 15px rgba(0, 0, 0, 0.5),
- 0 0 30px rgba(212, 175, 55, 0.5);
- letter-spacing: 2px;
- margin-top: 20px;
- transition: all 0.2s;
- animation: glow 2s ease-in-out infinite;
-}
-
-@keyframes glow {
- 0%, 100% { box-shadow: 0 6px 0 #5a4010, 0 8px 15px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.5); }
- 50% { box-shadow: 0 6px 0 #5a4010, 0 8px 15px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.8); }
-}
-
-.start-btn:hover {
- background: linear-gradient(180deg, #ffd700 0%, #d4af37 100%);
- transform: translateY(3px);
- box-shadow:
- 0 3px 0 #5a4010,
- 0 5px 10px rgba(0, 0, 0, 0.5),
- 0 0 40px rgba(255, 215, 0, 0.8);
-}
-
-.start-btn:active {
- transform: translateY(6px);
- box-shadow:
- 0 0px 0 #5a4010,
- 0 2px 5px rgba(0, 0, 0, 0.5),
- 0 0 20px rgba(212, 175, 55, 0.5);
-}
-
-@media (max-width: 480px) {
- .start-content {
- padding: 15px;
- }
-
- .start-btn {
- padding: 12px 30px;
- }
-}
-.header-content {
- margin: 10px 0;
-}
-
-.header-content h1 {
- font-size: clamp(1.5em, 5vw, 2.5em);
- color: #d4af37;
- text-shadow:
- 3px 3px 0px #000,
- 0 0 20px rgba(212, 175, 55, 0.8);
- margin-bottom: 20px;
- animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
- 0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.05); }
-}
-
-.header-content h2 {
- font-size: clamp(1.2em, 4vw, 1.8em);
- color: #ffd700;
- text-shadow: 2px 2px 0px #000;
- margin: 20px 0;
-}
-
-h1 {
- margin: 5px 0;
- font-size: clamp(1em, 3vw, 1.4em);
- font-weight: bold;
- text-shadow: 3px 3px 0px #000;
- color: #d4af37;
- letter-spacing: 2px;
- text-transform: uppercase;
- padding: 5px;
-}
-
-h3 {
- color: #e8d4a0;
- text-shadow: 2px 2px 0px #000;
- font-size: clamp(0.9em, 2.5vw, 1.1em);
- margin: 5px 0;
- padding: 0 10px;
-}
-
-p {
- color: #d4c5a0;
- text-shadow: 1px 1px 0px #000;
- font-size: clamp(0.8em, 2vw, 1em);
- margin: 5px 0;
- padding: 0 10px;
-}
-
-canvas {
- border: 4px solid #8b6914;
- box-shadow:
- 0 0 0 2px #d4af37,
- 0 0 20px rgba(0, 0, 0, 0.8),
- inset 0 0 10px rgba(0, 0, 0, 0.5);
- background-color: #2a1a0a;
- max-width: 100vw;
- max-height: calc(100vh - 180px);
- width: auto;
- height: auto;
- display: block;
- margin: 5px auto;
- image-rendering: pixelated;
- image-rendering: crisp-edges;
- flex-shrink: 1;
-}
-
-@media (max-width: 768px) {
- canvas {
- max-height: calc(100vh - 200px);
- border: 3px solid #8b6914;
- }
-
- h1 {
- margin: 3px 0;
- }
-}
-
-@media (max-width: 480px) {
- canvas {
- max-height: calc(100vh - 220px);
- border: 2px solid #8b6914;
- }
-}
-
-/* Animal counter */
-.animal-counter {
- font-family: 'Courier New', monospace;
- font-size: clamp(1em, 3vw, 1.3em);
- font-weight: bold;
- margin: 5px 0;
- padding: 8px 15px;
- background: linear-gradient(180deg, #8b6914 0%, #6b5010 100%);
- color: #f4e4c1;
- border: 3px solid #d4af37;
- box-shadow:
- 0 4px 0 #5a4010,
- 0 6px 10px rgba(0, 0, 0, 0.5);
- display: inline-block;
- text-shadow: 2px 2px 0px #000;
- letter-spacing: 1px;
-}
-
-@media (max-width: 480px) {
- .animal-counter {
- padding: 6px 12px;
- border: 2px solid #d4af37;
- margin: 3px 0;
- }
-}
-
-#foundCount {
- font-size: 1.3em;
- color: #ffd700;
- text-shadow: 0 0 5px #ff0, 2px 2px 0px #000;
-}
-
-/* Message box styles */
-.message-box {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.85);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- backdrop-filter: blur(2px);
-}
-
-.message-box.hidden {
- display: none;
-}
-
-.message-content {
- background: linear-gradient(180deg, #3d2a1a 0%, #2c1810 100%);
- padding: 20px;
- border: 4px solid #d4af37;
- box-shadow:
- 0 0 0 2px #8b6914,
- 0 0 30px rgba(212, 175, 55, 0.5),
- inset 0 0 20px rgba(0, 0, 0, 0.5);
- max-width: 90vw;
- width: 600px;
- max-height: 90vh;
- overflow-y: auto;
- text-align: center;
- font-family: 'Courier New', monospace;
-}
-
-@media (max-width: 768px) {
- .message-content {
- padding: 15px;
- border: 3px solid #d4af37;
- }
-}
-
-.message-content p {
- font-size: clamp(1em, 3vw, 1.2em);
- margin-bottom: 15px;
- color: #f4e4c1;
- text-shadow: 2px 2px 0px #000;
- line-height: 1.5;
-}
-
-.animal-buttons {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: 8px;
- margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
- .animal-buttons {
- grid-template-columns: repeat(3, 1fr);
- }
-}
-
-@media (max-width: 480px) {
- .animal-buttons {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-.animal-buttons.hidden {
- display: none;
-}
-
-.animal-buttons button {
- padding: 8px 4px;
- font-size: clamp(0.75em, 2vw, 0.9em);
- font-family: 'Courier New', monospace;
- font-weight: bold;
- border: 3px solid #8b6914;
- background: linear-gradient(180deg, #d4af37 0%, #b8941f 100%);
- color: #2c1810;
- cursor: pointer;
- transition: all 0.2s;
- white-space: nowrap;
- text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
- box-shadow: 0 3px 0 #5a4010, 0 4px 8px rgba(0, 0, 0, 0.5);
- position: relative;
-}
-
-@media (max-width: 480px) {
- .animal-buttons button {
- padding: 6px 3px;
- border: 2px solid #8b6914;
- }
-}
-
-.animal-buttons button:hover {
- background: linear-gradient(180deg, #ffd700 0%, #d4af37 100%);
- transform: translateY(2px);
- box-shadow: 0 1px 0 #5a4010, 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.animal-buttons button:active {
- transform: translateY(3px);
- box-shadow: 0 0px 0 #5a4010, 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.close-btn {
- padding: 10px 25px;
- font-size: clamp(1em, 3vw, 1.2em);
- font-family: 'Courier New', monospace;
- font-weight: bold;
- border: 3px solid #8b6914;
- background: linear-gradient(180deg, #d4af37 0%, #b8941f 100%);
- color: #2c1810;
- cursor: pointer;
- text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
- box-shadow: 0 4px 0 #5a4010, 0 6px 10px rgba(0, 0, 0, 0.5);
- letter-spacing: 1px;
-}
-
-@media (max-width: 480px) {
- .close-btn {
- padding: 8px 20px;
- border: 2px solid #8b6914;
- }
-}
-
-.close-btn.hidden {
- display: none;
-}
-
-.close-btn:hover {
- background: linear-gradient(180deg, #ffd700 0%, #d4af37 100%);
- transform: translateY(2px);
- box-shadow: 0 2px 0 #5a4010, 0 4px 8px rgba(0, 0, 0, 0.5);
-}
-
-.close-btn:active {
- transform: translateY(4px);
- box-shadow: 0 0px 0 #5a4010, 0 2px 4px rgba(0, 0, 0, 0.5);
-}