add more translations

.gitignore

@@ -11,6 +11,7 @@ lol-cleaned.png
 clean.png
 utils/ocean-tiles/ocean
 utils/osm-tiles/osm
+i18n/*.mo
 
 # Created by https://www.gitignore.io/api/node,webstorm
 

i18n/de.po

@@ -1,35 +1,96 @@
 msgid ""
 msgstr ""
-"Content-Type: text/plain; charset=utf-8\n"
-"Plural-Forms: nplurals = 2; plural = (n != 1);\n"
-"Language: de\n"
-"mime-version: 1.0\n"
-"Content-Transfer-Encoding: 8bit\n"
 "Project-Id-Version: \n"
 "POT-Creation-Date: \n"
 "PO-Revision-Date: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
+"Language: de\n"
 "MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals = 2; plural = (n != 1);\n"
 "X-Generator: Poedit 2.3\n"
 
-#: src/components/ForgotPasswordModal.jsx:20 src/components/RegisterModal.jsx:21
+#: src/components/ExpandMenuButton.jsx:19
-#: src/components/UserAreaModal.jsx:128
+msgid "Close Menu"
-msgid "Consider joining us on Guilded:"
+msgstr "Schließe Menü"
-msgstr "Triff uns und andere Spieler auf guilded:"
 
-#: src/components/HelpModal.jsx:63 src/components/HelpModal.jsx:80
+#: src/components/ExpandMenuButton.jsx:19
-msgid "Controls"
+msgid "Open Menu"
-msgstr "Steuerung"
+msgstr "Öffne Menü"
 
-#: src/components/HelpModal.jsx:65
+#: src/components/ChatButton.jsx:61
-msgid "Click a color in palette to select it"
+msgid "Close Chat"
-msgstr "Klicke auf eine Farbe in der Palette um sie auszuwählen"
+msgstr "Schließe Chat"
 
-#: src/components/HelpModal.jsx:66
+#: src/components/ChatButton.jsx:61
-#, javascript-format
+msgid "Open Chat"
-msgid "Press ${ bindG } to toggle grid"
+msgstr "Öffne Chat"
-msgstr "Drücke ${ bindG } um das Raster ein- und auszuschalten"
+
+#: src/components/OnlineBox.jsx:22
+msgid "User online"
+msgstr "Spieler anwesend"
+
+#: src/components/OnlineBox.jsx:25
+msgid "Pixel gesetzt"
+msgstr "Pixel plaziert"
+
+#: src/components/CanvasSwitchButton.jsx:20
+msgid "Canvas Selection"
+msgstr "Leinwand auswahl"
+
+#: src/components/CoordinatesBox.jsx:26
+msgid "Copy to Clipboard"
+msgstr "Kopiere in die Zwischenablage"
+
+#: src/components/DownloadButton.jsx:37
+msgid "Make Screenshot"
+msgstr "Erstelle eine Bildschirmaufnahme"
+
+#: src/components/LogInButton.jsx:20 src/components/UserAreaModal.jsx:160
+msgid "User Area"
+msgstr "Spielerbereich"
+
+#: src/components/SettingsButton.jsx:20 src/components/SettingsModal.jsx:267
+msgid "Settings"
+msgstr "Einstellungen"
+
+#: src/components/HelpButton.jsx:20
+msgid "Help"
+msgstr "Hilfe"
+
+#: src/components/Chat.jsx:143
+msgid "Channel settings"
+msgstr "Channel Einstellungen"
+
+#: src/components/Chat.jsx:152
+msgid "maximize"
+msgstr "maximieren"
+
+#: src/components/Chat.jsx:168
+msgid "Start chatting here"
+msgstr "Beginne hier zu chatten"
+
+#: src/components/Chat.jsx:200
+msgid "Chat here"
+msgstr "Chatte hier"
+
+#: src/components/Chat.jsx:219
+msgid "You must be logged in to chat"
+msgstr "Melde dich an um zu chatten"
+
+#: src/components/GlobeButton.jsx:31
+msgid "Globe View"
+msgstr "Globus Ansicht"
+
+#: src/components/PalselButton.jsx:25
+msgid "Close Palette"
+msgstr "Schließe Palette"
+
+#: src/components/PalselButton.jsx:25
+msgid "Open Palette"
+msgstr "Öffne Palette"
 
 #: src/components/HelpModal.jsx:34 src/components/HelpModal.jsx:35
 msgid "Privacy Policy"
@@ -41,11 +102,38 @@ msgstr "Nutzungsbedingungen"
 
 #: src/components/HelpModal.jsx:40
 msgid "your IP"
-msgstr "deine IP"
+msgstr "deiner IP"
 
 #: src/components/HelpModal.jsx:46
 msgid "Place color pixels on a large canvas with other players online!"
-msgstr "Zeichne gemeinsam mit anderen Spielern auf einer großen Leinwand online!"
+msgstr ""
+"Zeichne gemeinsam mit anderen Spielern auf einer großen Leinwand online!"
+
+#: src/components/HelpModal.jsx:47
+msgid ""
+"Our main canvas is a huge worldmap, you can place wherever you like, but you "
+"will have to wait a specific Cooldown between pixels. You can check out the "
+"cooldown and requiremnts on the Canvas Selection menu (globe button on top). "
+"Some canvases have a different cooldown for replacing a user-set pixels than "
+"placing on a unset pixel. i.e. 4s/7s means 4s on fresh pixels and 7s on "
+"already set pixels."
+msgstr ""
+"Unsere standard Leinwand ist eine große Weltkarte. Pixel können überall "
+"gesetzen werden, aber es kann nur eine begrenzte Anzahl and Pixels per Zeit "
+"platziert werden. Die Vorraussetzungen und die Wartezeit sind im Auswahlmenu "
+"zu sehen (Globus Taste am oberen Bildschirmrand). Manche Leinwände haben "
+"eine niedrigere Wartezeit für ungesetzte Pixel im Vergleich zu von anderen "
+"Spielern gesetzte Pixel. z.B. 4s/7s heißt dass man 4s für jedes neue Pixel "
+"warten muss, allerdings 7s wenn man über ein Pixel eines anderen Spielers "
+"setzt."
+
+#: src/components/HelpModal.jsx:51
+msgid ""
+"Higher zoomlevels take some time to update, the 3D globe gets updated at "
+"least once per day."
+msgstr ""
+"Die höheren Zoomlevel brauchen etwas Zeit um aktualisiert zu werden, der 3D "
+"Globus wird mindestens einmal pro tag neu geladen."
 
 #: src/components/HelpModal.jsx:52
 msgid "Have fun!"
@@ -63,6 +151,15 @@ msgstr "Quelltext auf "
 msgid "Map Data"
 msgstr "Karten Dateien"
 
+#: src/components/HelpModal.jsx:57
+msgid ""
+"The bare map data that we use, together with converted OpenStreetMap tiles "
+"for orientation, can be downloaded from mega.nz here: "
+msgstr ""
+"Die Kartendaten welche wir benutzen, zusammen mit konvertierten "
+"OpenStreetMap  Kacheln zur orientierung können auf mega.nz heruntergeladen "
+"werden: "
+
 #: src/components/HelpModal.jsx:59
 msgid "Detected as Proxy?"
 msgstr "Als Proxy erkannt?"
@@ -70,14 +167,27 @@ msgstr "Als Proxy erkannt?"
 #: src/components/HelpModal.jsx:61
 #, javascript-format
 msgid ""
-"If you got detected as proxy, but you are none, please go to our ${ guildedLink } "
+"If you got detected as proxy, but you are none, please go to our "
-"or send us an e-mail with ${ getIPLink } to ${ mailLink }. Do not post your IP "
+"${ guildedLink } or send us an e-mail with ${ getIPLink } to ${ mailLink }. "
-"anywhere else. We are sorry for the inconvenience."
+"Do not post your IP anywhere else. We are sorry for the inconvenience."
 msgstr ""
-"Solltest do als Proxy erkannt sein, aber du benutzt keines, bitte kontaktiere uns "
+"Solltest do als Proxy erkannt sein, aber du benutzt keines, bitte "
-"auf ${ guildedLink } oder sende uns eine Mail mit ${ getIPLink } auf "
+"kontaktiere uns auf ${ guildedLink } oder sende uns eine Mail mit "
-"${ mailLink }. Sende deine IP zu niemanden sonst. Wir entschuldigen uns für die "
+"${ getIPLink } auf ${ mailLink }. Sende deine IP zu niemanden sonst. Wir "
-"Unannehmlichkeiten."
+"entschuldigen uns für die Unannehmlichkeiten."
+
+#: src/components/HelpModal.jsx:63 src/components/HelpModal.jsx:80
+msgid "Controls"
+msgstr "Steuerung"
+
+#: src/components/HelpModal.jsx:65
+msgid "Click a color in palette to select it"
+msgstr "Klicke auf eine Farbe in der Palette um sie auszuwählen"
+
+#: src/components/HelpModal.jsx:66
+#, javascript-format
+msgid "Press ${ bindG } to toggle grid"
+msgstr "Drücke ${ bindG } um das Raster ein- und auszuschalten"
 
 #: src/components/HelpModal.jsx:67
 msgid "Press ${ bindX } to toggle showing of pixel activity"
@@ -104,7 +214,8 @@ msgstr "Drücke ${ bindW }, ${ bindA }, ${ bindS }, ${ bindD } zum navigieren"
 
 #: src/components/HelpModal.jsx:72 src/components/HelpModal.jsx:83
 #, javascript-format
-msgid "Press ${ bindAUp }, ${ bindALeft }, ${ bindADown }, ${ bindARight } to move"
+msgid ""
+"Press ${ bindAUp }, ${ bindALeft }, ${ bindADown }, ${ bindARight } to move"
 msgstr ""
 "Drücke ${ bindAUp }, ${ bindALeft }, ${ bindADown }, ${ bindARight } zum "
 "navigieren"
@@ -112,7 +223,8 @@ msgstr ""
 #: src/components/HelpModal.jsx:73
 msgid "Drag ${ mouseSymbol } mouse or ${ touchSymbol } pan to move"
 msgstr ""
-"Ziehe mit der ${ mouseSymbol } Maus oder ${ touchSymbol } wische zum navigieren"
+"Ziehe mit der ${ mouseSymbol } Maus oder ${ touchSymbol } wische zum "
+"navigieren"
 
 #: src/components/HelpModal.jsx:74
 #, javascript-format
@@ -124,24 +236,32 @@ msgstr ""
 #: src/components/HelpModal.jsx:75
 msgid "Hold left ${ bindShift } for placing while moving mouse"
 msgstr ""
-"Halte die linke ${ bindShift } Taste gedrückt um Pixel unter der Maus zu setzen"
+"Halte die linke ${ bindShift } Taste gedrückt um Pixel unter der Maus zu "
+"setzen"
 
 #: src/components/HelpModal.jsx:76
 #, javascript-format
 msgid ""
-"Hold right ${ bindShift } for placing while moving mouse according to historical "
+"Hold right ${ bindShift } for placing while moving mouse according to "
-"view"
+"historical view"
 msgstr ""
-"Halte die rechte ${ bindShift } Taste gedrückt um Pixel unter der Maus nach der "
+"Halte die rechte ${ bindShift } Taste gedrückt um Pixel unter der Maus nach "
-"aktuellen historischen Ansicht zu setzen"
+"der aktuellen historischen Ansicht zu setzen"
+
+#: src/components/HelpModal.jsx:77 src/components/HelpModal.jsx:88
+#, javascript-format
+msgid "${ mouseSymbol } Left click or ${ touchSymbol } tap to place a pixel"
+msgstr ""
+"${ mouseSymbol } Linksklick oder ${ touchSymbol } tippe um ein Pixel zu "
+"platzieren"
 
 #: src/components/HelpModal.jsx:78 src/components/HelpModal.jsx:90
 msgid ""
-"Click ${ mouseSymbol } middle mouse button or ${ touchSymbol } long-tap to select "
+"Click ${ mouseSymbol } middle mouse button or ${ touchSymbol } long-tap to "
-"current hovering color"
+"select current hovering color"
 msgstr ""
-"Klicke ${ mouseSymbol } die mittlere Maustaste oder ${ touchSymbol } tippe lange "
+"Klicke ${ mouseSymbol } die mittlere Maustaste oder ${ touchSymbol } tippe "
-"um eine Farbe von der Leinwand auszuwählen"
+"lange um eine Farbe von der Leinwand auszuwählen"
 
 #: src/components/HelpModal.jsx:84
 msgid "Press ${ bindE } and ${ bindC } to fly up and down"
@@ -150,35 +270,31 @@ msgstr "Drücke ${ bindE } oder ${ bindC } um hoch und runter zu fliegen"
 #: src/components/HelpModal.jsx:85
 #, javascript-format
 msgid "${ mouseSymbol } Hold left mouse button and drag mouse to rotate"
-msgstr "${ mouseSymbol } Halte die linke Maustaste gedrückt und ziehe um zu rotieren"
+msgstr ""
+"${ mouseSymbol } Halte die linke Maustaste gedrückt und ziehe um zu rotieren"
 
 #: src/components/HelpModal.jsx:86
 #, javascript-format
 msgid ""
-"${ mouseSymbol } Scroll mouse wheel or hold ${ mouseSymbol } middle mouse button "
+"${ mouseSymbol } Scroll mouse wheel or hold ${ mouseSymbol } middle mouse "
-"and drag to zoom"
+"button and drag to zoom"
 msgstr ""
-"${ mouseSymbol } Scrolle mit dem Mausrad oder halte ${ mouseSymbol } die mittlere "
+"${ mouseSymbol } Scrolle mit dem Mausrad oder halte ${ mouseSymbol } die "
-"Maustaste gedrückt und ziehe um zu zoomen"
+"mittlere Maustaste gedrückt und ziehe um zu zoomen"
 
 #: src/components/HelpModal.jsx:87
 msgid "${ mouseSymbol } Right click and drag mouse to pan"
 msgstr ""
-"${ mouseSymbol } Halte die rechte Maustaste gedrückt und ziehe um dich zu bewegen"
+"${ mouseSymbol } Halte die rechte Maustaste gedrückt und ziehe um dich zu "
-
+"bewegen"
-#: src/components/HelpModal.jsx:77 src/components/HelpModal.jsx:88
-#, javascript-format
-msgid "${ mouseSymbol } Left click or ${ touchSymbol } tap to place a pixel"
-msgstr ""
-"${ mouseSymbol } Linksklick oder ${ touchSymbol } tippe um ein Pixel zu platzieren"
 
 #: src/components/HelpModal.jsx:89
 #, javascript-format
 msgid ""
 "${ mouseSymbol } Right click or ${ touchSymbol } double-tap to remove a pixel"
 msgstr ""
-"${ mouseSymbol } Rechtsklick oder ${ touchSymbol } tippe zweimal um ein Voxel zu "
+"${ mouseSymbol } Rechtsklick oder ${ touchSymbol } tippe zweimal um ein "
-"entfernen"
+"Voxel zu entfernen"
 
 #: src/components/HelpModal.jsx:92
 msgid "Partners:"
@@ -190,13 +306,13 @@ msgid ""
 "This site is protected by reCAPTCHA and the Google ${ reCaptchaPP } and "
 "${ reCaptchaTOS } apply."
 msgstr ""
-"Diese Seite ist mit Google reCaptcha geschützt und deren ${ reCaptchaPP } und "
+"Diese Seite ist mit Google reCaptcha geschützt und deren ${ reCaptchaPP } "
-"${ reCaptchaTOS } gelten."
+"und ${ reCaptchaTOS } gelten."
 
 #: src/components/HelpModal.jsx:103
 msgid ""
-"This site is protected by hCAPTCHA and its ${ hCaptchaPP } and ${ hCaptchaTOS } "
+"This site is protected by hCAPTCHA and its ${ hCaptchaPP } and "
-"apply."
+"${ hCaptchaTOS } apply."
 msgstr ""
 "Diese Seite ist mit hCaptcha geschützt und deren ${ hCaptchaPP } und "
 "${ hCaptchaTOS } gelten."
@@ -205,125 +321,211 @@ msgstr ""
 msgid "Welcome to PixelPlanet.fun"
 msgstr "Willkommen auf PixelPlanet.fun"
 
-#: src/components/HelpModal.jsx:47
+#: src/components/UserAreaModal.jsx:33
+msgid "Login to access more features and stats."
+msgstr "Melde dich and um mehr Funktionen und Statistikan zu sehen"
+
+#: src/components/UserAreaModal.jsx:35
+msgid "Login with Mail:"
+msgstr "Mit Mail anmelden:"
+
+#: src/components/UserAreaModal.jsx:42
+msgid "I forgot my Password."
+msgstr "Ich habe mein Passwort vergessen"
+
+#: src/components/UserAreaModal.jsx:84
+msgid "or register here:"
+msgstr "oder registriere dich hier:"
+
+#: src/components/UserAreaModal.jsx:85
+msgid "Register"
+msgstr "Registrieren"
+
+#: src/components/UserAreaModal.jsx:123
+msgid "Loading..."
+msgstr "Lade..."
+
+#: src/components/ForgotPasswordModal.jsx:20
+#: src/components/RegisterModal.jsx:21 src/components/UserAreaModal.jsx:130
+msgid "Consider joining us on Guilded:"
+msgstr "Triff uns und andere Spieler auf guilded:"
+
+#: src/components/RegisterModal.jsx:18
+msgid "Register new account here"
+msgstr "Registriere ein neues Konto hier"
+
+#: src/components/RegisterModal.jsx:38
+msgid "Register New Account"
+msgstr "Registriere neues Konto"
+
+#: src/components/SettingsModal.jsx:123
+msgid "Show Grid"
+msgstr "Zeige Raster"
+
+#: src/components/SettingsModal.jsx:124
+msgid "Turn on grid to highlight pixel borders."
+msgstr "Aktiviere das Raster um  Pixelgrenzen zu sehen."
+
+#: src/components/SettingsModal.jsx:130
+msgid "Show Pixel Activity"
+msgstr "Zeige Pixelaktivität"
+
+#: src/components/SettingsModal.jsx:131
+msgid "Show circles where pixels are placed."
+msgstr "Zeige Kreise wo Pixel von Spielern gesetzt werden"
+
+#: src/components/SettingsModal.jsx:137
+msgid "Disable Game Sounds"
+msgstr "Deaktiviere Spiel Ton"
+
+#: src/components/SettingsModal.jsx:139
+msgid "All sound effects will be disabled."
+msgstr "alle Toneffekte werden ausgeschaltet"
+
+#: src/components/SettingsModal.jsx:145
+msgid "Enable chat notifications"
+msgstr "Aktiviere Chat Benachrichtigungen"
+
+#: src/components/SettingsModal.jsx:146
+msgid "Play a sound when new chat messages arrive"
+msgstr "Spiele ein Geräusch wenn eine neue Chat Nachricht eintrifft"
+
+#: src/components/SettingsModal.jsx:151
+msgid "Auto Zoom In"
+msgstr "Automaticher Zoom"
+
+#: src/components/SettingsModal.jsx:153
 msgid ""
-"Our main canvas is a huge worldmap, you can place wherever you like, but you will "
+"Zoom in instead of placing a pixel when you tap the canvas and your zoom is "
-"have to wait a specific Cooldown between pixels. You can check out the cooldown "
+"small."
-"and requiremnts on the Canvas Selection menu (globe button on top). Some canvases "
-"have a different cooldown for replacing a user-set pixels than placing on a unset "
-"pixel. i.e. 4s/7s means 4s on fresh pixels and 7s on already set pixels."
 msgstr ""
-"Unsere standard Leinwand ist eine große Weltkarte. Pixel können überall gesetzen "
+"Zoome rein anstatt ein Pixel zu setzen wenn auf kleineren Zoomlevel geklickt "
-"werden, aber es kann nur eine begrenzte Anzahl and Pixels per Zeit platziert "
+"wird."
-"werden. Die Vorraussetzungen und die Wartezeit sind im Auswahlmenu zu sehen "
-"(Globus Taste am oberen Bildschirmrand). Manche Leinwände haben eine niedrigere "
-"Wartezeit für ungesetzte Pixel im Vergleich zu von anderen Spielern gesetzte "
-"Pixel. z.B. 4s/7s heißt dass man 4s für jedes neue Pixel warten muss, allerdings "
-"7s wenn man über ein Pixel eines anderen Spielers setzt."
 
-#: src/components/HelpModal.jsx:51
+#: src/components/SettingsModal.jsx:158
+msgid "Compact Palette"
+msgstr "Kompakte Palette"
+
+#: src/components/SettingsModal.jsx:160
+msgid "Display Palette in a compact form that takes less screen space."
+msgstr ""
+"Zeige die Palette in einer kleineren Form an, welche weniger Platz benötigt"
+
+#: src/components/SettingsModal.jsx:165
+msgid "Potato Mode"
+msgstr "Erdapfel Modus"
+
+#: src/components/SettingsModal.jsx:166
+msgid "For when you are playing on a potato."
+msgstr "Wenn du auf einer Kartoffel spielst."
+
+#: src/components/SettingsModal.jsx:171
+msgid "Light Grid"
+msgstr "Helles Raster"
+
+#: src/components/SettingsModal.jsx:172
+msgid "Show Grid in white instead of black."
+msgstr "Zeige das Raster in weiß anstatt schwarz"
+
+#: src/components/SettingsModal.jsx:179
+msgid "Historical View"
+msgstr "Historische Ansicht"
+
+#: src/components/SettingsModal.jsx:180
+msgid "Check out past versions of the canvas."
+msgstr "Siehe vergangene Versionen der Leinwand"
+
+#: src/components/SettingsModal.jsx:188
+msgid "Themes"
+msgstr "Themen"
+
+#: src/components/SettingsModal.jsx:189
+msgid "How pixelplanet should look like."
+msgstr "Wähle aus wie pixelplanet aussehen soll"
+
+#: src/components/ArchiveModal.jsx:20
 msgid ""
-"Higher zoomlevels take some time to update, the 3D globe gets updated at least "
+"While we tend to not delete canvases, some canvases are started for fun or "
-"once per day."
+"as a request by users who currently like a meme. Those canvases can get "
+"boring after a while and after weeks of no major change and if they really "
+"aren't worth being kept active, we decide to remove them."
 msgstr ""
-"Die höheren Zoomlevel brauchen etwas Zeit um aktualisiert zu werden, der 3D "
-"Globus wird mindestens einmal pro tag neu geladen."
 
-#: src/components/HelpModal.jsx:57
+#: src/components/ArchiveModal.jsx:22
 msgid ""
-"The bare map data that we use, together with converted OpenStreetMap tiles for "
+"Here we collect those canvases to archive them in a proper way (which is "
-"orientation, can be downloaded from mega.nz here: "
+"currently just one)."
 msgstr ""
-"Die Kartendaten welche wir benutzen, zusammen mit konvertierten OpenStreetMap  "
+"Hier sammeln wir vergangene Leinwände um sie ordentlich zu archivieren (zur "
-"Kacheln zur orientierung können auf mega.nz heruntergeladen werden: "
+"Zeit nur eine)."
 
-#: src/components/CanvasSwitchButton.jsx:20
+#: src/components/ArchiveModal.jsx:24
-msgid "Canvas Selection"
+msgid "Political Compass Canvas"
-msgstr "Leinwand auswahl"
+msgstr "Politischer Kompass Leinwand"
 
-#: src/components/Chat.jsx:143
+#: src/components/ArchiveModal.jsx:31
-msgid "Channel settings"
+msgid ""
-msgstr "Channel Einstellungen"
+"This canvas got requested during a time of political conflicts on the main "
+"Earth canvas. It was a 1024x1024 representation of the political compass "
+"with a 5s coolodwn and 60s stacking. It got launched on May 11th and "
+"remained active for months till it got shut down on November 30th."
+msgstr ""
 
-#: src/components/Chat.jsx:152
+#: src/components/ArchiveModal.jsx:32
-msgid "maximize"
+msgid ""
-msgstr "maximieren"
+"We decided to archive it as a timelapse with lossless encoded webm. Taking a "
+"screenshot from the timelapse results in a perfect 1:1 representation of how "
+"the canvas was at that time."
+msgstr ""
+"Wir haben uns entschieden sie in der Form eines Zeitraffers in verlustfrei "
+"kodiertes webm zu archivieren. Eine Bildschirmaufnahme aus dem Video ergibt "
+"eine perfekte 1:1 Abbildung der Leinwand zu dieser Zeit."
 
-#: src/components/Chat.jsx:168
+#: src/components/ArchiveModal.jsx:50
-msgid "Start chatting here"
+msgid "Canvas Archive"
-msgstr "Beginne hier zu chatten"
+msgstr "Leinwand Archiv"
 
-#: src/components/Chat.jsx:200
+#: src/components/ForgotPasswordModal.jsx:16
-msgid "Chat here"
+msgid "Enter your mail adress and we will send you a new password:"
-msgstr "Chatte hier"
+msgstr "Gib deine Mail Adresse an und wir senden dir ein neues Passwort."
 
-#: src/components/ChatButton.jsx:61
+#: src/components/ForgotPasswordModal.jsx:37
-msgid "Close Chat"
+msgid "Restore my Password"
-msgstr "Schließe Chat"
+msgstr "Passwort wiederherstellen"
 
-#: src/components/ChatButton.jsx:61
+#: src/components/ChatModal.jsx:35
-msgid "Open Chat"
+msgid "Chat"
-msgstr "Öffne Chat"
+msgstr "Unterhaltung"
 
-#: src/components/CoordinatesBox.jsx:26
+#: src/components/LogInForm.jsx:104
-msgid "Copy to Clipboard"
+msgid "Name or Email"
-msgstr "Kopiere in die Zwischenablage"
+msgstr "Name oder Email"
 
-#: src/components/DownloadButton.jsx:37
+#: src/components/LogInForm.jsx:111
-msgid "Make Screenshot"
+msgid "Password"
-msgstr "Erstelle eine Bildschirmaufnahme"
+msgstr "Passwort"
 
-#: src/components/ExpandMenuButton.jsx:19
+#: src/components/LogInForm.jsx:115
-msgid "Close Menu"
+msgid "LogIn"
-msgstr "Schließe Menü"
+msgstr "Einloggen"
 
-#: src/components/ExpandMenuButton.jsx:19
+#: src/components/Rankings.jsx:49
-msgid "Open Menu"
+msgid "Ranking updates every 5 min. Daily rankings get reset at midnight UTC."
-msgstr "Öffne Menü"
+msgstr ""
+"Die Rangliste wird alle 5min aktualisiert. Die tägliche Liste wird um "
+"Mitternacht UTC zurückgestellt."
 
-#: src/components/GlobeButton.jsx:31
+#: src/components/HelpModal.jsx:15 src/components/SettingsModal.jsx:125
-msgid "Globe View"
-msgstr "Globus Ansicht"
-
-#: src/components/HelpButton.jsx:20
-msgid "Help"
-msgstr "Hilfe"
-
-#: src/components/LogInButton.jsx:20
-msgid "User Area"
-msgstr "Spielerbereich"
-
-#: src/components/OnlineBox.jsx:21
-msgid "User online"
-msgstr "Spieler anwesend"
-
-#: src/components/OnlineBox.jsx:23
-msgid "Pixel gesetzt"
-msgstr "Pixel plaziert"
-
-#: src/components/PalselButton.jsx:25
-msgid "Close Palette"
-msgstr "Schließe Palette"
-
-#: src/components/PalselButton.jsx:25
-msgid "Open Palette"
-msgstr "Öffne Palette"
-
-#: src/components/SettingsButton.jsx:20
-msgid "Settings"
-msgstr "Einstellungen"
-
-#: src/components/HelpModal.jsx:15
 msgctxt "keybinds"
 msgid "G"
 msgstr ""
 
-#: src/components/HelpModal.jsx:16
+#: src/components/HelpModal.jsx:16 src/components/SettingsModal.jsx:132
 msgctxt "keybinds"
 msgid "X"
 msgstr ""
 
-#: src/components/HelpModal.jsx:17
+#: src/components/HelpModal.jsx:17 src/components/SettingsModal.jsx:182
 msgctxt "keybinds"
 msgid "H"
 msgstr ""
@@ -338,6 +540,11 @@ msgctxt "keybinds"
 msgid "Q"
 msgstr ""
 
+#: src/components/HelpModal.jsx:20
+msgctxt "keybinds"
+msgid "E"
+msgstr ""
+
 #: src/components/HelpModal.jsx:21
 msgctxt "keybinds"
 msgid "W"
@@ -358,11 +565,6 @@ msgctxt "keybinds"
 msgid "D"
 msgstr ""
 
-#: src/components/HelpModal.jsx:20
-msgctxt "keybinds"
-msgid "E"
-msgstr ""
-
 #: src/components/HelpModal.jsx:31
 msgctxt "keybinds"
 msgid "Shift"
@@ -372,3 +574,8 @@ msgstr ""
 msgctxt "keybinds"
 msgid "C"
 msgstr ""
+
+#: src/components/SettingsModal.jsx:140
+msgctxt "keybinds"
+msgid "M"
+msgstr ""

i18n/template.pot

@@ -11,14 +11,6 @@ msgstr ""
 msgid "Open Menu"
 msgstr ""
 
-#: src/components/OnlineBox.jsx:22
-msgid "User online"
-msgstr ""
-
-#: src/components/OnlineBox.jsx:25
-msgid "Pixel gesetzt"
-msgstr ""
-
 #: src/components/ChatButton.jsx:61
 msgid "Close Chat"
 msgstr ""
@@ -27,6 +19,14 @@ msgstr ""
 msgid "Open Chat"
 msgstr ""
 
+#: src/components/OnlineBox.jsx:22
+msgid "User online"
+msgstr ""
+
+#: src/components/OnlineBox.jsx:25
+msgid "Pixel gesetzt"
+msgstr ""
+
 #: src/components/CanvasSwitchButton.jsx:20
 msgid "Canvas Selection"
 msgstr ""
@@ -39,12 +39,14 @@ msgstr ""
 msgid "Make Screenshot"
 msgstr ""
 
-#: src/components/SettingsButton.jsx:20
+#: src/components/LogInButton.jsx:20
-msgid "Settings"
+#: src/components/UserAreaModal.jsx:160
+msgid "User Area"
 msgstr ""
 
-#: src/components/LogInButton.jsx:20
+#: src/components/SettingsButton.jsx:20
-msgid "User Area"
+#: src/components/SettingsModal.jsx:267
+msgid "Settings"
 msgstr ""
 
 #: src/components/HelpButton.jsx:20
@@ -75,6 +77,14 @@ msgstr ""
 msgid "Globe View"
 msgstr ""
 
+#: src/components/PalselButton.jsx:25
+msgid "Close Palette"
+msgstr ""
+
+#: src/components/PalselButton.jsx:25
+msgid "Open Palette"
+msgstr ""
+
 #: src/components/HelpModal.jsx:34
 #: src/components/HelpModal.jsx:35
 msgid "Privacy Policy"
@@ -268,31 +278,205 @@ msgstr ""
 msgid "Welcome to PixelPlanet.fun"
 msgstr ""
 
-#: src/components/PalselButton.jsx:25
+#: src/components/UserAreaModal.jsx:33
-msgid "Close Palette"
+msgid "Login to access more features and stats."
 msgstr ""
 
-#: src/components/PalselButton.jsx:25
+#: src/components/UserAreaModal.jsx:35
-msgid "Open Palette"
+msgid "Login with Mail:"
+msgstr ""
+
+#: src/components/UserAreaModal.jsx:42
+msgid "I forgot my Password."
+msgstr ""
+
+#: src/components/UserAreaModal.jsx:84
+msgid "or register here:"
+msgstr ""
+
+#: src/components/UserAreaModal.jsx:85
+msgid "Register"
+msgstr ""
+
+#: src/components/UserAreaModal.jsx:123
+msgid "Loading..."
 msgstr ""
 
 #: src/components/ForgotPasswordModal.jsx:20
 #: src/components/RegisterModal.jsx:21
-#: src/components/UserAreaModal.jsx:128
+#: src/components/UserAreaModal.jsx:130
 msgid "Consider joining us on Guilded:"
 msgstr ""
 
+#: src/components/RegisterModal.jsx:18
+msgid "Register new account here"
+msgstr ""
+
+#: src/components/RegisterModal.jsx:38
+msgid "Register New Account"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:123
+msgid "Show Grid"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:124
+msgid "Turn on grid to highlight pixel borders."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:130
+msgid "Show Pixel Activity"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:131
+msgid "Show circles where pixels are placed."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:137
+msgid "Disable Game Sounds"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:139
+msgid "All sound effects will be disabled."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:145
+msgid "Enable chat notifications"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:146
+msgid "Play a sound when new chat messages arrive"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:151
+msgid "Auto Zoom In"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:153
+msgid ""
+"Zoom in instead of placing a pixel when you tap the canvas and your zoom is "
+"small."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:158
+msgid "Compact Palette"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:160
+msgid "Display Palette in a compact form that takes less screen space."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:165
+msgid "Potato Mode"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:166
+msgid "For when you are playing on a potato."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:171
+msgid "Light Grid"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:172
+msgid "Show Grid in white instead of black."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:179
+msgid "Historical View"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:180
+msgid "Check out past versions of the canvas."
+msgstr ""
+
+#: src/components/SettingsModal.jsx:188
+msgid "Themes"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:189
+msgid "How pixelplanet should look like."
+msgstr ""
+
+#: src/components/ArchiveModal.jsx:20
+msgid ""
+"While we tend to not delete canvases, some canvases are started for fun or "
+"as a request by users who currently like a meme. Those canvases can get "
+"boring after a while and after weeks of no major change and if they really "
+"aren't worth being kept active, we decide to remove them."
+msgstr ""
+
+#: src/components/ArchiveModal.jsx:22
+msgid ""
+"Here we collect those canvases to archive them in a proper way (which is "
+"currently just one)."
+msgstr ""
+
+#: src/components/ArchiveModal.jsx:24
+msgid "Political Compass Canvas"
+msgstr ""
+
+#: src/components/ArchiveModal.jsx:31
+msgid ""
+"This canvas got requested during a time of political conflicts on the main "
+"Earth canvas. It was a 1024x1024 representation of the political compass "
+"with a 5s coolodwn and 60s stacking. It got launched on May 11th and "
+"remained active for months till it got shut down on November 30th."
+msgstr ""
+
+#: src/components/ArchiveModal.jsx:32
+msgid ""
+"We decided to archive it as a timelapse with lossless encoded webm. Taking "
+"a screenshot from the timelapse results in a perfect 1:1 representation of "
+"how the canvas was at that time."
+msgstr ""
+
+#: src/components/ArchiveModal.jsx:50
+msgid "Canvas Archive"
+msgstr ""
+
+#: src/components/ForgotPasswordModal.jsx:16
+msgid "Enter your mail adress and we will send you a new password:"
+msgstr ""
+
+#: src/components/ForgotPasswordModal.jsx:37
+msgid "Restore my Password"
+msgstr ""
+
+#: src/components/ChatModal.jsx:35
+msgid "Chat"
+msgstr ""
+
+#: src/components/LogInForm.jsx:104
+msgid "Name or Email"
+msgstr ""
+
+#: src/components/LogInForm.jsx:111
+msgid "Password"
+msgstr ""
+
+#: src/components/LogInForm.jsx:115
+msgid "LogIn"
+msgstr ""
+
+#: src/components/Rankings.jsx:49
+msgid "Ranking updates every 5 min. Daily rankings get reset at midnight UTC."
+msgstr ""
+
 #: src/components/HelpModal.jsx:15
+#: src/components/SettingsModal.jsx:125
 msgctxt "keybinds"
 msgid "G"
 msgstr ""
 
 #: src/components/HelpModal.jsx:16
+#: src/components/SettingsModal.jsx:132
 msgctxt "keybinds"
 msgid "X"
 msgstr ""
 
 #: src/components/HelpModal.jsx:17
+#: src/components/SettingsModal.jsx:182
 msgctxt "keybinds"
 msgid "H"
 msgstr ""
@@ -340,4 +524,9 @@ msgstr ""
 #: src/components/HelpModal.jsx:32
 msgctxt "keybinds"
 msgid "C"
+msgstr ""
+
+#: src/components/SettingsModal.jsx:140
+msgctxt "keybinds"
+msgid "M"
 msgstr ""

src/components/ArchiveModal.jsx

@@ -5,6 +5,7 @@
 /* eslint-disable max-len */
 
 import React from 'react';
+import { t } from 'ttag';
 
 const imageStyle = {
   maxWidth: '20%',
@@ -16,19 +17,19 @@ const imageStyle = {
 const ArchiveModal = () => (
   <p style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
     <p className="modaltext">
-      While we tend to not delete canvases, some canvases are started for fun or as a request by users who currently like a meme.
+      {t`While we tend to not delete canvases, some canvases are started for fun or as a request by users who currently like a meme. \
-      Those canvases can get boring after a while and after weeks of no major change and if they really aren&apos;t worth being kept active, we decide to remove them.<br />
+Those canvases can get boring after a while and after weeks of no major change and if they really aren&apos;t worth being kept active, we decide to remove them.`}<br />
-      Here we collect those canvases to archive them in a proper way (which is currently just one).
+      {t`Here we collect those canvases to archive them in a proper way (which is currently just one).`}
     </p>
-    <p className="modaltitle">Political Compass Canvas</p>
+    <p className="modaltitle">{t`Political Compass Canvas`}</p>
     <img
       style={imageStyle}
       alt="political-compass"
       src="https://storage.pixelplanet.fun/compass-preview.png"
     />
     <p className="modaltext">
-      This canvas got requested during a time of political conflicts on the main Earth canvas. It was a 1024x1024 representation of the political compass with a 5s coolodwn and 60s stacking. It got launched on May 11th and remained active for months till it got shut down on November 30th.<br />
+      {t`This canvas got requested during a time of political conflicts on the main Earth canvas. It was a 1024x1024 representation of the political compass with a 5s coolodwn and 60s stacking. It got launched on May 11th and remained active for months till it got shut down on November 30th.`}<br />
-      We decided to archive it as a timelapse with lossless encoded webm. Taking a screenshot from the timelapse results in a perfect 1:1 representation of how the canvas was at that time.
+      {t`We decided to archive it as a timelapse with lossless encoded webm. Taking a screenshot from the timelapse results in a perfect 1:1 representation of how the canvas was at that time.`}
     </p>
     <p>
       Timelapse:
@@ -46,7 +47,7 @@ const ArchiveModal = () => (
 
 const data = {
   content: ArchiveModal,
-  title: 'Canvas Archive',
+  title: t`Canvas Archive`,
 };
 
 export default data;

src/components/CanvasItem.jsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { t } from 'ttag';
 
 import { THREE_CANVAS_HEIGHT } from '../core/constants';
 import { selectCanvas } from '../actions';
@@ -42,25 +43,25 @@ const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
     <p className="modalcvtext">
       <span className="modaltitle">{canvas.title}</span><br />
       <span className="modalinfo">{canvas.desc}</span><br />
-      Cooldown:
+      {t`Cooldown`}:&nbsp;
-      &nbsp;
       <span className="modalinfo">
         {(canvas.bcd !== canvas.pcd)
           ? <span> {canvas.bcd / 1000}s / {canvas.pcd / 1000}s</span>
           : <span> {canvas.bcd / 1000}s</span>}
       </span><br />
-      Stacking till
+      {t`Stacking till`}:&nbsp;
       <span className="modalinfo"> {canvas.cds / 1000}s</span><br />
-      Ranked:
+      {t`Ranked`}:&nbsp;
-      &nbsp;
       <span className="modalinfo">{(canvas.ranked) ? 'Yes' : 'No'}</span><br />
-      {(canvas.req !== -1) ? <span>Requirements:<br /></span> : null}
+      {(canvas.req !== -1) ? <span>{t`Requirements`}:<br /></span> : null}
       <span className="modalinfo">
-        {(canvas.req !== -1) ? <span>User Account </span> : null}
+        {(canvas.req !== -1) ? <span>{t`User Account`} </span> : null}
-        {(canvas.req > 0) ? <span> and {canvas.req} Pixels set</span> : null}
+        {(canvas.req > 0)
+          ? <span> {t`and ${canvas.req} Pixels set`}</span>
+          : null}
       </span>
       {(canvas.req !== -1) ? <br /> : null}
-      Dimensions:
+      {t`Dimensions`}:&nbsp;
       <span className="modalinfo"> {canvas.size} x {canvas.size}
         {(canvas.v)
           ? <span> x {THREE_CANVAS_HEIGHT} Voxels</span>

src/components/CanvasSelectModal.jsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { t } from 'ttag';
 
 import CanvasItem from './CanvasItem';
 import { showArchiveModal } from '../actions';
@@ -25,24 +26,23 @@ const CanvasSelectModal = ({
   }}
   >
     <p className="modaltext">
-      Select the canvas you want to use.
+      {t`Select the canvas you want to use. \
-      Every canvas is unique and has different palettes,
+Every canvas is unique and has different palettes, cooldown and requirements. \
-      cooldown and requirements. Archive of closed canvases can be
+Archive of closed canvases can be accessed here:`}&nbsp;
-      accessed&nbsp;
       <span
         role="button"
         tabIndex={0}
         className="modallink"
         onClick={showArchive}
-      >here</span>.
+      >{t`Archive`}</span>)
     </p>
     {
-      Object.keys(canvases).map((canvasId) => (
+        Object.keys(canvases).map((canvasId) => (
-        (canvases[canvasId].hid && !showHiddenCanvases)
+          (canvases[canvasId].hid && !showHiddenCanvases)
-          ? null
+            ? null
-          : <CanvasItem canvasId={canvasId} canvas={canvases[canvasId]} />
+            : <CanvasItem canvasId={canvasId} canvas={canvases[canvasId]} />
-      ))
+        ))
-    }
+      }
   </p>
 );
 
@@ -64,7 +64,7 @@ function mapStateToProps(state: State) {
 
 const data = {
   content: connect(mapStateToProps, mapDispatchToProps)(CanvasSelectModal),
-  title: 'Canvas Selection',
+  title: t`Canvas Selection`,
 };
 
 export default data;

src/components/Chat.jsx

@@ -200,6 +200,7 @@ const Chat = ({
               placeholder={t`Chat here`}
             />
             <button
+              id="sendbtn"
               style={{ flexGrow: 0 }}
               type="submit"
             >

src/components/ChatModal.jsx

@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { t } from 'ttag';
 
 import Chat from './Chat';
 
@@ -31,7 +32,7 @@ const ChatModal = () => (
 
 const data = {
   content: ChatModal,
-  title: 'Chat',
+  title: t`Chat`,
 };
 
 export default data;

src/components/Converter.jsx

@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import fileDownload from 'js-file-download';
 import { utils, applyPalette } from 'image-q';
+import { jt, t } from 'ttag';
 
 import type { State } from '../reducers';
 import printGIMPPalette from '../core/exportGPL';
@@ -261,9 +262,16 @@ function Converter({
     aa: scalingAA,
   } = scaleData;
 
+  const gimpLink = <a href="https://www.gimp.org">GIMP</a>;
+  const starhouseLink = (
+    <a href="https://twitter.com/starhousedev">
+      starhouse
+    </a>
+  );
+
   return (
     <p style={{ textAlign: 'center' }}>
-      <p className="modalcotext">Choose Canvas:&nbsp;
+      <p className="modalcotext">{t`Choose Canvas`}:&nbsp;
         <select
           onChange={(e) => {
             const sel = e.target;
@@ -289,9 +297,9 @@ function Converter({
         }
         </select>
       </p>
-      <h3 className="modaltitle">Palette Download</h3>
+      <h3 className="modaltitle">{t`Palette Download`}</h3>
       <p className="modalcotext">
-        Palette for <a href="https://www.gimp.org">GIMP</a>:&nbsp;
+        {jt`Palette for ${gimpLink}`}:&nbsp;
         <button
           type="button"
           style={{ display: 'inline' }}
@@ -308,11 +316,12 @@ function Converter({
         >
           Download
         </button>
-        <p>Credit for the Palette of the Moon goes to&nbsp;
+        <p>
-          <a href="https://twitter.com/starhousedev">starhouse</a>.</p>
+          {jt`Credit for the Palette of the Moon goes to ${starhouseLink}.`}
+        </p>
       </p>
-      <h3 className="modaltitle">Image Converter</h3>
+      <h3 className="modaltitle">{t`Image Converter`}</h3>
-      <p className="modalcotext">Convert an image to canvas colors</p>
+      <p className="modalcotext">{t`Convert an image to canvas colors`}</p>
       <input
         type="file"
         id="imgfile"
@@ -323,7 +332,7 @@ function Converter({
           readFile(file, selectFile, setScaleData);
         }}
       />
-      <p className="modalcotext">Choose Strategy:&nbsp;
+      <p className="modalcotext">{t`Choose Strategy`}:&nbsp;
         <select
           onChange={(e) => {
             const sel = e.target;
@@ -350,7 +359,7 @@ function Converter({
           }
         </select>
       </p>
-      <p className="modalcotext">Choose Color Mode:&nbsp;
+      <p className="modalcotext">{t`Choose Color Mode`}:&nbsp;
         <select
           onChange={(e) => {
             const sel = e.target;
@@ -388,7 +397,7 @@ function Converter({
             });
           }}
         />
-        Add Grid (uncheck if you need a 1:1 template)
+        {t`Add Grid (uncheck if you need a 1:1 template)`}
       </p>
       {(gridEnabled)
         ? (
@@ -411,9 +420,9 @@ function Converter({
                   });
                 }}
               />
-              Light Grid
+              {t`Light Grid`}
             </p>
-            <span className="modalcotext">Offset X:&nbsp;
+            <span className="modalcotext">{t`Offset`} X:&nbsp;
               <input
                 type="number"
                 step="1"
@@ -429,7 +438,7 @@ function Converter({
                 }}
               />&nbsp;
             </span>
-            <span className="modalcotext">Offset Y:&nbsp;
+            <span className="modalcotext">{t`Offset`} Y:&nbsp;
               <input
                 type="number"
                 step="1"
@@ -459,7 +468,7 @@ function Converter({
             });
           }}
         />
-        Scale Image
+        {t`Scale Image`}
       </p>
       {(scalingEnabled)
         ? (
@@ -471,7 +480,7 @@ function Converter({
             display: 'inline-block',
           }}
           >
-            <span className="modalcotext">Width:&nbsp;
+            <span className="modalcotext">{t`Width`}:&nbsp;
               <input
                 type="number"
                 step="1"
@@ -501,7 +510,7 @@ function Converter({
                 }}
               />&nbsp;
             </span>
-            <span className="modalcotext">Height:&nbsp;
+            <span className="modalcotext">{t`Height`}:&nbsp;
               <input
                 type="number"
                 step="1"
@@ -539,7 +548,7 @@ function Converter({
                   selectScaleKeepRatio(e.target.checked);
                 }}
               />
-              Keep Ratio
+              {t`Keep Ratio`}
             </p>
             <p style={{ fontHeight: 16 }} className="modalcotext">
               <input
@@ -552,7 +561,7 @@ function Converter({
                   });
                 }}
               />
-              Anti Aliasing
+              {t`Anti Aliasing`}
             </p>
             <button
               type="button"
@@ -566,7 +575,7 @@ function Converter({
                 }
               }}
             >
-              Reset
+              {t`Reset`}
             </button>
           </div>
         )
@@ -585,7 +594,7 @@ function Converter({
               type="button"
               onClick={downloadOutput}
             >
-              Download Template
+              {t`Download Template`}
             </button>
             {(typeof ClipboardItem === 'undefined')
               ? null
@@ -597,7 +606,7 @@ function Converter({
                     copyCanvasToClipboard(output);
                   }}
                 >
-                  Copy to Clipboard
+                  {t`Copy to Clipboard`}
                 </button>
               )}
           </div>

src/components/ForgotPasswordModal.jsx

@@ -13,7 +13,7 @@ import NewPasswordForm from './NewPasswordForm';
 const ForgotPasswordModal = ({ login }) => (
   <p style={{ paddingLeft: '5%', paddingRight: '5%' }}>
     <p className="modaltext">
-      Enter your mail adress and we will send you a new password:
+      {t`Enter your mail adress and we will send you a new password:`}
     </p><br />
     <p style={{ textAlign: 'center' }}>
       <NewPasswordForm back={login} />
@@ -34,7 +34,7 @@ function mapDispatchToProps(dispatch) {
 
 const data = {
   content: connect(null, mapDispatchToProps)(ForgotPasswordModal),
-  title: 'Restore my Password',
+  title: t`Restore my Password`,
 };
 
 export default data;

src/components/LogInForm.jsx

@@ -4,6 +4,8 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { t } from 'ttag';
+
 import {
   validateEMail, validateName, validatePassword, parseAPIresponse,
 } from '../utils/validation';
@@ -99,18 +101,18 @@ class LogInForm extends React.Component {
           style={inputStyles}
           onChange={(evt) => this.setState({ nameoremail: evt.target.value })}
           type="text"
-          placeholder="Name or Email"
+          placeholder={t`Name or Email`}
         /><br />
         <input
           value={password}
           style={inputStyles}
           onChange={(evt) => this.setState({ password: evt.target.value })}
           type="password"
-          placeholder="Password"
+          placeholder={t`Password`}
         />
         <p>
           <button type="submit">
-            {(submitting) ? '...' : 'LogIn'}
+            {(submitting) ? '...' : t`LogIn`}
           </button>
         </p>
       </form>

src/components/ModalRoot.jsx

@@ -9,6 +9,7 @@ import React from 'react';
 import Modal from 'react-modal';
 import { connect } from 'react-redux';
 import { MdClose } from 'react-icons/md';
+import { t } from 'ttag';
 
 import {
   hideModal,
@@ -56,6 +57,7 @@ const ModalRoot = ({ modalType, modalOpen, close }) => {
         className="ModalClose"
         role="button"
         label="close"
+        title={t`Close`}
         tabIndex={-1}
       ><MdClose /></div>
       <SpecificModal />

src/components/Rankings.jsx

@@ -3,7 +3,10 @@
  * @flow
  */
 
+/* eslint-disable max-len */
+
 import React from 'react';
+import { t } from 'ttag';
 
 import TotalRankings from './TotalRankings';
 import DailyRankings from './DailyRankings';
@@ -31,7 +34,7 @@ class Rankings extends React.Component {
             onClick={() => {
               this.setState({ orderDaily: false });
             }}
-          >Total</span> |
+          >{t`Total`}</span> |
           <span
             role="button"
             tabIndex={-1}
@@ -39,11 +42,11 @@ class Rankings extends React.Component {
               (orderDaily) ? 'modallinkselected' : 'modallink'
             }
             onClick={() => { this.setState({ orderDaily: true }); }}
-          >Daily</span>
+          >{t`Daily`}</span>
         </p>
         {(orderDaily) ? <DailyRankings /> : <TotalRankings />}
         <p className="modaltext">
-          Ranking updates every 5 min. Daily rankings get reset at midnight UTC.
+          {t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
         </p>
       </div>
     );

src/components/RegisterModal.jsx

@@ -15,7 +15,7 @@ import SignUpForm from './SignUpForm';
 
 const RegisterModal = ({ login }) => (
   <p style={{ paddingLeft: '5%', paddingRight: '5%' }}>
-    <p className="modaltext">Register new account here</p><br />
+    <p className="modaltext">{t`Register new account here`}</p><br />
     <p style={{ textAlign: 'center' }}>
       <SignUpForm back={login} />
       <p>{t`Consider joining us on Guilded:`}&nbsp;
@@ -35,7 +35,7 @@ function mapDispatchToProps(dispatch) {
 
 const data = {
   content: connect(null, mapDispatchToProps)(RegisterModal),
-  title: 'Register New Account',
+  title: t`Register New Account`,
 };
 
 export default data;

src/components/SettingsModal.jsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { c, t } from 'ttag';
 
 import MdToggleButtonHover from './MdToggleButtonHover';
 import {
@@ -119,73 +120,73 @@ function SettingsModal({
   return (
     <p style={{ paddingLeft: '5%', paddingRight: '5%', paddingTop: 30 }}>
       <SettingsItem
-        title="Show Grid"
+        title={t`Show Grid`}
-        description="Turn on grid to highlight pixel borders."
+        description={t`Turn on grid to highlight pixel borders.`}
-        keyBind="G"
+        keyBind={c('keybinds').t`G`}
         value={isGridShown}
         onToggle={onToggleGrid}
       />
       <SettingsItem
-        title="Show Pixel Activity"
+        title={t`Show Pixel Activity`}
-        description="Show circles where pixels are placed."
+        description={t`Show circles where pixels are placed.`}
-        keyBind="X"
+        keyBind={c('keybinds').t`X`}
         value={isPixelNotifyShown}
         onToggle={onTogglePixelNotify}
       />
       <SettingsItem
-        title="Disable Game Sounds"
+        title={t`Disable Game Sounds`}
         // eslint-disable-next-line max-len
-        description="All sound effects will be disabled."
+        description={t`All sound effects will be disabled.`}
-        keyBind="M"
+        keyBind={c('keybinds').t`M`}
         value={isMuted}
         onToggle={onMute}
       />
       <SettingsItem
-        title="Enable chat notifications"
+        title={t`Enable chat notifications`}
-        description="Play a sound when new chat messages arrive"
+        description={t`Play a sound when new chat messages arrive`}
         value={chatNotify}
         onToggle={onToggleChatNotify}
       />
       <SettingsItem
-        title="Auto Zoom In"
+        title={t`Auto Zoom In`}
         // eslint-disable-next-line max-len
-        description="Zoom in instead of placing a pixel when you tap the canvas and your zoom is small."
+        description={t`Zoom in instead of placing a pixel when you tap the canvas and your zoom is small.`}
         value={autoZoomIn}
         onToggle={onToggleAutoZoomIn}
       />
       <SettingsItem
-        title="Compact Palette"
+        title={t`Compact Palette`}
         // eslint-disable-next-line max-len
-        description="Display Palette in a compact form that takes less screen space."
+        description={t`Display Palette in a compact form that takes less screen space.`}
         value={compactPalette}
         onToggle={onToggleCompactPalette}
       />
       <SettingsItem
-        title="Potato Mode"
+        title={t`Potato Mode`}
-        description="For when you are playing on a potato."
+        description={t`For when you are playing on a potato.`}
         value={isPotato}
         onToggle={onTogglePotatoMode}
       />
       <SettingsItem
-        title="Light Grid"
+        title={t`Light Grid`}
-        description="Show Grid in white instead of black."
+        description={t`Show Grid in white instead of black.`}
         value={isLightGrid}
         onToggle={onToggleLightGrid}
       />
       { (window.backupurl)
         ? (
           <SettingsItem
-            title="Historical View"
+            title={t`Historical View`}
-            description="Check out past versions of the canvas."
+            description={t`Check out past versions of the canvas.`}
             value={isHistoricalView}
-            keyBind="H"
+            keyBind={c('keybinds').t`H`}
             onToggle={onToggleHistoricalView}
           />
         ) : null }
       {(typeof window.availableStyles !== 'undefined') && (
         <SettingsItemSelect
-          title="Themes"
+          title={t`Themes`}
-          description="How pixelplanet should look like."
+          description={t`How pixelplanet should look like.`}
           values={Object.keys(window.availableStyles)}
           selected={selectedStyle}
           onSelect={onSelectStyle}
@@ -263,7 +264,7 @@ function mapDispatchToProps(dispatch) {
 
 const data = {
   content: connect(mapStateToProps, mapDispatchToProps)(SettingsModal),
-  title: 'Settings',
+  title: t`Settings`,
 };
 
 export default data;

src/components/UserArea.jsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { t } from 'ttag';
 
 import type { State } from '../reducers';
 
@@ -53,31 +54,31 @@ class UserArea extends React.Component {
       <p style={{ textAlign: 'center' }}>
         <UserMessages />
         <Stat
-          text="Todays Placed Pixels"
+          text={t`Todays Placed Pixels`}
           value={stats.dailyTotalPixels}
         />
         <Stat
-          text="Daily Rank"
+          text={t`Daily Rank`}
           value={stats.dailyRanking}
           rank
         />
         <Stat
-          text="Placed Pixels"
+          text={t`Placed Pixels`}
           value={stats.totalPixels}
         />
         <Stat
-          text="Total Rank"
+          text={t`Total Rank`}
           value={stats.ranking}
           rank
         />
         <p className="modaltext">
-          <p>Your name is: {name}</p>(
+          <p>{t`Your name is: ${name}`}</p>(
           <span
             role="button"
             tabIndex={-1}
             className="modallink"
             onClick={logout}
-          > Log out</span> |
+          > {t`Log out`}</span> |
           <span
             role="button"
             tabIndex={-1}
@@ -89,7 +90,7 @@ class UserArea extends React.Component {
               deleteAccountExtended: false,
               socialSettingsExtended: false,
             })}
-          > Change Username</span> |
+          > {t`Change Username`}</span> |
           {(mailreg)
             && (
             <span>
@@ -104,7 +105,7 @@ class UserArea extends React.Component {
                   deleteAccountExtended: false,
                   socialSettingsExtended: false,
                 })}
-              > Change Mail</span> |
+              > {t`Change Mail`}</span> |
             </span>
             )}
           <span
@@ -118,7 +119,7 @@ class UserArea extends React.Component {
               deleteAccountExtended: false,
               socialSettingsExtended: false,
             })}
-          > Change Password</span> |
+          > {t`Change Password`}</span> |
           <span
             role="button"
             tabIndex={-1}
@@ -130,7 +131,7 @@ class UserArea extends React.Component {
               deleteAccountExtended: true,
               socialSettingsExtended: false,
             })}
-          > Delete Account</span> )
+          > {t`Delete Account`}</span> )
           <br />(
           <span
             role="button"
@@ -143,7 +144,7 @@ class UserArea extends React.Component {
               deleteAccountExtended: false,
               socialSettingsExtended: true,
             })}
-          > Social Settings</span> )
+          > {t`Social Settings`}</span> )
         </p>
         <p className="modaltext" />
         {(changePasswdExtended)

src/components/UserAreaModal.jsx

@@ -29,16 +29,18 @@ const logoStyle = {
 
 const LogInArea = ({ register, forgotPassword, me }) => (
   <p style={{ textAlign: 'center' }}>
-    <p className="modaltext">Login to access more features and stats.</p><br />
+    <p className="modaltext">
-    <h2>Login with Mail:</h2>
+      {t`Login to access more features and stats.`}
+    </p><br />
+    <h2>{t`Login with Mail:`}</h2>
     <LogInForm me={me} />
     <p
       className="modallink"
       onClick={forgotPassword}
       role="presentation"
     >
-      I forgot my Password.</p>
+      {t`I forgot my Password.`}</p>
-    <h2>or login with:</h2>
+    <h2>{t`or login with:`}</h2>
     <a href="./api/auth/discord">
       <img
         style={logoStyle}
@@ -79,8 +81,8 @@ const LogInArea = ({ register, forgotPassword, me }) => (
         alt="Reddit"
       />
     </a>
-    <h2>or register here:</h2>
+    <h2>{t`or register here:`}</h2>
-    <button type="button" onClick={register}>Register</button>
+    <button type="button" onClick={register}>{t`Register`}</button>
   </p>
 );
 
@@ -102,23 +104,23 @@ const UserAreaModal = ({
       )
       : (
         <Tabs>
-          <div label="Profile">
+          <div label={t`Profile`}>
             <UserArea
               setName={setUserName}
               setMailreg={setUserMailreg}
             />
           </div>
-          <div label="Ranking">
+          <div label={t`Ranking`}>
             <Rankings />
           </div>
-          <div label="Converter">
+          <div label={t`Converter`}>
             <Suspense fallback={<div>Loading...</div>}>
               <Converter />
             </Suspense>
           </div>
           {userlvl && (
-          <div label={(userlvl === 1) ? 'Admintools' : 'Modtools'}>
+          <div label={(userlvl === 1) ? t`Admintools` : t`Modtools`}>
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<div>{t`Loading...`}</div>}>
               <Admintools />
             </Suspense>
           </div>
@@ -155,7 +157,7 @@ function mapStateToProps(state: State) {
 
 const data = {
   content: connect(mapStateToProps, mapDispatchToProps)(UserAreaModal),
-  title: 'User Area',
+  title: t`User Area`,
 };
 
 export default data;

src/styles/default.css

@@ -90,6 +90,12 @@ a:hover {
   padding: 0.5rem 0.75rem;
 }
 
+.tab-list-item:hover {
+  background-color: #6d6d6d;
+  border: solid #ccc;
+  border-width: 1px 1px 0 1px;
+}
+
 .tab-list-active {
   background-color: white;
   border: solid #ccc;
@@ -519,7 +525,7 @@ tr:nth-child(even) {
   height: 22px;
 }
 
-.chn.selected, .chn:hover, .channelbtn.selected, .channelbtn:hover {
+.chn.selected, .chn:hover, .channelbtn.selected, .channelbtn:hover, #sendbtn:hover {
   cursor: pointer;
   background-color: #c9c9c9;
 }