Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexMacocian committed Aug 26, 2024
2 parents 182f92d + 8f48b55 commit d3f0a81
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 113 deletions.
116 changes: 57 additions & 59 deletions GuildWarsPartySearch.NodeJSServer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,67 @@

<link rel="icon" type="image/png" href="src/resources/icons/guildhall.png">

<link href="index.scss" rel="stylesheet" />
<link href="src/css/index.scss" rel="stylesheet" />
</head>
<body>
<div id="menu_button">
<div id="mapdiv" class="zoomed" style="width: 100vw; height: 100vh; background-color: #ffffff;"></div>
<div id="partyWindow" class="popupWindow hidden overlay-map">
<div class="popupInner">
<div class="popupHeader">
<div class="d-flex align-items-center">
<div id="partyWindowTitle" class="popupWindowTitle divider flex-fill">Party Search</div>
<div class="small text-nowrap districts_info">Districts: <span id="partyWindowDistricts"></span></div>
<div class="closeButton toggleElement cursor-pointer align-self-stretch" data-selector="#partyWindow">x</div>
</div>
<div class="d-flex search_type_filters">
<div>
<input type="checkbox" checked id="search_type_toggle_0" class="search_type_toggle" data-id="0"/>
<label for="search_type_toggle_0">Hunting (<span class="search_type_count_0">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_1" class="search_type_toggle" data-id="1"/>
<label for="search_type_toggle_1">Mission (<span class="search_type_count_1">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_2" class="search_type_toggle" data-id="2"/>
<label for="search_type_toggle_2">Quest (<span class="search_type_count_2">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_3" class="search_type_toggle" data-id="3"/>
<label for="search_type_toggle_3">Trade (<span class="search_type_count_3">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_4" class="search_type_toggle" data-id="4"/>
<label for="search_type_toggle_4">Guild (<span class="search_type_count_4">0</span>)</label>
</div>
</div>
<table id="partyWindowTableHeader" class="table">
<thead>
<tr class="row hide-on-mobile">
<th class="header text-start">Party Leader</th>
<th class="header minw-10rem">Region</th>
<th class="header">Size</th>
<th class="header">District</th>
<th class="header text-start">Description</th>
</tr>
<tr class="row show-on-mobile">
<th class="header">Party Details</th>
</tr>
</thead>
</table>
</div>
<div class="popupContent">
<table id="partyWindowTable" class="table">
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div id="menu_button" class="overlay-map">
<div class="toggleElement cursor-pointer" data-selector="#menu"><img src="src/resources/hamburger.png" /></div>
</div>
<div id="menu" class="hidden">
<div id="menu" class="hidden overlay-map">
<div class="menuInner">
<div class="menuHeader">Locations</div>
<div class="maplist">
Expand All @@ -45,62 +99,6 @@
</div>
</div>
</div>
<div id="mapdiv" class="zoomed" style="width: 100vw; height: 100vh; background-color: #ffffff;"></div>
<div id="partyWindow" class="popupWindow hidden">
<div class="popupInner">
<div class="popupHeader">
<div class="d-flex align-items-center">
<div id="partyWindowTitle" class="popupWindowTitle divider flex-fill">Party Search</div>
<div class="small text-nowrap districts_info">Districts: <span id="partyWindowDistricts"></span></div>
<div class="closeButton toggleElement cursor-pointer align-self-stretch" data-selector="#partyWindow">x</div>
</div>
<div class="d-flex search_type_filters">
<div>
<input type="checkbox" checked id="search_type_toggle_0" class="search_type_toggle" data-id="0"/>
<label for="search_type_toggle_0">Hunting (<span class="search_type_count_0">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_1" class="search_type_toggle" data-id="1"/>
<label for="search_type_toggle_1">Mission (<span class="search_type_count_1">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_2" class="search_type_toggle" data-id="2"/>
<label for="search_type_toggle_2">Quest (<span class="search_type_count_2">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_3" class="search_type_toggle" data-id="3"/>
<label for="search_type_toggle_3">Trade (<span class="search_type_count_3">0</span>)</label>
</div>
<div>
<input type="checkbox" checked id="search_type_toggle_4" class="search_type_toggle" data-id="4"/>
<label for="search_type_toggle_4">Guild (<span class="search_type_count_4">0</span>)</label>
</div>
</div>
<table id="partyWindowTableHeader" class="table">
<thead>
<tr class="row hide-on-mobile">
<th class="header text-start">Party Leader</th>
<th class="header minw-10rem">Region</th>
<th class="header">Size</th>
<th class="header">District</th>
<th class="header text-start">Description</th>
</tr>
<tr class="row show-on-mobile">
<th class="header">Party Details</th>
</tr>
</thead>
</table>
</div>
<div class="popupContent">
<table id="partyWindowTable" class="table">
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>

<script src="index.mjs" type="module"></script>
</body>
</html>
6 changes: 2 additions & 4 deletions GuildWarsPartySearch.NodeJSServer/index.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@ async function selectMapId(map_id) {
}

function updateHash() {
var zoom = map.getZoom();
var point = project(map.getCenter());
const zoom = map.getZoom();
const point = project(map.getCenter());

const url = new URL(window.location.href);
url.searchParams.set("v", 1);
Expand Down Expand Up @@ -494,8 +494,6 @@ function areaLabel(data) {
}

function locationMarker(data) {
let label = data.label || data.name;
let divId = data.mapId ? " id='" + data.mapId + "'" : "";
const icon_html = `<div class="holder" data-map-id="${data.mapId || ''}">
<div class="icon" style="background-image:url('resources/icons/${data.type}.png');"></div>
<div class="label">${data.label || data.name}</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@import 'src/libs/leaflet/1.9.4/leaflet.css';
@import 'src/libs/leaflet.draw/0.2.3/leaflet.draw.css';
@import '../libs/leaflet/1.9.4/leaflet.css';
@import '../libs/leaflet.draw/0.2.3/leaflet.draw.css';

@import 'src/css/utilities';
@import 'utilities';



@font-face{
font-family: "Fremont";
src: url(./src/fonts/Fremont.woff)
src: url(../fonts/Fremont.woff)
}

body, html {
Expand Down Expand Up @@ -55,7 +55,6 @@ body {
color: #ffffff;
right: 10px;
top: 10px;
z-index: 1000;
font-weight: bold;
a {
text-decoration: none;
Expand All @@ -65,19 +64,18 @@ body {

#menu {
position: absolute;
right: 0px;
top: 0px;
right: 0;
top: 0;
height: 100%;
min-height: 100%;
width: 300px;
z-index: 9999;
padding: 0;
text-align: left;
background: rgba(0, 0, 0, 0.90);
opacity: 1;
transition: width .3s, opacity 0.3s;
border-left: solid 1px #808080;
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.9);
box-shadow: 0 0 30px 0 rgba(0,0,0,0.9);
color: #ffffff;
overflow-y: auto;
overflow-x:hidden;
Expand All @@ -95,18 +93,15 @@ body {
text-decoration: none;
}
&.hidden {
width:0px;
width:0;
opacity: 0;
pointer-events: none;
}
}

.menuHeader {
font-size: 14pt;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
padding: 10px 5px;
flex: 0 0 auto;
}

Expand Down Expand Up @@ -312,7 +307,6 @@ body {
justify-content: center;
height:100vh;
width:100vw;
z-index: 10000;
padding: 0;
top:0;
left:0;
Expand Down Expand Up @@ -421,4 +415,8 @@ table {
font-size:90%;
}
}
@import 'src/css/mobile';
.overlay-map {
z-index:401;
}

@import 'mobile';
4 changes: 0 additions & 4 deletions GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,6 @@
display:none !important;
}

#partyWindowTable {
margin-left: 5px;
}

#partyWindowTableHeader th,
#partyWindowTable td {
min-width:50%;
Expand Down
47 changes: 26 additions & 21 deletions GuildWarsPartySearch.NodeJSServer/src/css/utilities.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,35 @@
@use "sass:map";

$rems:();
$percent:();
@for $i from 1 through 10 {
$rems: map.set($rems, "#{$i}rem", "#{$i}rem");
$rems: map.set($rems, "#{$i*5}rem", "#{$i*5}rem");
$rems: map.set($rems, "#{$i*10}rem", "#{$i*10}rem");
$percent: map.set($percent, #{$i*10}, "#{$i*10}%");
}
$styles:(pe:'padding-right',ps:'padding-left',w:'width',minw:'min-width');

@each $class, $styleKey in $styles {
@each $unit, $style in $rems {
.#{$class}-#{$unit} {
#{$styleKey}:#{$style} !important;
}
}
@each $unit, $style in $percent {
.#{$class}-#{$unit} {
#{$styleKey}:#{$style} !important;
}
}
}


.d-flex {
display:flex;
}
.text-start {
text-align:left !important;
}
.ps-1 {
padding-left:1rem;
}
.pe-1 {
padding-right:1rem;
}
.collapsed {
display: none !important;
}
Expand Down Expand Up @@ -59,19 +79,4 @@
}
.align-self-stretch {
align-self: stretch;
}
.w-50 {
width:50%;
}
.w-20 {
width:20%;
}
.w-40 {
width:40%;
}
.minw-5rem {
min-width:5rem !important;
}
.minw-10rem {
min-width:10rem !important;
}
11 changes: 2 additions & 9 deletions GuildWarsPartySearch.NodeJSServer/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,8 @@ import * as fs from "fs";
// https://vitejs.dev/config/
export default defineConfig({
build: {
minify: false,
emptyOutDir: true,
rollupOptions: {
output: {
entryFileNames: `assets/[name]-${new Date().getTime()}.js`,
chunkFileNames: `assets/[name]-${new Date().getTime()}.js`,
assetFileNames: `assets/[name]-${new Date().getTime()}.[ext]`
},
},
minify: 'esbuild',
emptyOutDir: true
},
plugins: [
{
Expand Down

0 comments on commit d3f0a81

Please sign in to comment.