Skip to content
This repository has been archived by the owner on Aug 19, 2021. It is now read-only.

Commit

Permalink
use vue-feather-icons; restyle; Reduce max username length
Browse files Browse the repository at this point in the history
  • Loading branch information
@kcgidw
kcgidw committed May 2, 2020
1 parent 8bb010c commit 1bfc47d
Show file tree
Hide file tree
Showing 11 changed files with 138 additions and 91 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,15 @@
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"node-sass": "^4.14.0",
"normalize.css": "^8.0.1",
"sass-loader": "^8.0.0",
"socket.io": "^2.2.0",
"source-map-loader": "^0.2.4",
"style-loader": "^1.1.3",
"svg-inline-loader": "^0.8.2",
"terser-webpack-plugin": "^2.3.1",
"vue-feather-icons": "^5.0.0",
"vue-loader": "^15.8.3",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.5",
Expand Down
17 changes: 5 additions & 12 deletions src/common/util.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

function randomInt(max) { // max-exclusive
function randomInt(max) {
// max-exclusive
return Math.floor(Math.random() * max);
}
function randomItemFrom(arr) {
Expand All @@ -18,8 +18,8 @@ function shuffle(array) {
function validateUsername(name) {
name = name.trim();
const minChars = 1;
const maxChars = 20;
let regex = new RegExp(`^[0-9a-zA-Z ]{${minChars},${maxChars}}$`);
const maxChars = 15;
const regex = new RegExp(`^[0-9a-zA-Z ]{${minChars},${maxChars}}$`);
return name.match(regex);
}

Expand All @@ -31,11 +31,4 @@ function negligible(a, b, thresh = 0.0001) {
return Math.abs(a - b) < thresh;
}

export {
randomInt,
randomItemFrom,
shuffle,
validateUsername,
capitalize,
negligible,
};
export { randomInt, randomItemFrom, shuffle, validateUsername, capitalize, negligible };
1 change: 0 additions & 1 deletion src/public/feather-sprite.svg
View file

This file was deleted.

8 changes: 5 additions & 3 deletions src/public/js/game-menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
:class="{ expanded: expanded === true }"
@click="toggle"
>
<svg class="feather">
<use xlink:href="feather-sprite.svg#more-horizontal" />
</svg>
<more-vertical-icon />
</button>
<div id="game-menu-dropdown" class="dropup-content" v-show="expanded === true">
<ul class="dropup-list">
Expand All @@ -22,8 +20,12 @@
</template>
<script>
import Store from './state';
import { MoreVerticalIcon } from 'vue-feather-icons';
export default {
name: 'GameMenu',
components: {
MoreVerticalIcon,
},
props: {
items: Array,
/* item in items: {
Expand Down
4 changes: 2 additions & 2 deletions src/public/js/game-view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ const strokeTracker = {
},
};
const SIDE_PLAYER_STATUSES_LIST_MAX_WIDTH = 200;
const SIDE_PLAYER_STATUSES_LIST_MIN_WIDTH = 120;
export default {
name: 'GameView',
Expand Down Expand Up @@ -352,7 +352,7 @@ export default {
},
resizePlayerStatusesList() {
const availableWidth = window.innerWidth / 2 - drawingPad.canvasWidth / 2;
if (availableWidth >= SIDE_PLAYER_STATUSES_LIST_MAX_WIDTH) {
if (availableWidth >= SIDE_PLAYER_STATUSES_LIST_MIN_WIDTH) {
this.playerStatusesListMaxWidth = Math.floor(availableWidth);
} else {
this.playerStatusesListMaxWidth = 0;
Expand Down
143 changes: 100 additions & 43 deletions src/public/js/home-menu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,103 @@
<template>
<div id="home-menu" class="flex-center">
<div id="first-prompt-menu" class="menu" v-show="tab === 'main'">
<button id="goto-create-menu" class="btn big primary" @click="setTab('create')">New Game</button>
<div style="clear: both"></div>
<button id="goto-join-menu" class="btn big primary" @click="setTab('join')">Join Game</button>
<div style="clear: both"></div>
<button class="btn big secondary" @click="gotoRules()">Rules</button>
<div style="clear: both"></div>
<button class="btn big secondary" @click="gotoFaq()">Faq</button>
</div>
<div id="home-menu" class="flex-center">
<div id="first-prompt-menu" class="menu" v-show="tab === 'main'">
<button id="goto-create-menu" class="btn big primary" @click="setTab('create')">
New Game
</button>
<div style="clear: both"></div>
<button id="goto-join-menu" class="btn big primary" @click="setTab('join')">
Join Game
</button>
<div style="clear: both"></div>
<button class="btn big secondary" @click="gotoRules()">Rules</button>
<div style="clear: both"></div>
<button class="btn big secondary" @click="gotoFaq()">Faq</button>
</div>

<div id="create-game-menu" class="menu" v-show="tab === 'create'">
<div class="warning" v-show="store.createWarning !== undefined">
<p>{{store.createWarning}}</p>
</div>
<form id="create-game-form" @submit.prevent="createGame">
<input type="text" id="create-username-input" class="username-input" placeholder="Username" required autocomplete="off" v-model="store.username"/>
<div style="clear: both"></div>
<div class="form-actions">
<button type="button" id="create-game-back-btn" class="btn tertiary" @click="setTab('main')">Back</button>
<button type="submit" id="create-game-btn" class="btn primary" value="" :disabled="!Boolean(store.username)">Create</button>
</div>
</form>
</div>
<div id="create-game-menu" class="menu" v-show="tab === 'create'">
<div class="warning" v-show="store.createWarning !== undefined">
<p>{{ store.createWarning }}</p>
</div>
<form id="create-game-form" @submit.prevent="createGame">
<input
type="text"
id="create-username-input"
class="username-input"
placeholder="Username"
required
autocomplete="off"
v-model="store.username"
maxlength="15"
/>
<div style="clear: both"></div>
<div class="form-actions">
<button
type="button"
id="create-game-back-btn"
class="btn tertiary"
@click="setTab('main')"
>
Back
</button>
<button
type="submit"
id="create-game-btn"
class="btn primary"
value=""
:disabled="!Boolean(store.username)"
>
Create
</button>
</div>
</form>
</div>

<div id="join-game-menu" class="menu" v-show="tab === 'join'">
<div class="warning" v-show="store.joinWarning !== undefined">
<p>{{store.joinWarning}}</p>
</div>
<form id="join-game-form" @submit.prevent="joinGame">
<input type="text" id="join-username-input" class="username-input" placeholder="Username" required autocomplete="off" v-model="store.username"/>
<div style="clear: both"></div>
<input type="tel" id="join-code" placeholder="Game Code" required autocomplete="off" v-model="store.roomCode"/>
<div style="clear: both"></div>
<div class="form-actions">
<button type="button" id="join-game-back-btn" class="btn tertiary" @click="setTab('main')">Back</button>
<button type="submit" id="join-game-btn" class="btn primary" :disabled="!Boolean(store.username && store.roomCode)">Join</button>
</div>
</form>
</div>
</div>
<div id="join-game-menu" class="menu" v-show="tab === 'join'">
<div class="warning" v-show="store.joinWarning !== undefined">
<p>{{ store.joinWarning }}</p>
</div>
<form id="join-game-form" @submit.prevent="joinGame">
<input
type="text"
id="join-username-input"
class="username-input"
placeholder="Username"
required
autocomplete="off"
v-model="store.username"
maxlength="15"
/>
<div style="clear: both"></div>
<input
type="tel"
id="join-code"
placeholder="Game Code"
required
autocomplete="off"
v-model="store.roomCode"
/>
<div style="clear: both"></div>
<div class="form-actions">
<button
type="button"
id="join-game-back-btn"
class="btn tertiary"
@click="setTab('main')"
>
Back
</button>
<button
type="submit"
id="join-game-btn"
class="btn primary"
:disabled="!Boolean(store.username && store.roomCode)"
>
Join
</button>
</div>
</form>
</div>
</div>
</template>

<script>
Expand All @@ -48,8 +106,7 @@ import VIEW from './view';
export default {
name: 'home-menu',
components: {
},
components: {},
data() {
return {
store: Store.state,
Expand All @@ -76,7 +133,7 @@ export default {
watch: {
'store.username'(val) {
Store.setUsername(val);
}
}
},
},
};
</script>
1 change: 0 additions & 1 deletion src/public/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import '../index.html';
import 'normalize.css';
import '../style/style.scss';
import '../feather-sprite.svg';
import './app';
23 changes: 7 additions & 16 deletions src/public/js/player-statuses-list.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,22 @@
<template>
<ul class="player-statuses-list">
<li v-for="u in users" :key="'0' + u.name">
<svg class="feather color-spot" :style="{ color: color(u) }">
<circle cx="12" cy="12" r="4" stroke="black" stroke-width="0" :fill="color(u)" />
</svg>
<span v-if="u.connected" :style="{ color: color(u) }"><user-icon /></span>
<span v-else><wifi-off-icon /></span>
<span class="username" :style="{ color: color(u) }">{{ u.name }}</span>
<span class="grow-space"></span>
<span
class="connectionStatus"
:class="{
tinytext: true,
connected: u.connected,
disconnected: !u.connected,
}"
>{{ connectionStatusString(u) }}</span
>
</li>
</ul>
</template>

<script>
import Store from './state';
import { UserIcon, WifiOffIcon } from 'vue-feather-icons';
export default {
name: 'PlayerStatusesList',
components: {
UserIcon,
WifiOffIcon,
},
props: {
users: {
type: Array,
Expand All @@ -32,9 +26,6 @@ export default {
color(user) {
return Store.state.gameState.getUserColor(user.name);
},
connectionStatusString(user) {
return user.connected ? '' : 'Disconnected';
},
},
};
</script>
8 changes: 4 additions & 4 deletions src/public/js/state.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ handleSocket(MESSAGE.START_GAME);
handleSocket(MESSAGE.NEW_TURN);
handleSocket(MESSAGE.RETURN_TO_SETUP);

const usernameWarning =
'Username must be 1-20 characters long, and can only contain alphanumerics and spaces';
const usernameValidationWarning =
'Username must be 1-15 characters long, and can only contain alphanumerics and spaces';
function submitCreateGame(username) {
username = username.trim();
if (validateUsername(username)) {
Expand All @@ -131,7 +131,7 @@ function submitCreateGame(username) {
});
return true;
} else {
this.setWarning('createWarning', usernameWarning);
this.setWarning('createWarning', usernameValidationWarning);
return false;
}
}
Expand All @@ -145,7 +145,7 @@ function submitJoinGame(roomCode, username) {
});
return true;
} else {
this.setWarning('joinWarning', usernameWarning);
this.setWarning('joinWarning', usernameValidationWarning);
return false;
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/public/style/dropup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
margin: 10px 10px;

button {
border: solid 2px rgba(0,0,0,0);
border: solid 2px rgba(0, 0, 0, 0);
border-radius: 100%;
background-color: var(--grey0);
color: var(--grey7);
Expand All @@ -15,7 +15,7 @@
flex-shrink: 0;
cursor: pointer;

@media(any-hover: hover) {
@media (any-hover: hover) {
&:hover {
border-color: var(--grey1);
}
Expand Down Expand Up @@ -56,4 +56,4 @@
}
}
}
}
}
15 changes: 10 additions & 5 deletions src/public/style/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ div#room-setup {
#drawing-pad {
position: relative;
border: solid 4px var(--artist4);
box-shadow: 0px 3px 6px 0px var(--shade);
box-shadow: 0px 4px 12px -8px hsla(322, 50%, 30%, 1);
width: 100%;
}
canvas {
Expand Down Expand Up @@ -238,6 +238,9 @@ canvas#new-paint {
h1.prompt {
font-size: 20px;
}
h2.current-turn {
font-size: 16px;
}
}

.current-turn {
Expand All @@ -255,12 +258,14 @@ ul.player-statuses-list {
li {
display: flex;
}
li > span {
li > span,
li > svg.feather {
align-self: center;
}
.grow-space {
flex-grow: 1;
min-width: 10px;
svg.feather {
width: 20px;
height: 20px;
margin-right: 4px;
}
}

Expand Down

0 comments on commit 1bfc47d

Please sign in to comment.