2ndbeam/squad-quest-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Initial commit

Browse source
This commit is contained in:
Alexey 2025-12-23 12:37:11 +03:00
commit 92e4f08980
9 changed files with 2149 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View 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
View 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
View 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
View file

File diff suppressed because it is too large Load diff

56
src/App.css Normal file
View 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
View 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
View 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
View 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
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})