feat: Initial commit
This commit is contained in:
commit
92e4f08980
9 changed files with 2149 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
12
index.html
Normal file
12
index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>squad-quest-web</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "squad-quest-web",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"globals": "^16.5.0",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
1787
pnpm-lock.yaml
generated
Normal file
1787
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
56
src/App.css
Normal file
56
src/App.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
position: relative;
|
||||
border: solid red 1px;
|
||||
}
|
||||
|
||||
.mapimg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.room {
|
||||
position: absolute;
|
||||
border: dashed black 1px;
|
||||
background: #33333333;
|
||||
}
|
||||
|
||||
.room:hover {
|
||||
background: #FFFFFF33;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
border: solid black 1px;
|
||||
border-radius: 50px;
|
||||
background: #888888;
|
||||
}
|
||||
|
||||
.marker:hover .markertip {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.markertip {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
right: 55px;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
color: white;
|
||||
background: #555555;
|
||||
border: solid black 1px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
font-size: 10pt;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
163
src/App.jsx
Normal file
163
src/App.jsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import { useState } from 'react'
|
||||
import './App.css'
|
||||
|
||||
const rooms = [
|
||||
{
|
||||
id: 0,
|
||||
x: 0,
|
||||
y: 6,
|
||||
w: 41,
|
||||
h: 38.5,
|
||||
markers: [],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
x: 5.5,
|
||||
y: 44.5,
|
||||
w: 35.5,
|
||||
h: 48.5,
|
||||
markers: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
x: 30,
|
||||
y: 59,
|
||||
w: 9,
|
||||
h: 18,
|
||||
markers: [],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
x: 41,
|
||||
y: 6,
|
||||
w: 29,
|
||||
h: 7,
|
||||
markers: [],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
x: 48,
|
||||
y: 13,
|
||||
w: 18,
|
||||
h: 30,
|
||||
markers: [],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
x: 41,
|
||||
y: 13,
|
||||
w: 7,
|
||||
h: 80,
|
||||
markers: [],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
x: 48,
|
||||
y: 43,
|
||||
w: 22,
|
||||
h: 16,
|
||||
markers: [
|
||||
"First Beam",
|
||||
"feloroni",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
x: 48,
|
||||
y: 65,
|
||||
w: 32,
|
||||
h: 28,
|
||||
markers: [
|
||||
"Second Beam",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
x: 70,
|
||||
y: 6,
|
||||
w: 25,
|
||||
h: 87,
|
||||
markers: [
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
"bulpeka",
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
function Marker({ name, top, left }) {
|
||||
const _top = top == null ? "50%" : top + '%'
|
||||
const _left = left == null ? "50%" : left + '%'
|
||||
const props = {
|
||||
top: _top,
|
||||
left: _left,
|
||||
}
|
||||
return (
|
||||
<div className="marker" style={props}>
|
||||
<div className="markertip">
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Room({ x, y, w, h, children }) {
|
||||
const props = {
|
||||
left: x + '%',
|
||||
top: y + '%',
|
||||
width: w + '%',
|
||||
height: h + '%',
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="room"
|
||||
style={props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Map() {
|
||||
const roomsList = rooms.map(room => {
|
||||
const maxWidth = Math.ceil(Math.sqrt(room.markers.length))
|
||||
const markers = room.markers.map( (marker, index) =>
|
||||
<Marker key={index} name={marker} left={((index % maxWidth) + 0.5) / (maxWidth + 1) * 100} top={(Math.floor(index / maxWidth) + 0.5) / (maxWidth + 1) * 100} />
|
||||
)
|
||||
return (
|
||||
<Room key={room.id} x={room.x} y={room.y} w={room.w} h={room.h}>
|
||||
{markers}
|
||||
</Room>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="map">
|
||||
<div>{roomsList}</div>
|
||||
<img className="mapimg" src="https://2ndbeam.ru/durenije/chelimbalo/poromap.png" alt="SquadQuest map" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Map />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
68
src/index.css
Normal file
68
src/index.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue