├── .gitignore
├── README.md
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── favicon.ico
├── icons
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon-114x114.png
│ ├── apple-touch-icon-120x120.png
│ ├── apple-touch-icon-144x144.png
│ ├── apple-touch-icon-152x152.png
│ ├── apple-touch-icon-180x180.png
│ ├── apple-touch-icon-57x57.png
│ ├── apple-touch-icon-60x60.png
│ ├── apple-touch-icon-72x72.png
│ ├── apple-touch-icon-76x76.png
│ ├── apple-touch-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── mstile-150x150.png
│ └── safari-pinned-tab.svg
├── screenshot-visible.png
└── screenshot.png
├── src
├── Index.vue
├── Logo.vue
├── WordleWars.vue
├── components
│ ├── Example.ts
│ ├── ExampleInfo.vue
│ ├── ExampleWrapper.vue
│ ├── Game.vue
│ ├── Header.vue
│ ├── Keyboard.vue
│ ├── MiniBoard.vue
│ ├── MiniBoardPlaying.vue
│ ├── MiniBoardScore.vue
│ ├── MiniScore.vue
│ ├── MiniScores.vue
│ └── ScoreCard.vue
├── lib-liveblocks
│ ├── LiveblocksProvider.vue
│ ├── RoomProvider.vue
│ ├── index.ts
│ ├── symbols.ts
│ ├── useList.ts
│ ├── useMyPresence.ts
│ ├── useOthers.ts
│ └── useStorage.ts
├── lib
│ ├── copyText.ts
│ ├── createRoomId.ts
│ ├── getWordOfTheDay.ts
│ ├── messages.ts
│ └── sortUsers.ts
├── liveblocks.config.ts
├── main.ts
├── styles
│ └── global.css
├── types.ts
└── words.ts
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | .idea
7 | .vscode
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Wordle Wars](https://wordlewars.ctnicholas.dev)
2 |
3 | This repo shows how to build a multiplayer Wordle clone with [Liveblocks](https://liveblocks.io), [Vue](https://vuejs.org/), and [Vite](https://vitejs.dev/).
4 |
5 | 
6 |
7 | ## [Try it out](https://wordlewars.ctnicholas.dev)
8 |
9 |
10 | It's forked from [Vue Wordle](https://github.com/yyx990803/vue-wordle) created by Evan You (@yyx990803), with some multiplayer and extra styling added.
11 | You can only see your opponent's letters after you've got the word of the day. Scores are saved at the end of the war,
12 | and a new Wordle becomes available at UTC±00:00 every day. It features a dark mode and a colourblind mode.
13 |
14 | 
15 |
16 | This repository is open sourced for learning purposes only - the original creator(s) of Wordle own all applicable rights to the game itself.
17 |
18 | ## Getting started
19 |
20 | ### Run examples locally
21 |
22 | - Install all dependencies with `npm install`
23 |
24 | - Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
25 |
26 | - Copy your public key from the [administration](https://liveblocks.io/dashboard/apikeys)
27 |
28 | - Create a file named `.env.local` and add your Liveblocks secret as environment variable `VITE_LIVEBLOCKS_PUBLIC_KEY=sk_test_yourkey`
29 |
30 | ### Run examples on CodeSandbox
31 |
32 | - Open this repository on CodeSandbox with this [link](https://codesandbox.io/s/wordle-wars-with-liveblocks-and-vite-0hhdi)
33 |
34 | - Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
35 |
36 | - Copy your public key from the [administration](https://liveblocks.io/dashboard/apikeys)
37 |
38 | - Create [secret](https://codesandbox.io/docs/secrets) named `VITE_LIVEBLOCKS_PUBLIC_KEY` with the secret key you just copied. You need to create an account on CodeSandbox to add an environment variable.
39 |
40 | - Refresh your browser and you should be good to go!
41 |
42 |
43 | ## More with Liveblocks
44 | [](https://www.ctnicholas.dev/articles/live-cursors-with-liveblocks)
45 | [](https://livepiano.ctnicholas.dev)
46 | [](https://livebasket.ctnicholas.dev)
47 |
--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
{{info.description }}
23 | 28 | 32 | Open in new window 33 | 34 |12 | To run 13 | 14 | Liveblocks 15 | 16 | examples on CodeSandbox 17 |
18 |
37 | VITE_LIVEBLOCKS_PUBLIC_KEY
38 | to your CodeSandbox sandbox.
39 | 48 | To run 49 | 50 | Liveblocks 51 | 52 | examples locally 53 |
54 |
58 | npm install
59 |
60 |
71 | .env
and add your
72 | Liveblocks secret as an environment variable:
73 | VITE_LIVEBLOCKS_PUBLIC_KEY=pk_live_yourkey
74 |
78 | npm run dev
79 | and you should be good to go.
80 | 68 | WORDLE WARS was built by @ctnicholasdev. 69 | It's open-source and available on GitHub, be creative! 70 |
71 |72 | Wordle Wars uses Liveblocks to add multiplayer, which I wholeheartedly recommend trying. 73 | Give me a tag if you build anything fun. 74 |
75 |76 | I also write interactive web dev articles on my website: ctnicholas.dev 77 |
78 | 79 |81 | Guess the WORDLE in six tries. 82 |
83 |84 | Each guess must be a valid five-letter word. Hit the enter button to submit. 85 |
86 |87 | After each guess, the color of the tiles will change to show how close your guess was to the word. 88 |
89 |90 | The player with the lowest amount of guesses wins WORDLE WARS. 91 |
92 | 93 |94 | Examples 95 |
96 |
98 |
The letter R is in the word and in the correct spot.
101 |
104 |
The letter A is in the word but in the wrong spot.
107 |
110 |
No letters are in the word in any spot.
113 |116 | A new WORDLE will be available each day! 117 |
118 | 119 |