写点什么

前端大神用 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:0614096

评论 1 条评论

发布
用户头像
感觉是做了个Winamp,顺便做了个XP吧?Winamp连EQ均衡器都好用
2019-04-08 10:33
回复
没有更多了
发现更多内容
前端大神用React刻了一个Windows XP_大前端_sh1zuku_InfoQ精选文章