Real-time online adaptation of the Wavelength party game
The game is an online adaptation of the social game Wavelength, which can be played via telephone or video conference. In times of remote work, home office work and social distancing in the wake of the Corona pandemic, this adaptation supports virtual teaming and shared enjoyment.
In the game, one player describes the other players with a hint, on a scale between which a mark is placed. The aim is to relate the value system of the tipster to one's own value system. The other players discuss how the tipster might understand the clue and where his clues might lie on this scale.
In the game, two teams take turns playing against each other. One team member is shown two opposing terms. A point is marked on a scale between these two terms. This point is now to be described to the other team members as precisely as possible with a word, a term or a short sentence.
Their own team does not know this position and now tries to hit the point as accurately as possible. The closer the team has placed the marker to the point, the more points it wins. Up to four points are possible here.
After the team's guess attempt, the other team also has the opportunity to score a point by guessing whether the marker is to the left or right of the other team's guess. If the team is correct, they receive one point.
The first team to score 10 points wins.
To add a new translation, follow these steps:
- Determine the ISO language code for your target language. See https://www.andiamo.co.uk/resources/iso-language-codes/
- Add the new language code to
src/i18n.tsx
in the "allLanguages" array - Copy the contents of
public/locales/en
into a new folderpublic/locales\XX
for your language code - Translate the files
translation.json
andspectrum-cards
into the target language - Test the adapted language by starting the local server, selecting the new language and testing the correct display.
If everything is correct, make the updated files available to the upstream as PR.
The file is in JSON format. The entries are stored in two hierarchies.
The first hierarchy indicates the file in which the translation is implemented. This information may not be relevant for the user, but it helps to locate the position of the translation more easily in later developments.
The second hierarchy describes the text to be translated. The keys stored here are to be translated into the respective language. Placeholders are possible here, which can be specified with {{ ... }}
and can be placed anywhere in the entry to be translated, depending on the language.
Sample:
{
"commonfooter": {
"developed_by": "was developed by Wolfgang Warsch, Alex Hague and Justin Vickers.",
"adapted_for_web": "Adapted for web",
"adapted_for_web_by": "by Evan Bailey and Margarethe Schoen.",
"support_patreon": "Support us on Patreon!"
},
"landingpage": {
...
Meaning:
commonfooter
: filename of affected file
developedby
: string to be translated
...
You can easily find the positions where the replacements take place via the first and second hierarchy. To do this, open the respective file (example: commonfooter
) and search for commonfooter.developed_by
. You can then easily find the context of the replacement.
You can simply run the project on your computer. The following steps are necessary:
- Clone or fork the repository
- Install node.js and npm
- Change to the project directory
- Start the command
npm outdated
and check the outdated packages - Run
npm update --save
to update all obsolete packages to the latest minor version - Run the command
npm install
to install dependent and maybe missing packages - Launch the application on the local system via `npm start
- The default browser will be called with the address
http://localhost:3000
In the project directory, you can run:
Checks the included packages for up-to-dateness , updates them and installs required dependencies.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.