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

\u003cp\u003e近日，一前端大神sh1zuku用React刻出一個 Windows XP，页面中的两个Windows XP窗口可以自由拖曳，而且作者还制作了一个踩地雷的游戏，可以直接上手玩。作者也将这些实现的过程在medium上记录了下来，以下全文就是InfoQ对其内容的整理。\u003c/p\u003e\n\u003cp\u003e想玩的同学，可点这个链接一试：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://winxp.now.sh/\"\u003ehttps://winxp.now.sh/\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e从纯JS转至React\u003c/h2\u003e\n\u003cp\u003esh1zuku表示，他原本是以 vanilla JS 写整个project的，但不得不说 Parcel 真的很强大，一键开始Pug，SCSS， Babel，HMR 环境，马上就能进入开发模式。少了框架的帮忙，他必须手刻 PWA，SPA，Code splitting 和 Routing，所以。最后他决心将整个专案用 React 重写，但后来分离至另外一个 repo 了。\u003c/p\u003e\n\u003ch2\u003e元素拖曳、伸缩\u003c/h2\u003e\n\u003cp\u003e作者一开始决定从 XP 视窗的拖曳以及伸缩着手，期间经历 了getBoundingClientRect 的 left、top 以及 mousemove 的（ clientX， offsetX，pageX，screenX）各种折磨， 才让他真正了解其中的区别，最后他做的是不受 scroll 影响的元素拖曳和伸缩。\u003c/p\u003e\n\u003ch2\u003e抖动的Cursor\u003c/h2\u003e\n\u003cp\u003e在元素伸缩时，加入 cursor: resize；系列是不可或缺的，然而单纯的 :hover 会在快速伸缩时因为超过元素范围让 cursor 变回 default，想了很久以后他决定盖一个全版 div，让 cursor 怎麼滑都保持 resize！\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca03a95d558f.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003e无限延伸子目录\u003c/h2\u003e\n\u003cp\u003e在这里，作者最后的写法是遍历一个 JSON 档，产生相应的目录结构，但较麻烦的是为了符合 XP 的行为，需要自己控制选单反白的状态。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca03b36a2f74.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003eGrid 栏位对齐\u003c/h2\u003e\n\u003cp\u003e每个下拉选单都有四栏，中间的两栏（选项名称和快捷键）长度不固定，且内容要对齐该栏左侧，作者在这里选用grid来解决：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003edisplay: grid;\ngrid-template-columns: 16px auto auto 15px;\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e但后来发现 hover 时需要反蓝整列，就用了 display: contents 这个属性，作用是包住内容（一整列）但不影响 layout（栏的对齐），如此一来就能轻松设定整列样式了。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca03bd8168bf.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003e踩地雷\u003c/h2\u003e\n\u003cp\u003e為了完全模拟踩地雷的行为，将 mouse event 的 button 和 buttons 属性组合了一下才完成，复杂的状态则使用 useReducer 来管理。\u003c/p\u003e\n\u003cp\u003eMouseEvent.button 代表触发事件的按键（1 左键 2 右键）\u003c/p\u003e\n\u003cp\u003eMouseEvent.buttons 代表触发事件时按键的状态（1 左键 2 右键 3 双键）\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca03c7079f01.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e手机版：\u003ca href=\"https://github.com/ShizukuIchi/minesweeper\"\u003ehttps://github.com/ShizukuIchi/minesweeper\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e图片反蓝\u003c/h2\u003e\n\u003cp\u003e為了让图片变蓝，作者一开始用了这种方式：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.img {\n filter: hue-rotate(170deg) brightness(60%) saturate(300%);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e网站中使用了许多好用的 filter 属性，只有这个比较诡异，色相旋转、亮度还有饱和度的组合还真的让图片变蓝了。最后反蓝的的方式是给 parent 蓝色影子、让图案透明，达到变蓝的效果：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.container {\n filter: drop-shadow(0 0 blue);\n}\n.img {\n opacity: 0.5;\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca03d3c0de7e.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003eReactDom.createPortal\u003c/h2\u003e\n\u003cp\u003e打开关机菜单时，为了让全版画面变成灰阶但保持目录的颜色，sh1zuku使用了 portal，让选单 render 时可以插入特定的 DOM 位置又保持事件沟通，时常用在突破 overflow: hidden; 限制。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca03da0acade.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003e其他\u003c/h2\u003e\n\u003cp\u003esh1zuku还分享了一些其他细节：\u003c/p\u003e\n\u003cp\u003e多个 box shadow 会由前到后覆盖，如下，影子会是黑色：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.dot {\n box-shadow: 0 0 black, 0 0 white, 0 0 blue; \n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e选单使用 filter: invert(100%) 转负片，看到的蓝色其实原本是橘色：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.container {\n background: #e99f17; -\u0026gt; 橘色\n filter: invert(100%);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e用 user select: none、pointer event: none 防止拖曳事件受到影响。\u003c/p\u003e\n\u003ch2\u003e后记\u003c/h2\u003e\n\u003cp\u003e在这个过程中为了完全符合 XP 视觉，sh1zuku不断微调 layout 和颜色，也花了很多时间在图示上，其实有许多次「到此为止吧」的念头。不过也理清了他自己在 layout 的错误观念，且只要发现跟原生 XP 不同的地方，不改完就觉得浑身不对劲，为此他还特地装了 XP 虚拟机 XD。\u003c/p\u003e\n\u003ch4\u003e参考链接\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://bitsofco.de/how-display-contents-works/\"\u003ehttps://bitsofco.de/how-display-contents-works/\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"http://www.colorzilla.com/gradient-editor/\"\u003ehttp://www.colorzilla.com/gradient-editor/\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\"\u003ehttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4\u003e更多链接\u003c/h4\u003e\n\u003cp\u003eGitHub：\u003ca href=\"https://github.com/ShizukuIchi/winXP\"\u003ehttps://github.com/ShizukuIchi/winXP\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e演示链链接：\u003ca href=\"https://winxp.now.sh/\"\u003ehttps://winxp.now.sh/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e原文链接：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/@shizukuichi/%E7%94%A8-react-%E5%88%BB-xp-%E4%B8%80%E8%B7%AF%E4%B8%8A%E7%9A%84%E9%BB%9E%E9%BB%9E%E6%BB%B4%E6%BB%B4-7440e8bc9b73\"\u003ehttps://medium.com/@shizukuichi/用-react-刻-xp-一路上的點點滴滴-7440e8bc9b73\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e更多内容，请关注前端之巅。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca0f3faca602.png\" alt=\"\" /\u003e\u003c/p\u003e\n