写点什么

前端大神用 React 刻了一个 Windows XP

  • 2019-04-01
  • 本文字数:1646 字

    阅读完需:约 5 分钟

前端大神用React刻了一个Windows XP

近日,一前端大神 sh1zuku 用 React 刻出一個 Windows XP,页面中的两个 Windows XP 窗口可以自由拖曳,而且作者还制作了一个踩地雷的游戏,可以直接上手玩。作者也将这些实现的过程在 medium 上记录了下来,以下全文就是 InfoQ 对其内容的整理。


想玩的同学,可点这个链接一试:


https://winxp.now.sh/

从纯 JS 转至 React

sh1zuku 表示,他原本是以 vanilla JS 写整个 project 的,但不得不说 Parcel 真的很强大,一键开始 Pug,SCSS, Babel,HMR 环境,马上就能进入开发模式。少了框架的帮忙,他必须手刻 PWA,SPA,Code splitting 和 Routing,所以。最后他决心将整个专案用 React 重写,但后来分离至另外一个 repo 了。

元素拖曳、伸缩

作者一开始决定从 XP 视窗的拖曳以及伸缩着手,期间经历 了 getBoundingClientRect 的 left、top 以及 mousemove 的( clientX, offsetX,pageX,screenX)各种折磨, 才让他真正了解其中的区别,最后他做的是不受 scroll 影响的元素拖曳和伸缩。

抖动的 Cursor

在元素伸缩时,加入 cursor: resize;系列是不可或缺的,然而单纯的 :hover 会在快速伸缩时因为超过元素范围让 cursor 变回 default,想了很久以后他决定盖一个全版 div,让 cursor 怎麼滑都保持 resize!


无限延伸子目录

在这里,作者最后的写法是遍历一个 JSON 档,产生相应的目录结构,但较麻烦的是为了符合 XP 的行为,需要自己控制选单反白的状态。


Grid 栏位对齐

每个下拉选单都有四栏,中间的两栏(选项名称和快捷键)长度不固定,且内容要对齐该栏左侧,作者在这里选用 grid 来解决:


display: grid;grid-template-columns: 16px auto auto 15px;

复制代码


但后来发现 hover 时需要反蓝整列,就用了 display: contents 这个属性,作用是包住内容(一整列)但不影响 layout(栏的对齐),如此一来就能轻松设定整列样式了。


踩地雷

為了完全模拟踩地雷的行为,将 mouse event 的 button 和 buttons 属性组合了一下才完成,复杂的状态则使用 useReducer 来管理。


MouseEvent.button 代表触发事件的按键(1 左键 2 右键)


MouseEvent.buttons 代表触发事件时按键的状态(1 左键 2 右键 3 双键)



手机版:https://github.com/ShizukuIchi/minesweeper

图片反蓝

為了让图片变蓝,作者一开始用了这种方式:


.img {  filter: hue-rotate(170deg) brightness(60%) saturate(300%);}
复制代码


网站中使用了许多好用的 filter 属性,只有这个比较诡异,色相旋转、亮度还有饱和度的组合还真的让图片变蓝了。最后反蓝的的方式是给 parent 蓝色影子、让图案透明,达到变蓝的效果:


.container {  filter: drop-shadow(0 0 blue);}.img {  opacity: 0.5;}
复制代码


ReactDom.createPortal

打开关机菜单时,为了让全版画面变成灰阶但保持目录的颜色,sh1zuku 使用了 portal,让选单 render 时可以插入特定的 DOM 位置又保持事件沟通,时常用在突破 overflow: hidden; 限制。


其他

sh1zuku 还分享了一些其他细节:


多个 box shadow 会由前到后覆盖,如下,影子会是黑色:


.dot {  box-shadow: 0 0 black, 0 0 white, 0 0 blue; }
复制代码


选单使用 filter: invert(100%) 转负片,看到的蓝色其实原本是橘色:


.container {  background: #e99f17; -> 橘色  filter: invert(100%);}
复制代码


用 user select: none、pointer event: none 防止拖曳事件受到影响。

后记

在这个过程中为了完全符合 XP 视觉,sh1zuku 不断微调 layout 和颜色,也花了很多时间在图示上,其实有许多次「到此为止吧」的念头。不过也理清了他自己在 layout 的错误观念,且只要发现跟原生 XP 不同的地方,不改完就觉得浑身不对劲,为此他还特地装了 XP 虚拟机 XD。

参考链接

更多链接

GitHub:https://github.com/ShizukuIchi/winXP


演示链链接:https://winxp.now.sh/


原文链接:


https://medium.com/@shizukuichi/用-react-刻-xp-一路上的點點滴滴-7440e8bc9b73


更多内容,请关注前端之巅。



2019-04-01 06:0614187

评论 1 条评论

发布
用户头像
感觉是做了个Winamp,顺便做了个XP吧?Winamp连EQ均衡器都好用
2019-04-08 10:33
回复
没有更多了
发现更多内容

YYDS,瞬间秒杀全网,这套Java面试笔记可以解决90

Java 程序员 后端

zookeeper之java API使用,zookeeper学习

Java 程序员 后端

Spring中注解,java电话面试技巧

Java 程序员 后端

Spring动态代理时是如何解决循环依赖的?为啥用三级缓存?

Java 程序员 后端

T-SQL——数据透视和逆透视,java架构师面试答案

Java 程序员 后端

Tomcat服务器搭建及测试教程,java技术路线规划

Java 程序员 后端

VirtualBox虚拟机网络设置(四种方式),java高级程序员简历

Java 程序员 后端

SpringCloudRPC调用核心原理:RxJava响应式编程框架,其他操作符

Java 程序员 后端

Threadtear:一款多功能Java代码反混淆工具套件

Java 程序员 后端

SpringBoot基于微服务架构的前后端分离博客系统源码免费赠送

Java 程序员 后端

Vue 脚手架结合 SpringBoot 构建前后端分离入门项目(实现增删改查)

Java 程序员 后端

[译] 微服务的设计模式,java后端面经

Java 程序员 后端

Spring入门后半部分----JDBCTemplate和事务控制

Java 程序员 后端

Spring总结以及在面试中的一些问题,java面试笔试题代码

Java 程序员 后端

Spring经典面试题,帮你整理好了!(1),一个星期4轮面试终拿下offer

Java 程序员 后端

Tomcat是如何运行的?整体架构又是怎样的?,java面试经验技巧

Java 程序员 后端

Web开发基础:HTML,java面试没问技术问题

Java 程序员 后端

SpringBoot整合SpringSecurity超详细入门教程

Java 程序员 后端

Springboot过滤器和拦截器详解及使用场景,nginx原理和架构

Java 程序员 后端

SpringCloud Alibaba 入坑(六),java开发程序员面试题

Java 程序员 后端

VIVO一面竟然翻车,含泪整理了这些Java面经,看完我悟了

Java 程序员 后端

Spring源码学习~循环依赖(面试必问系列,学java基础的心得体会

Java 程序员 后端

windows下快速安装nginx 并配置 开机自启动,基础+底层+算法+数据库

Java 程序员 后端

SpringBoot源码学习系列之嵌入式Servlet容器

Java 程序员 后端

SpringMVC--请求参数绑定,spring菜鸟教程

Java 程序员 后端

super与this在成员变量,成员方法,构造方法方面的作用

Java 程序员 后端

SpringBoot配置文件,springboot项目案例百度云

Java 程序员 后端

Spring中的循环依赖及解决,springboot入门与实践PDF

Java 程序员 后端

Spring源码解析(一)IOC,终于找到一个看得懂的JVM内存模型了

Java 程序员 后端

Spring经典面试题,帮你整理好了!,阿里P8大牛亲自教你

Java 程序员 后端

“三次握手,四次挥手,java程序设计教程第三版雍俊海pdf

Java 程序员 后端

前端大神用React刻了一个Windows XP_大前端_sh1zuku_InfoQ精选文章