Initial commit
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
# Files that are not appropriate for git
|
||||
created.txt
|
||||
description.txt
|
||||
title.txt
|
||||
main.zvg
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
+36
@@ -0,0 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>OKEY Assistant</title>
|
||||
|
||||
<meta name="robots" content="noindex">
|
||||
<meta name="description" content="Metin2 Okey Card Game assistant. Win more with your games with computer assisted intel.">
|
||||
<meta name="author" content="Thayol">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main-container>
|
||||
<main-panel>
|
||||
<panel-title>Deck</panel-title>
|
||||
<card-container id="deck">
|
||||
</card-container>
|
||||
</main-panel>
|
||||
<main-panel>
|
||||
<panel-title>Hand</panel-title>
|
||||
<card-container id="hand">
|
||||
</card-container>
|
||||
</main-panel>
|
||||
<main-panel>
|
||||
<button onclick="reset();">Reset</button>
|
||||
<button onclick="document.getElementById('result').innerHTML = getPatterns();">Analize</button>
|
||||
<br>
|
||||
<div style="margin-top: 1.4em;" id="result">?</div>
|
||||
</main-panel>
|
||||
</main-container>
|
||||
<script src="script.js">
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
var deck = {};
|
||||
var hand = {};
|
||||
|
||||
var deckElement = document.getElementById('deck');
|
||||
var handElement = document.getElementById('hand');
|
||||
|
||||
var colors = [ "red", "blue", "yellow" ];
|
||||
var handSize = 5;
|
||||
var maxNumber = 8;
|
||||
|
||||
fillDeck();
|
||||
updateUI();
|
||||
|
||||
function cardToId(card) {
|
||||
return card.color + "_" + card.number.toString();
|
||||
}
|
||||
|
||||
function cardToElement(card, forDeck = false) {
|
||||
var element = document.createElement("okey-card");
|
||||
element.innerHTML = card.number.toString();
|
||||
|
||||
if (forDeck) {
|
||||
element.setAttribute("onclick", "drawCard('" + cardToId(card) + "')");
|
||||
if (isHandFull()) {
|
||||
element.setAttribute("hand-full", "");
|
||||
}
|
||||
}
|
||||
else {
|
||||
element.setAttribute("onclick", "discard('" + cardToId(card) + "')");
|
||||
}
|
||||
|
||||
if (forDeck && card.drawn) {
|
||||
element.classList.add("drawn-" + card.color);
|
||||
}
|
||||
else {
|
||||
element.classList.add(card.color);
|
||||
element.setAttribute("clickable", "");
|
||||
}
|
||||
|
||||
return element.outerHTML;
|
||||
}
|
||||
|
||||
function isHandFull() {
|
||||
return Object.entries(hand).length >= handSize;
|
||||
}
|
||||
|
||||
function fillDeck() {
|
||||
for (let color of colors)
|
||||
{
|
||||
for (let i = 1; i <= maxNumber; i++)
|
||||
{
|
||||
let card = {
|
||||
color: color,
|
||||
number: i,
|
||||
drawn: false
|
||||
};
|
||||
|
||||
deck[cardToId(card)] = card;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function discard(cardId) {
|
||||
delete hand[cardId];
|
||||
updateUI();
|
||||
}
|
||||
|
||||
function drawCard(cardId) {
|
||||
if (!deck[cardId].drawn && !isHandFull()) {
|
||||
hand[cardId] = deck[cardId];
|
||||
deck[cardId].drawn = true;
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function getPatterns(thisHand = null) {
|
||||
if (thisHand == null) {
|
||||
thisHand = hand;
|
||||
}
|
||||
|
||||
let patterns = [];
|
||||
|
||||
for (let i = 1; i <= maxNumber; i++) {
|
||||
sameNumber = 0;
|
||||
for (let card of Object.values(thisHand)) {
|
||||
if (card.number == i) {
|
||||
sameNumber++;
|
||||
}
|
||||
}
|
||||
|
||||
if (sameNumber >= colors.length) {
|
||||
let patternName = i + "-" + i + "-" + i;
|
||||
patterns[patternName] = (i + 1) * 10;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(Object.keys(patterns));
|
||||
|
||||
patterns = patterns.sort((a,b) => (a.last_nom > b.last_nom) ? -1 : ((b.last_nom > a.last_nom) ? 1 : 0));
|
||||
|
||||
return Object.keys(patterns);
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
handElement.innerHTML = "";
|
||||
for (let card of Object.values(hand)) {
|
||||
handElement.innerHTML += cardToElement(card);
|
||||
}
|
||||
|
||||
deckElement.innerHTML = "";
|
||||
for (let card of Object.values(deck)) {
|
||||
deckElement.innerHTML += cardToElement(card, true);
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
deck = {};
|
||||
hand = {};
|
||||
fillDeck();
|
||||
updateUI();
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
:root {
|
||||
--background: #121212;
|
||||
--surface: #2c2c2c;
|
||||
--text: #ffffff;
|
||||
--text-disabled: #3d3d3d;
|
||||
|
||||
--background-variant: #ffffff;
|
||||
--surface-variant: #d0d0d0;
|
||||
--text-variant: #000000;
|
||||
|
||||
--primary: #a5d6a7;
|
||||
--primary-light: #d7ffd9;
|
||||
--primary-dark: #75a478;
|
||||
|
||||
--primary-variant: #388e3c;
|
||||
--primary-variant-light: #6abf69;
|
||||
--primary-variant-dark: #00600f;
|
||||
|
||||
--red-card: #ef9a9a;
|
||||
--red-card-variant: #d32f2f;
|
||||
--red-card-background: #9a0007;
|
||||
|
||||
--blue-card: #90caf9;
|
||||
--blue-card-variant: #1976d2;
|
||||
--blue-card-background: #004ba0;
|
||||
|
||||
--yellow-card: #fff59d;
|
||||
--yellow-card-variant: #fbc02d;
|
||||
--yellow-card-background: #c49000;
|
||||
|
||||
--card-inset-shadow: #000000;
|
||||
--card-border-color: #ffffff;
|
||||
|
||||
--card-height: 70px;
|
||||
--card-width: 55px;
|
||||
--card-font-size: 30pt;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main-panel {
|
||||
display: block;
|
||||
max-width: 550px;
|
||||
margin: 10px auto 0 auto;
|
||||
padding: 20px;
|
||||
background-color: var(--surface);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
panel-title {
|
||||
display: block;
|
||||
margin: 0 0 0.67em 0;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: var(--red-card-variant);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: var(--blue-card-variant);
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: var(--yellow-card-variant);
|
||||
}
|
||||
|
||||
.drawn-red {
|
||||
background-color: var(--red-card);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.drawn-blue {
|
||||
background-color: var(--blue-card);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.drawn-yellow {
|
||||
background-color: var(--yellow-card);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
card-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
card-container#deck {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
okey-card {
|
||||
transition-duration: 0.5s;
|
||||
flex: 0 0 auto;
|
||||
display: inline-block;
|
||||
width: var(--card-width);
|
||||
height: var(--card-height);
|
||||
line-height: var(--card-height);
|
||||
font-size: var(--card-font-size);
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: var(--text-variant);
|
||||
box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 rgba(0, 0, 0, 0);
|
||||
user-select: none;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
okey-card[clickable] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
okey-card:hover, okey-card:active {
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
okey-card[clickable]:not([hand-full]):hover {
|
||||
box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 var(--card-border-color);
|
||||
}
|
||||
|
||||
okey-card[clickable]:not([hand-full]):active {
|
||||
box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 var(--card-border-color), inset 0 0 0 100px var(--primary);
|
||||
}
|
||||
|
||||
okey-card:not([clickable]):active, okey-card[hand-full]:active {
|
||||
transition-duration: 0.7s;
|
||||
background-color: var(--background);
|
||||
}
|
||||
Reference in New Issue
Block a user