/cardgame-btc

The bitcoin misconceptions cardgame

Introduction

Step forward to fight Bitcoin misconceptions. This is a card game is based on the cardgame engine

Here is the live version of the cardset:

There are other instances of the cardgame engine:

This app contains:

  • Card game with misconceptions
  • Realtime Twitter keyword monitor
  • the scores calculated for the game

The monitor can be used to find misconceptions realtime.

Why Card game Misconceptions?:

We need to get it right and it needs to be fair. The elaborate explanation is here

Who's right, who's wrong?

The cardgame does not pretend to be right in everything at all times. Our objective has been to:

  • present a nuanced and more complete take on the matter
  • substantiate the answers with empirical data gathered from reknowned sources in the field
  • offer a way to improve the answers by anyone via the Telegram-group

For who is the cardgame

Our target group likes to observe discussions on social media from a distance. If they'd like to react and spread a balanced neutral message, then it would be without having to take responsibility there (“I think it's an interesting discussion" and "Here I offer some info from respected experts"

It's somebody who

  • is socially concerned
  • knows how to use social media
  • knows a bit about bitcoin
  • neutral and eager to spread the correct message (neutral abritrary urge)

Important to understand is that the cardgame is only secondairily meant for people who need to be trained about bitcoin and blockchain, those full of "misconceptions".

What does the cardgame engine offer?

Fixed URLs to cards, questions, answers, related video, podcast, opinions of experts, and further reading.

We provide the tools in order to individualize your responses with the fixed URLS in social media:

  1. Add your own tailor-made text
  2. Snippets selection
  3. Add pre-defined texts (neutral and for ease of use)
  4. Send fixed urls of cards and fixed catergories of cards

Copyright & License

All content in this repository is copyright by the contributors.

All text is licensed CC-BY, and all code is licensed under the MIT License.

Contributors: Kor Dwarshuis <@kordwarshuis>, Henk van Cann <@henkvancann>

General instructions

  • Cd to cardgame main directory, find file .ev.example
  • Copy file .env-example to .env, check that the file exists
  • Run npm install from commandline to install dependencies

Test on local machine

  • Run npm run serve to start a webserver/ Click one of the links that will be provided, Example:
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.178.68:8080/

Stage to production server

Instructions for pushing to live:

The repository is a general repository from which you can create a BTC (Bitcoin) version and a BCB (Blockchain) version.

Before pushing to live server four files have to be edited in order to make it the BTC or the BCB version:

1: Filename: /vue.config.js

Open the file with a text-editor, e.g. nano
nano ./vue.config.js
Now you have a choice either to build a Bitcoin or Blockchain version. You can't build both a the same time. Uncomment the relevant code in ./vue.config.js.

Example

 //=============
  // BTC version
  publicPath: process.env.NODE_ENV === 'production' ? '/t/btc/' : '/',
  //=============

  //=============
  // BCB version
  // publicPath: process.env.NODE_ENV === 'production' ? '/t/bcb/' : '/',
  //=============

In vue.config.js you can define the subdirectory where you finally want to place the app.

2: Filename: /public/.htaccess

Open the file with a text-editor, e.g. nano
nano ./public/.htaccess
Now you have a choice either to build a Bitcoin or Blockchain version. You can't build both a the same time. Uncomment the relevant code in ./public/.htaccess.

Example: 

    ####################
    # BTC version:
    RewriteBase /t/btc/
    ####################

    ####################
    # BCB version:
    # RewriteBase /t/bcb/
    ####################

3: Filename: /.env

Open the file with a text-editor, e.g. nano
nano ./.env
Now you have a choice either to build a Bitcoin or Blockchain version. You can't build both a the same time. Uncomment the relevant code in ./.env.

Please note: you have to restart local webserver to see changes in .env in effect.

Example:

####################
# BTC specific version:
####################
VUE_APP_TITLE="Bitcoin Misconceptions."
VUE_APP_DESCRIPTION="Misconceptions about bitcoin hold back progress. Found a misconception? Lookup-Copy-Paste our permanent links with curated expert info!"
VUE_APP_AUTHOR="Blockchain Bird"
VUE_APP_SOCIAL_MEDIA_IMAGE=social-media-bitcoin4.jpg
VUE_APP_SOCIAL_MEDIA_IMAGE_WIDTH=1200
VUE_APP_SOCIAL_MEDIA_IMAGE_HEIGHT=628
VUE_APP_GOOGLE_ANALYTICS_ID="XXXXXXXX"
####################

####################
# BCB specific version:
####################
#VUE_APP_TITLE="Blockchain Misconceptions."
#VUE_APP_DESCRIPTION="Misconceptions about blockchain hold back progress. Found a misconception? Lookup-Copy-Paste our permanent links with curated expert info!"
#VUE_APP_AUTHOR="Blockchain Bird"
#VUE_APP_SOCIAL_MEDIA_IMAGE=social-media-blockchain4.jpg
#VUE_APP_SOCIAL_MEDIA_IMAGE_WIDTH=1200
#VUE_APP_SOCIAL_MEDIA_IMAGE_HEIGHT=628
#VUE_APP_GOOGLE_ANALYTICS_ID="XXXXXXXX"
####################

Please note: /.env is not in repository, use /.env.example and create /.env. See instructions here

4: Filename: /live.sh

Uncomment the relevant code in ./live.sh and add your ssh login credentials to your hosting service.

Run npm run build to create a ./dist directory (production version)

Optional script provided

This script can be used to push the build to the live web server. Please note: /live.sh is not in repository, use /live.example.sh and create /live.sh.

More info on https://vuejs.org

Technical information

This app is built in Vue.js.

Libraries also used:

The content is managed via Google Sheets, and then pulled to a .csv file via PHP De content is pulled from the .csv file via D3.js:

Google Sheets -> data.csv -> card game

The Google Sheets step is not necessary and can be removed from the working flow if desired.

The .CSV step helps to speed the loading time, since Google Sheets tends to be slow at times.

UX design

Read more