How to build a multiplayer Wordle clone with Liveblocks, Vue, and Vite

Overview

Wordle Wars

This repo shows how to build a multiplayer Wordle clone with Liveblocks, Vue, and Vite.

Wordle wars screenshot

Try it out

It's forked from VVowrdle created by Evan You (@yyx990803), with some multiplayer and extra styling added. 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, and a new Wordle becomes available at UTC±00:00 every day. It features a dark mode and a colourblind mode.

Wordle wars screenshot

This repository is open sourced for learning purposes only - the original creator(s) of Wordle own all applicable rights to the game itself.

Getting started

Run examples locally

  • Install all dependencies with npm install

  • Create an account on liveblocks.io

  • Copy your public key from the administration

  • Create a file named .env.local and add your Liveblocks secret as environment variable VITE_LIVEBLOCKS_PUBLIC_KEY=sk_test_yourkey

Run examples on CodeSandbox

  • Open this repository on CodeSandbox with this link

  • Create an account on liveblocks.io

  • Copy your public key from the administration

  • Create secret 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.

  • Refresh your browser and you should be good to go!

More with Liveblocks

Adding live cursors to Next.js Build a live piano Build a live basket

You might also like...

Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks.

Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks.

Wordle2Townscaper Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks. You can download

Nov 2, 2022

A recreation of the popular game Wordle with additional modes and features. Made with Svelte in Typescript.

A recreation of the popular game Wordle with additional modes and features. Made with Svelte in Typescript.

A recreation of the popular game Wordle by Josh Wardle (now purchased by the New York Times), with additional modes and features. Hosted on GitHub pag

Dec 11, 2022

Provides 5 keywords with which to narrow down your wordle game. I ruin nice things.

Widdle?? I hate fun so I wrote a script that ruins Wordle. This script can be used to find a Widdle, a set of five words that cover nearly all letters

Mar 12, 2022

A simple wordle solver for Node.js

This is just a weekend project, so take it easy :-) simple-worlde-solver Wordle solver for Node.js. I am aware of other efforts that use greedy algori

Feb 20, 2022

WORDLEBOARD prototype: Show your Wordle game on a Vestaboard as you play.

WORDLEBOARD prototype: Show your Wordle game on a Vestaboard as you play.

WORDLEBOARD prototype Show your Wordle game on a Vestaboard as you play. Copyright (c) 2022, Scott Schiller. MIT license. Made with love and fun in mi

Dec 20, 2022

CLI to to solve your Wordle puzzle daily

CLI to to solve your Wordle puzzle daily

📟 CLI to to solve your Wordle puzzle daily. Learn to build Node.js CLI apps. wordle-solved-cli 📦 CLI that solves Wordle puzzles for you 🤯 Automatic

Feb 2, 2022

A Wordle-like game where you have to guess the unsigned 8-bit binary number

A Wordle-like game where you have to guess the unsigned 8-bit binary number

Bytle A Wordle-like game where you have to guess the unsigned 8-bit binary number! Game coded in 2h 14m 50.570s, but it's not like I'm counting how lo

Jun 30, 2022

The extension to help you when you badly don't want to mess up your wordle streak

Your last resort in woordle to maintain your woordle win streak

Feb 3, 2022

🟩 in case you want to cheat on your wordle games

Wordle Solver How to use Enter each right guess in the first grid Enter all letters that you know aren't in a certain position in the second grid For

Feb 7, 2022
Comments
  • Add/fix ranking to reflect placements at the end of the game when copying emoji

    Add/fix ranking to reflect placements at the end of the game when copying emoji

    Looks like there isn't a ranking system for who finishes first at the moment when you copy the emoji for the wordle wars game. It doesn't show the order of who completed first.

    opened by dajomareyes 0
  • Purple Theme - Green should not represent incorrect placement

    Purple Theme - Green should not represent incorrect placement

    I've had coworkers accidentally enable the purple theme, where the color purple represents correct placement of a letter and green represents incorrect placement of a letter. This caused them to get very confused and continue placing letters incorrectly... because they're highlighted green. It would be best if the misplaced letters were changed to a light purple, or another color that would suggest the color theme is different.

    opened by joshwcorbett 0
  • Add tchat

    Add tchat

    I use that wordle wars daily with my teammates and something which can be great is to add tchat. This would be a solution to provide hints to stuck players.

    opened by edimitchel 2
A clone of the popular game Wordle made using React, Typescript, and Tailwind

Wordle Clone Go play the real Wordle here Read the story behind it here Try a demo of this clone project here Inspiration: This game is an open source

Hannah Park 2.4k Jan 8, 2023
A clone of the popular Wordle game.

Wordle Clone How to play locally: yarn install

null 2 Jan 9, 2022
JavaScript library guessing game, a Wordle clone

Jazle JavaScript library guessing game, a Wordle clone. A fork of cwackerfuss/react-wordle. See the list of accepted libraries: wordlist.ts Build and

Oliver Radwell 17 May 26, 2022
a wordle clone in the terminal?

Wordleee A clone of the popular word guessing game, that runs in the terminal with a fancy ?? (?) UI! Features ?? Based on Node.js (with the amazing I

Hugo Wiledal 11 Sep 4, 2022
Wordle-clone with a Dungeons & Dragons theme. Guess the monster-of-the-day by assigning numbers to characteristics.

DNDle A Wordle-clone with a Dungeons & Dragons (5e) theme. Guess the "monster of the day" by either entering values for the six characteristics (STR,

Dan Q 6 Apr 11, 2022
Zero clientside JavaScript Wordle clone, using Eleventy Edge

Eleventy Edge Wordle Yet another Wordle clone Play the hosted Wordle game! Recently, the Eleventy started unveiling its Eleventy Edge plugin, which al

Ben Myers 20 Oct 6, 2022
Wordle clone but the words are replaced by STIB/MIVB stops

STIBle / MIVBle STIBle / MIVBle is a WorLdle clone, except that you don't guess a country, but a stop in the STIB's (Brussels' public transport compan

null 3 May 26, 2022
A public JSON API for Wordle with vue.js frontend

A public JSON API for Wordle. This repo also includes a frontend made with Vue.js

Tommy Dougiamas 16 Jan 1, 2023
Typescript based monte-carlo acyclic graph search algorithm for multiplayer games

Typescript based monte-carlo acyclic graph search algorithm for multiplayer games. It can be used in any turn-based strategic multiplayer games.

null 3 Jul 11, 2022
Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

Latin Wordle Live Game Here Inspiration Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

null 15 Dec 16, 2022