V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
landmadename
V2EX  ›  分享创造

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

  •  
  •   landmadename · 2020-03-13 15:14:11 +08:00 · 2400 次点击
    这是一个创建于 1720 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Flying Cards

    原力甩卡

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

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

    Preview

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

    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

    8 条回复    2020-03-18 11:19:19 +08:00
    bnm965321
        1
    bnm965321  
       2020-03-13 16:28:58 +08:00
    有意思啊,哈哈。

    像传输宝可梦
    qiayue
        2
    qiayue  
       2020-03-13 16:36:30 +08:00
    现在是 2 台手机,是否可以拓展到 N 台手机,然后你给一个摆放图,N 台手机按照摆放图摆放,就可以组合大屏幕玩一些花样了
    ifsct
        3
    ifsct  
       2020-03-13 18:32:29 +08:00
    挺有趣的😄
    tojonozomi
        4
    tojonozomi  
       2020-03-14 04:24:11 +08:00
    有意思,可以整点脑洞进去做个游戏啥的
    TimPeake
        5
    TimPeake  
       2020-03-14 09:25:17 +08:00
    👍
    qfdk
        6
    qfdk  
       2020-03-14 16:21:50 +08:00 via iPhone
    好像挺好玩儿
    landmadename
        7
    landmadename  
    OP
       2020-03-16 09:20:33 +08:00
    @qiayue
    @TimPeake
    当初我的想法是,手机太小了,用来浏览网页太不方便了,目录和内容同一时间只能看到一个,想看的内容可以丢到另一个屏幕稍后阅读。
    后来发现华为的平板似乎有这个功能。。。

    还有,我一个盆友的想法是四个人围成一桌斗地主。。
    carbrokers
        8
    carbrokers  
       2020-03-18 11:19:19 +08:00
    NB
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3332 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 84ms · UTC 12:07 · PVG 20:07 · LAX 04:07 · JFK 07:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.