\n \n ![\"title\"](\"title.png\")
\n
\n \n
\n \n
\n
\n );\n }\n return Hello, {this.props.playerName || \"Stranger!\"}
\n \n\n
\n \n Start a New Game\n
\n \n \n
\n \n \n
\n
\n \n\n \n Join a Game {this.state.gameCount > 0 ? ({this.state.gameCount} active): null}\n
\n \n \n
\n Loading
\n }\n}","import React, { Component } from 'react';\n\nexport class About extends Component {\n render() {\n return (\n\n \n\n
\n );\n }\n}","import React, { Component } from 'react';\nimport Table from 'react-bootstrap/Table';\nimport { game } from '../models/game';\nimport { FaCheckCircle, FaUser, FaGhost } from 'react-icons/fa';\n\ninterface RosterProps {\n playerId: string\n gameState: game\n}\n\nexport class Roster extends ComponentAbout Werdz
\n\nWerdz is an online word guessing game where you try and make up plausible definitions for escoteric words to fool your friends.
\n\nWerdz was created during the COVID-19 isolation because I wanted more games that were fun to play with friends remotely.
\n\nIf you have questions, suggestions, bug reports, etc. please submit them to werdz@werdz.ca.
\n\n\n
\n \n Credits\n
\n \n
\n - \n
- Words & definitions by RandomWordGenerator.com \n
- Sound Effects:\n
- \n
- game winning sound by LittleRobotSoundFactory \n
- game losing sound by Timbre \n
\n
| Player | Score | |
|---|---|---|
| \n {inactiveMap[p.id] ? | \n {p.name} | \n{p.score} | \n
\n
\n );\n }\n}","import React, { Component } from 'react';\nimport ProgressBar from 'react-bootstrap/ProgressBar';\n\ninterface GameTimerProps {\n remaining: number,\n total: number,\n}\n\nexport class GameTimer extends ComponentOnce all players are ready...
\n \n\n {this.state.remaining > 0 &&\n
\n );\n }\n}","import React, { Component } from 'react';\nimport Alert from 'react-bootstrap/Alert';\nimport { game } from '../models/game';\nimport { GameTimer } from './GameTimer';\n\ninterface GameHeaderProps {\n gameState: game,\n gameId: string,\n}\n\nexport class GameHeader extends Component\n \n \n
\n\n }\n {this.props.gameState.state === 0 && !this.props.gameState.canStart &&\n Not Started. Waiting for Players. \n }\n {this.props.gameState.state === 0 && this.props.gameState.canStart &&\n Ready to start! \n }\n {this.props.gameState.canSubmit &&\n Submit your definition for {this.props.gameState.currentRound.word} \n }\n {this.props.gameState.state === 1 && !this.props.gameState.canSubmit && this.props.gameState.currentRound.state === 0 && \n Waiting for other players to submit their definitions... \n }\n {this.props.gameState.canVote && this.props.gameState.mode === 0 &&\n Select the correct definition for {this.props.gameState.currentRound.word} \n }\n {this.props.gameState.canVote && this.props.gameState.mode === 1 &&\n Select the best definition for {this.props.gameState.currentRound.word} \n }\n {this.props.gameState.state === 1 && !this.props.gameState.canVote && this.props.gameState.currentRound.state === 1 && \n Waiting for other players to vote... \n }\n {this.props.gameState.state === 2 &&\n Game over man! \n }\n\n
\n );\n }\n}","import React, { Component } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Form from 'react-bootstrap/Form';\nimport Axios from 'axios';\nimport { playClick } from '../Sounds';\n\ninterface GameSubmitFormProps {\n gameId: string,\n roundId: string,\n playerId: string,\n}\n\ninterface GameSubmitFormState {\n definition: string,\n}\n\nexport class GameSubmitForm extends ComponentGame {this.props.gameId}
\n {this.props.gameState.state === 1 &&\n| Current Word: | {this.props.gameState.currentRound.word} |
|---|---|
| Round: | {this.props.gameState.currentRound.num} of {this.props.gameState.totalRounds} |
\n \n\n
\n );\n }\n}","import React, { Component } from 'react';\nimport Axios from 'axios';\nimport { definition } from '../models/definition';\nimport { ListGroup } from 'react-bootstrap';\nimport { playClick } from '../Sounds';\n\ninterface GameVotingFormProps {\n gameId: string,\n roundId: string,\n playerId: string,\n definitions: definition[],\n}\n\nexport class GameVotingForm extends Component\n\n
\n );\n }\n}","import React, { Component } from 'react';\nimport { game } from '../models/game';\n\ninterface GameRoundSummaryProps {\n playerId: string,\n gameState: game,\n}\n\nexport class GameRoundSummary extends Component\n \n {this.props.definitions.map((def: any) => {\n return (\n { this.vote(def.id); }}>\n {def.definition}\n \n );\n })}\n \n
\n\n \n
\n );\n }\n}","import React, { Component } from 'react';\nimport Table from 'react-bootstrap/Table'\nimport { game } from '../models/game';\nimport { FaTrophy } from 'react-icons/fa';\nimport { playWin, playLose } from '../Sounds';\n\ninterface GameScoreBoardProps {\n playerId: string,\n gameState: game,\n}\n\nexport class GameScoreBoard extends Component\n
\n\n \n Round {this.props.gameState.currentRound.num} Summary - {this.props.gameState.currentRound.word}\n
\n \n
\n - \n {this.props.gameState.currentRound.definitions.map((d) => (\n
- \n {d.definition} {!d.player && (the correct answer)}\n {d.player && (by {players[d.player]})}\n
- \n {(d.votes || []).map((v) => (\n
- Voted for by {players[v]} \n ))}\n
\n \n ))}\n
\n \n \n
\n\n
\n );\n }\n}","import React, { Component } from 'react';\n\ninterface GameRulesProps {\n mode: number,\n rounds: number,\n}\n\nexport class GameRules extends ComponentScore Board
\n| Player | Score | |
|---|---|---|
| \n {\n (() => {\n if (p.score < placeScore) {\n placeScore = p.score\n place++\n }\n })()\n }\n {place === 1 && | \n {p.name} | \n{p.score} | \n
Rounds
\n\n {this.props.gameState.rounds.map((r) => {\n\n return (\n\n
\n
\n );\n\n })}\n\n \n
\n \n Round {r.num} - {r.word}\n
\n \n
\n - \n {r.definitions.map((d) => (\n
- \n {d.definition} {!d.player && (the correct answer)}\n {d.player && (by {players[d.player]})}\n
- \n {(d.votes || []).map((v) => (\n
- Voted for by {players[v]} \n ))}\n
\n \n ))}\n
\n
\n
\n );\n }\n}","import React, { Component } from 'react';\nimport Websocket from 'react-websocket';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport { Roster } from './Roster';\nimport { GameStartButton } from './GameStartButton';\nimport { GameHeader } from './GameHeader';\nimport { GameSubmitForm } from './GameSubmitForm';\nimport { GameVotingForm } from './GameVotingForm';\nimport { GameRoundSummary } from './GameRoundSummary';\nimport { GameScoreBoard } from './GameScoreBoard';\nimport { game } from '../models/game';\nimport { Alert, Spinner } from 'react-bootstrap';\nimport Axios from 'axios';\nimport { GameRules } from './GameRules';\n\ninterface GameProps {\n gameId: string,\n playerId: string,\n playerName: string,\n}\n\ninterface GameState {\n gameState: game | null,\n error: boolean,\n}\n\nexport class Game extends Component\n
\n\n \n Rules for this game\n
\n \n {this.props.mode === 0 &&
\n - \n
- This game will consist of {this.props.rounds} rounds. \n
- In each round, you will be presented with an unusual but real word. \n
- You will have to make up a definition that you think your friends will believe is the correct definition (hint: the real definitions are usually fairly short such as 'room for conversation'). \n
- Once everybody has submitted their best guess for what the word means, you'll be presented with a shuffled list of everybody's definitions and the correct definition. \n
- You get one point for each of your friends who mistakenly pick your definition as the correct definition. \n
- You get three points if you can correctly identify the real definition. \n
- At the end of {this.props.rounds} rounds, the player with the most points is the winner. \n
- That's it. Have fun. \n
- \n
- This game will consist of {this.props.rounds} rounds. \n
- In each round, you will be presented with a crazy random word. \n
- You will have to make up an outlandish definition for the crazy random word. Something that's so hilarious and awesome that your friends have to vote for it! \n
- You get one point for each vote your crazy definition gets. \n
- At the end of {this.props.rounds} rounds, the player with the most points is the winner. \n
- That's it. Have fun. \n
\n
\n\n {!this.state.gameState &&
\n );\n }\n}","import React, { Component } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Form from 'react-bootstrap/Form';\nimport { Game } from './Game';\nimport Axios from 'axios';\nimport { playClick } from '../Sounds';\n\ninterface GameShellProps {\n gameId: string,\n playerId: string,\n playerName: string,\n onSetName: (name: string) => void,\n}\n\ninterface GameShellState {\n name: string,\n hasJoined: boolean,\n nameIsAvailable: boolean,\n nameIsAvailableRunning: boolean,\n loading: boolean,\n}\n\nexport class GameShell extends Component\n\n {!this.state.gameState &&
\n \n
\n
\n }\n\n {this.state.gameState && this.state.gameState.state === 2 &&\n \n \n
\n
\n }\n\n \n
\n );\n } else {\n return (Joining game {this.props.gameId}
\n \n\n
\n\n
\n );\n }\n}","import React from 'react';\nimport './App.css';\nimport { Route } from 'react-router';\nimport { Layout } from './components/Layout';\nimport { Home } from './components/Home';\nimport { About } from './components/About';\nimport { GameShell } from './components/GameShell';\nimport { BrowserRouter as Router } from 'react-router-dom'\nimport Axios from 'axios'\nimport { Rules } from './components/Rules';\n\nexport class App extends React.Component<{}, any> {\n constructor(props: any) {\n super(props)\n this.state = {\n playerId: localStorage.getItem(\"playerid\"),\n playerName: localStorage.getItem(\"playername\"),\n }\n\n this.setName = this.setName.bind(this);\n }\n\n componentDidMount() {\n if (!this.state.playerId) {\n Axios.get('/api/player/generate', {})\n .then((resp: any) => {\n this.setState({\n playerId: resp.data.id,\n })\n localStorage.setItem('playerid', resp.data.id)\n })\n }\n }\n\n setName(name: string) {\n this.setState({\n playerName: name,\n });\n localStorage.setItem('playername', name);\n }\n\n render() {\n if (!this.state.playerId) return null;\n\n return (\n Rulez for Werdz
\n\nIt is recommended that you play this while video chatting with the other 3-10 other players.
\nWhat works well for us is sitting in front of a laptop for the video chat, and using phones for the game.
\n\n- \n
- Connect with your friends on video (I suggest meet.jit.si) \n
- One player starts a new game and shares the code with everybody via. the video chat. That player chooses the number of rounds, and the game mode.\n \n
- Everybody joins the game \n
- Some player chooses the game type, number of rounds, and presses the start button \n
\n
\n\n Rules for Real Word (Normal) Mode\n
\n \n
\n - \n
- This game will consist of a number rounds. \n
- In each round, you will be presented with an unusual but real word. \n
- You will have to make up a definition that you think your friends will believe is the correct definition (hint: the real definitions are usually fairly short such as 'room for conversation'). \n
- Once everybody has submitted their best guess for what the word means, you'll be presented with a shuffled list of everybody's definitions and the correct definition. \n
- You get one point for each of your friends who mistakenly pick your definition as the correct definition. \n
- You get three points if you can correctly identify the real definition. \n
- At the end of the game, the player with the most points is the winner. \n
- That's it. Have fun. \n
\n\n
\n
\n\n\n \n Rules for Fake Word Mode \n
\n \n
\n - \n
- This game will consist of a number rounds. \n
- In each round, you will be presented with a crazy random word. \n
- You will have to make up an outlandish definition for the crazy random word. Something that's so hilarious and awesome that your friends have to vote for it! \n
- You get one point for each vote your crazy definition gets. \n
- At the end of the game, the player with the most points is the winner. \n
- That's it. Have fun. \n