原力甩卡 React 在两个不同的页面中传送卡片

[landmadename]

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/
# 或者部署

Acknowledgements

• 感谢react-spring和react-use-gesture
• 本项目主要是基于 react-spring 和 react-use-gesture 的卡片 demo 改造来的。
• 感谢react-tinder-cards

[bnm965321]

有意思啊，哈哈。

像传输宝可梦

[qiayue]

现在是 2 台手机，是否可以拓展到 N 台手机，然后你给一个摆放图，N 台手机按照摆放图摆放，就可以组合大屏幕玩一些花样了

[ifsct]

挺有趣的😄

[tojonozomi]

有意思，可以整点脑洞进去做个游戏啥的

[TimPeake]

👍

[qfdk]

好像挺好玩儿

[landmadename]

@qiayue
@TimPeake
当初我的想法是，手机太小了，用来浏览网页太不方便了，目录和内容同一时间只能看到一个，想看的内容可以丢到另一个屏幕稍后阅读。
后来发现华为的平板似乎有这个功能。。。

还有，我一个盆友的想法是四个人围成一桌斗地主。。

[carbrokers]

NB