Flying Cards

原力甩卡

如果开两个网页，就可以来回传送卡片。

如果拿两台手机，都打开这个网站，也可以来回传送卡片。

Preview

虽然原理很简单，但是我觉得这个效果很有趣。

Demo

http://flyingcards.fastbreakfast.top/

在两个页面(设备)中打开这个网站。在输入框里输入对应的号码，点击 connect。也可以点 random。如果一个页面被清空了，就可以开始滑动啦。

Github

https://github.com/landmadename/Flying-Cards

Usage

项目由两个部分组成：
- 前端 react：用来显示卡片的动效 (FlyingCards/react-cards)
- 后端 Django：用 Websockets 来模拟传输 (FlyingCards/mysite)
修改 react-cards/src/index.js 里的 cards 就可以修改图片
mysite 是直接通过修改Channels的教程完成的。所以连名字都没改。
可以通过修改 mysite/chat/consumers.py 完成 Websockets 的一些修改。

Installation

首先，你需要安装一个 redis

git clone https://github.com/GavBaros/react-tinder-cards.git cd Flying-Cards/react-cards npm install npm start # 再开一个终端，或者把 npm start 放到后台 cd Flying-Cards/mysite mkvirtualenv flyingcards pip install -r requirements.txt python3 manage.py runserver # 修改 Flying-Cards/react-cards/src/index.js 里 150 行 domin 为自己的地址 # 直接打开 http://localhost:3006/ # 或者部署