Board is showing!
Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
4
.babelrc
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"presets": [ "@babel/env", "@babel/preset-react" ],
|
||||||
|
"plugins": [ "@babel/plugin-proposal-class-properties" ]
|
||||||
|
}
|
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
!.gitignore
|
||||||
|
!package.json
|
||||||
|
node_modules
|
||||||
|
package-lock.json
|
||||||
|
dist/*
|
||||||
|
|
1
LICENSE
Normal file
@ -0,0 +1 @@
|
|||||||
|
docs/solutions/hpc.png: https://www.intel.com/content/dam/www/public/us/en/images/photography-business/RWD/blue-server-room-16x9-dark.jpg.rendition.intel.web.320.180.jpg
|
8
README.md
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# Ketr Settlers
|
||||||
|
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo apt-get install nodejs npm
|
||||||
|
sudo -E npm install --global npm@latest
|
||||||
|
```
|
||||||
|
|
6
assets/README.md
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
# vtt.svg => vtt.png
|
||||||
|
|
||||||
|
```
|
||||||
|
convert -background none -geometry 256x256 vtt.svg vtt.png
|
||||||
|
```
|
||||||
|
|
BIN
assets/agama.png
Normal file
After Width: | Height: | Size: 172 KiB |
BIN
assets/clpeak.png
Normal file
After Width: | Height: | Size: 7.5 KiB |
BIN
assets/down.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
assets/favicon-128.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
assets/favicon-152.png
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
assets/favicon-167.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
assets/favicon-180.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
assets/favicon-192.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
assets/favicon-256.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
assets/favicon-32.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
assets/link.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/original/borders-1.6.jpg
Normal file
After Width: | Height: | Size: 323 KiB |
BIN
assets/original/borders-1.6.png
Normal file
After Width: | Height: | Size: 1.0 MiB |
BIN
assets/original/borders-2.1.jpg
Normal file
After Width: | Height: | Size: 305 KiB |
BIN
assets/original/borders-2.1.png
Normal file
After Width: | Height: | Size: 933 KiB |
BIN
assets/original/borders-3.2.jpg
Normal file
After Width: | Height: | Size: 339 KiB |
BIN
assets/original/borders-3.2.png
Normal file
After Width: | Height: | Size: 998 KiB |
BIN
assets/original/borders-4.3.jpg
Normal file
After Width: | Height: | Size: 316 KiB |
BIN
assets/original/borders-4.3.png
Normal file
After Width: | Height: | Size: 952 KiB |
BIN
assets/original/borders-5.4.jpg
Normal file
After Width: | Height: | Size: 306 KiB |
BIN
assets/original/borders-5.4.png
Normal file
After Width: | Height: | Size: 945 KiB |
BIN
assets/original/borders-5.6.jpg
Normal file
After Width: | Height: | Size: 338 KiB |
BIN
assets/original/borders-5.6.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
assets/original/borders-6.5.jpg
Normal file
After Width: | Height: | Size: 338 KiB |
BIN
assets/original/borders-6.5.png
Normal file
After Width: | Height: | Size: 921 KiB |
BIN
assets/original/borders.jpg
Normal file
After Width: | Height: | Size: 2.2 MiB |
BIN
assets/original/brick.png
Normal file
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/original/cards.jpg
Normal file
After Width: | Height: | Size: 3.4 MiB |
BIN
assets/original/pieces-blue.jpg
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
assets/original/pieces-orange.jpg
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
assets/original/pieces-red.jpg
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
assets/original/pieces-white.jpg
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
assets/original/pieces.jpg
Normal file
After Width: | Height: | Size: 123 KiB |
BIN
assets/original/pip-numbers.jpg
Normal file
After Width: | Height: | Size: 338 KiB |
BIN
assets/original/pip-numbers.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/original/pip-ships.jpg
Normal file
After Width: | Height: | Size: 243 KiB |
BIN
assets/original/pip-ships.png
Normal file
After Width: | Height: | Size: 920 KiB |
BIN
assets/original/pips.jpg
Normal file
After Width: | Height: | Size: 1.0 MiB |
BIN
assets/original/placards.jpg
Normal file
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/original/robber.jpg
Normal file
After Width: | Height: | Size: 9.4 KiB |
BIN
assets/original/robber.png
Normal file
After Width: | Height: | Size: 453 KiB |
BIN
assets/original/sheep.png
Normal file
After Width: | Height: | Size: 1.9 MiB |
BIN
assets/original/stone.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
assets/original/tiles.jpg
Normal file
After Width: | Height: | Size: 2.5 MiB |
BIN
assets/original/tiles.png
Normal file
After Width: | Height: | Size: 14 MiB |
BIN
assets/original/wheat.png
Normal file
After Width: | Height: | Size: 2.5 MiB |
BIN
assets/original/wood.png
Normal file
After Width: | Height: | Size: 2.3 MiB |
BIN
assets/solutions-all.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
assets/solutions-compute.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
assets/solutions-media.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
assets/solutions-render.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
assets/up.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
assets/vtt-logo.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
assets/vtt.png
Normal file
After Width: | Height: | Size: 12 KiB |
106
assets/vtt.svg
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="164.61722mm"
|
||||||
|
height="164.61722mm"
|
||||||
|
viewBox="0 0 164.61722 164.61722"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="0.92.3 (2405546, 2018-03-11)"
|
||||||
|
sodipodi:docname="vtt.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.35"
|
||||||
|
inkscape:cx="-215.59086"
|
||||||
|
inkscape:cy="198.94464"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1680"
|
||||||
|
inkscape:window-height="1022"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="30"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
showborder="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-24.31604,-50.492584)">
|
||||||
|
<circle
|
||||||
|
id="path144"
|
||||||
|
cx="106.62465"
|
||||||
|
cy="132.80119"
|
||||||
|
r="82.308609"
|
||||||
|
style="fill:none;stroke-width:0.42446816;fill-opacity:0" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer3"
|
||||||
|
inkscape:label="VTT"
|
||||||
|
transform="translate(-24.31604,-50.492584)">
|
||||||
|
<path
|
||||||
|
style="fill:#333333;fill-rule:evenodd;stroke:#000000;stroke-width:0.20466655px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="M 176.44869,92.448235 H 37.231088 L 106.81368,212.96877 170.41517,102.80776 h -21.05604 l -41.57207,72.00493 -41.385686,-71.68213 h -8.557439 l 49.505085,85.74532 45.65987,-79.08521 h 6.14499 L 107.24329,199.70246 49.418707,99.547343 H 172.31102 l 4.13767,-7.099108"
|
||||||
|
id="path119"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccccccccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#333333;fill-rule:evenodd;stroke:#000000;stroke-width:0.20466655px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 71.933034,103.33938 h 70.628246 l -17.93014,31.0559 h -8.31105 v 12.65503 l -5.20391,9.01343 v -27.50652 h 9.44344 L 131.30747,109.9414 H 75.752261 l -3.819227,-6.60202"
|
||||||
|
id="path121"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#333333;fill-rule:evenodd;stroke:#000000;stroke-width:0.20466655px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="M 121.06801,114.04494 H 78.168531 l 11.81859,20.4704 h 7.97719 v 13.17726 l 4.980839,8.62706 v -27.69924 h -9.891019 l -4.32808,-7.49646 h 28.052009 z"
|
||||||
|
id="path123"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;stroke-width:0.20674446"
|
||||||
|
d="m 72.194752,152.70169 -34.565714,-59.885318 34.6174,-0.0523 c 19.039573,-0.0288 50.182242,-0.0288 69.205942,0 l 34.58855,0.0523 -1.87124,3.248672 -1.87123,3.248662 -61.56535,0.0592 -61.565357,0.0592 28.943428,50.132854 c 15.91888,27.57308 29.016799,50.15638 29.106469,50.18509 0.11699,0.0374 44.2921,-76.20298 51.49933,-88.88108 l 0.6839,-1.20302 -3.2682,0.005 -3.2682,0.005 -22.72613,39.38503 c -12.49938,21.66179 -22.79674,39.31284 -22.88303,39.22457 -0.0863,-0.0883 -10.871839,-18.72096 -23.967889,-41.40599 C 70.191373,124.19497 59.162256,105.09762 58.778275,104.44144 l -0.698147,-1.19305 4.134828,0.056 4.134828,0.056 20.649447,35.76679 c 11.3572,19.67174 20.711619,35.76679 20.787609,35.76679 0.076,0 9.45874,-16.16057 20.85057,-35.91237 l 20.71242,-35.91238 10.38699,-0.009 10.387,-0.009 -0.59386,0.98203 c -0.32663,0.54013 -14.52425,25.12463 -31.55026,54.63223 -17.02602,29.5076 -31.01554,53.71149 -31.08782,53.7864 -0.0723,0.0749 -15.685989,-26.8122 -34.697128,-59.74915 z"
|
||||||
|
id="path156"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;stroke-width:0.20674446"
|
||||||
|
d="m 111.20547,142.02151 v -13.33502 h 4.73565 4.73565 l 5.39625,-9.35518 5.39625,-9.35519 -27.7887,-0.0524 -27.788699,-0.0524 -1.777179,-3.07708 c -0.977447,-1.69239 -1.777177,-3.1341 -1.777177,-3.20379 0,-0.0697 15.730666,-0.12672 34.957045,-0.12672 19.35135,0 34.92627,0.0792 34.88812,0.17731 -0.0379,0.0975 -4.0229,7.02686 -8.85555,15.39853 l -8.78664,15.22122 -4.18658,0.004 -4.18657,0.004 v 6.35065 6.35064 l -2.40585,4.19332 c -1.32321,2.30633 -2.43963,4.19333 -2.48093,4.19333 -0.0413,0 -0.0751,-6.00076 -0.0751,-13.33502 z"
|
||||||
|
id="path158"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;stroke-width:0.20674446"
|
||||||
|
d="m 100.43183,151.68682 -2.147889,-3.66972 -0.10337,-6.82257 -0.10337,-6.82256 -4.03152,-0.0585 -4.03151,-0.0585 -5.74118,-9.9474 c -3.15765,-5.47107 -5.70792,-9.98066 -5.66726,-10.02131 0.0406,-0.0407 9.5328,-0.0502 21.09366,-0.0213 l 21.019749,0.0527 -2.01747,3.3523 -2.01747,3.35231 -14.09725,0.007 -14.097249,0.007 2.23974,3.87646 2.23975,3.87646 4.87988,0.0554 4.879879,0.0554 v 13.22791 c 0,7.27534 -0.0336,13.2279 -0.0746,13.2279 -0.041,0 -1.04116,-1.65137 -2.22251,-3.66971 z"
|
||||||
|
id="path160"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 5.7 KiB |
30
index.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="icon" href="../assets/favicon-32.png" sizes="32x32">
|
||||||
|
<link rel="icon" href="../assets/favicon-57.png" sizes="57x57">
|
||||||
|
<link rel="icon" href="../assets/favicon-76.png" sizes="76x76">
|
||||||
|
<link rel="icon" href="../assets/favicon-96.png" sizes="96x96">
|
||||||
|
<link rel="icon" href="../assets/favicon-128.png" sizes="128x128">
|
||||||
|
<link rel="icon" href="../assets/favicon-192.png" sizes="192x192">
|
||||||
|
<link rel="icon" href="../assets/favicon-228.png" sizes="228x228">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-image: linear-gradient(#090B1A, #131524);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Oswald&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<noscript>
|
||||||
|
This site requires JavaScript to run.
|
||||||
|
</noscript>
|
||||||
|
<script src="./dist/bundle.js"></script>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
56
package.json
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"name": "ketr.settlers",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Settlers",
|
||||||
|
"main": "index.html",
|
||||||
|
"scripts": {
|
||||||
|
"start": "webpack-dev-server --mode development --host 0.0.0.0 --config webpack.dev.js",
|
||||||
|
"build": "webpack --config webpack.prod.js",
|
||||||
|
"commit-build": "./commit-build.sh",
|
||||||
|
"watch": "webpack --config webpack.prod.js --watch",
|
||||||
|
"update": "./update.sh",
|
||||||
|
"backend": "NODE_CONFIG_ENV='production' node server/app.js"
|
||||||
|
},
|
||||||
|
"repository": "ssh://git@gitlab.ketrenos.com/jketreno/ketr.settlers.git",
|
||||||
|
"author": "James Ketrenos <james_settlers@ketrenos.com>",
|
||||||
|
"license": "MIT",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"animakit-expander": "^2.1.4",
|
||||||
|
"bluebird": "^3.5.5",
|
||||||
|
"bootstrap": "^4.4.1",
|
||||||
|
"config": "^3.1.0",
|
||||||
|
"cookie-parser": "^1.4.4",
|
||||||
|
"core-js": "^3.2.1",
|
||||||
|
"googleapis": "^40.0.0",
|
||||||
|
"jira-connector": "^2.10.0",
|
||||||
|
"moment": "^2.24.0",
|
||||||
|
"morgan": "^1.9.1",
|
||||||
|
"node-gzip": "^1.1.2",
|
||||||
|
"nodemailer": "^6.3.0",
|
||||||
|
"react-app-polyfill": "^1.0.2",
|
||||||
|
"react-bootstrap": "^1.0.0-beta.16",
|
||||||
|
"react-date-range": "^1.0.0-beta",
|
||||||
|
"react-markdown": "^4.2.2",
|
||||||
|
"react-router-dom": "^5.0.1",
|
||||||
|
"react-scroll": "^1.7.14",
|
||||||
|
"react-syntax-highlighter": "^11.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/cli": "^7.1.0",
|
||||||
|
"@babel/core": "^7.1.0",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
||||||
|
"@babel/preset-env": "^7.1.0",
|
||||||
|
"@babel/preset-react": "^7.0.0",
|
||||||
|
"babel-loader": "^8.0.2",
|
||||||
|
"css-loader": "^1.0.0",
|
||||||
|
"file-loader": "^4.1.0",
|
||||||
|
"react": "^16.8",
|
||||||
|
"react-dom": "^16.8",
|
||||||
|
"style-loader": "^0.23.0",
|
||||||
|
"webpack": "^4.19.1",
|
||||||
|
"webpack-cli": "^3.1.1",
|
||||||
|
"webpack-dev-server": "^3.3.1",
|
||||||
|
"webpack-merge": "^4.2.1"
|
||||||
|
}
|
||||||
|
}
|
397
src/App.css
Executable file
@ -0,0 +1,397 @@
|
|||||||
|
body {
|
||||||
|
font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCILOOKUP {
|
||||||
|
margin: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
position: relative;
|
||||||
|
background-color: lightyellow;
|
||||||
|
border: 1px solid #252525;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCILOOKUP p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCIRESULTS {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCIDEVICE {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-family: 'Courier New'
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCIBASH::before {
|
||||||
|
content: '# ';
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCIBASH {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #040;
|
||||||
|
font-weight: bold;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-family: 'Courier New';
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PCIID {
|
||||||
|
margin-left: 0.25em;
|
||||||
|
padding: 0.1em;
|
||||||
|
width: 4em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MarkdownLoader {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gitlab-banner {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #252525;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 1.5em;
|
||||||
|
line-height: 0.9em;
|
||||||
|
opacity: 0.25;
|
||||||
|
transition: opacity 0.5s ease-out;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gitlab-banner:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gitlab-banner a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-variant: all-small-caps;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gitlab-banner:hover a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinner {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-left: -30px;
|
||||||
|
margin-top: -30px;
|
||||||
|
z-index: 100;
|
||||||
|
background-image: url(../assets/vtt-logo.png);
|
||||||
|
background-color: #0071C5;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Logo {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
background-image: url(../assets/vtt.svg);
|
||||||
|
background-color: #252525;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: 95% 95%;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinner.spin {
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-animation:spin 1s linear infinite;
|
||||||
|
-moz-animation:spin 1s linear infinite;
|
||||||
|
animation:spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
||||||
|
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
||||||
|
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
||||||
|
|
||||||
|
.Header {
|
||||||
|
background-color: #252525;
|
||||||
|
color: #ffffff;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 20;
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-direction: column;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Group {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: calc(1em + 52px);
|
||||||
|
background-color: #0071C5;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Group .Subtitle {
|
||||||
|
font-size: 0.7em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Group .Heading {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: calc(100% - 8em);
|
||||||
|
max-width: 90em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Pages {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: calc(100% - 8em);
|
||||||
|
max-width: 90em;
|
||||||
|
/* justify-content: space-between;*/
|
||||||
|
font-size: 1.2em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Pages .Link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Pages .Link.Highlight {
|
||||||
|
border-bottom-color: #0071C5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header .Pages .Link.Active,
|
||||||
|
.Header .Pages .Link:hover {
|
||||||
|
border-bottom-color: #003663;
|
||||||
|
/*border-bottom-color: #00A7FF;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
a.Link {
|
||||||
|
font-family: Oswald;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Footer {
|
||||||
|
position: fixed;
|
||||||
|
background-color: #252525;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 64px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-family: Droid Sans;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Footer .Copyright {
|
||||||
|
position: absolute;
|
||||||
|
line-height: 64px;
|
||||||
|
text-align: center;
|
||||||
|
left: 64px;
|
||||||
|
right: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Footer .Lizard {
|
||||||
|
position: absolute;
|
||||||
|
width: 100px;
|
||||||
|
height: 64px;
|
||||||
|
right: 1em;
|
||||||
|
background-image: url(../assets/agama.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 98% center;
|
||||||
|
background-size: auto 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Body {
|
||||||
|
position: absolute;
|
||||||
|
/* .Header's two 60px chunks */
|
||||||
|
/*
|
||||||
|
margin-top: 120px;
|
||||||
|
*/
|
||||||
|
/* .Footer's 64 px */
|
||||||
|
/*
|
||||||
|
margin-bottom: 64px;
|
||||||
|
*/
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: linear-gradient(#090B1A, #131524);
|
||||||
|
color: #ffffff;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Body > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
position: fixed;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
padding: 5em;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popped-up {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Board {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Board.NoBackground {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Index {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 12em;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Index > div {
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Index div.story {
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Index div.topic {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Index .active {
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Index div.inactive:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Main {
|
||||||
|
display: inline-flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-image: url(../assets/vtt-logo.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Main.NoBackground {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Content {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 1em auto;
|
||||||
|
width: calc(100% - 8em);
|
||||||
|
max-width: 90em;
|
||||||
|
color: black;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow-y: scroll;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
padding: 1.5em 1.5em 0 1.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: top 1s ease-in-out;
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Content #MinBox {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: calc(100% - 2.5em);
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OnScreen {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown pre {
|
||||||
|
max-width: 100ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown h1 {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: 1.0em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown h2 {
|
||||||
|
margin-top: 0.8em;
|
||||||
|
font-size: 1.0em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown h1:first-child,
|
||||||
|
.Markdown h2:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown th {
|
||||||
|
font-variant-caps: all-small-caps;
|
||||||
|
font-size: 1.1em;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown td {
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
}
|
111
src/App.js
Executable file
@ -0,0 +1,111 @@
|
|||||||
|
/* Polyfills for IE */
|
||||||
|
import 'react-app-polyfill/ie11';
|
||||||
|
import 'core-js/features/array/find';
|
||||||
|
import 'core-js/features/array/includes';
|
||||||
|
import 'core-js/features/number/is-nan';
|
||||||
|
|
||||||
|
/* App starts here */
|
||||||
|
import React from "react";
|
||||||
|
import { withRouter, NavLink, Route, Switch } from "react-router-dom";
|
||||||
|
import Modal from "react-bootstrap/Modal";
|
||||||
|
import Button from "react-bootstrap/Button";
|
||||||
|
|
||||||
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
|
|
||||||
|
import Board from "./Board.js";
|
||||||
|
import './modest.css';
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="Header">
|
||||||
|
<div className="Group">
|
||||||
|
<Logo/>
|
||||||
|
<div className="Heading">
|
||||||
|
<div className="Subtitle">Visual Technology Team</div>
|
||||||
|
<div className="Title">Software Solutions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="Pages">
|
||||||
|
<NavLink className="Link" activeClassName="Highlight" key="drivers" to="/drivers">Drivers</NavLink>
|
||||||
|
<NavLink className="Link" activeClassName="Highlight" key="solutions" to="/solutions">Solutions</NavLink>
|
||||||
|
<NavLink className="Link" activeClassName="Highlight" key="technologies" to="/technologies">Technologies</NavLink>
|
||||||
|
<NavLink className="Link" activeClassName="Highlight" key="releases" to="/releases">Releases</NavLink>
|
||||||
|
<NavLink className="Link" activeClassName="Highlight" key="internal" to="/internal">Internal Info</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Logo extends React.Component {
|
||||||
|
render() {
|
||||||
|
return <NavLink to="/"><div className="Logo"></div></NavLink>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.toggleDebug = this.toggleDebug.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleDebug() {
|
||||||
|
if (window.location.search.match(/debug/)) {
|
||||||
|
window.location.search = "";
|
||||||
|
} else {
|
||||||
|
window.location.search = "debug";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="Footer">
|
||||||
|
<div className="Lizard" onClick={this.toggleDebug}></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function noChange() {};
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.props.history.listen((location, action) => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const location = this.props.history.location.pathname;
|
||||||
|
console.log(`App.mounted at ${location}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
hidePopup() {
|
||||||
|
this.setState({
|
||||||
|
modalShown: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="App" ref={ ref => (this.app = ref) }>
|
||||||
|
{ /* <Header/> */ }
|
||||||
|
<div className="Body">
|
||||||
|
<Board/>
|
||||||
|
</div>
|
||||||
|
{ /* <Footer/> */ }
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(App);
|
405
src/Board.js
Normal file
@ -0,0 +1,405 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
const hexagonRatio = 1.1547005,
|
||||||
|
tileHeight = 0.165,
|
||||||
|
tileWidth = tileHeight * hexagonRatio;
|
||||||
|
|
||||||
|
const Tiles = (board) => {
|
||||||
|
const tiles = [ {
|
||||||
|
type: "wood", y: 0. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wood", y: 1. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wood", y: 2. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wood", y: 3. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wheat", y: 0. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wheat", y: 1. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wheat", y: 2. / 4.
|
||||||
|
}, {
|
||||||
|
type: "wheat", y: 3. / 4.
|
||||||
|
}, {
|
||||||
|
type: "stone", y: 0. / 4.
|
||||||
|
}, {
|
||||||
|
type: "stone", y: 1. / 4.
|
||||||
|
}, {
|
||||||
|
type: "stone", y: 2. / 4.
|
||||||
|
}, {
|
||||||
|
type: "sheep", y: 0. / 4.
|
||||||
|
}, {
|
||||||
|
type: "sheep", y: 1. / 4.
|
||||||
|
}, {
|
||||||
|
type: "sheep", y: 2. / 4.
|
||||||
|
}, {
|
||||||
|
type: "sheep", y: 3. / 4.
|
||||||
|
}, {
|
||||||
|
type: "brick", y: 0. / 4.
|
||||||
|
}, {
|
||||||
|
type: "brick", y: 1. / 4.
|
||||||
|
}, {
|
||||||
|
type: "brick", y: 2. / 4.
|
||||||
|
}, {
|
||||||
|
type: "robber", y: 0
|
||||||
|
} ];
|
||||||
|
|
||||||
|
[ "robber", "brick", "wood", "sheep", "stone", "wheat" ].forEach((type) => {
|
||||||
|
const image = new Image(),
|
||||||
|
file = type + ".png";
|
||||||
|
tiles.forEach((tile) => {
|
||||||
|
if (tile.type == type) {
|
||||||
|
tile.image = image;
|
||||||
|
tile.x = 0;
|
||||||
|
tile.pos = { x: 0, y: 0 };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
image.addEventListener("load", (event) => {
|
||||||
|
console.log(`Done loading ${file}`);
|
||||||
|
window.requestAnimationFrame(board.drawFrame);
|
||||||
|
});
|
||||||
|
image.addEventListener("error", (event) => {
|
||||||
|
alert(`Error loading ${file}`);
|
||||||
|
});
|
||||||
|
image.src = `assets/original/${file}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
return tiles;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Pips = (board) => {
|
||||||
|
const image = new Image(),
|
||||||
|
file = 'pip-numbers.png';
|
||||||
|
|
||||||
|
let pips = [
|
||||||
|
{ roll: 0, pips: 0, y: 3. / 6., x: 0. / 6. },
|
||||||
|
{ roll: 5, pips: 4, y: 0. / 6., x: 0. / 6. },
|
||||||
|
{ roll: 2, pips: 1, y: 0. / 6., x: 1. / 6. },
|
||||||
|
{ roll: 6, pips: 5, y: 0. / 6., x: 2. / 6. },
|
||||||
|
{ roll: 3, pips: 2, y: 0. / 6., x: 3. / 6. },
|
||||||
|
{ roll: 8, pips: 5, y: 0. / 6., x: 4. / 6. },
|
||||||
|
{ roll: 10, pips: 3, y: 0. / 6., x: 5. / 6. },
|
||||||
|
{ roll: 9, pips: 4, y: 1. / 6., x: 0. / 6. },
|
||||||
|
{ roll: 12, pips: 1, y: 1. / 6., x: 1. / 6. },
|
||||||
|
{ roll: 11, pips: 2, y: 1. / 6., x: 2. / 6. },
|
||||||
|
{ roll: 4, pips: 3, y: 1. / 6., x: 3. / 6. },
|
||||||
|
{ roll: 8, pips: 5, y: 1. / 6., x: 4. / 6. },
|
||||||
|
{ roll: 10, pips: 3, y: 1. / 6., x: 5. / 6. },
|
||||||
|
{ roll: 9, pips: 4, y: 2. / 6., x: 0. / 6. },
|
||||||
|
{ roll: 4, pips: 3, y: 2. / 6., x: 1. / 6. },
|
||||||
|
{ roll: 5, pips: 4, y: 2. / 6., x: 2. / 6. },
|
||||||
|
{ roll: 6, pips: 6, y: 2. / 6., x: 3. / 6. },
|
||||||
|
{ roll: 3, pips: 2, y: 2. / 6., x: 4. / 6. },
|
||||||
|
{ roll: 11, pips: 2, y: 2. / 6., x: 5. / 6. }
|
||||||
|
];
|
||||||
|
|
||||||
|
image.addEventListener("load", (event) => {
|
||||||
|
console.log(`Done loading ${file}`);
|
||||||
|
window.requestAnimationFrame(board.drawFrame);
|
||||||
|
});
|
||||||
|
image.addEventListener("error", (event) => {
|
||||||
|
alert(`Error loading ${file}`);
|
||||||
|
});
|
||||||
|
image.src = `assets/original/${file}`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
image: image,
|
||||||
|
pips: pips
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const Border = (board, border) => {
|
||||||
|
const image = new Image(), file = border.file
|
||||||
|
border.image = image;
|
||||||
|
image.addEventListener("load", (event) => {
|
||||||
|
console.log(`Done loading ${file}`);
|
||||||
|
window.requestAnimationFrame(board.drawFrame);
|
||||||
|
});
|
||||||
|
image.addEventListener("error", (event) => {
|
||||||
|
alert(`Error loading ${file}`);
|
||||||
|
});
|
||||||
|
image.src = `assets/original/${file}`;
|
||||||
|
return border;
|
||||||
|
};
|
||||||
|
|
||||||
|
function shuffle(array) {
|
||||||
|
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||||
|
|
||||||
|
// While there remain elements to shuffle...
|
||||||
|
while (0 !== currentIndex) {
|
||||||
|
|
||||||
|
// Pick a remaining element...
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex -= 1;
|
||||||
|
|
||||||
|
// And swap it with the current element.
|
||||||
|
temporaryValue = array[currentIndex];
|
||||||
|
array[currentIndex] = array[randomIndex];
|
||||||
|
array[randomIndex] = temporaryValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
class Board extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.componentDidMount = this.componentDidMount.bind(this);
|
||||||
|
this.updateDimensions = this.updateDimensions.bind(this);
|
||||||
|
this.drawFrame = this.drawFrame.bind(this);
|
||||||
|
this.drawBorders = this.drawBorders.bind(this);
|
||||||
|
this.drawPips = this.drawPips.bind(this);
|
||||||
|
this.mouseMove = this.mouseMove.bind(this);
|
||||||
|
this.randomize = this.randomize.bind(this);
|
||||||
|
|
||||||
|
this.mouse = { x: 0, y: 0 };
|
||||||
|
this.radius = 0.317;
|
||||||
|
|
||||||
|
this.pips = Pips(this);
|
||||||
|
this.tiles = Tiles(this);
|
||||||
|
|
||||||
|
this.borders = [ {
|
||||||
|
file: 'borders-1.6.png', left: "sheep", right: "bank"
|
||||||
|
}, {
|
||||||
|
file: 'borders-2.1.png', center: "sheep"
|
||||||
|
}, {
|
||||||
|
file: 'borders-3.2.png', left: "wheat", right: "bank"
|
||||||
|
}, {
|
||||||
|
file: 'borders-4.3.png', center: "wood"
|
||||||
|
}, {
|
||||||
|
file: 'borders-5.4.png', left: "sheep", right: "bank"
|
||||||
|
}, {
|
||||||
|
file: 'borders-6.5.png', center: "bank"
|
||||||
|
} ].map((file) => {
|
||||||
|
return Border(this, file);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.randomize();
|
||||||
|
}
|
||||||
|
|
||||||
|
randomize() {
|
||||||
|
this.borders = shuffle(this.borders);
|
||||||
|
this.tiles = shuffle(this.tiles);
|
||||||
|
window.requestAnimationFrame(this.drawFrame);
|
||||||
|
}
|
||||||
|
|
||||||
|
mouseMove(event) {
|
||||||
|
const rect = this.canvas.parentElement.getBoundingClientRect();
|
||||||
|
/* Scale mouse.x and mouse.y relative to board */
|
||||||
|
this.mouse.x = (event.clientX - rect.left) /
|
||||||
|
(this.canvas.height / hexagonRatio) - 0.5 - tileHeight * 0.5,
|
||||||
|
this.mouse.y = (event.clientY - rect.top) /
|
||||||
|
(this.canvas.height / hexagonRatio) - 0.5 - tileHeight * 0.5;
|
||||||
|
|
||||||
|
let closest = null;
|
||||||
|
|
||||||
|
this.tiles.forEach((tile) => {
|
||||||
|
const dX = tile.pos.x - this.mouse.x,
|
||||||
|
dY = tile.pos.y - this.mouse.y;
|
||||||
|
const distance = Math.sqrt(dX * dX + dY * dY);
|
||||||
|
if (distance > tileHeight * 0.75) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!closest || closest.distance > distance) {
|
||||||
|
closest = {
|
||||||
|
tile: tile,
|
||||||
|
distance: distance
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.closest != closest) {
|
||||||
|
this.closest = closest;
|
||||||
|
}
|
||||||
|
window.requestAnimationFrame(this.drawFrame);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateDimensions() {
|
||||||
|
if (this.updateSizeTimer) {
|
||||||
|
clearTimeout(this.updateSizeTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateSizeTimer = setTimeout(() => {
|
||||||
|
this.canvas.width = this.canvas.offsetWidth;
|
||||||
|
this.canvas.height = this.canvas.offsetHeight;
|
||||||
|
this.width = this.canvas.parentElement.clientWidth;
|
||||||
|
this.height = this.canvas.parentElement.clientHeight;
|
||||||
|
this.updateSizeTimer = 0;
|
||||||
|
this.drawFrame();
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
drawFrame() {
|
||||||
|
if (!this.canvas) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ctx = this.canvas.getContext("2d");
|
||||||
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = 'white';
|
||||||
|
ctx.filleStyle = 'rgba(0, 0, 0, 0)';
|
||||||
|
|
||||||
|
ctx.scale(this.canvas.height / hexagonRatio, this.canvas.height / hexagonRatio);
|
||||||
|
ctx.translate(0.5 * hexagonRatio, 0.5 * hexagonRatio);
|
||||||
|
ctx.lineWidth = 1. / this.canvas.height;
|
||||||
|
|
||||||
|
/* Board dimensions:
|
||||||
|
* ________
|
||||||
|
* /___1__| \
|
||||||
|
* / / \6\
|
||||||
|
* /2/ \ \
|
||||||
|
* / / \/\
|
||||||
|
* \/\ / /
|
||||||
|
* \ \ /5/
|
||||||
|
* \3\______/_/
|
||||||
|
* \_|__4___/
|
||||||
|
* 0 0.3 0.6 1
|
||||||
|
*/
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
this.drawBorders(ctx);
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
this.drawPips(ctx);
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
if (this.closest) {
|
||||||
|
ctx.strokeStyle = "red";
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.closest.tile.pos.x, this.closest.tile.pos.y,
|
||||||
|
tileHeight * 0.5, 0, Math.PI * 2.);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.strokeStyle = "yellow";
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.mouse.x, this.mouse.y,
|
||||||
|
tileHeight * 0.5, 0, Math.PI * 2.);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
drawPips(ctx) {
|
||||||
|
const image = this.pips.image, pipSize = 0.06;
|
||||||
|
|
||||||
|
function drawTile(tile, angle, radius) {
|
||||||
|
tile.pos.x = Math.sin(angle) * radius;
|
||||||
|
tile.pos.y = Math.cos(angle) * radius;
|
||||||
|
const image = tile.image;
|
||||||
|
ctx.save();
|
||||||
|
ctx.rotate(angle);
|
||||||
|
ctx.translate(0., radius);
|
||||||
|
ctx.rotate(-angle + Math.PI * 1. / 6.);
|
||||||
|
ctx.drawImage(image,
|
||||||
|
tile.x * image.width, tile.y * image.height,
|
||||||
|
image.width, image.height / 4.,
|
||||||
|
-tileWidth * 0.5, -tileHeight * 0.5,
|
||||||
|
tileWidth, tileHeight);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPip(pip, angle, radius) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.rotate(angle);
|
||||||
|
ctx.translate(0., radius);
|
||||||
|
ctx.rotate(-angle);
|
||||||
|
ctx.drawImage(image,
|
||||||
|
pip.x * image.width, pip.y * image.height,
|
||||||
|
image.width / 6., image.height / 6.,
|
||||||
|
-pipSize * 0.5, -pipSize * 0.5,
|
||||||
|
pipSize, pipSize);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
let angle,
|
||||||
|
radius = this.radius,
|
||||||
|
index = 1, pip;
|
||||||
|
|
||||||
|
/* Outer row */
|
||||||
|
angle = 0;
|
||||||
|
for (let i = 0; i < 12; i++) {
|
||||||
|
angle -= Math.PI * 2. / 12.;
|
||||||
|
if (this.tiles[i].type == "robber") {
|
||||||
|
pip = this.pips.pips[0]
|
||||||
|
} else {
|
||||||
|
pip = this.pips.pips[index++];
|
||||||
|
}
|
||||||
|
drawTile(this.tiles[i], angle, radius - (i % 2) * 0.04);
|
||||||
|
drawPip(pip, angle, radius - (i % 2) * 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Middle row */
|
||||||
|
angle = Math.PI * 2. / 12.;
|
||||||
|
radius = this.radius * 0.5;
|
||||||
|
for (let i = 12; i < 18; i++) {
|
||||||
|
angle -= Math.PI * 2. / 6.;
|
||||||
|
if (this.tiles[i].type == "robber") {
|
||||||
|
pip = this.pips.pips[0]
|
||||||
|
} else {
|
||||||
|
pip = this.pips.pips[index++];
|
||||||
|
}
|
||||||
|
drawTile(this.tiles[i], angle, radius);
|
||||||
|
drawPip(pip, angle, radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center */
|
||||||
|
let i = 18;
|
||||||
|
if (this.tiles[i].type == "robber") {
|
||||||
|
pip = this.pips.pips[0]
|
||||||
|
} else {
|
||||||
|
pip = this.pips.pips[index++];
|
||||||
|
}
|
||||||
|
drawTile(this.tiles[i], 0, 0);
|
||||||
|
drawPip(pip, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
drawBorders(ctx) {
|
||||||
|
ctx.rotate(Math.PI);
|
||||||
|
|
||||||
|
const offset = 0.18;
|
||||||
|
this.borders.forEach((border, index) => {
|
||||||
|
ctx.translate(0, this.radius);
|
||||||
|
|
||||||
|
const image = border.image;
|
||||||
|
|
||||||
|
ctx.drawImage(image,
|
||||||
|
-offset, 0,
|
||||||
|
0.5, 0.5 * image.height / image.width);
|
||||||
|
|
||||||
|
ctx.translate(0, -this.radius);
|
||||||
|
ctx.rotate(Math.PI * 2. / 6.);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.start = new Date();
|
||||||
|
|
||||||
|
window.addEventListener("mousedown", this.randomize);
|
||||||
|
window.addEventListener("mousemove", this.mouseMove);
|
||||||
|
window.addEventListener("resize", this.updateDimensions);
|
||||||
|
|
||||||
|
this.updateDimensions();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.updateSizeTimer) {
|
||||||
|
clearTimeout(this.updateSizeTimer);
|
||||||
|
this.updateSizeTimer = 0;
|
||||||
|
}
|
||||||
|
window.removeEventListener("mousedown", this.randomize);
|
||||||
|
window.removeEventListener("mousemove", this.mouseMove);
|
||||||
|
window.removeEventListener("resize", this.updateDimensions);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<canvas className="Board" ref={el => this.canvas = el}></canvas>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default Board;
|
31
src/CodeBlock.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import React, { PureComponent } from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||||
|
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||||
|
|
||||||
|
class CodeBlock extends PureComponent {
|
||||||
|
/* NOTE: the line-numbers plugin isn't working.
|
||||||
|
* See https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/
|
||||||
|
* for some clues on how to fix it. */
|
||||||
|
static propTypes = {
|
||||||
|
value: PropTypes.string.isRequired,
|
||||||
|
language: PropTypes.string,
|
||||||
|
plugins: PropTypes.arrayOf(PropTypes.string)
|
||||||
|
};
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
language: null,
|
||||||
|
plugins: [ "line-numbers" ]
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { language, plugins, value } = this.props;
|
||||||
|
return (
|
||||||
|
<SyntaxHighlighter className="line-numbers" language={language} style={okaidia} plugins={plugins}>
|
||||||
|
{value}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CodeBlock;
|
173
src/Contents.js
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import WaveBalls from "./WaveBalls.js";
|
||||||
|
import AnimakitExpander from "animakit-expander";
|
||||||
|
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
|
const sections = [
|
||||||
|
"Platforms",
|
||||||
|
"Drivers",
|
||||||
|
"Compute",
|
||||||
|
"Media",
|
||||||
|
"3D",
|
||||||
|
"Solutions"
|
||||||
|
];
|
||||||
|
|
||||||
|
class Header extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="Header">
|
||||||
|
<Logo/>
|
||||||
|
<div className="Pages">
|
||||||
|
{
|
||||||
|
sections.map((section) =>
|
||||||
|
<div key={ section }>{ section }</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Logo extends React.Component {
|
||||||
|
render() {
|
||||||
|
return <div className="Logo"></div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Footer extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="Footer">
|
||||||
|
Copyright 2019 Intel Corporation
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Body extends React.Component {
|
||||||
|
static defaultProps = {
|
||||||
|
topics: [ {
|
||||||
|
title: "Agama",
|
||||||
|
stories: [ {
|
||||||
|
title: "About Agama",
|
||||||
|
content: "Agama is the quarterly distribution of Intel graphics projects for Linux, packaged, validated, and made available from a single repository."
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
title: "Media",
|
||||||
|
stories: [ {
|
||||||
|
title: "About Media",
|
||||||
|
content: "Media capabilities for Intel graphics cards on Linux are provided by Intel's Media packages."
|
||||||
|
} ]
|
||||||
|
}, {
|
||||||
|
title: "Compute",
|
||||||
|
stories: [ {
|
||||||
|
title: "About Compute",
|
||||||
|
content: "Compute capabilities for Intel graphics cards on Linux are provided by Intel's Open CL project: Neo."
|
||||||
|
} ]
|
||||||
|
}, {
|
||||||
|
title: "3D",
|
||||||
|
stories: [ {
|
||||||
|
title: "About 3D",
|
||||||
|
content: "3D capabilities for Intel graphics cards on Linux are provided by Mesa."
|
||||||
|
} ]
|
||||||
|
}, {
|
||||||
|
title: "Solutions",
|
||||||
|
stories: [ {
|
||||||
|
title: "About Solutions",
|
||||||
|
content: "Turn-key containers ready to rock."
|
||||||
|
} ]
|
||||||
|
} ]
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.props.topics.forEach((topic) => {
|
||||||
|
for (var i = 0; i < 10; i++) {
|
||||||
|
topic.stories.push({
|
||||||
|
title: "Title #" + (i + 1),
|
||||||
|
content: "Content for #" + (i + 1)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.topicClicked = this.topicClicked.bind(this);
|
||||||
|
this.state = {
|
||||||
|
topic: 0,
|
||||||
|
story: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
topicClicked(index) {
|
||||||
|
this.setState({
|
||||||
|
topic: index,
|
||||||
|
story: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
storyClicked(index) {
|
||||||
|
this.setState({ story: index });
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
console.log("App.mounted");
|
||||||
|
sections.forEach((section) => {
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const topic = this.props.topics[this.state.topic],
|
||||||
|
story = topic.stories[this.state.story];
|
||||||
|
|
||||||
|
console.log(this.state.topic);
|
||||||
|
return (
|
||||||
|
<div className="Body">
|
||||||
|
<div className="Page">
|
||||||
|
<div className="Index" target="Content">
|
||||||
|
{
|
||||||
|
this.props.topics.map((topic, topicIndex) =>
|
||||||
|
<div key={ "topic-" + topicIndex }>
|
||||||
|
<div
|
||||||
|
className={ "topic " + ((this.state.topic == topicIndex) ? "active" : "inactive") }
|
||||||
|
onClick={() => this.topicClicked(topicIndex)}>{topic.title}</div>
|
||||||
|
<AnimakitExpander expanded={ (this.state.topic == topicIndex) ? true : false }>
|
||||||
|
{
|
||||||
|
topic.stories.map((story, storyIndex) =>
|
||||||
|
<div
|
||||||
|
className={ "story " + ((this.state.topic == topicIndex && this.state.story == storyIndex) ? "active" : "inactive") }
|
||||||
|
onClick={() => this.storyClicked(storyIndex)}
|
||||||
|
key={ "story-" + topicIndex + "-" + storyIndex }>{story.title}</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</AnimakitExpander>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className="Content">
|
||||||
|
<b>{ story.title }</b><br></br>
|
||||||
|
<div>{story.content}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<WaveBalls/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<Header/>
|
||||||
|
<Body/>
|
||||||
|
<Footer/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
190
src/WaveBalls.js
Executable file
@ -0,0 +1,190 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
class WaveBalls extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.componentDidMount = this.componentDidMount.bind(this);
|
||||||
|
this.updateDimensions = this.updateDimensions.bind(this);
|
||||||
|
this.updatePositions = this.updatePositions.bind(this);
|
||||||
|
this.updateFrame = this.updateFrame.bind(this);
|
||||||
|
this.drawFrame = this.drawFrame.bind(this);
|
||||||
|
this.mouseMove = this.mouseMove.bind(this);
|
||||||
|
this.mouse = { x: 0, y: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
mouseMove(event) {
|
||||||
|
const rect = this.canvas.parentElement.getBoundingClientRect();
|
||||||
|
this.mouse.x = (event.clientX - rect.left) / this.width;
|
||||||
|
this.mouse.y = (event.clientY - rect.top) / this.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateDimensions() {
|
||||||
|
if (this.updateSizeTimer) {
|
||||||
|
clearTimeout(this.updateSizeTimer);
|
||||||
|
} else {
|
||||||
|
const ctx = this.canvas.getContext("2d");
|
||||||
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateSizeTimer = setTimeout(() => {
|
||||||
|
this.canvas.width = this.canvas.offsetWidth;
|
||||||
|
this.canvas.height = this.canvas.offsetHeight;
|
||||||
|
this.width = this.canvas.parentElement.clientWidth;
|
||||||
|
this.height = this.canvas.parentElement.clientHeight;
|
||||||
|
this.updateSizeTimer = 0;
|
||||||
|
this.updateFrame();
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Max framerate of 30FPS, regardless of display frame rate to prevent UX starvation.
|
||||||
|
*
|
||||||
|
* If a frame render has not been requested, request the frame to be drawn at the next
|
||||||
|
* opportunity */
|
||||||
|
updateFrame() {
|
||||||
|
if (this.updateFrameTimeout || !this.canvas) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isVisible = window.getComputedStyle(this.canvas).opacity != 0;
|
||||||
|
/* If the WaveBalls are not faded completely out, update ball
|
||||||
|
* positions and scheduel a render, which will then set a new
|
||||||
|
* timeout for updateFrame().
|
||||||
|
*
|
||||||
|
* Otherwise schedule another a check in 250ms to see if the
|
||||||
|
* window is now visible */
|
||||||
|
if (isVisible) {
|
||||||
|
this.updatePositions();
|
||||||
|
window.requestAnimationFrame(this.drawFrame);
|
||||||
|
} else {
|
||||||
|
this.updateFrameTimeout = setTimeout(() => {
|
||||||
|
this.updateFrameTimeout = 0;
|
||||||
|
this.updateFrame();
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
drawFrame() {
|
||||||
|
if (!this.canvas) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ctx = this.canvas.getContext("2d");
|
||||||
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
|
||||||
|
/* If the window is being resized, don't render balls as
|
||||||
|
* they will have a distorted aspect ratio until the canvas
|
||||||
|
* width re-snaps to the new dimensions */
|
||||||
|
if (!this.updateSizeTimer) {
|
||||||
|
this.balls.forEach((ball) => {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = ball.color;
|
||||||
|
ctx.arc(ball.pos.x, ball.pos.y, ball.size, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateFrameTimeout = setTimeout(() => {
|
||||||
|
this.updateFrameTimeout = 0;
|
||||||
|
this.updateFrame();
|
||||||
|
}, 1000 / 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePositions() {
|
||||||
|
if (!this.canvas) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const interval = 20000,
|
||||||
|
alpha = ((Date.now() - this.start.getTime()) % interval) / interval,
|
||||||
|
sun = { r: 0xFC, g: 0xD4, b: 0x40 },
|
||||||
|
normal = { r: 197, g: 197, b: 197 },
|
||||||
|
gravity = 0.5;
|
||||||
|
|
||||||
|
this.balls.forEach((ball) => {
|
||||||
|
ball.alpha.x = ball.start - alpha;
|
||||||
|
if (ball.alpha.x < 0.) {
|
||||||
|
ball.alpha.x += 1.;
|
||||||
|
}
|
||||||
|
|
||||||
|
ball.opacity.current = 0.5 * Math.cos(8. * (alpha - ball.opacity.start) * Math.PI);
|
||||||
|
ball.pos.x = ball.alpha.x;
|
||||||
|
ball.pos.y =
|
||||||
|
(0.187 * Math.cos(2. * Math.PI * (alpha - ball.alpha.x)) +
|
||||||
|
(0.5 + ball.offset + ball.alpha.y * Math.sin(4. * Math.PI * (alpha - ball.alpha.x)) * 0.5));
|
||||||
|
|
||||||
|
/* Gravity influence needs to ramp to 0 near alpha [0, 1] borders */
|
||||||
|
const localGravity = gravity * (1. - Math.pow(Math.abs(ball.pos.x - 0.5) / 0.5, 2)),
|
||||||
|
alphaDistance = 1. - Math.min(Math.sqrt(Math.pow(ball.pos.x - this.mouse.x, 2) + Math.pow(ball.pos.y - this.mouse.y, 2)), localGravity) / localGravity;
|
||||||
|
if (alphaDistance > 0.) {
|
||||||
|
ball.pos.x -= alphaDistance * alphaDistance * (ball.pos.x - this.mouse.x);
|
||||||
|
ball.pos.y -= alphaDistance * alphaDistance * (ball.pos.y - this.mouse.y);
|
||||||
|
ball.opacity.current += alphaDistance * (1 - ball.opacity.current);
|
||||||
|
const rgba = [
|
||||||
|
normal.r + (sun.r - normal.r) * alphaDistance,
|
||||||
|
normal.g + (sun.g - normal.g) * alphaDistance,
|
||||||
|
normal.b + (sun.b - normal.b) * alphaDistance,
|
||||||
|
ball.opacity.current
|
||||||
|
];
|
||||||
|
ball.color = "rgba(" + rgba.join(",") + ")";
|
||||||
|
} else {
|
||||||
|
ball.color = "rgba(197,197,197," + ball.opacity.current + ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
ball.pos.x = ball.pos.x * (this.canvas.width + 64) - 32;
|
||||||
|
ball.pos.y = ball.pos.y * (this.canvas.height + 64) - 32;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.balls = [];
|
||||||
|
this.start = new Date();
|
||||||
|
|
||||||
|
for (var i = 0; i < 100; i++) {
|
||||||
|
let ball = {
|
||||||
|
pos: {
|
||||||
|
x: 0.,
|
||||||
|
y: 0.
|
||||||
|
},
|
||||||
|
alpha: {
|
||||||
|
x: 0.,
|
||||||
|
y: (Math.random() * 0.7) - 0.35
|
||||||
|
},
|
||||||
|
start: Math.random(),
|
||||||
|
offset: Math.pow(Math.random() - 0.5, 3),
|
||||||
|
brightness: Math.floor(255 * Math.random()),
|
||||||
|
opacity:{
|
||||||
|
start: Math.random(),
|
||||||
|
current: 0
|
||||||
|
},
|
||||||
|
size: 1 + Math.random() * 6
|
||||||
|
};
|
||||||
|
|
||||||
|
this.balls.push(ball);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateDimensions();
|
||||||
|
this.updatePositions();
|
||||||
|
window.addEventListener("mousemove", this.mouseMove);
|
||||||
|
window.addEventListener("resize", this.updateDimensions);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.updatePositionsTimer) {
|
||||||
|
clearTimeout(this.updatePositionsTimer);
|
||||||
|
this.updatePositionsTimer = 0;
|
||||||
|
}
|
||||||
|
if (this.updateSizeTimer) {
|
||||||
|
clearTimeout(this.updateSizeTimer);
|
||||||
|
this.updateSizeTimer = 0;
|
||||||
|
}
|
||||||
|
window.removeEventListener("mousemove", this.mouseMove);
|
||||||
|
window.removeEventListener("resize", this.updateDimensions);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<canvas className="WaveBalls" ref={el => this.canvas = el}></canvas>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default WaveBalls;
|
42
src/drivers.css
Executable file
@ -0,0 +1,42 @@
|
|||||||
|
.tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-bottom-left-radius: 0.25em;
|
||||||
|
border-bottom-right-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p:last-child {
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown table {
|
||||||
|
min-width: 75%;
|
||||||
|
margin: 1em 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown table thead {
|
||||||
|
background-color: #555;
|
||||||
|
color: white;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown h1,
|
||||||
|
.tab-content .Markdown h2,
|
||||||
|
.tab-content .Markdown h3 {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown h3 {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav.nav-tabs {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
186
src/drivers.js
Executable file
@ -0,0 +1,186 @@
|
|||||||
|
/* App starts here */
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import ReactMarkdown from "react-markdown/with-html";
|
||||||
|
import CodeBlock from "./CodeBlock";
|
||||||
|
import MarkdownLoader from "./markdown-loader";
|
||||||
|
import Tabs from "react-bootstrap/Tabs";
|
||||||
|
import Tab from "react-bootstrap/Tab";
|
||||||
|
import Col from "react-bootstrap/Col";
|
||||||
|
import Row from "react-bootstrap/Row";
|
||||||
|
import { lookupIntelGPU } from "./intel-gpu-info";
|
||||||
|
|
||||||
|
import "./drivers.css";
|
||||||
|
|
||||||
|
import { intelGPUs } from './intel-gpu-info.js';
|
||||||
|
|
||||||
|
|
||||||
|
class HardwareTable extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
/* const GPUs = intelGPUs.filter((item) => {
|
||||||
|
return item.
|
||||||
|
})*/
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row>
|
||||||
|
<ReactMarkdown className="Markdown" source="
|
||||||
|
If you aren't sure which graphics product you have, you can use the [Identify Hardware](#identify-hardware) tool.
|
||||||
|
"/>
|
||||||
|
</Row>
|
||||||
|
{ (this.props.device) && <Row><div> Filtering by { this.props.device } </div></Row> }
|
||||||
|
<Row>
|
||||||
|
<Col sm={3}>
|
||||||
|
Graphics
|
||||||
|
</Col>
|
||||||
|
<Col sm={6}>
|
||||||
|
test two
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class OSPicker extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
console.log("OSPicker: " + props.device);
|
||||||
|
this.clearFilter = this.clearFilter.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearFilter() {
|
||||||
|
if (window.clearFilter) {
|
||||||
|
window.clearFilter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const id = parseInt("0x" + (this.props.device || "0")),
|
||||||
|
device = lookupIntelGPU(id);
|
||||||
|
let suffix;
|
||||||
|
if (device) {
|
||||||
|
switch (device.gen) {
|
||||||
|
case 1:
|
||||||
|
suffix = "st";
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
suffix = "nd";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
suffix = "th";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tabs id="os-support-table">
|
||||||
|
<Tab eventKey="linux" title="Linux">
|
||||||
|
<MarkdownLoader src={ "drivers/overview.md" }/>
|
||||||
|
<Tabs defaultActiveKey="ubuntu" id="os-distro-table">
|
||||||
|
{/*<Tab eventKey="centos" title="CentOS">
|
||||||
|
<Tabs defaultActiveKey="centos-8.0" id="os-distro-table">
|
||||||
|
<Tab eventKey="centos-8.0" title="8.0">
|
||||||
|
<MarkdownLoader src={ "drivers/centos-8.0.md" }/>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="centos-7.x" title="7.x">
|
||||||
|
{ (device) &&
|
||||||
|
<>
|
||||||
|
<p><b>Hardware selected:</b> PCI device ID 8086:{ device.id.toString(16).replace(/0x/, "") } is
|
||||||
|
a { device.gen }<sup>{ suffix }</sup> generation { device.name }. <button onClick={clearFilter}>clear</button>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
} {
|
||||||
|
(device && device.gen > 8) &&
|
||||||
|
<ReactMarkdown renderers={{ code: CodeBlock }} className="Markdown" source="
|
||||||
|
|
||||||
|
Supported by CentOS 7.7.
|
||||||
|
|
||||||
|
CentOS should recognize this hardware and install the necessary drivers automatically.
|
||||||
|
"/>
|
||||||
|
} {
|
||||||
|
(device && device.gen <= 8) &&
|
||||||
|
<ReactMarkdown renderers={{ code: CodeBlock }} className="Markdown" source="
|
||||||
|
|
||||||
|
Not supported by CentOS 7.7. To use this hardware with CentOS 7.7 you will need a custom kernel.
|
||||||
|
|
||||||
|
**Recommended**: Use CentOS 8 or newer.
|
||||||
|
"/>
|
||||||
|
} { (!device) && <MarkdownLoader src={ "drivers/centos-7.md" }/> }
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Tab>*/}
|
||||||
|
<Tab eventKey="redhat" title="Red Hat">
|
||||||
|
<Tabs defaultActiveKey="redhat-8.0" id="os-distro-table">{/*
|
||||||
|
<Tab eventKey="redhat-8.1" title="8.1">
|
||||||
|
<MarkdownLoader src={ "drivers/redhat-8.1.md" }/>
|
||||||
|
</Tab>
|
||||||
|
*/}<Tab eventKey="redhat-8.0" title="8.0">
|
||||||
|
<MarkdownLoader src={ "drivers/redhat-8.0.md" }/>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="redhat-7.x" title="7.x">
|
||||||
|
<MarkdownLoader src={ "drivers/redhat-7.md" }/>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="suse" title="SUSE">
|
||||||
|
<Tabs defaultActiveKey="suse-15-sp1" id="os-distro-table">
|
||||||
|
<Tab eventKey="suse-15-sp1" title="15 SP1">
|
||||||
|
<MarkdownLoader src={ "drivers/suse-15-sp1.md" }/>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="ubuntu" title="Ubuntu">
|
||||||
|
<Tabs defaultActiveKey="ubuntu-19.10" id="os-distro-table">
|
||||||
|
<Tab eventKey="ubuntu-19.10" title="19.10 (eoan)">
|
||||||
|
<MarkdownLoader src={ "drivers/ubuntu-eoan.md" }/>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="ubuntu-19.04" title="19.04 (disco)">
|
||||||
|
<MarkdownLoader src={ "drivers/ubuntu-disco.md" }/>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="ubuntu-18.04" title="18.04 (bionic)">
|
||||||
|
<MarkdownLoader src={ "drivers/ubuntu-bionic.md" }/>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="other" title="Other...">
|
||||||
|
<MarkdownLoader src={ "drivers/other.md" }/>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="windows" title="Windows">
|
||||||
|
<MarkdownLoader src={ "drivers/windows.md" }/>
|
||||||
|
</Tab>
|
||||||
|
{/*<Tab eventKey="hardware" title="Hardware">
|
||||||
|
<HardwareTable device={ this.props.device }/>
|
||||||
|
</Tab>*/}
|
||||||
|
</Tabs>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Drivers extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
console.log("Drivers: " + props.device);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div className="Content OnScreen" id="Content">
|
||||||
|
<ReactMarkdown renderers={{ code: CodeBlock }} className="Markdown" source="
|
||||||
|
# Drivers for Intel graphics technology
|
||||||
|
"/>
|
||||||
|
{/*Select either the operating system you are looking for, or select Hardware to see a table of OS support.*/}
|
||||||
|
<div id="MinBox">
|
||||||
|
<OSPicker device={ this.props.device }/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Drivers;
|
15
src/index.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
import App from "./App.js";
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
console.log('DEVELOPMENT mode!');
|
||||||
|
}
|
||||||
|
|
||||||
|
render(
|
||||||
|
<BrowserRouter basename="/">
|
||||||
|
<App/>
|
||||||
|
</BrowserRouter>,
|
||||||
|
document.getElementById("root")
|
||||||
|
)
|
296
src/intel-gpu-info.js
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Device ID names derived from Mesa, which are licensed
|
||||||
|
* under the terms of MIT license:
|
||||||
|
*
|
||||||
|
* https://gitlab.freedesktop.org/mesa/mesa/blob/master/docs/license.html
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
var intelGPUs=[];
|
||||||
|
intelGPUs.push({id: 0x7121, family: "I810", name: "i8xx", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x7123, family: "I810_DC100", name: "i8xx", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x7125, family: "I810_E", name: "i8xx", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x1132, family: "I815", name: "i8xx", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x3577, family: "I830_M", name: "Intel(R) 830M", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2562, family: "845_G", name: "Intel(R) 845G", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x3582, family: "I855_GM", name: "Intel(R) 852GM/855GM", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2572, family: "I865_G", name: "Intel(R) 865G", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2582, family: "I915_G", name: "Intel(R) 915G", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x258A, family: "E7221_G", name: "Intel(R) E7221G (i915)", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2592, family: "I915_GM", name: "Intel(R) 915GM", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2772, family: "I945_G", name: "Intel(R) 945G", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x27A2, family: "I945_GM", name: "Intel(R) 945GM", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x27AE, family: "I945_GME", name: "Intel(R) 945GME", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x29B2, family: "Q35_G", name: "Intel(R) Q35", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x29C2, family: "G33_G", name: "Intel(R) G33", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x29D2, family: "Q33_G", name: "Intel(R) Q33", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0xA011, family: "PNV_GM", name: "Intel(R) Pineview M", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0xA001, family: "PNV_G", name: "Intel(R) Pineview", gen: 0, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x29A2, family: "i965", name: "Intel(R) 965G", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2992, family: "i965", name: "Intel(R) 965Q", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2982, family: "i965", name: "Intel(R) 965G", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2972, family: "i965", name: "Intel(R) 946GZ", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2A02, family: "i965", name: "Intel(R) 965GM", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2A12, family: "i965", name: "Intel(R) 965GME/GLE", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2A42, family: "g4x", name: "Mobile Intel® GM45 Express Chipset", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2E02, family: "g4x", name: "Intel(R) Integrated Graphics Device", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2E12, family: "g4x", name: "Intel(R) Q45/Q43", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2E22, family: "g4x", name: "Intel(R) G45/G43", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2E32, family: "g4x", name: "Intel(R) G41", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2E42, family: "g4x", name: "Intel(R) B43", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x2E92, family: "g4x", name: "Intel(R) B43", gen: 4, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x0042, family: "ilk", name: "Intel(R) Ironlake Desktop", gen: 5, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x0046, family: "ilk", name: "Intel(R) Ironlake Mobile", gen: 5, gt: 0});
|
||||||
|
intelGPUs.push({id: 0x0102, family: "snb_gt1", name: "Intel(R) Sandybridge Desktop", gen: 6, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0112, family: "snb_gt2", name: "Intel(R) Sandybridge Desktop", gen: 6, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0122, family: "snb_gt2", name: "Intel(R) Sandybridge Desktop", gen: 6, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0106, family: "snb_gt1", name: "Intel(R) Sandybridge Mobile", gen: 6, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0116, family: "snb_gt2", name: "Intel(R) Sandybridge Mobile", gen: 6, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0126, family: "snb_gt2", name: "Intel(R) Sandybridge Mobile", gen: 6, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x010A, family: "snb_gt1", name: "Intel(R) Sandybridge Server", gen: 6, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0152, family: "ivb_gt1", name: "Intel(R) Ivybridge Desktop", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0162, family: "ivb_gt2", name: "Intel(R) Ivybridge Desktop", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0156, family: "ivb_gt1", name: "Intel(R) Ivybridge Mobile", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0166, family: "ivb_gt2", name: "Intel(R) Ivybridge Mobile", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x015A, family: "ivb_gt1", name: "Intel(R) Ivybridge Server", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x016A, family: "ivb_gt2", name: "Intel(R) Ivybridge Server", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0402, family: "hsw_gt1", name: "Intel(R) Haswell Desktop", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0412, family: "hsw_gt2", name: "Intel(R) Haswell Desktop", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0422, family: "hsw_gt3", name: "Intel(R) Haswell Desktop", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0406, family: "hsw_gt1", name: "Intel(R) Haswell Mobile", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0416, family: "hsw_gt2", name: "Intel(R) Haswell Mobile", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0426, family: "hsw_gt3", name: "Intel(R) Haswell Mobile", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x040A, family: "hsw_gt1", name: "Intel(R) Haswell Server", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x041A, family: "hsw_gt2", name: "Intel(R) Haswell Server", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x042A, family: "hsw_gt3", name: "Intel(R) Haswell Server", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x040B, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x041B, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x042B, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x040E, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x041E, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x042E, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0C02, family: "hsw_gt1", name: "Intel(R) Haswell Desktop", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0C12, family: "hsw_gt2", name: "Intel(R) Haswell Desktop", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0C22, family: "hsw_gt3", name: "Intel(R) Haswell Desktop", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0C06, family: "hsw_gt1", name: "Intel(R) Haswell Mobile", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0C16, family: "hsw_gt2", name: "Intel(R) Haswell Mobile", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0C26, family: "hsw_gt3", name: "Intel(R) Haswell Mobile", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0C0A, family: "hsw_gt1", name: "Intel(R) Haswell Server", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0C1A, family: "hsw_gt2", name: "Intel(R) Haswell Server", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0C2A, family: "hsw_gt3", name: "Intel(R) Haswell Server", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0C0B, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0C1B, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0C2B, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0C0E, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0C1E, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0C2E, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0A02, family: "hsw_gt1", name: "Intel(R) Haswell Desktop", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0A12, family: "hsw_gt2", name: "Intel(R) Haswell Desktop", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0A22, family: "hsw_gt3", name: "Intel(R) Haswell Desktop", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0A06, family: "hsw_gt1", name: "Intel(R) Haswell Mobile", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0A16, family: "hsw_gt2", name: "Intel(R) Haswell Mobile", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0A26, family: "hsw_gt3", name: "Intel(R) Haswell Mobile", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0A0A, family: "hsw_gt1", name: "Intel(R) Haswell Server", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0A1A, family: "hsw_gt2", name: "Intel(R) Haswell Server", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0A2A, family: "hsw_gt3", name: "Intel(R) Haswell Server", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0A0B, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0A1B, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0A2B, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0A0E, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0A1E, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0A2E, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0D02, family: "hsw_gt1", name: "Intel(R) Haswell Desktop", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0D12, family: "hsw_gt2", name: "Intel(R) Haswell Desktop", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0D22, family: "hsw_gt3", name: "Intel(R) Haswell Desktop", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0D06, family: "hsw_gt1", name: "Intel(R) Haswell Mobile", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0D16, family: "hsw_gt2", name: "Intel(R) Haswell Mobile", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0D26, family: "hsw_gt3", name: "Intel(R) Haswell Mobile", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0D0A, family: "hsw_gt1", name: "Intel(R) Haswell Server", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0D1A, family: "hsw_gt2", name: "Intel(R) Haswell Server", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0D2A, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0D0B, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0D1B, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0D2B, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0D0E, family: "hsw_gt1", name: "Intel(R) Haswell", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0D1E, family: "hsw_gt2", name: "Intel(R) Haswell", gen: 7, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x0D2E, family: "hsw_gt3", name: "Intel(R) Haswell", gen: 7, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x0F31, family: "byt", name: "Intel(R) Bay Trail", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0F32, family: "byt", name: "Intel(R) Bay Trail", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0F33, family: "byt", name: "Intel(R) Bay Trail", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0157, family: "byt", name: "Intel(R) Bay Trail", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x0155, family: "byt", name: "Intel(R) Bay Trail", gen: 7, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x22B0, family: "chv", name: "Intel(R) HD Graphics (Cherrytrail)", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x22B1, family: "chv", name: "Intel(R) HD Graphics XXX (Braswell)", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x22B2, family: "chv", name: "Intel(R) HD Graphics (Cherryview)", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x22B3, family: "chv", name: "Intel(R) HD Graphics (Cherryview)", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1602, family: "bdw_gt1", name: "Intel(R) Broadwell GT1", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1606, family: "bdw_gt1", name: "Intel(R) Broadwell GT1", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x160A, family: "bdw_gt1", name: "Intel(R) Broadwell GT1", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x160B, family: "bdw_gt1", name: "Intel(R) Broadwell GT1", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x160D, family: "bdw_gt1", name: "Intel(R) Broadwell GT1", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x160E, family: "bdw_gt1", name: "Intel(R) Broadwell GT1", gen: 8, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1612, family: "bdw_gt2", name: "Intel(R) HD Graphics 5600 (Broadwell GT2)", gen: 8, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1616, family: "bdw_gt2", name: "Intel(R) HD Graphics 5500 (Broadwell GT2)", gen: 8, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x161A, family: "bdw_gt2", name: "Intel(R) Broadwell GT2", gen: 8, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x161B, family: "bdw_gt2", name: "Intel(R) Broadwell GT2", gen: 8, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x161D, family: "bdw_gt2", name: "Intel(R) Broadwell GT2", gen: 8, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x161E, family: "bdw_gt2", name: "Intel(R) HD Graphics 5300 (Broadwell GT2)", gen: 8, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1622, family: "bdw_gt3", name: "Intel(R) Iris Pro 6200 (Broadwell GT3e)", gen: 8, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x1626, family: "bdw_gt3", name: "Intel(R) HD Graphics 6000 (Broadwell GT3)", gen: 8, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x162A, family: "bdw_gt3", name: "Intel(R) Iris Pro P6300 (Broadwell GT3e)", gen: 8, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x162B, family: "bdw_gt3", name: "Intel(R) Iris 6100 (Broadwell GT3)", gen: 8, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x162D, family: "bdw_gt3", name: "Intel(R) Broadwell GT3", gen: 8, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x162E, family: "bdw_gt3", name: "Intel(R) Broadwell GT3", gen: 8, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x1902, family: "skl_gt1", name: "Intel(R) HD Graphics 510 (Skylake GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1906, family: "skl_gt1", name: "Intel(R) HD Graphics 510 (Skylake GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x190A, family: "skl_gt1", name: "Intel(R) Skylake GT1", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x190B, family: "skl_gt1", name: "Intel(R) HD Graphics 510 (Skylake GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x190E, family: "skl_gt1", name: "Intel(R) Skylake GT1", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1912, family: "skl_gt2", name: "Intel(R) HD Graphics 530 (Skylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1913, family: "skl_gt2", name: "Intel(R) Skylake GT2f", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1915, family: "skl_gt2", name: "Intel(R) Skylake GT2f", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1916, family: "skl_gt2", name: "Intel(R) HD Graphics 520 (Skylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1917, family: "skl_gt2", name: "Intel(R) Skylake GT2f", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x191A, family: "skl_gt2", name: "Intel(R) Skylake GT2", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x191B, family: "skl_gt2", name: "Intel(R) HD Graphics 530 (Skylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x191D, family: "skl_gt2", name: "Intel(R) HD Graphics P530 (Skylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x191E, family: "skl_gt2", name: "Intel(R) HD Graphics 515 (Skylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1921, family: "skl_gt2", name: "Intel(R) HD Graphics 520 (Skylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x1923, family: "skl_gt3", name: "Intel(R) Skylake GT3e", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x1926, family: "skl_gt3", name: "Intel(R) Iris Graphics 540 (Skylake GT3e)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x1927, family: "skl_gt3", name: "Intel(R) Iris Graphics 550 (Skylake GT3e)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x192A, family: "skl_gt4", name: "Intel(R) Skylake GT4", gen: 9, gt: 4});
|
||||||
|
intelGPUs.push({id: 0x192B, family: "skl_gt3", name: "Intel(R) Iris Graphics 555 (Skylake GT3e)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x192D, family: "skl_gt3", name: "Intel(R) Iris Graphics P555 (Skylake GT3e)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x1932, family: "skl_gt4", name: "Intel(R) Iris Pro Graphics 580 (Skylake GT4e)", gen: 9, gt: 4});
|
||||||
|
intelGPUs.push({id: 0x193A, family: "skl_gt4", name: "Intel(R) Iris Pro Graphics P580 (Skylake GT4e)", gen: 9, gt: 4});
|
||||||
|
intelGPUs.push({id: 0x193B, family: "skl_gt4", name: "Intel(R) Iris Pro Graphics 580 (Skylake GT4e)", gen: 9, gt: 4});
|
||||||
|
intelGPUs.push({id: 0x193D, family: "skl_gt4", name: "Intel(R) Iris Pro Graphics P580 (Skylake GT4e)", gen: 9, gt: 4});
|
||||||
|
intelGPUs.push({id: 0x0A84, family: "bxt", name: "Intel(R) HD Graphics (Broxton)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1A84, family: "bxt", name: "Intel(R) HD Graphics (Broxton)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x1A85, family: "bxt_2x6", name: "Intel(R) HD Graphics (Broxton 2x6)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A84, family: "bxt", name: "Intel(R) HD Graphics 505 (Broxton)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A85, family: "bxt_2x6", name: "Intel(R) HD Graphics 500 (Broxton 2x6)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5902, family: "kbl_gt1", name: "Intel(R) HD Graphics 610 (Kaby Lake GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5906, family: "kbl_gt1", name: "Intel(R) HD Graphics 610 (Kaby Lake GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x590A, family: "kbl_gt1", name: "Intel(R) Kabylake GT1", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5908, family: "kbl_gt1", name: "Intel(R) Kabylake GT1", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x590B, family: "kbl_gt1", name: "Intel(R) Kabylake GT1", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x590E, family: "kbl_gt1", name: "Intel(R) Kabylake GT1", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5913, family: "kbl_gt1_5", name: "Intel(R) Kabylake GT1.5", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5915, family: "kbl_gt1_5", name: "Intel(R) Kabylake GT1.5", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5917, family: "kbl_gt2", name: "Intel(R) UHD Graphics 620 (Kabylake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5912, family: "kbl_gt2", name: "Intel(R) HD Graphics 630 (Kaby Lake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5916, family: "kbl_gt2", name: "Intel(R) HD Graphics 620 (Kaby Lake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x591A, family: "kbl_gt2", name: "Intel(R) HD Graphics P630 (Kaby Lake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x591B, family: "kbl_gt2", name: "Intel(R) HD Graphics 630 (Kaby Lake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x591D, family: "kbl_gt2", name: "Intel(R) HD Graphics P630 (Kaby Lake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x591E, family: "kbl_gt2", name: "Intel(R) HD Graphics 615 (Kaby Lake GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5921, family: "kbl_gt2", name: "Intel(R) Kabylake GT2F", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5923, family: "kbl_gt3", name: "Intel(R) Kabylake GT3", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x5926, family: "kbl_gt3", name: "Intel(R) Iris Plus Graphics 640 (Kaby Lake GT3e)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x5927, family: "kbl_gt3", name: "Intel(R) Iris Plus Graphics 650 (Kaby Lake GT3e)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x593B, family: "kbl_gt4", name: "Intel(R) Kabylake GT4", gen: 9, gt: 4});
|
||||||
|
intelGPUs.push({id: 0x591C, family: "kbl_gt2", name: "Intel(R) Amber Lake (Kabylake) GT2", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x87C0, family: "kbl_gt2", name: "Intel(R) Amber Lake (Kabylake) GT2", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x87CA, family: "cfl_gt2", name: "Intel(R) Amber Lake (Coffeelake) GT2", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3184, family: "glk", name: "Intel(R) UHD Graphics 605 (Geminilake)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3185, family: "glk_2x6", name: "Intel(R) UHD Graphics 600 (Geminilake 2x6)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3E90, family: "cfl_gt1", name: "Intel(R) UHD Graphics 610 (Coffeelake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3E93, family: "cfl_gt1", name: "Intel(R) UHD Graphics 610 (Coffeelake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3E99, family: "cfl_gt1", name: "Intel(R) HD Graphics (Coffeelake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3E9C, family: "cfl_gt1", name: "Intel(R) HD Graphics (Coffeelake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3E91, family: "cfl_gt2", name: "Intel(R) UHD Graphics 630 (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3E92, family: "cfl_gt2", name: "Intel(R) UHD Graphics 630 (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3E96, family: "cfl_gt2", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3E98, family: "cfl_gt2", name: "Intel(R) UHD Graphics 630 (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3E9A, family: "cfl_gt2", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3E9B, family: "cfl_gt2", name: "Intel(R) UHD Graphics 630 (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3E94, family: "cfl_gt2", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3EA9, family: "cfl_gt2", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3EA5, family: "cfl_gt3", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT3)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x3EA6, family: "cfl_gt3", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT3)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x3EA7, family: "cfl_gt3", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT3)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x3EA8, family: "cfl_gt3", name: "Intel(R) HD Graphics (Coffeelake 3x8 GT3)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x3EA1, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Whiskey Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3EA4, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Whiskey Lake 3x8 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x3EA0, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Whiskey Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3EA3, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Whiskey Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x3EA2, family: "cfl_gt3", name: "Intel(R) UHD Graphics (Whiskey Lake 3x8 GT3)", gen: 9, gt: 3});
|
||||||
|
intelGPUs.push({id: 0x9B21, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BA0, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BA2, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BA4, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BA5, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BA8, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BAA, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BAB, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9BAC, family: "cfl_gt1", name: "Intel(R) UHD Graphics (Comet Lake 2x6 GT1)", gen: 9, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9B41, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BC0, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BC2, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BC4, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BC5, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BC6, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BC8, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BCA, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BCB, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BCC, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BE6, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9BF6, family: "cfl_gt2", name: "Intel(R) UHD Graphics (Comet Lake 3x8 GT2)", gen: 9, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5A49, family: "cnl_2x8", name: "Intel(R) HD Graphics (Cannonlake 2x8 GT0.5)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A4A, family: "cnl_2x8", name: "Intel(R) HD Graphics (Cannonlake 2x8 GT0.5)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A41, family: "cnl_3x8", name: "Intel(R) HD Graphics (Cannonlake 3x8 GT1)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A42, family: "cnl_3x8", name: "Intel(R) HD Graphics (Cannonlake 3x8 GT1)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A44, family: "cnl_3x8", name: "Intel(R) HD Graphics (Cannonlake 3x8 GT1)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A59, family: "cnl_4x8", name: "Intel(R) HD Graphics (Cannonlake 4x8 GT1.5)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A5A, family: "cnl_4x8", name: "Intel(R) HD Graphics (Cannonlake 4x8 GT1.5)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A5C, family: "cnl_4x8", name: "Intel(R) HD Graphics (Cannonlake 4x8 GT1.5)", gen: 10, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x5A50, family: "cnl_5x8", name: "Intel(R) HD Graphics (Cannonlake 5x8 GT2)", gen: 10, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5A51, family: "cnl_5x8", name: "Intel(R) HD Graphics (Cannonlake 5x8 GT2)", gen: 10, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5A52, family: "cnl_5x8", name: "Intel(R) HD Graphics (Cannonlake 5x8 GT2)", gen: 10, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x5A54, family: "cnl_5x8", name: "Intel(R) HD Graphics (Cannonlake 5x8 GT2)", gen: 10, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x8A50, family: "icl_8x8", name: "Intel(R) HD Graphics (Ice Lake 8x8 GT2)", gen: 11, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x8A51, family: "icl_8x8", name: "Intel(R) Iris(R) Plus Graphics (Ice Lake 8x8 GT2)", gen: 11, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x8A52, family: "icl_8x8", name: "Intel(R) Iris(R) Plus Graphics (Ice Lake 8x8 GT2)", gen: 11, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x8A53, family: "icl_8x8", name: "Intel(R) Iris(R) Plus Graphics (Ice Lake 8x8 GT2)", gen: 11, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x8A54, family: "icl_6x8", name: "Intel(R) Iris(R) Plus Graphics (Ice Lake 6x8 GT1.5)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A56, family: "icl_4x8", name: "Intel(R) UHD Graphics (Ice Lake 4x8 GT1)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A57, family: "icl_6x8", name: "Intel(R) HD Graphics (Ice Lake 6x8 GT1.5)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A58, family: "icl_4x8", name: "Intel(R) UHD Graphics (Ice Lake 4x8 GT1)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A59, family: "icl_6x8", name: "Intel(R) HD Graphics (Ice Lake 6x8 GT1.5)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A5A, family: "icl_6x8", name: "Intel(R) Iris(R) Plus Graphics (Ice Lake 6x8 GT1.5)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A5B, family: "icl_4x8", name: "Intel(R) HD Graphics (Ice Lake 4x8 GT1)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A5C, family: "icl_6x8", name: "Intel(R) Iris(R) Plus Graphics (Ice Lake 6x8 GT1.5)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A5D, family: "icl_4x8", name: "Intel(R) HD Graphics (Ice Lake 4x8 GT1)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x8A71, family: "icl_1x8", name: "Intel(R) HD Graphics (Ice Lake 1x8 GT0.5)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4500, family: "ehl_4x8", name: "Intel(R) HD Graphics (Elkhart Lake 4x8)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4571, family: "ehl_4x8", name: "Intel(R) HD Graphics (Elkhart Lake 4x8)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4551, family: "ehl_4x4", name: "Intel(R) HD Graphics (Elkhart Lake 4x4)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4541, family: "ehl_2x4", name: "Intel(R) HD Graphics (Elkhart Lake 2x4)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4E51, family: "ehl_4x4", name: "Intel(R) HD Graphics (Jasper Lake 4x4)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4E61, family: "ehl_4x6", name: "Intel(R) HD Graphics (Jasper Lake 4x6)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x4E71, family: "ehl_4x8", name: "Intel(R) HD Graphics (Jasper Lake 4x8)", gen: 11, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9A40, family: "tgl_1x6x16", name: "Intel(R) Graphics (TGL GT2)", gen: 12, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9A49, family: "tgl_1x6x16", name: "Intel(R) Graphics (TGL GT2)", gen: 12, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9A59, family: "tgl_1x6x16", name: "Intel(R) Graphics (TGL GT2)", gen: 12, gt: 2});
|
||||||
|
intelGPUs.push({id: 0x9A60, family: "tgl_1x2x16", name: "Intel(R) Graphics (TGL GT1)", gen: 12, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9A68, family: "tgl_1x2x16", name: "Intel(R) Graphics (TGL GT1)", gen: 12, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9A70, family: "tgl_1x2x16", name: "Intel(R) Graphics (TGL GT1)", gen: 12, gt: 1});
|
||||||
|
intelGPUs.push({id: 0x9A78, family: "tgl_1x2x16", name: "Intel(R) Graphics (TGL GT1)", gen: 12, gt: 1});
|
||||||
|
|
||||||
|
function lookupIntelGPU(id) {
|
||||||
|
var index = intelGPUs.findIndex(function(device) {
|
||||||
|
return (id == device.id);
|
||||||
|
});
|
||||||
|
if (index) {
|
||||||
|
return intelGPUs[index];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
lookupIntelGPU,
|
||||||
|
intelGPUs
|
||||||
|
};
|
61
src/intel.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
/* Convert a Date object to a work-week #, following Intel's
|
||||||
|
* methodology with the exception that we list WW53'(xx) for
|
||||||
|
* December dates that would be in WW01'(xx+1) */
|
||||||
|
function intelDateToWW(date) {
|
||||||
|
if (!(date instanceof Date)) {
|
||||||
|
return "N/A: " + date;
|
||||||
|
}
|
||||||
|
var jan1 = new Date(date);
|
||||||
|
jan1.setMonth(0, 1);
|
||||||
|
var day = jan1.getDay();
|
||||||
|
/* 0 = Sunday */
|
||||||
|
|
||||||
|
/* Determine the start of WW01 in # of seconds since
|
||||||
|
* Jan 1, 1970 00:00 GMT */
|
||||||
|
var time = (jan1.getTime() / 1000) - (24 * 60 * 60) * (day + 1);
|
||||||
|
|
||||||
|
/* Determine how far into the year the requested time
|
||||||
|
* is with WW01 00:00 as the base. */
|
||||||
|
var delta = (date.getTime() / 1000) - time;
|
||||||
|
|
||||||
|
var weeks = Math.ceil(delta / (24 * 60 * 60 * 7)),
|
||||||
|
year = date.getFullYear();
|
||||||
|
|
||||||
|
if (weeks > 52) {
|
||||||
|
weeks -= 52;
|
||||||
|
year++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return "WW" + (weeks < 10 ? "0" : "") + weeks + "'" + (year % 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Convert an Intel WW to the date of Friday of that work week */
|
||||||
|
function intelWWToDate(workweek, startOfWeek) {
|
||||||
|
if (!/^ww/i.exec(workweek)) {
|
||||||
|
workweek = "ww" + workweek;
|
||||||
|
}
|
||||||
|
/* 1 2 3 */
|
||||||
|
var parts = ("" + workweek).match(/^ww([0-9]+)\s*('([0-9]+))?$/i);
|
||||||
|
if (!parts) {
|
||||||
|
return "N/A: " + workweek;
|
||||||
|
}
|
||||||
|
var year = parseInt(parts[3] || new Date().getFullYear()),
|
||||||
|
week = parseInt(parts[1].replace(/^0/, ""));
|
||||||
|
if (year < 1000) {
|
||||||
|
year += 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
var jan1 = new Date(year, 0, 1, 0, 0, 0, 0);
|
||||||
|
|
||||||
|
/* Rebase the returned date to Friday in the target WW */
|
||||||
|
jan1.setDate((week * 7) - (jan1.getDay() + (startOfWeek ? 5 : 1)));
|
||||||
|
|
||||||
|
return jan1;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
intelDateToWW,
|
||||||
|
intelWWToDate
|
||||||
|
};
|
49
src/internal.css
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
#technologies-content .tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-bottom-left-radius: 0.25em;
|
||||||
|
border-bottom-right-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p:last-child {
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown table {
|
||||||
|
min-width: 75%;
|
||||||
|
margin: 1em 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown table thead {
|
||||||
|
background-color: #555;
|
||||||
|
color: white;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown h1,
|
||||||
|
.tab-content .Markdown h2,
|
||||||
|
.tab-content .Markdown h3 {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown h3 {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav.nav-tabs {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
82
src/internal.js
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
/* App starts here */
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import Markdown from "react-markdown/with-html";
|
||||||
|
import Nav from "react-bootstrap/Nav";
|
||||||
|
import Col from "react-bootstrap/Col";
|
||||||
|
import Row from "react-bootstrap/Row";
|
||||||
|
import Tab from "react-bootstrap/Tab";
|
||||||
|
import MarkdownLoader from "./markdown-loader.js";
|
||||||
|
|
||||||
|
import "./internal.css";
|
||||||
|
|
||||||
|
class TopicsPicker extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<Tab.Container id="topics-table" defaultActiveKey="running-internal">
|
||||||
|
<Row>
|
||||||
|
<Col sm={3}>
|
||||||
|
<Nav variant="pills" className="flex-column">
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="running-internal">Running internal...</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="what-is-agama">What is Agama?</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="os-support-dates">OS Support Dates</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="zero-to-hero">'Web: Zero to Hero' slides</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="additional-info">Additional information</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
</Nav>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col sm={9} id="topics-content">
|
||||||
|
<Tab.Content>
|
||||||
|
<Tab.Pane eventKey="running-internal">
|
||||||
|
<MarkdownLoader src="topics/running-internal.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="what-is-agama">
|
||||||
|
<MarkdownLoader src="topics/what-is-agama.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="os-support-dates">
|
||||||
|
<MarkdownLoader src="topics/os-support-dates.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="zero-to-hero">
|
||||||
|
<MarkdownLoader src="topics/zero-to-hero.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="additional-info">
|
||||||
|
<MarkdownLoader src="topics/support.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
</Tab.Content>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Tab.Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Internal extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div className="Content OnScreen" id="Content">
|
||||||
|
<div id="MinBox">
|
||||||
|
<TopicsPicker/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Internal;
|
83
src/markdown-loader.js
Executable file
@ -0,0 +1,83 @@
|
|||||||
|
/* App starts here */
|
||||||
|
import React from "react";
|
||||||
|
import ReactMarkdown from "react-markdown/with-html";
|
||||||
|
import CodeBlock from "./CodeBlock";
|
||||||
|
|
||||||
|
class MarkdownLoader extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state= {
|
||||||
|
src: props.src,
|
||||||
|
loaded: "",
|
||||||
|
loading: "",
|
||||||
|
markdown: props.markdown ? props.markdown : "Loading..."
|
||||||
|
};
|
||||||
|
this.loadContent = this.loadContent.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.loadContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(previous) {
|
||||||
|
if (this.props.src != previous.src) {
|
||||||
|
this.state.src = this.props.src;
|
||||||
|
this.loadContent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadContent() {
|
||||||
|
if (!this.state.src) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Loading " + this.state.src, this.props.src);
|
||||||
|
|
||||||
|
this.state.loading = this.state.src;
|
||||||
|
fetch(this.state.src.match(/^https?:\/\//) ? this.state.src : "./docs/" + this.state.src)
|
||||||
|
.then((response) => {
|
||||||
|
if (response.ok) {
|
||||||
|
return response.text();
|
||||||
|
} else {
|
||||||
|
throw Error(response.statusText)
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
/* If 'result' doesn't already contain a link to the GitLab page, add it
|
||||||
|
* to the end of the content. */
|
||||||
|
this.setState({
|
||||||
|
loading: null,
|
||||||
|
loaded: this.state.loading,
|
||||||
|
markdown: result
|
||||||
|
});
|
||||||
|
}, (error) => {
|
||||||
|
this.setState({
|
||||||
|
markdown: this.props.fallback ? this.props.fallback : [
|
||||||
|
"# Error loading " + this.state.src,
|
||||||
|
"",
|
||||||
|
error.message
|
||||||
|
].join("\n")
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const isDebug = window.location.search.match(/debug(=(y|t|1).*)?/);
|
||||||
|
return (
|
||||||
|
<div className="MarkdownLoader">
|
||||||
|
<ReactMarkdown
|
||||||
|
className="Markdown"
|
||||||
|
escapeHtml={false}
|
||||||
|
source={ this.state.markdown }
|
||||||
|
renderers={{ code: CodeBlock }}
|
||||||
|
/>
|
||||||
|
{ (isDebug) &&
|
||||||
|
<div className='gitlab-banner'>
|
||||||
|
<a target="_new" href={"https://gitlab.devtools.intel.com/vtt/sws/osgc/agama-website/edit/master/docs/" + this.state.src }>edit on gitlab</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MarkdownLoader;
|
200
src/modest.css
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
@media print {
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #000 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href]:after {
|
||||||
|
content: " (" attr(href) ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title]:after {
|
||||||
|
content: " (" attr(title) ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^="#"]:after,
|
||||||
|
a[href^="javascript:"]:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
blockquote {
|
||||||
|
border: 1px solid #999;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr,
|
||||||
|
img {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
orphans: 3;
|
||||||
|
widows: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: .5rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
color: #3498db;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus,
|
||||||
|
a:active {
|
||||||
|
color: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modest-no-decoration {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 32rem) and (max-width: 48rem) {
|
||||||
|
html {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 48rem) {
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
.modest-p {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.modest-h1,
|
||||||
|
h2,
|
||||||
|
.modest-h2,
|
||||||
|
h3,
|
||||||
|
.modest-h3,
|
||||||
|
h4,
|
||||||
|
.modest-h4 {
|
||||||
|
margin: 1.414rem 0 .5rem;
|
||||||
|
font-weight: inherit;
|
||||||
|
line-height: 1.42;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.modest-h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 3.998rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.modest-h2 {
|
||||||
|
font-size: 2.827rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.modest-h3 {
|
||||||
|
font-size: 1.999rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.modest-h4 {
|
||||||
|
font-size: 1.414rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.modest-h5 {
|
||||||
|
font-size: 1.121rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.modest-h6 {
|
||||||
|
font-size: .88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
.modest-small {
|
||||||
|
font-size: .707em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* https://github.com/mrmrs/fluidity */
|
||||||
|
|
||||||
|
img,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
video,
|
||||||
|
svg,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
|
||||||
|
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Arimo:700,700italic);
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: Arimo, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
border-bottom: 2px solid #fafafa;
|
||||||
|
margin-bottom: 1.15rem;
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 8px solid #fafafa;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
6
src/releases.css
Executable file
@ -0,0 +1,6 @@
|
|||||||
|
#releases-content .tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
73
src/releases.js
Executable file
@ -0,0 +1,73 @@
|
|||||||
|
/* App starts here */
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import Markdown from "react-markdown/with-html";
|
||||||
|
import Nav from "react-bootstrap/Nav";
|
||||||
|
import Col from "react-bootstrap/Col";
|
||||||
|
import Row from "react-bootstrap/Row";
|
||||||
|
import Tab from "react-bootstrap/Tab";
|
||||||
|
import MarkdownLoader from "./markdown-loader.js";
|
||||||
|
|
||||||
|
import "./releases.css";
|
||||||
|
|
||||||
|
class ReleasePicker extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<Tab.Container id="releases-table" defaultActiveKey="20q1.06">
|
||||||
|
<Row>
|
||||||
|
<Col sm={3}>
|
||||||
|
<Nav variant="pills" className="flex-column">
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="20q1.06">2020-02-07</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="19q4.52">2019-12-14</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="19q4">2019-11-11</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
</Nav>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col sm={9} id="releases-content">
|
||||||
|
<Tab.Content>
|
||||||
|
<Tab.Pane eventKey="20q1.06">
|
||||||
|
<MarkdownLoader src="releases/releases-20Q1.06.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="19q4.52">
|
||||||
|
<MarkdownLoader src="releases/releases-19Q4.52.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="19q4">
|
||||||
|
<MarkdownLoader src="releases/releases-19Q4.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
</Tab.Content>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Tab.Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Releases extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div className="Content OnScreen" id="Content">
|
||||||
|
<div id="MinBox">
|
||||||
|
<Markdown source="
|
||||||
|
Select the release below for information about the packages published.
|
||||||
|
"/>
|
||||||
|
<ReleasePicker/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Releases;
|
197
src/solutions.css
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
.solution {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 90ex;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-details .solution-categories {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution .Markdown {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-field :first-child {
|
||||||
|
width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-field :last-child {
|
||||||
|
flex-grow: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-back {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.1em;
|
||||||
|
height: 1.1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-back:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solutions-picker {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 12em;
|
||||||
|
height: 8em;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin: 1em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-marque {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-clone .Markdown {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-overview {
|
||||||
|
flex-grow: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-image {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 10em;
|
||||||
|
height: 6em;
|
||||||
|
background: white;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: left 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 5em;
|
||||||
|
padding: 0.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-title {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.solution-summary {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 0.9em;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-card:hover {
|
||||||
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-category {
|
||||||
|
border: 3px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-category-tab > .nav-item {
|
||||||
|
display: flex;
|
||||||
|
/*
|
||||||
|
width: 8em;
|
||||||
|
height: 8em;
|
||||||
|
*/
|
||||||
|
text-align: left;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background-size: auto 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 0.5em 0.5em;
|
||||||
|
padding-left: 2em;
|
||||||
|
min-width: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-category-tab .nav-item[data-rb-event-key=media] {
|
||||||
|
background-image: url(../assets/solutions-media.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-category-tab .nav-item[data-rb-event-key=compute] {
|
||||||
|
background-image: url(../assets/solutions-compute.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-category-tab .nav-item[data-rb-event-key=render] {
|
||||||
|
background-image: url(../assets/solutions-render.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-category-tab .nav-item[data-rb-event-key=all] {
|
||||||
|
background-image: url(../assets/solutions-all.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-bottom-left-radius: 0.25em;
|
||||||
|
border-bottom-right-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown table {
|
||||||
|
min-width: 75%;
|
||||||
|
margin: 1em 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown table thead {
|
||||||
|
background-color: #555;
|
||||||
|
color: white;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown h1,
|
||||||
|
.Markdown h2,
|
||||||
|
.Markdown h3 {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Markdown h3 {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav.nav-tabs {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
247
src/solutions.js
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
/* App starts here */
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import ReactMarkdown from "react-markdown/with-html";
|
||||||
|
import CodeBlock from "./CodeBlock";
|
||||||
|
import MarkdownLoader from "./markdown-loader";
|
||||||
|
import Tab from "react-bootstrap/Tab";
|
||||||
|
import Tabs from "react-bootstrap/Tabs";
|
||||||
|
import Col from "react-bootstrap/Col";
|
||||||
|
import Row from "react-bootstrap/Row";
|
||||||
|
|
||||||
|
import "./solutions.css";
|
||||||
|
|
||||||
|
const solutions = [ {
|
||||||
|
category: "HPC",
|
||||||
|
title: "intel-hpc-bench",
|
||||||
|
asset: "hpc.png",
|
||||||
|
summary: "HPC Benchmark workloads",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-hcp-bench"
|
||||||
|
}, {
|
||||||
|
category: "AI/ML",
|
||||||
|
title: "intel-pytorch",
|
||||||
|
asset: "intel-pytorch.png",
|
||||||
|
summary: "basic pytorch container",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-pytorch"
|
||||||
|
},/*
|
||||||
|
{
|
||||||
|
category: "compute",
|
||||||
|
title: "intel-efficientnet",
|
||||||
|
summary: "No summary provided",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-efficientnet"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "compute",
|
||||||
|
title: "intel-deepspeech",
|
||||||
|
summary: "Container featuring the Mozilla DeepSpeech speech-to-text implementation in tensorflow.",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-deepspeech"
|
||||||
|
},*/
|
||||||
|
/*{
|
||||||
|
category: "compute",
|
||||||
|
title: "intel-deepvoice3",
|
||||||
|
summary: "Deepvoice3 text to speech container using Intel GPU and deepspeech3 pytorch.",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-deepvoice3"
|
||||||
|
},*/
|
||||||
|
/*{
|
||||||
|
category: "compute",
|
||||||
|
title: "intel-rl",
|
||||||
|
summary: "Intel reinforcement learning container",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-rl"
|
||||||
|
},*/
|
||||||
|
{
|
||||||
|
category: "AI/ML,HPC",
|
||||||
|
title: "intel-compute-clinfo",
|
||||||
|
asset: "intel-compute-clinfo.png",
|
||||||
|
summary: "Basic container installing OpenCL runtime; testing packages",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-compute-clinfo"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "Media",
|
||||||
|
title: "intel-media-ffmpeg",
|
||||||
|
asset: "intel-media-ffmpeg.svg",
|
||||||
|
summary: "Perform various media tests using ffmpeg",
|
||||||
|
git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-media-ffmpeg"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
class CategoryPicker extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
console.log("CategoryPicker");
|
||||||
|
this.clearFilter = this.clearFilter.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearFilter() {
|
||||||
|
if (window.clearFilter) {
|
||||||
|
window.clearFilter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const categories = [];
|
||||||
|
solutions.forEach(solution => {
|
||||||
|
solution.category.split(",").forEach(category => {
|
||||||
|
if (categories.indexOf(category) != -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
categories.push(category);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const tabs = categories.sort().map(category => (
|
||||||
|
<Tab eventKey={category} key={category} title={category.replace(/^(.)/, "$1".toUpperCase())}>
|
||||||
|
<SolutionsPicker onSolutionChanged={this.props.onSolutionChanged} filter={category}/>
|
||||||
|
</Tab>
|
||||||
|
));
|
||||||
|
return (
|
||||||
|
<Tabs id="solution-category-table" className="solution-category-tab" >
|
||||||
|
{ tabs }
|
||||||
|
<Tab eventKey="all" title="All" key="all">
|
||||||
|
<SolutionsPicker onSolutionChanged={this.props.onSolutionChanged} filter="*"/>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey="about" title="About" key="about">
|
||||||
|
<MarkdownLoader className="Markdown" src="solutions/about.md"/>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class SolutionsPicker extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
console.log("SolutionsPicker");
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const solutionsContent = solutions
|
||||||
|
.filter(solution => this.props.filter == "*" || solution.category == this.props.filter)
|
||||||
|
.sort((A, B) => { return A.title.localeCompare(B.title) })
|
||||||
|
.map((solution, i) => {
|
||||||
|
return (
|
||||||
|
<div key={"solution-" + i} className="solution-card"
|
||||||
|
onClick={this.props.onSolutionChanged.bind(this, solution)}>
|
||||||
|
<div className="solution-image"
|
||||||
|
style={{backgroundImage:"url(./docs/solutions/" + solution.asset + ")"}}>
|
||||||
|
</div>
|
||||||
|
<div className="solution-info">
|
||||||
|
<div className="solution-title">{solution.title}</div>
|
||||||
|
<div className="solution-summary">{solution.summary}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="solutions-picker">
|
||||||
|
{ solutionsContent }
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Solution extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
console.log("Solution: ", this.props.solution);
|
||||||
|
}
|
||||||
|
|
||||||
|
formatString(string) {
|
||||||
|
if (/^https?:\/\//.exec(string)) {
|
||||||
|
return (<a href={string}>{string}</a>);
|
||||||
|
} else {
|
||||||
|
return string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
solutionContent(solution) {
|
||||||
|
let markdownPath = "", basename = "";
|
||||||
|
if (solution.git) {
|
||||||
|
basename = solution.git.replace(/^.*\/([^/]+)$/, "$1");
|
||||||
|
if (basename) {
|
||||||
|
markdownPath = "solutions/" + basename + ".md";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!basename) {
|
||||||
|
return (<ReactMarkdown
|
||||||
|
className="Markdown"
|
||||||
|
escapeHtml={false}
|
||||||
|
source="# git path must be provided"
|
||||||
|
renderers={{ code: CodeBlock }} />);
|
||||||
|
}
|
||||||
|
return (<MarkdownLoader src={markdownPath} fallback={
|
||||||
|
"# " + solution.title + " \n" +
|
||||||
|
"Solution instructions not found. You can [file an issue](https://gitlab.devtools.intel.com/vtt/sws/osgc/agama-website/issues/new?" +
|
||||||
|
"issue[title]=Content%20needed%20for%20docs%2F" + markdownPath +") to request it be created."
|
||||||
|
}/>);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const solution = this.props.solution;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="solution">
|
||||||
|
<div className="solution-back" onClick={this.props.onBack}>Back</div>
|
||||||
|
<div className="solution-details">
|
||||||
|
<div className="solution-marque">
|
||||||
|
<div className="solution-image"
|
||||||
|
style={{backgroundImage:"url(./docs/solutions/" + solution.asset + ")"}}></div>
|
||||||
|
<div className="solution-overview">
|
||||||
|
<div className="solution-categories">{solution.category}</div>
|
||||||
|
<div className="solution-title">{solution.title}</div>
|
||||||
|
<div className="solution-summary">{solution.summary}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="solution-clone">
|
||||||
|
<ReactMarkdown
|
||||||
|
className="Markdown"
|
||||||
|
renderers={{ code: CodeBlock }}
|
||||||
|
source={[
|
||||||
|
"## Clone",
|
||||||
|
"```bash",
|
||||||
|
"git clone " + solution.git,
|
||||||
|
"```",
|
||||||
|
"## Pull",
|
||||||
|
"```bash",
|
||||||
|
"docker pull amr-registry.caas.intel.com/vtt-osgc/solutions/" + solution.title,
|
||||||
|
"```"
|
||||||
|
].join("\n")}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{ this.solutionContent(this.props.solution) }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Solutions extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
console.log("Solutions");
|
||||||
|
this.state = {
|
||||||
|
activeSolution: null
|
||||||
|
};
|
||||||
|
this.onSolutionChanged = this.onSolutionChanged.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSolutionChanged(solution) {
|
||||||
|
console.log("onSolutionChanged: " + solution);
|
||||||
|
this.setState({
|
||||||
|
activeSolution: solution
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div className="Content OnScreen" id="Content">
|
||||||
|
<div id="MinBox">
|
||||||
|
<div>This site is a work in progress and under active development.</div>
|
||||||
|
{
|
||||||
|
this.state.activeSolution ?
|
||||||
|
<Solution solution={this.state.activeSolution} onBack={this.onSolutionChanged.bind(this, null)}/> :
|
||||||
|
<CategoryPicker onSolutionChanged={this.onSolutionChanged}/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Solutions;
|
49
src/technologies.css
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
#technologies-content .tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-bottom-left-radius: 0.25em;
|
||||||
|
border-bottom-right-radius: 0.25em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-bottom: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p:last-child {
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown table {
|
||||||
|
min-width: 75%;
|
||||||
|
margin: 1em 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown table thead {
|
||||||
|
background-color: #555;
|
||||||
|
color: white;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown h1,
|
||||||
|
.tab-content .Markdown h2,
|
||||||
|
.tab-content .Markdown h3 {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content .Markdown h3 {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav.nav-tabs {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
90
src/technologies.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/* App starts here */
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import Markdown from "react-markdown/with-html";
|
||||||
|
import Nav from "react-bootstrap/Nav";
|
||||||
|
import Col from "react-bootstrap/Col";
|
||||||
|
import Row from "react-bootstrap/Row";
|
||||||
|
import Tab from "react-bootstrap/Tab";
|
||||||
|
import MarkdownLoader from "./markdown-loader.js";
|
||||||
|
|
||||||
|
import "./technologies.css";
|
||||||
|
|
||||||
|
class TechnologyPicker extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<Tab.Container id="technologies-table" defaultActiveKey="level-zero">
|
||||||
|
<Row>
|
||||||
|
<Col sm={3}>
|
||||||
|
<Nav variant="pills" className="flex-column">
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="level-zero">Level-Zero</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="mediadriver">Media Driver</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="mediasdk">Media SDK</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="mesa">Mesa</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
<Nav.Item>
|
||||||
|
<Nav.Link eventKey="opencl">Open CL</Nav.Link>
|
||||||
|
</Nav.Item>
|
||||||
|
</Nav>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col sm={9} id="technologies-content">
|
||||||
|
<Tab.Content>
|
||||||
|
<Tab.Pane eventKey="default">
|
||||||
|
<Markdown className="Markdown" source={[
|
||||||
|
"# Technologies",
|
||||||
|
"",
|
||||||
|
"Providing the latest innovations on Intel graphics hardware requires coordination",
|
||||||
|
"with several projects."
|
||||||
|
].join("\n")}/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="level-zero">
|
||||||
|
<MarkdownLoader src="technologies/level-zero.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="mediasdk">
|
||||||
|
<MarkdownLoader src="technologies/mediasdk.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="mediadriver">
|
||||||
|
<MarkdownLoader src="technologies/mediadriver.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="mesa">
|
||||||
|
<MarkdownLoader src="technologies/mesa.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
<Tab.Pane eventKey="opencl">
|
||||||
|
<MarkdownLoader src="technologies/opencl.md"/>
|
||||||
|
</Tab.Pane>
|
||||||
|
</Tab.Content>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Tab.Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Technologies extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div className="Content OnScreen" id="Content">
|
||||||
|
<div id="MinBox">
|
||||||
|
<TechnologyPicker/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Technologies;
|
33
webpack.common.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
const path = require("path");
|
||||||
|
const webpack = require("webpack");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/index.js",
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
exclude: /(node_modules|bower_components)/,
|
||||||
|
loader: "babel-loader",
|
||||||
|
options: { presets: ["@babel/env"] }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ["style-loader", "css-loader"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|svg|jpg|md)$/,
|
||||||
|
use: [ "file-loader" ]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ["*", ".js", ".jsx"]
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "dist/"),
|
||||||
|
publicPath: "./dist/",
|
||||||
|
filename: "bundle.js"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
18
webpack.dev.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const path = require("path");
|
||||||
|
const merge = require('webpack-merge')
|
||||||
|
const common = require('./webpack.common.js');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
|
||||||
|
module.exports = merge(common, {
|
||||||
|
mode: "development",
|
||||||
|
devServer: {
|
||||||
|
contentBase: path.join(__dirname, "/"),
|
||||||
|
port: 8008,
|
||||||
|
publicPath: "http://localhost:8008/dist/",
|
||||||
|
hotOnly: true,
|
||||||
|
disableHostCheck: true,
|
||||||
|
historyApiFallback: true
|
||||||
|
},
|
||||||
|
plugins: [new webpack.HotModuleReplacementPlugin()]
|
||||||
|
});
|
||||||
|
|
8
webpack.prod.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
const merge = require('webpack-merge')
|
||||||
|
const common = require('./webpack.common.js');
|
||||||
|
|
||||||
|
module.exports = merge(common, {
|
||||||
|
mode: "production",
|
||||||
|
devtool: 'source-map'
|
||||||
|
});
|
||||||
|
|