Resources
9 |-
10 |
- 11 | Guides & Docs 12 | 13 |
- 14 | Source 15 | 16 |
- 17 | v1.5 Changelog 18 | 19 |
<%= get_flash(@conn, :info) %>
27 |<%= get_flash(@conn, :error) %>
28 | <%= @inner_content %> 29 |<%= gettext "Welcome to %{name}!", name: "Phoenix" %>
3 |Peace of mind from prototype to production
4 |Help
23 |-
24 |
- 25 | Forum 26 | 27 |
- 28 | #elixir-lang on Freenode IRC 29 | 30 |
- 31 | Twitter @elixirphoenix 32 | 33 |
- 34 | Elixir on Slack 35 | 36 |
27 |
32 | );
33 | }
34 |
35 | return this.props.children;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/lib/pictionary_web/templates/layout/app.html.eex:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
28 | 
29 |
30 | Go back to home
31 |
38 | { drawerId && currentWord && (
39 |
44 | );
45 | };
46 |
47 | export default GameHeaderClock;
48 |
--------------------------------------------------------------------------------
/pictionary-app/src/components/LobbyGameSettings/lobbyGameSettings.scoped.scss:
--------------------------------------------------------------------------------
1 | #lobbyHeader {
2 | text-align: center;
3 | font-weight: bolder;
4 | font-size: 1.5rem;
5 | border-bottom: 1px solid grey;
6 | padding: 1.3rem;
7 | font-family: Arial, Helvetica, sans-serif;
8 | }
9 |
10 | .lobbyFormContainer {
11 | padding: 15px;
12 |
13 | .customLabel {
14 | font-size: 0.9rem;
15 | font-family: Arial, Helvetica, sans-serif;
16 | font-weight: bolder;
17 | padding-bottom: 10px;
18 | }
19 |
20 | .customWordSlider {
21 | width: 95% !important;
22 |
23 | .MuiSlider-track {
24 | height: 7px;
25 | border-radius: 7px;
26 | }
27 |
28 | .MuiSlider-thumb {
29 | margin-top: -3px;
30 | }
31 |
32 | .MuiSlider-rail {
33 | height: 6px;
34 | }
35 |
36 | .MuiSlider-mark {
37 | height: 6px;
38 | }
39 | }
40 |
41 | .max-game-time {
42 | padding-top: 10px;
43 | padding-bottom: 10px;
44 | font-family: "Comic Sans MS", "Comic Sans", cursive;
45 | font-weight: bolder;
46 | font-style: italic;
47 | }
48 | }
49 |
50 | .copyLinkContainer {
51 | display: flex;
52 | justify-content: flex-end;
53 | padding: 0 10px 10px 0;
54 | }
55 |
56 | .copiedLinkContainer {
57 | .MuiChip-root {
58 | background-color: green;
59 | }
60 | }
61 |
62 | .startGameButton {
63 | display: flex;
64 | justify-content: center;
65 | }
66 |
67 | .activeStartGameButton {
68 | .MuiButton-contained,
69 | .MuiButton-contained:hover {
70 | background-color: green;
71 | font-weight: bolder;
72 | color: honeydew;
73 | }
74 |
75 | .MuiButton-contained:hover {
76 | background-color: indigo;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/pictionary-app/src/reducers/game.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 | import { SAVE_GAME, UPDATE_GAME_STATE, UPDATE_GAME_PLAYERS, ADMIN_UPDATED, REMOVE_PLAYER } from '../constants/actionTypes';
3 |
4 | const initialState = {
5 | id: null,
6 | rounds: 3,
7 | time: 80,
8 | max_players: 10,
9 | custom_words: '',
10 | custom_words_probability: 50,
11 | public_game: true,
12 | vote_kick_enabled: true,
13 | players: [],
14 | started: false,
15 | creator_id: null
16 | };
17 |
18 | const gameReducer = (state = initialState, action) => {
19 | switch (action.type) {
20 | case SAVE_GAME:
21 | const {
22 | id,
23 | rounds,
24 | time,
25 | max_players,
26 | custom_words,
27 | custom_words_probability,
28 | public_game,
29 | vote_kick_enabled,
30 | players,
31 | started,
32 | creator_id
33 | } = action.payload;
34 | return {
35 | ...state,
36 | id,
37 | rounds,
38 | time,
39 | max_players,
40 | custom_words,
41 | custom_words_probability,
42 | public_game,
43 | vote_kick_enabled,
44 | players,
45 | started,
46 | creator_id
47 | };
48 | case UPDATE_GAME_STATE:
49 | return { ...state, ...action.payload };
50 |
51 | case UPDATE_GAME_PLAYERS:
52 | return { ...state, players: action.payload };
53 |
54 | case ADMIN_UPDATED:
55 | return { ...state, creator_id: action.payload };
56 |
57 | case REMOVE_PLAYER:
58 | return { ...state, players: state.players.filter(player => player.id !== action.payload) };
59 |
60 | default:
61 | return state;
62 | }
63 | };
64 |
65 | export default gameReducer;
66 |
--------------------------------------------------------------------------------
/pictionary-app/src/reducers/settings.js:
--------------------------------------------------------------------------------
1 | import {
2 | TOGGLE_SOUND,
3 | TOGGLE_DARK_MODE,
4 | ADD_ALERT,
5 | CLEAR_ALERT,
6 | SET_LOADING,
7 | CLEAR_LOADING,
8 | SAVE_SOCKET_OBJECT,
9 | SAVE_GAME_CHANNEL,
10 | SAVE_GAME_TO_JOIN_ID,
11 | CLEAR_SOCKET
12 | } from '../constants/actionTypes';
13 |
14 | const initialState = {
15 | sound: window.localStorage.getItem('userSound') !== 'false',
16 | darkMode: window.localStorage.getItem('userTheme') === 'true',
17 | alert: { alertType: null, msg: null },
18 | loading: false,
19 | socket: null,
20 | gameChannel: null,
21 | gameToJoinId: null
22 | };
23 |
24 | const userInfoReducer = (state = initialState, action) => {
25 | switch (action.type) {
26 | case TOGGLE_SOUND:
27 | return { ...state, sound: !state.sound };
28 | case TOGGLE_DARK_MODE:
29 | return { ...state, darkMode: !state.darkMode };
30 | case ADD_ALERT:
31 | return { ...state, alert: { alertType: action.alertType, msg: action.msg } };
32 | case CLEAR_ALERT:
33 | return { ...state, alert: { alertType: null, msg: null } };
34 | case SET_LOADING:
35 | return { ...state, loading: true };
36 | case CLEAR_LOADING:
37 | return { ...state, loading: false };
38 | case SAVE_SOCKET_OBJECT:
39 | return { ...state, socket: action.payload };
40 | case SAVE_GAME_CHANNEL:
41 | return { ...state, gameChannel: action.payload };
42 | case SAVE_GAME_TO_JOIN_ID:
43 | return { ...state, gameToJoinId: action.payload };
44 | case CLEAR_SOCKET:
45 | if (state.socket) state.socket.disconnect();
46 | return { ...state, socket: null, gameChannel: null };
47 | default:
48 | return state;
49 | }
50 | };
51 |
52 | export default userInfoReducer;
53 |
--------------------------------------------------------------------------------
/pictionary-app/src/components/LobbyPlayerDialog/LobbyPlayerDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { Button, Dialog, DialogContent, DialogTitle } from '@material-ui/core';
4 | import DialogActions from '@material-ui/core/DialogActions';
5 | import { GiWalkingBoot, GiChessKing } from 'react-icons/gi';
6 | import { AiFillCloseCircle } from 'react-icons/ai';
7 | import { HANDLE_UPDATE_ADMIN, HANDLE_KICK_PLAYER } from '../../constants/actionTypes';
8 | import './lobbyPlayerDialog.scoped.scss';
9 |
10 | export default ({ open, player, closeDialog }) => {
11 | const dispatch = useDispatch();
12 |
13 | return (
14 |
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/lib/pictionary_web/views/error_helpers.ex:
--------------------------------------------------------------------------------
1 | defmodule PictionaryWeb.ErrorHelpers do
2 | @moduledoc """
3 | Conveniences for translating and building error messages.
4 | """
5 |
6 | use Phoenix.HTML
7 |
8 | @doc """
9 | Generates tag for inlined form input errors.
10 | """
11 | def error_tag(form, field) do
12 | Enum.map(Keyword.get_values(form.errors, field), fn error ->
13 | content_tag(:span, translate_error(error),
14 | class: "invalid-feedback",
15 | phx_feedback_for: input_name(form, field)
16 | )
17 | end)
18 | end
19 |
20 | @doc """
21 | Translates an error message using gettext.
22 | """
23 | def translate_error({msg, opts}) do
24 | # When using gettext, we typically pass the strings we want
25 | # to translate as a static argument:
26 | #
27 | # # Translate "is invalid" in the "errors" domain
28 | # dgettext("errors", "is invalid")
29 | #
30 | # # Translate the number of files with plural rules
31 | # dngettext("errors", "1 file", "%{count} files", count)
32 | #
33 | # Because the error messages we show in our forms and APIs
34 | # are defined inside Ecto, we need to translate them dynamically.
35 | # This requires us to call the Gettext module passing our gettext
36 | # backend as first argument.
37 | #
38 | # Note we use the "errors" domain, which means translations
39 | # should be written to the errors.po file. The :count option is
40 | # set by Ecto and indicates we should also apply plural rules.
41 | if count = opts[:count] do
42 | Gettext.dngettext(PictionaryWeb.Gettext, "errors", msg, msg, count, opts)
43 | else
44 | Gettext.dgettext(PictionaryWeb.Gettext, "errors", msg, opts)
45 | end
46 | end
47 | end
48 |
--------------------------------------------------------------------------------
/pictionary-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
16 |
17 |
26 |
40 | {timer}
41 |
42 | )}
43 |
40 | {
41 | isDrawer
42 | ? currentWord
43 | .split('')
44 | .map((alphabet, index) => (alphabet === ' '
45 | ?
46 | : ; }
55 | return char;
56 | })
57 | }
58 |
59 | );
60 | };
61 |
62 | export default GameWordBox;
63 |
--------------------------------------------------------------------------------
/pictionary-app/src/components/GamePlayersList/GamePlayersList.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 | import React from 'react';
3 | import { useSelector } from 'react-redux';
4 | import { List, ListItem } from '@material-ui/core';
5 | import { FaPencilAlt } from 'react-icons/fa';
6 | import withPlayerCountChangeSfx from '../../hocs/withPlayerCountChangeSfx';
7 | import Avatar from '../Avatar/Avatar';
8 | import './GamePlayersList.scoped.scss';
9 |
10 | const GamePlayersList = () => {
11 | const players = useSelector(state => state.game.players.map((player) => {
12 | player.score = state.gamePlay.scores[player.id] || 0;
13 | player.guessed = !!state.gamePlay.guessers.find(playerId => playerId === player.id);
14 | return player;
15 | }));
16 |
17 | const [drawerId, currentUserId] = useSelector(state => [state.gamePlay.drawerId, state.userInfo.id]);
18 | return (
19 | {alphabet}
))
47 | : currentWord.split('')
48 | .map((alphabet, index) => {
49 | let char;
50 | if (currentWordRevealList[index] && alphabet !== '') {
51 | char = {alphabet}
;
52 | } else if (alphabet === ' ') {
53 | char = ;
54 | } else { char =
20 |
49 | );
50 | };
51 |
52 | export default withPlayerCountChangeSfx(GamePlayersList);
53 |
--------------------------------------------------------------------------------
/pictionary-app/src/images/eraser.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
52 |
--------------------------------------------------------------------------------
/pictionary-app/src/components/LobbyPlayersList/LobbyPlayersList.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 | import React, { useState } from 'react';
3 | import { useSelector } from 'react-redux';
4 | import { Paper, List, ListItem } from '@material-ui/core';
5 | import Avatar from '../Avatar/Avatar';
6 | import LobbyPlayerDialog from '../LobbyPlayerDialog/LobbyPlayerDialog';
7 | import './LobbyPlayersList.scoped.scss';
8 | import withPlayerCountChangeSfx from '../../hocs/withPlayerCountChangeSfx';
9 |
10 | const LobbyPlayersList = () => {
11 | const [
12 | selfId,
13 | players,
14 | creator_id,
15 | max_players,
16 | darkMode
17 | ] = useSelector(state => [state.userInfo.id, state.game.players, state.game.creator_id, state.game.max_players, state.settings.darkMode]);
18 | const [lobbyPlayerDialog, lobbyPlayerDialogToggle] = useState(false);
19 | const [lobbySelectedPlayer, lobbyChangeSelectedPlayer] = useState(null);
20 | const isAdmin = useSelector(state => state.game.creator_id === state.userInfo.id);
21 |
22 | const handlePlayerClick = (player) => {
23 | lobbyPlayerDialogToggle(true);
24 | lobbyChangeSelectedPlayer(player);
25 | };
26 |
27 | return (
28 | -
21 | {players.sort((player1, player2) => player2.score - player1.score).map((player, index) => (
22 |
29 |
45 | {`#${index + 1}`}
30 |
31 |
38 |
34 | {`${player.name} ${player.id === currentUserId ? '(You)' : ''}`}
35 |
36 | {`Points: ${player.score}`}
37 |
39 | {player.id === drawerId &&
41 |
42 |
44 | (Click on players for additional actions)
}
32 | -
34 | {players.map(player => (
35 |
37 |
46 |
38 |
40 |
41 | {player.name}
42 |
43 | {player.id === creator_id ? Admin
: ''}
44 | {player.id === selfId ? (You)
: ''}
45 |
47 |
61 |
62 | );
63 | };
64 |
65 | export default GameVoteKickButton;
66 |
--------------------------------------------------------------------------------
/priv/gettext/errors.pot:
--------------------------------------------------------------------------------
1 | ## This is a PO Template file.
2 | ##
3 | ## `msgid`s here are often extracted from source code.
4 | ## Add new translations manually only if they're dynamic
5 | ## translations that can't be statically extracted.
6 | ##
7 | ## Run `mix gettext.extract` to bring this file up to
8 | ## date. Leave `msgstr`s empty as changing them here has no
9 | ## effect: edit them in PO (`.po`) files instead.
10 |
11 | ## From Ecto.Changeset.cast/4
12 | msgid "can't be blank"
13 | msgstr ""
14 |
15 | ## From Ecto.Changeset.unique_constraint/3
16 | msgid "has already been taken"
17 | msgstr ""
18 |
19 | ## From Ecto.Changeset.put_change/3
20 | msgid "is invalid"
21 | msgstr ""
22 |
23 | ## From Ecto.Changeset.validate_acceptance/3
24 | msgid "must be accepted"
25 | msgstr ""
26 |
27 | ## From Ecto.Changeset.validate_format/3
28 | msgid "has invalid format"
29 | msgstr ""
30 |
31 | ## From Ecto.Changeset.validate_subset/3
32 | msgid "has an invalid entry"
33 | msgstr ""
34 |
35 | ## From Ecto.Changeset.validate_exclusion/3
36 | msgid "is reserved"
37 | msgstr ""
38 |
39 | ## From Ecto.Changeset.validate_confirmation/3
40 | msgid "does not match confirmation"
41 | msgstr ""
42 |
43 | ## From Ecto.Changeset.no_assoc_constraint/3
44 | msgid "is still associated with this entry"
45 | msgstr ""
46 |
47 | msgid "are still associated with this entry"
48 | msgstr ""
49 |
50 | ## From Ecto.Changeset.validate_length/3
51 | msgid "should be %{count} character(s)"
52 | msgid_plural "should be %{count} character(s)"
53 | msgstr[0] ""
54 | msgstr[1] ""
55 |
56 | msgid "should have %{count} item(s)"
57 | msgid_plural "should have %{count} item(s)"
58 | msgstr[0] ""
59 | msgstr[1] ""
60 |
61 | msgid "should be at least %{count} character(s)"
62 | msgid_plural "should be at least %{count} character(s)"
63 | msgstr[0] ""
64 | msgstr[1] ""
65 |
66 | msgid "should have at least %{count} item(s)"
67 | msgid_plural "should have at least %{count} item(s)"
68 | msgstr[0] ""
69 | msgstr[1] ""
70 |
71 | msgid "should be at most %{count} character(s)"
72 | msgid_plural "should be at most %{count} character(s)"
73 | msgstr[0] ""
74 | msgstr[1] ""
75 |
76 | msgid "should have at most %{count} item(s)"
77 | msgid_plural "should have at most %{count} item(s)"
78 | msgstr[0] ""
79 | msgstr[1] ""
80 |
81 | ## From Ecto.Changeset.validate_number/3
82 | msgid "must be less than %{number}"
83 | msgstr ""
84 |
85 | msgid "must be greater than %{number}"
86 | msgstr ""
87 |
88 | msgid "must be less than or equal to %{number}"
89 | msgstr ""
90 |
91 | msgid "must be greater than or equal to %{number}"
92 | msgstr ""
93 |
94 | msgid "must be equal to %{number}"
95 | msgstr ""
96 |
--------------------------------------------------------------------------------
/pictionary-app/src/constants/avatarStyles.js:
--------------------------------------------------------------------------------
1 | export default {
2 | top: [
3 | 'NoHair',
4 | 'Eyepatch',
5 | 'Hat',
6 | 'Hijab',
7 | 'Turban',
8 | 'WinterHat1',
9 | 'WinterHat2',
10 | 'WinterHat3',
11 | 'WinterHat4',
12 | 'LongHairBigHair',
13 | 'LongHairBob',
14 | 'LongHairBun',
15 | 'LongHairCurly',
16 | 'LongHairCurvy',
17 | 'LongHairDreads',
18 | 'LongHairFrida',
19 | 'LongHairFro',
20 | 'LongHairFroBand',
21 | 'LongHairNotTooLong',
22 | 'LongHairShavedSides',
23 | 'LongHairMiaWallace',
24 | 'LongHairStraight',
25 | 'LongHairStraight2',
26 | 'LongHairStraightStrand',
27 | 'ShortHairDreads01',
28 | 'ShortHairDreads02',
29 | 'ShortHairFrizzle',
30 | 'ShortHairShaggyMullet',
31 | 'ShortHairShortCurly',
32 | 'ShortHairShortFlat',
33 | 'ShortHairShortRound',
34 | 'ShortHairShortWaved',
35 | 'ShortHairSides',
36 | 'ShortHairTheCaesar',
37 | 'ShortHairTheCaesarSidePart'
38 | ],
39 | accessories: ['Blank', 'Kurt', 'Prescription01', 'Prescription02', 'Round', 'Sunglasses', 'Wayfarers'],
40 | hairColor: ['Auburn', 'Black', 'Blonde', 'BlondeGolden', 'Brown', 'BrownDark', 'PastelPink', 'Platinum', 'Red', 'SilverGray'],
41 | facialHairType: ['Blank', 'BeardMedium', 'BeardLight', 'BeardMajestic', 'MoustacheFancy', 'MoustacheMagnum'],
42 | facialHairColor: ['Auburn', 'Black', 'Blonde', 'BlondeGolden', 'Brown', 'BrownDark', 'Platinum', 'Red'],
43 | clotheType: [
44 | 'BlazerShirt',
45 | 'BlazerSweater',
46 | 'CollarSweater',
47 | 'GraphicShirt',
48 | 'Hoodie',
49 | 'Overall',
50 | 'ShirtCrewNeck',
51 | 'ShirtScoopNeck',
52 | 'ShirtVNeck'
53 | ],
54 | clotheColor: [
55 | 'Black',
56 | 'Blue01',
57 | 'Blue02',
58 | 'Blue03',
59 | 'Gray01',
60 | 'Gray02',
61 | 'Heather',
62 | 'PastelBlue',
63 | 'PastelGreen',
64 | 'PastelOrange',
65 | 'PastelRed',
66 | 'PastelYellow',
67 | 'Pink',
68 | 'Red',
69 | 'White'
70 | ],
71 | eyeType: ['Close', 'Cry', 'Default', 'Dizzy', 'EyeRoll', 'Happy', 'Hearts', 'Side', 'Squint', 'Surprised', 'Wink', 'WinkWacky'],
72 | eyeBrowType: [
73 | 'Angry',
74 | 'AngryNatural',
75 | 'Default',
76 | 'DefaultNatural',
77 | 'FlatNatural',
78 | 'RaisedExcited',
79 | 'RaisedExcitedNatural',
80 | 'SadConcerned',
81 | 'SadConcernedNatural',
82 | 'UnibrowNatural',
83 | 'UpDown',
84 | 'UpDownNatural'
85 | ],
86 | mouth: ['Concerned', 'Default', 'Disbelief', 'Eating', 'Grimace', 'Sad', 'ScreamOpen', 'Serious', 'Smile', 'Tongue', 'Twinkle', 'Vomit'],
87 | skinColor: ['Tanned', 'Yellow', 'Pale', 'Light', 'Brown', 'DarkBrown', 'Black']
88 | };
89 |
--------------------------------------------------------------------------------
/pictionary-app/src/images/delete.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
56 |
--------------------------------------------------------------------------------
/pictionary-app/src/images/clock.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
76 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # Find eligible builder and runner images on Docker Hub. We use Ubuntu/Debian instead of
2 | # Alpine to avoid DNS resolution issues in production.
3 | #
4 | # https://hub.docker.com/r/hexpm/elixir/tags?page=1&name=ubuntu
5 | # https://hub.docker.com/_/ubuntu?tab=tags
6 | #
7 | #
8 | # This file is based on these images:
9 | #
10 | # - https://hub.docker.com/r/hexpm/elixir/tags - for the build image
11 | # - https://hub.docker.com/_/debian?tab=tags&page=1&name=bullseye-20220801-slim - for the release image
12 | # - https://pkgs.org/ - resource for finding needed packages
13 | # - Ex: hexpm/elixir:1.13.4-erlang-25.0.4-debian-bullseye-20220801-slim
14 | #
15 | ARG ELIXIR_VERSION=1.13.4
16 | ARG OTP_VERSION=25.0.4
17 | ARG DEBIAN_VERSION=bullseye-20220801-slim
18 |
19 | ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
20 | ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
21 |
22 | FROM ${BUILDER_IMAGE} as builder
23 |
24 | # install build dependencies
25 | RUN apt-get update -y && apt-get install -y build-essential git \
26 | && apt-get clean && rm -f /var/lib/apt/lists/*_*
27 |
28 | # prepare build dir
29 | WORKDIR /app
30 |
31 | # install hex + rebar
32 | RUN mix local.hex --force && \
33 | mix local.rebar --force
34 |
35 | # set build ENV
36 | ENV MIX_ENV="prod"
37 |
38 | # install mix dependencies
39 | COPY mix.exs mix.lock ./
40 | RUN mix deps.get --only $MIX_ENV
41 | RUN mkdir config
42 |
43 | # copy compile-time config files before we compile dependencies
44 | # to ensure any relevant config change will trigger the dependencies
45 | # to be re-compiled.
46 | COPY config/config.exs config/${MIX_ENV}.exs config/
47 | RUN mix deps.compile
48 |
49 | COPY priv priv
50 |
51 | COPY lib lib
52 |
53 | # Compile the release
54 | RUN mix compile
55 |
56 | # Changes to config/runtime.exs don't require recompiling the code
57 | COPY config/runtime.exs config/
58 |
59 | COPY rel rel
60 | RUN mix release
61 |
62 | # start a new build stage so that the final image will only contain
63 | # the compiled release and other runtime necessities
64 | FROM ${RUNNER_IMAGE}
65 |
66 | RUN apt-get update -y && apt-get install -y libstdc++6 openssl libncurses5 locales \
67 | && apt-get clean && rm -f /var/lib/apt/lists/*_*
68 |
69 | # Set the locale
70 | RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && locale-gen
71 |
72 | ENV LANG en_US.UTF-8
73 | ENV LANGUAGE en_US:en
74 | ENV LC_ALL en_US.UTF-8
75 |
76 | WORKDIR "/app"
77 | RUN chown nobody /app
78 |
79 | # set runner ENV
80 | ENV MIX_ENV="prod"
81 |
82 | # Appended by flyctl
83 | ENV ECTO_IPV6 true
84 | ENV ERL_AFLAGS "-proto_dist inet6_tcp"
85 |
86 | # Only copy the final release from the build stage
87 | COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/pictionary ./
88 |
89 | USER nobody
90 |
91 | CMD ["/app/bin/server"]
92 |
--------------------------------------------------------------------------------
/pictionary-app/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "jest": true
5 | },
6 | "extends": ["airbnb", "plugin:flowtype/recommended"],
7 | "parser": "babel-eslint",
8 | "plugins": ["flowtype"],
9 | "rules": {
10 | "arrow-body-style": "warn",
11 | "arrow-parens": ["warn", "as-needed", { "requireForBlockBody": true }],
12 | "camelcase": "warn",
13 | "comma-dangle": ["warn", "never"],
14 | "consistent-return": "off",
15 | "class-methods-use-this": "off",
16 | "function-paren-newline": "off",
17 | "guard-for-in": "warn",
18 | "import/extensions": "warn",
19 | "import/first": "warn",
20 | "import/no-extraneous-dependencies": "off",
21 | "import/no-duplicates": "off",
22 | "import/no-unresolved": "off",
23 | "import/no-named-as-default": "off",
24 | "jsx-a11y/alt-text": "warn",
25 | "jsx-a11y/click-events-have-key-events": "off",
26 | "jsx-a11y/no-noninteractive-element-interactions": "warn",
27 | "jsx-a11y/anchor-is-valid": "off",
28 | "jsx-a11y/no-static-element-interactions": "warn",
29 | "jsx-a11y/no-noninteractive-tabindex": "warn",
30 | "jsx-a11y/label-has-for": "warn",
31 | "jsx-a11y/mouse-events-have-key-events": "off",
32 | "max-len": ["warn", 160, 2],
33 | "no-else-return": "warn",
34 | "no-multi-assign": "warn",
35 | "no-nested-ternary": "warn",
36 | "no-use-before-define": ["error", "nofunc"],
37 | "no-param-reassign": "warn",
38 | "no-prototype-builtins": "warn",
39 | "no-return-assign": "warn",
40 | "no-restricted-syntax": "warn",
41 | "no-shadow": "warn",
42 | "no-underscore-dangle": "off",
43 | "no-unused-vars": "warn",
44 | "no-var": "warn",
45 | "no-case-declarations": "off",
46 | "one-var": "warn",
47 | "object-curly-newline": ["warn", { "multiline": true }],
48 | "one-var-declaration-per-line": "off",
49 | "object-shorthand": "warn",
50 | "prefer-destructuring": "warn",
51 | "prefer-const": "warn",
52 | "prefer-template": "warn",
53 | "quotes": "warn",
54 | "react/default-props-match-prop-types": "warn",
55 | "react/forbid-prop-types": "off",
56 | "react/jsx-boolean-value": "off",
57 | "react/jsx-filename-extension": "off",
58 | "react/jsx-no-undef": "warn",
59 | "react/jsx-no-duplicate-props": "warn",
60 | "react/jsx-no-bind": "warn",
61 | "react/jsx-tag-spacing": "warn",
62 | "react/no-array-index-key": "warn",
63 | "react/no-find-dom-node": "warn",
64 | "react/no-multi-comp": "off",
65 | "react/no-unused-prop-types": "warn",
66 | "react/no-unused-state": "warn",
67 | "react/no-did-mount-set-state": "off",
68 | "react/jsx-no-target-blank": "warn",
69 | "react/prop-types": "off",
70 | "react/require-default-props": "off",
71 | "react/prefer-stateless-function": "warn",
72 | "react/sort-comp": "warn",
73 | "vars-on-top": "warn"
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/pictionary-app/src/components/AvatarChooser/AvatarChooser.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import { Paper, Grid, MenuItem, Select, FormGroup, FormControlLabel, FormControl, Box } from '@material-ui/core';
4 | import { AiFillCloseCircle } from 'react-icons/ai';
5 | import Avatar from '../Avatar/Avatar';
6 | import AVATAR_STYLES from '../../constants/avatarStyles';
7 | import { CHANGE_AVATAR } from '../../constants/actionTypes';
8 | import { getInputlabel } from '../../helpers/helpers';
9 | import './avatarChooser.scoped.scss';
10 |
11 | const AvatarChooser = ({ closeModal }) => {
12 | const dispatch = useDispatch();
13 | const avatar = useSelector(state => state.userInfo.avatar);
14 | const darkMode = useSelector(state => state.settings.darkMode);
15 |
16 | return (
17 |
51 | {`Round ${currentRound} of ${totalRounds}`}
52 |
53 |
64 | 
65 |
66 |
69 | toggleFullScreen()} className="fullScreen" title="Fullscreen" />
70 |
71 |
32 |
33 |
34 | How to play
35 |
36 |
37 |
49 |
50 |
51 |
52 | About
53 |
54 |
55 |
59 |
60 |
61 |
62 |
63 |
38 | Pictionary is free multipleyer drawing and guessing game.
39 | One game consists of a few rounds in which every round someone has to draw their chosen word and others have to guess it to gain points!
40 |
48 | 41 | When its your turn to draw, you will have to choose a word and draw that word, alternatively when somebody else is drawing you have to type your guess into the chat to gain points, be quick, the 42 | earlier you guess a word the more points you get! 43 |
44 |45 | The person with the most points at the end of game will then be crowned as the winner! 46 |
47 |
2 | 
3 |
97 |
99 |