Add Advance configuration + Add creation of custom set of cards

* feat: 🎸 Add More config settings + add custom deck cards

* feat: 🎸 Add multilanguage in deck creation page

* feat: 🎸 Add remove card when click on

* style: 💄 Update style

README.md

@@ -1,10 +1,10 @@
-# Another Poker Planning
+# Another Planning Poker
 
-Welcome to **Another Poker Planning**! This site is designed to make your poker planning sessions more efficient, fun, and engaging. With our tool, you can get instant, clear results and benefit from detailed, high-quality analysis.
+Welcome to **Another Planning Poker**! This site is designed to make your Planning Poker sessions more efficient, fun, and engaging. With our tool, you can get instant, clear results and benefit from detailed, high-quality analysis.
 
 ## Features
 
-- **Session Creation**: Easily create new poker planning sessions for your team.
+- **Session Creation**: Easily create new Planning Poker sessions for your team.
 - **Join Sessions**: Join existing sessions with a unique code.
 - **User Management**: Manage participants and track their votes in real-time.
 - **Instant Results**: Get immediate results and visualize vote percentages.
@@ -17,27 +17,27 @@ Welcome to **Another Poker Planning**! This site is designed to make your poker
 3. **Vote**: Each participant can vote to estimate the complexity of tasks.
 4. **View Results**: Results are displayed instantly, with clear percentages and engaging visualizations.
 
-## Why Use Another Poker Planning?
+## Why Use Another Planning Poker?
 
-- **Simplicity**: An intuitive user interface that makes creating and managing poker planning sessions a breeze.
+- **Simplicity**: An intuitive user interface that makes creating and managing Planning Poker sessions a breeze.
 - **Speed**: Get instant results without any waiting.
 - **Engagement**: Animations and visualizations that make the voting process more fun and engaging.
 - **Accessibility**: Accessible from any device with an internet connection.
 - **Free and Ad-Free**: 100% free with zero ads, created out of passion by enthusiasts.
 
 ## Try It Now!
 
-Don't waste time with complicated and inefficient tools. Try **Another Poker Planning** for your next poker planning session and see the difference!
+Don't waste time with complicated and inefficient tools. Try **Another Planning Poker** for your next Planning Poker session and see the difference!
 
-[Visit Another Poker Planning](https://anotherpp.vercel.app/)
+[Visit Another Planning Poker](https://anotherpp.vercel.app/)
 
 ## Screenshots
 
-Here are some screenshots to give you a glimpse of what Another Poker Planning looks like:
+Here are some screenshots to give you a glimpse of what Another Planning Poker looks like:
 
 ### Create Session
 ![Create Session](screenshots/create.png)
-*The interface for creating a new poker planning session.*
+*The interface for creating a new Planning Poker session.*
 
 ### Join Session
 ![Join Session](screenshots/room.png)

backend/index.js

@@ -21,7 +21,6 @@ app.use((req, res, next) => {
 });
 
 app.get("/room", (req, res) => {
-    console.log("req.query;", req.query)
     const { roomId } = req.query;
 
     if (rooms.get(roomId)) {
@@ -32,11 +31,7 @@ app.get("/room", (req, res) => {
 })
 
 app.post('/room', (req, res) => {
-    const { type, team } = req.body;
-
-    if (!["TSHIRT", "FIBONACCI", "POWEROF2", "SEQUENTIAL", "TSHIRT_HALF"].includes(type)) {
-        return res.status(400).json({ error: "Invalid room type" });
-    }
+    const { type, team, hexcode, avatar, autoReveal, cards } = req.body;
 
     const roomId = createRoomId();
     const formattedTeam = (team || 'NFS').trim().charAt(0).toUpperCase() + (team || 'NFS').slice(1).toLowerCase();
@@ -65,7 +60,21 @@ app.post('/room', (req, res) => {
             roomData.cards = ['XS', 'S', 'M', 'M/L', 'L', 'XL'];
             break;
         default:
-            return res.status(400).json({ error: "Unknown room type" });
+            console.log("Unknown room type", cards);
+            if (!cards || cards?.length === 0) return res.status(400).json({ error: "Unknown room type" });
+            roomData.cards = cards;
+    }
+
+    if (hexcode) {
+        roomData.hexcode = hexcode;
+    }
+
+    if (avatar) {
+        roomData.avatar = avatar;
+    }
+
+    if (autoReveal) {
+        roomData.autoReveal = autoReveal;
     }
 
     rooms.set(roomId, { initialisation: true, data: roomData });

backend/server.js

@@ -23,7 +23,11 @@ const createSocketIOServer = (server, rooms) => {
                     cards: [],
                     state: 'waiting',
                     userStory: '',
+                    color: '#FF7F00',
+                    avatar: 'https://api.dicebear.com/9.x/dylan/svg',
+                    autoReveal: false
                 },
+                timeout: null,
                 emit(type, data, manager) {
                     object.players.forEach((player) => {
                         if (manager) {
@@ -57,6 +61,11 @@ const createSocketIOServer = (server, rooms) => {
                 emitUpdateGame(state) {
                     let element = { ...object.data };
 
+                    if (this.timeout) {
+                        clearTimeout(this.timeout);
+                        delete this.timeout;
+                    }
+
                     if (state == "result") {
                         let resultsByItem = new Map();
                         let totalPlayers = 0;
@@ -103,6 +112,31 @@ const createSocketIOServer = (server, rooms) => {
                     });
                     this.emitPlayers();
                 },
+                checkAllPlayersSelected() {
+                    console.log("Check all players selected");
+                    if (!this.data.autoReveal) return false;
+                    console.log("Auto reveal is enabled");
+
+                    if (this.timeout) {
+                        clearTimeout(this.timeout);
+                        delete this.timeout;
+                    }
+
+                    this.timeout = setTimeout(() => {
+                        for (let player of object.players.values()) {
+                            console.log("Check player", player.name, player.selectedCard);
+                            if (!player.manager && !player.selectedCard) {
+                                console.log("Not all players have selected a card");
+                                return; // 
+                            }
+                        }
+
+                        console.log("All players have selected a card");
+                        console.log("Timeout to reveal result");
+                        this.data.state = "result";
+                        this.emitUpdateGame("result");
+                    }, 3000);
+                }
             };
 
             if (object.data) {
@@ -206,6 +240,7 @@ const createSocketIOServer = (server, rooms) => {
                         room.players.set(socket.id, player);
                         room.emitPlayers(true);
                         socket.emit("success", { success: true });
+                        room.checkAllPlayersSelected();
                         break;
                     }
                     case 'state': {

src/app.html

@@ -11,12 +11,12 @@
 	<meta name="theme-color" content="#ff910a" />
 	<meta name="description"
 		content="Avec Another Poker Planner, obtenez des résultats instantanés, clairs et facilement compréhensibles, tout en bénéficiant d’analyses détaillées et de qualité supérieure." />
-	<meta property="og:title" content="Another Poker Planning">
+	<meta property="og:title" content="Another Planning Poker">
 	<meta property="og:type" content="website">
-	<meta property="og:site_name" content="Another Poker Planning">
+	<meta property="og:site_name" content="Another Planning Poker">
 	<meta property="og:description"
 		content="Avec Another Poker Planner, obtenez des résultats instantanés, clairs et facilement compréhensibles, tout en bénéficiant d’analyses détaillées et de qualité supérieure.">
-	<meta name="language" content="French">
+	<meta name="language" content="English">
 	<meta name="author" content="BadbounsTV">
 	<meta property="og:url" content="https://anotherpp.vercel.app/">
 	<meta property="og:image" content="%sveltekit.assets%/banner.png">
@@ -26,13 +26,13 @@
 
 	<meta property="twitter:card" content="summary_large_image">
 	<meta property="twitter:url" content="https://anotherpp.vercel.app/">
-	<meta property="twitter:title" content="Another Poker Planning">
+	<meta property="twitter:title" content="Another Planning Poker">
 	<meta property="twitter:description"
 		content="Avec Another Poker Planner, obtenez des résultats instantanés, clairs et facilement compréhensibles, tout en bénéficiant d’analyses détaillées et de qualité supérieure.">
 	<meta property="twitter:image" content="%sveltekit.assets%/banner.png">
 	<meta property="twitter:creator:id" content="@FabienBouns">
 
-	<title>Poker planning</title>
+	<title>Planning Poker</title>
 	%sveltekit.head%
 </head>
 

src/app.scss

@@ -30,18 +30,6 @@
     transition: none cubic-bezier(0.1, 1.25, 0.25, 1) 600ms;
 }
 
-div,
-button,
-a,
-p,
-h1,
-h3,
-textarea,
-input,
-img {
-    transition: background-color 3s, color 3s !important;
-}
-
 *::selection {
     background-color: var(--primary-300);
     color: var(--on-primary-700);

src/lib/animations/accordion.js

@@ -0,0 +1,29 @@
+
+export function accordion(node, isOpen) {
+    let initialHeight = node.offsetHeight;
+    node.style.height = isOpen ? 'auto' : 0;
+    node.style.overflow = "hidden";
+    return {
+        update(isOpen) {
+            let animation = node.animate(
+                [
+                    {
+                        height: initialHeight + 'px',
+                        overflow: 'hidden'
+                    },
+                    {
+                        height: 0,
+                        overflow: 'hidden'
+                    }
+                ],
+                { duration: 300, fill: 'both' }
+            );
+            animation.pause();
+            if (!isOpen) {
+                animation.play();
+            } else {
+                animation.reverse();
+            }
+        }
+    };
+}

src/lib/components/Card.svelte

@@ -1,12 +1,20 @@
 <script>
-	let { content, cardSelected = $bindable(), submittedLetter = $bindable() } = $props();
+	let {
+		content,
+		cardSelected = $bindable(),
+		submittedLetter = $bindable(),
+		height = '20vh',
+		interact = true
+	} = $props();
 </script>
 
 <main
 	class="card"
 	class:gray={cardSelected && cardSelected != content}
 	class:selected={cardSelected === content}
 	class:submit={submittedLetter === content}
+	class:interact
+	style="--card-height: {height};"
 	on:click={() => {
 		if (cardSelected === content) {
 			cardSelected = null;
@@ -15,13 +23,13 @@
 		}
 	}}
 >
-	<p>{content}</p>
+	<p>{`${content}`.slice(0, 3)}</p>
 </main>
 
 <style lang="scss">
 	.card {
 		user-select: none;
-		height: 20dvh;
+		height: var(--card-height, 20dvh);
 		aspect-ratio: 2.5 / 4;
 		background-color: var(--primary-200);
 		border: 1px solid #ddd;
@@ -38,12 +46,16 @@
 			scale 0.3s,
 			background-color 3s !important;
 
+		&:not(.interact) {
+			pointer-events: none;
+		}
+
 		&:hover {
 			scale: 1.05;
 		}
 
 		p {
-			font-size: 7dvh;
+			font-size: calc(var(--card-height, 20dvh) / 2.8);
 			color: var(--primary-600);
 		}