initial commit

README.md

@@ -0,0 +1,3 @@
+Планировщик персонажа Fallout 4
+
+https://lzrdblzzrd.github.io/f4cp/

css/style.css

@@ -0,0 +1,233 @@
+html {
+	border: 1px solid #42454a;
+}
+body {
+	color: #FFF;
+	background-color: #36393f;
+}
+.row {
+    background: #2f3136;
+}
+
+::-webkit-scrollbar {
+    width: 2px;
+    background-color: transparent;
+}
+::-webkit-scrollbar-button {
+    display: none;
+}
+::-webkit-scrollbar-corner {
+    background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #99aab5;
+}
+
+.container-fluid {
+	background-color: #202225;
+}
+.navbar {
+    margin-bottom: 0;
+    border: none;
+}
+.navbar-default, .navbar-brand  {
+	color: #fff !important;
+    background-color: #202225;
+    border: none;
+}
+
+.btn {
+    border-radius: 0;
+}
+
+
+
+.col-md-3 {
+	color: #FFF;
+	background-color: #2f3136;
+	border: 1px solid #42454a;
+}
+.col-md-3>h3, .col-md-3>h4, .col-md-3>span{
+	font-family: monospace;
+	margin-top: 0px;
+	margin-bottom: 0px;
+	font-size: 25px;
+	text-align: center;
+}
+.col-md-3>h4 {
+}
+.include-bobbleheads {
+	margin-top: -20px;
+}
+
+.list-group-item:first-child, .list-group-item:last-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.list-special {
+	font-family: monospace;
+	font-size: 20px;
+    font-weight: bold;
+	color: #2f3136;
+	background-color: #2f3136;
+}
+.list-group-item {
+	color: #FFF;
+	background-color: #2f3136;
+	border: 1px solid #42454a;
+}
+.list-special input {
+    display: inline-block;
+    width: 45px;
+	height: 25px;
+}
+.container-fluid>h4 {
+	
+}
+
+
+
+.summary {
+	padding-top: 25px;
+}
+.summary>li {
+	border-top: 2px solid #42454a;
+	font-size: 20px;
+	font-weight: bolder;
+	font-family: monospace;
+}
+.summary>:first-child {
+	border-top: none;
+}
+.summary>ul>li {
+	border-bottom: 1px solid #42454a;
+	margin-top: -2px;
+	font-style: italic;
+}
+.summary>ul>:last-child {
+	margin-bottom: 10px;
+	border-bottom: none;
+}
+
+
+
+.form-control {
+    color: #FFF;
+    background-color: #36393f;
+	border: 1px solid #42454a;
+}
+select.form-control {
+  -moz-appearance: none;
+   -webkit-appearance: none;
+   appearance: none;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    
+}
+input[type=number] {
+    -moz-appearance: textfield; /* Firefox */
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: #36393f;
+    opacity: 1;
+	margin: 0;
+}
+
+
+
+.col-md-9 {
+	color: #FFF;
+	background-color: #36393f;
+	padding-right: 0;
+    padding-left: 0;
+}
+.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
+	text-align: center;
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+	border-left: 1px solid #42454a; border-right: 1px solid #42454a;
+	border-top: none;
+}
+
+
+
+.popover {
+	background: #202225;
+	border-radius: 0px;
+}
+.popover-title {
+	font-size: 20px;
+	font-weight: bolder;
+    color: #FFF;
+	background: #2f3136;
+	border: none;
+	border-radius: 0px;
+}
+.popover-content {
+	font-style: italic;
+    color: #FFF;
+	background: #36393f;
+	border-radius: 0px;
+}
+.popover-content>.no-rank {
+	border-bottom: 1px solid #42454a;
+	padding-bottom: 10px;
+}
+.popover-content>:last-child {
+	border-bottom: none;
+	margin: none;
+}
+.popover.left>.arrow:after {
+	border-left-color: #1a1b1e;
+	color: #202225;
+}
+popover.right>.arrow:after{
+	border-right-color: #1a1b1e;
+	color: #202225;
+}
+.popover.top>.arrow:after {
+	border-top-color: #1a1b1e;
+	color: #202225;
+}
+.popover.bottom>.arrow:after {
+	border-bottom-color: #1a1b1e;
+	color: #202225;
+}
+
+.has-rank {
+	color: #FFFDE0;
+	font-style: normal;
+	font-weight: bold;
+    background-color: rgba(0,224,167, 0.1);
+    padding: 2px;
+    border-radius: 0px;
+}
+
+
+
+.perk {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #42454a;
+    position: relative;
+	left: 50%;
+    transform: translate(-50%);
+}
+.overlay {
+	font-size: 20px;
+	bottom: 0px;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    color: #FFF;
+    font-weight: bold;
+    background-color: rgba(35,39,42, 0.75)    /* 40% opaque red */  
+}
+.unavailable {
+    opacity: 0.1;
+}

index.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Планировщик персонажа Fallout 4</title>
+		<meta charset="utf-8" />
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
+		<link rel="stylesheet" href="css/style.css"/>
+		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
+		<script type="text/javascript" >
+			(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+			m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+			(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+			ym(75487888, "init", {
+				clickmap:true,
+				trackLinks:true,
+				accurateTrackBounce:true,
+				webvisor:true
+			});
+		</script>
+		<noscript><div><img src="https://mc.yandex.ru/watch/75487888" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+	</head>
+	<body>
+		<nav class="navbar navbar-default">
+			<div class="container-fluid">
+				<div class="navbar-header">
+					<a class="navbar-brand" onclick="window.open('https://fallout.fandom.com/ru/wiki/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%D0%BD%D0%BE%D1%81%D1%82%D0%B8_Fallout_4');">
+						<img alt="Brand" src="img/brand.png" style="height:20px;width:20px;">
+					</a>
+					<a class="navbar-brand" onclick="window.open('https://fallout.fandom.com/ru/wiki/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%D0%BD%D0%BE%D1%81%D1%82%D0%B8_Fallout_4');">Планировщик персонажа Fallout 4</a>
+					<div class="navbar-form navbar-left">
+						<a class="btn btn-danger" href="" role="button">Сбросить</a>
+						<a class="btn btn-primary saveToFile" role="button">Сохранить как скриншот</a>
+						<a class="btn btn-success rainbow" href="https://lzrdblzzrd.github.io/" role="button">С ❤ от lzrdblzzrd</a>
+					</div>
+				</div>
+			</div>
+		</nav>
+		<div class="container-fluid">
+			<div class="row">
+				<div class="col-md-3">
+					<h3>S.P.E.C.I.A.L.</h3>
+					<h3 class="bold points-left">Загрузка...</h3>
+					<ul class="list-group list-special">
+						<li data-special="st" data-special-ru="СИЛ" class="list-group-item clearfix">
+							СИЛА
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+						<li data-special="pe" data-special-ru="ВСП" class="list-group-item clearfix">
+							ВОСПРИЯТИЕ
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+						<li data-special="en" data-special-ru="ВЫН" class="list-group-item clearfix">
+							ВЫНОСЛИВОСТЬ
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+						<li data-special="ch" data-special-ru="ХАР" class="list-group-item clearfix">
+							ХАРИЗМА
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+						<li data-special="in" data-special-ru="ИНТ" class="list-group-item clearfix">
+							ИНТЕЛЛЕКТ
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+						<li data-special="ag" data-special-ru="ЛОВ" class="list-group-item clearfix">
+							ЛОВКОСТЬ
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+						<li data-special="lu" data-special-ru="УДЧ" class="list-group-item clearfix">
+							УДАЧА
+
+							<span class="pull-right">
+								<button class="btn btn-primary btn-xs btn-dec"><i class="glyphicon glyphicon-minus"></i></button>
+								<input type="number" min="1" max="10" class="form-control" value="1" readonly/>
+								<button class="btn btn-primary btn-xs btn-inc"><i class="glyphicon glyphicon-plus"></i></button>
+							</span>
+						</li>
+					</ul>
+					<div class="include-bobbleheads">
+						<input type="checkbox" class="include-bobbleheads-check"/> Собраны все 7 пупсов S.P.E.C.I.A.L. (не сохраняется)</input>
+					</div>
+					<h4>Сводка:</h4>
+					<span class="required-level">Загрузка...</span>
+					<ul class="summary">
+					</ul>
+				</div>
+				<div class="col-md-9">
+					<table class="table"></table>
+				</div>
+			</div>
+		</div>
+		<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
+		<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+		<script src="js/perks.js"></script>
+		<script src="js/scripts.js"></script>
+		<script>
+			function stop() {
+				return false
+			}
+
+			document.ondragstart = stop;
+			document.onselectstart = stop;
+			document.oncontextmenu = stop;
+
+			document.onkeydown = function(e) {
+				if(event.keyCode == 123) { return stop() }
+				if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){ return stop() }
+				if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){ return stop() }
+				if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){ return stop() }
+				if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){ return stop() }
+			}
+		</script>
+		<style>
+			html, .form-control {cursor: url(cursors/normal.cur), default;}
+			.perk, .btn-success {cursor: url(cursors/help.cur), pointer;}
+			.btn-inc {cursor: url(cursors/miniplus.cur), pointer;}
+			.btn-dec {cursor: url(cursors/miniminus.cur), pointer;}
+			.btn-danger {cursor: url(cursors/danger.cur), pointer;}
+			.saveToFile {cursor: url(cursors/plus.cur), pointer;}
+			.include-bobbleheads-check {cursor: url(cursors/miniplus.cur), pointer;}
+			.include-bobbleheads-check:checked {cursor: url(cursors/miniminus.cur), pointer;}
+		</style>
+	</body>
+</html>

js/scripts.js

@@ -0,0 +1,306 @@
+var totalPoints = 28;
+
+var renderPerks = function () {
+    var html = '',
+        special = getSPECIAL();
+		specialRu = getSPECIALru();
+
+    html += '<tr>';
+    for (var i = 0; i < special.length; ++i) {
+        html += '<th>' + specialRu[i].special.toUpperCase() + ': ' + special[i].value + '</th>';
+    }
+    html += '</tr>';
+
+    for (var i = 0; i <= 9; ++i) {
+        html += '<tr>';
+        for (var j = 0; j < perks.length; ++j) {
+            var perk = perks[j].perks[i],
+                className = i > special[j].value - 1 ? ' unavailable' : '';
+
+            if (!perk.currentRank) {
+                perk.currentRank = 0;
+            }
+			if (className == ' unavailable') {
+                perk.currentRank = 0;
+            }
+
+            var title = '';
+            title += perk.ranked.map(function (rank) {
+                var rankClass = perk.currentRank >= rank.rank ? 'has-rank' : 'no-rank';
+                return '<p class=' + rankClass + '>Ранг ' + rank.rank + ' (' + rank.level + '): ' + rank.description + '</p>';
+            }).join('');
+
+            html += '<td><div oncontextmenu="return false;" data-placement="left" data-trigger="hover" data-original-title="' + perk.name_ru + '" rel="popover" data-html="true" data-content="' + title + '" data-i="' + i + '" data-j="' + j + '" class="perk' + className + '" style="background-image:url(\'img/' + perk.img + '\');">';
+            if (className !== ' unavailable') {
+                html += '<div class="overlay">&nbsp;' + perk.currentRank + ' / ' + perk.ranks + '&nbsp;</div>';
+            }
+            html += '</td>';
+        }
+        html += '</tr>';
+    }
+    $('.table').html(html);
+}
+
+var getJSON = function () {
+    return btoa(JSON.stringify({
+        s: getSPECIALShort(),
+        r: getRanks()
+    }));
+}
+
+var getRanks = function () {
+    var ranks = [];
+    for (var i = 0; i < perks.length; ++i) {
+        for (var j = 0; j < perks[i].perks.length; ++j) {
+            var perk = perks[i].perks[j];
+            if (perk.currentRank && perk.currentRank > 0) {
+                var item = {};
+                item[perk.name] = perk.currentRank;
+                ranks.push(item);
+            }
+        }
+    }
+
+    return ranks;
+}
+
+var getSPECIALShort = function () {
+    var specs = [];
+    $('input[type="number"]').each(function () {
+        specs.push($(this).val());
+    });
+    return specs;
+};
+
+var getSPECIAL = function () {
+    return $('[data-special]').map(function () {
+        return {
+            special: $(this).data('special'),
+            value: $(this).find('input').val()
+        };
+    });
+};
+
+var getSPECIALru = function () {
+    return $('[data-special-ru]').map(function () {
+        return {
+            special: $(this).data('special-ru'),
+        };
+    });
+};
+
+var requiredLevel = function () {
+    var total = 0;
+    for (var i = 0; i < perks.length; ++i) {
+        for (var j = 0; j < perks[i].perks.length; ++j) {
+            total += perks[i].perks[j].currentRank;
+        }
+    }
+
+    var remaining = totalPoints - getAllocatedPoints();
+    if (remaining < 0) {
+        total += remaining * -1;
+    }
+
+    var maxLevel = 0;
+    for (var i = 0; i < perks.length; ++i) {
+        for (var j = 0; j < perks[i].perks.length; ++j) {
+            for (var k = 0; k < perks[i].perks[j].currentRank; ++k) {
+                if (perks[i].perks[j].ranked[k].level > maxLevel) {
+                    maxLevel = perks[i].perks[j].ranked[k].level;
+                }
+            }
+        }
+    }
+
+    if (maxLevel > total)
+        total = maxLevel;
+
+    return total;
+}
+
+var renderRequiredLevel = function () {
+    $('.required-level').text('Необходимый уровень: ' + requiredLevel());
+}
+
+var renderAll = function () {
+	renderPerks();
+    calculatePoints();
+    renderRequiredLevel();
+    renderSummary();
+    window.location.hash = '#' + getJSON();
+	$('.perk').mousedown(function(e) {
+		var $container = $(this),
+            i = parseInt($container.data('i')),
+            j = parseInt($container.data('j')),
+            perk = perks[j].perks[i],
+			special = getSPECIAL();
+			className = i > special[j].value - 1 ? ' unavailable' : '';
+			if (e.which === 1 && perk.currentRank < perk.ranks && className !== ' unavailable') {
+				perk.currentRank += 1;
+				renderAll();
+			} else if (e.which === 3 && perk.currentRank != 0 && className !== ' unavailable') {
+				perk.currentRank -= 1;
+				renderAll();
+			};
+	});
+};
+
+var calculatePoints = function () {
+	
+    var remaining = totalPoints - getAllocatedPoints();
+    if (remaining <= 0) {
+        remaining = 0;
+		$(".points-left").hide(250);
+    } else {
+		$(".points-left").show(250);
+	};
+    $pointsLeft.text(remaining + ' очков осталось');
+}
+
+var getAllocatedPoints = function () {
+    return $('[data-special] input').map(function () {
+        return parseInt($(this).val());
+    }).get().reduce(function (prev, curr) {
+        return prev + curr;
+    });
+}
+
+var $pointsLeft = $('.points-left');
+$includeBobbleheads = $('.include-bobbleheads-check');
+
+var includeBobbleheads = function () {
+	return $includeBobbleheads.is(':checked');
+}
+
+var pointsRemaining = function () {
+    return parseInt($pointsLeft.text());
+}
+
+var renderSummary = function () {
+    var html = '';
+    for (var i = 0; i < perks.length; ++i) {
+        for (var j = 0; j < perks[i].perks.length; ++j) {
+            var perk = perks[i].perks[j];
+			if (perk.currentRank && perk.currentRank > 0) {
+				html += '<li>' + perk.name_ru + ': ' + perk.currentRank + '/' + perk.ranks + '</li>';
+				html += '<ul>';
+				for (var k = 0; k < perk.currentRank; ++k) {
+					html += '<li>' + perk.ranked[k].description + '</li>';
+				}
+				html += '</ul>';
+			}
+        }
+    }
+
+    $('.summary').html(html);
+    $('[rel="popover"]').popover();
+}
+
+$(function () {
+    var hash = window.location.hash.replace('#', '');
+    if (hash.length > 0) {
+        var load = JSON.parse(atob(hash));
+        $('input[type=number]').each(function (index) {
+            $(this).val(load.s[index]);
+        });
+
+        for (var i = 0; i < load.r.length; ++i) {
+            var key = Object.keys(load.r[i])[0],
+                value = load.r[i][key];
+
+            for (var j = 0; j < perks.length; ++j) {
+                for (var k = 0; k < perks[j].perks.length; ++k) {
+                    var perk = perks[j].perks[k];
+                    if (perk.name === key) {
+                        perk.currentRank = value;
+                    }
+                }
+            }
+        }
+    }
+
+    renderAll();
+
+    $includeBobbleheads.on('click', function () {
+		if (includeBobbleheads()) {
+			totalPoints += 7;
+		} else {
+			totalPoints -= 7;
+		}
+		renderAll();
+    });
+
+    $('.btn-inc').on('click', function () {
+        var $li = $(this).parent().parent(),
+            $input = $li.find('input'),
+            value = parseInt($input.val()),
+            remaining = totalPoints - getAllocatedPoints();
+
+        if (value < 10) {
+            $input.val(value + 1);
+        }
+
+        renderAll();
+    });
+
+    $('.btn-dec').on('click', function () {
+        var $li = $(this).parent().parent(),
+            $input = $li.find('input'),
+            value = parseInt($input.val()),
+            special = $li.data('special');
+
+        if (value > 1) {
+            $input.val(value - 1);
+
+            for (var i = 0; i < perks.length; ++i) {
+                if (perks[i].special === special) {
+                    for (var j = value - 1; j < perks[i].perks.length; ++j) {
+                        perks[i].perks[j].currentRank = 0;
+                    }
+                }
+            }
+        }
+
+        renderAll();
+    });
+
+    $('body').on('click', '.btn-inc-perk, .btn-dec-perk', function () {
+        var $container = $(this).parent().parent(),
+            i = parseInt($container.data('i')),
+            j = parseInt($container.data('j')),
+            perk = perks[j].perks[i],
+            incrementing = $(this).hasClass('btn-inc-perk');
+
+        if (!perk.currentRank)
+            perk.currentRank = 0;
+
+        if (incrementing) {
+            if (perk.currentRank < perk.ranks) {
+				perk.currentRank += 1;
+            }
+        } else {
+            if (perk.currentRank > 0) {
+                perk.currentRank -= 1;
+            }
+        }
+
+        renderAll();
+    });
+});
+
+$('.saveToFile').on('click', function () {
+	html2canvas($(".col-md-3")[0]).then(function(canvas) {
+		canvas.toBlob(function(blob) {
+			saveAs(blob, "F4CP Билд.png");
+		});
+    });
+});
+
+var angle = sessionStorage['angle'] || '0';
+
+(function RainbowColor() {
+	$(".rainbow").css({"background-color":"hsla(" + (180 + angle) + ", 100%, 50%, 50%)", "color":"hsl(" + angle + ", 100%, 50%)", "border-color":"hsl(" + (180 + angle) + ", 100%, 50%"});
+	(angle < 360 ? angle++ : angle = 0); sessionStorage['angle'] = angle;
+	requestAnimationFrame(RainbowColor);
+})();