Merge branch 'main' of https://github.com/bra1n/townsquare into #52_other_edition_travelers

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Release Notes
 
+## Version 2.3.1
+- better vote history design and added timestamps
+- adjusted player menu styling on smaller screens
+- improved CONTRIBUTING.md description of hosting your own copy
+
+---
+
 ## Version 2.3.0
 - added spoiler role (Lycanthrope!)
 - fixed copy to clipboard in Firefox
@@ -8,7 +15,7 @@
 ---
 
 ## Version 2.2.1
-- clearing players / roles now also clears Fabled (closes #85)
+- clearing players / roles now also clears Fabled
 - fix list of locked votes showing unlocked votes sometimes
 
 ---

CONTRIBUTING.md

@@ -43,6 +43,20 @@ $ npm install
 
 The development server can be started with `npm run serve`.
 
+### Deploying to GitHub pages or with a non-root path
+
+Deploying a forked version to GitHub Pages or running your local
+development copy in a sub-path (instead of the web root) will require you to modify
+the `vue.config.js` and configure the path at which the website will be served.
+
+For example, deploying your forked `townsquare` project to GitHub pages would need the following
+`vue.config.js` changes: 
+```js
+module.exports = {
+  publicPath: process.env.NODE_ENV === "production" ? "/townsquare/" : "/"
+};
+```
+
 ### Committing Changes
 
 Commit messages should be verbose enough to allow someone else to follow your changes and should include references to issues that are being worked on.
@@ -64,6 +78,10 @@ $ npm run lint
 
 - **`dist`**: contains built files for distribution.
 
+- **`public`**: static assets and templates that don't need to be built dynamically.
+  
+- **`server`**: NodeJS code for the live session backend server.
+
 - **`src`**: contains the source code. The codebase is written in ES2015.
 
   - **`assets`**: contains all graphical assets like images, fonts, icons, etc.
@@ -73,9 +91,13 @@ $ npm run lint
     - **`fonts`**: webfonts used on the page
 
     - **`icons`**: character token icons
+      
+    - **`sounds`**: sound effects used on the page
 
   - **`components`**: the internal components used in the project
   
     - **`modals`**: the modals have a separate subfolder
 
   - **`store`**: the VueX data store and modules
+    
+    - **`modules`**: VueX modules that live in their own namespace

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "townsquare",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "townsquare",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Blood on the Clocktower Town Square",
   "author": "Steffen Baumgart",
   "scripts": {

src/components/Player.vue

@@ -675,7 +675,7 @@ li.move:not(.from) .player .overlay svg.move {
     border: 10px solid transparent;
     border-right-color: black;
     right: 100%;
-    bottom: 7px;
+    bottom: 5px;
     margin-right: 2px;
   }
 

src/components/modals/VoteHistoryModal.vue

@@ -15,22 +15,50 @@
     <table>
       <thead>
         <tr>
+          <td>Time</td>
           <td>Nominator</td>
           <td>Nominee</td>
           <td>Type</td>
+          <td>Votes</td>
           <td>Majority</td>
-          <td><font-awesome-icon icon="hand-paper" /> Hand up</td>
+          <td>
+            <font-awesome-icon icon="user-friends" />
+            Voters
+          </td>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(vote, index) in session.voteHistory" :key="index">
+          <td>
+            {{
+              vote.timestamp
+                .getHours()
+                .toString()
+                .padStart(2, "0")
+            }}:{{
+              vote.timestamp
+                .getMinutes()
+                .toString()
+                .padStart(2, "0")
+            }}
+          </td>
           <td>{{ vote.nominator }}</td>
           <td>{{ vote.nominee }}</td>
           <td>{{ vote.type }}</td>
-          <td>{{ vote.majority }}</td>
           <td>
             {{ vote.votes.length }}
-            <font-awesome-icon icon="user-friends" />
+            <font-awesome-icon icon="hand-paper" />
+          </td>
+          <td>
+            {{ vote.majority }}
+            <font-awesome-icon
+              :icon="[
+                'fas',
+                vote.votes.length >= vote.majority ? 'check-square' : 'square'
+              ]"
+            />
+          </td>
+          <td>
             {{ vote.votes.join(", ") }}
           </td>
         </tr>
@@ -89,13 +117,16 @@ thead td {
 }
 
 tbody {
-  td:nth-child(1) {
+  td:nth-child(2) {
     color: $townsfolk;
   }
-  td:nth-child(2) {
+  td:nth-child(3) {
     color: $demon;
   }
-  td:nth-child(4) {
+  td:nth-child(5) {
+    text-align: center;
+  }
+  td:nth-child(6) {
     text-align: center;
   }
 }

src/media.scss

@@ -44,6 +44,12 @@
   .player > .name {
     top: 0;
   }
+  .player > .menu {
+    bottom: 0;
+    &:before {
+      bottom: 0;
+    }
+  }
 }
 
 // Old phones

src/store/modules/session.js

@@ -72,8 +72,8 @@ const mutations = {
   addHistory(state, players) {
     if (!state.nomination || state.lockedVote <= players.length) return;
     const isBanishment = players[state.nomination[1]].role.team === "traveler";
-    console.log(isBanishment);
     state.voteHistory.push({
+      timestamp: new Date(),
       nominator: players[state.nomination[0]].name,
       nominee: players[state.nomination[1]].name,
       type: isBanishment ? "Banishment" : "Execution",