Disabled some features, updated readme

README.md

@@ -1,10 +1,19 @@
 # CardsAwayFromHumanity
 
-This repository contains a month-long fever-induced stream of conciousness projected into a typescript codebase I like to call "Cards Away From Humanity".
+This repository contains a month-long fever-induced stream of conciousness projected into a typescript codebase I like to call "Cards Away From Humanity". It is an online multiplayer version of Cards Against Humanity playable on your phone, and over video chat.
+
+I initially planned for this project to be a slightly bigger scope, sadly things happened towards the end of development that led to be eventually ramping down progress and turning off features enough to call it a day (See the `scopeChange` branch). 
+
+The game is playable at https://cafh.herokuapp.com/ - It's hosted on a free instance, so it may take up to a minute to load the first time if it's sleeping. Once it's running, you can invite friends and play!
+
+
+## Use as a framework
+
+The server code is designed to be reused for other game types. Simply provide your own class implementing the `Game` protocol, and the rest of the codebase will handle player authentication, room management, horizontal scaling, and more. See `CAFHGame.ts` for a messy yet surprisingly functional implementation of this game's logic.
 
 ## Deploying
 
-This repository is built to be deployed on Heroku, with a heroku-redis addon to handle multiple servers. 
+This repository is built to be deployed on Heroku, with a heroku-redis addon to handle multiple servers. It's set up to be deployed from Github, so simply clone this repo and deploy it onto an instance with redis.
 
 ## Dev notes
 
@@ -15,4 +24,4 @@ This repository is built to be deployed on Heroku, with a heroku-redis addon to
 
 - Originally, this repo was designed to run on Google Cloud Engine; but it turned out that websocket connection became extremely unreliable when scaling beyond a single instance. I switched to Heroku pretty late in the process, which means that I had to account for the deployment differences such as not being able to deploy from the server folder. That's why there is a weird `package.json` in the root.
 
-- Safari is surprisingly buggy, especially when testing. Lots of messages are being dropped which would probably require some more state redundency to make the game more reliable. I think it has to do with it going into energy saving mode when not focused (which happens a lot when I test things).
+- Safari is surprisingly buggy, especially when testing. Lots of messages are being dropped which would probably require some more state redundency to make the game more reliable. I think it has to do with it going into energy saving mode when not focused (which happens a lot when I test things).

client/src/components/game/Game.vue

@@ -45,7 +45,7 @@
     <transition name="fade">
       <div class="join helvetica is-hidden-mobile" v-if="showRoomCode">
         Join at
-        <span class="has-text-info">away.game</span>
+        <span class="has-text-info">cafh.herokuapp.com</span>
         <br />with room code
         <br />
         <span class="room-code has-text-light">{{ this.$store.state.joinedRoom }}</span>

client/src/components/game/Invite.vue

@@ -37,17 +37,17 @@ import { mapState } from "vuex";
 })
 export default class Invite extends Vue {
   get url(this: any): string {
-    return `https://away.game/${this.joinedRoom}`;
+    return `https://cafh.herokuapp.com/ Room Code: ${this.joinedRoom}`;
   }
 
   get canShare(): boolean {
     return (navigator as any).share !== undefined;
   }
 
-  share() {
+  share(this: any) {
     (navigator as any).share({
-      title: "Let's play Cards Away From Humanity!",
-      url: this.url
+      title: `Join me with room code: ${this.joinedRoom}`,
+      url: `https://cafh.herokuapp.com/`
     });
   }
 

client/src/components/game/Menu.vue

@@ -24,6 +24,7 @@
           </div>
         </div>
       </b-dropdown-item>
+        <!-- 
       <hr class="dropdown-divider" aria-role="menuitem" />
       <b-dropdown-item @click="toggleFullscreen()" aria-role="listitem">
         <div class="media">
@@ -34,15 +35,15 @@
           </div>
         </div>
       </b-dropdown-item>
-      <!-- <b-dropdown-item @click="toggleScoreboard()" aria-role="listitem">
+    <b-dropdown-item @click="toggleScoreboard()" aria-role="listitem">
         <div class="media">
           <b-icon class="media-left" icon="trophy"></b-icon>
           <div class="media-content">
             <h3>Toggle Scoreboard</h3>
             <small>Show or hide scoreboard.</small>
           </div>
         </div>
-      </b-dropdown-item> -->
+      </b-dropdown-item>
 
 
       <hr class="dropdown-divider" aria-role="menuitem" />
@@ -56,7 +57,7 @@
           </div>
         </div>
       </b-dropdown-item>
-
+ -->
 
       <hr class="dropdown-divider" aria-role="menuitem" />
       <b-dropdown-item :value="false" aria-role="listitem">

client/src/components/lobby/Home.vue

@@ -38,10 +38,10 @@
             <Join />
           </b-tab-item>
 
+          <!-- 
           <b-tab-item label="Public Games" icon="globe">
             <GameList />
           </b-tab-item>
-          <!-- 
           <b-tab-item label="About" icon="heart">
             Nunc nec velit nec libero vestibulum eleifend.
             Curabitur pulvinar congue luctus.
@@ -51,7 +51,7 @@
         </b-tabs>
       </article>
 
-      <p class="name"> Playing as <strong class="has-text-white">{{ $store.state.user.username }}</strong>. <a>Change your name.</a></p>
+      <p class="name"> Playing as <strong class="has-text-white">{{ $store.state.user.username }}</strong>. <a @click="changeName()">Change your name.</a></p>
     </div>
   </div>
 </template>
@@ -61,6 +61,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import Host from "./Host.vue";
 import Join from "./Join.vue";
 import GameList from "./GameList.vue";
+import { usernameStorageKey } from "../../store/index";
 
 @Component({
   components: {
@@ -82,6 +83,12 @@ export default class Home extends Vue {
       width: 420
     });
   }
+
+  changeName() {
+    localStorage.removeItem(usernameStorageKey)
+    // Definitely not an ideal solution.
+    location.reload()
+  }
 }
 </script>
 

client/src/components/lobby/Host.vue

@@ -28,7 +28,7 @@
             </div>
           </section>
         </article>
-
+<!--
         <b-field label="Points to win">
           <b-slider size="is-medium" :min="4" :max="12" v-model="points">
             <template v-for="val in [4,5,6,7,8,9,10,11,12]">
@@ -59,6 +59,7 @@
             </b-tooltip>
           </div>
         </b-collapse>
+        -->
       </section>
       <footer class="modal-card-foot modal-buttons">
         <button class="button" type="button" @click="$parent.close()">Close</button>

server/vue.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    chainWebpack: config => {
+      config
+      .plugin('html')
+      .tap(args => {
+        args[0].title = 'Cards Away From Humanity'
+        return args
+      })
+    }
+  }