css fav status

update
2024-04-11 00:48:15 +09:00 · 2024-04-11 00:48:14 +09:00
11 changed files with 138 additions and 562 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 431afd6a3750fdfbc6d99b1e7c2a1d305d47a27c
+Subproject commit 77f615901cfb5d9b07a29c122643192aa3c2b89a
--- a/scpt/card_number_push.zsh
+++ b/scpt/card_number_push.zsh
@ -1,16 +0,0 @@
-#!/bin/zsh
-d=${0:a:h}
-dd=${0:a:h:h}
-
-url=https://syui.ai/img
-
-json=$dd/public/json/card.json
-n=`cat $json|jq "length"`
-n=`expr $n - 1`
-
-for ((i=0;i<=14;i++))
-do
-	sid=`cat $json|jq -r ".[$i].src"`
-	id=`cat $json|jq -r ".[$i].id"`
-	curl -sL $url/${sid}.png -o ~/ai/yui/content/img/${id}.png
-done
--- a/scpt/convert.zsh
+++ b/scpt/convert.zsh
@ -2,6 +2,9 @@
 d=${0:a:h}
 dd=${0:a:h:h}

+echo "1 : [d]efault(no), [b]lack, [s]ilver"
+read
+
 url=syui.ai/img

 case $OSTYPE in
@ -12,14 +15,27 @@ case $OSTYPE in
 esac

 dir=$dd/public/card
-static=$dd/static/img
+static=$dd/public/static/img
 json=$dd/public/json/card.json
 mkdir -p $dir
 mkdir -p $static
 n=`cat $json|jq "length"`
 n=`expr $n - 1`
-bg=$static/card_bg.png
-br=$static/card_br.png
+
+case $1 in
+	silver|s)
+		bg=$static/card_bg_silver.png
+		br=$static/card_br.png
+		;;
+	black|b)
+		bg=$static/card_bg_black.png
+		br=$static/card_br.png
+		;;
+	default|d|*)
+		bg=$static/card_bg.png
+		br=$static/card_br.png
+		;;
+esac

 cd $dir
 export NVM_DIR="$HOME/.nvm"
@ -34,7 +50,6 @@ do
 	s=$static/${sid}.png
 	id=`cat $json|jq -r ".[$i].id"`
 	o=$dir/card_$id.png
-	gif=$dir/card_$id.gif

 	if [ -f $o ];then
 		continue
--- a/scpt/convert_origin.zsh
+++ b/scpt/convert_origin.zsh
@ -1,53 +0,0 @@
-#!/bin/zsh
-d=${0:a:h}
-dd=${0:a:h:h}
-
-url=syui.ai/img
-
-case $OSTYPE in
-	darwin*)
-		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
-	linux*)
-		path_nvm_sh="";;
-esac
-
-dir=$dd/public/card
-static=$dd/static/img
-json=$dd/public/json/card.json
-mkdir -p $dir
-mkdir -p $static
-n=`cat $json|jq "length"`
-n=`expr $n - 1`
-bg=$static/card_bg_origin.png
-br=$static/card_br.png
-
-cd $dir
-export NVM_DIR="$HOME/.nvm"
-[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
-nvm use 17
-nvm i squoosh-cli
-
-for ((i=0;i<=$n;i++))
-do
-	p=`cat $json|jq -r ".[$i].p"`
-	sid=`cat $json|jq -r ".[$i].src"`
-	s=$static/${sid}.png
-	id=`cat $json|jq -r ".[$i].id"`
-	o=$dir/card_origin_${id}.png
-
-	if [ -f $o ];then
-		continue
-	fi
-
-	if [ ! -f $s ];then
-		curl -sL $url/yui_${sid}.png -o $s
-	fi
-
-	if [ ! -f $o ] && [ -z "`echo $s|grep ai_model`" ];then
-		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
-		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
-		squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' $o
-		rm $o.back
-	fi
-
-done
--- a/scpt/convert_origin2.zsh
+++ b/scpt/convert_origin2.zsh
@ -1,53 +0,0 @@
-#!/bin/zsh
-d=${0:a:h}
-dd=${0:a:h:h}
-
-url=syui.ai/img
-
-case $OSTYPE in
-	darwin*)
-		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
-	linux*)
-		path_nvm_sh="";;
-esac
-
-dir=$dd/public/card
-static=$dd/static/img
-json=$dd/public/json/card.json
-mkdir -p $dir
-mkdir -p $static
-n=`cat $json|jq "length"`
-n=`expr $n - 1`
-bg=$static/card_bg_origin2.png
-br=$static/card_br.png
-
-cd $dir
-export NVM_DIR="$HOME/.nvm"
-[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
-nvm use 17
-nvm i squoosh-cli
-
-for ((i=0;i<=$n;i++))
-do
-	p=`cat $json|jq -r ".[$i].p"`
-	sid=`cat $json|jq -r ".[$i].src"`
-	s=$static/${sid}.png
-	id=`cat $json|jq -r ".[$i].id"`
-	o=$dir/card_origin2_${id}.png
-
-	if [ -f $o ];then
-		continue
-	fi
-
-	if [ ! -f $s ];then
-		curl -sL $url/yui_${sid}.png -o $s
-	fi
-
-	if [ ! -f $o ] && [ -z "`echo $s|grep ai_model`" ];then
-		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
-		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
-		squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' $o
-		rm $o.back
-	fi
-
-done
--- a/scpt/convert_s.zsh
+++ b/scpt/convert_s.zsh
@ -1,55 +0,0 @@
-#!/bin/zsh
-d=${0:a:h}
-dd=${0:a:h:h}
-
-url=syui.ai/img
-
-case $OSTYPE in
-	darwin*)
-		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
-	linux*)
-		path_nvm_sh="";;
-esac
-
-dir=$dd/public/card
-static=$dd/static/img
-json=$dd/public/json/card.json
-mkdir -p $dir
-mkdir -p $static
-n=`cat $json|jq "length"`
-n=`expr $n - 1`
-bg=$static/card_bg_s.png
-br=$static/card_bg_sr.png
-for ((i=0;i<=$n;i++))
-do
-	p=`cat $json|jq -r ".[$i].p"`
-	sid=`cat $json|jq -r ".[$i].src"`
-	s=$static/${sid}.png
-	id=`cat $json|jq -r ".[$i].id"`
-	o=$dir/test_${id}s.png
-
-	if [ -f $o ];then
-		continue
-	fi
-
-	if [ ! -f $s ];then
-		curl -sL $url/yui_${sid}.png -o $s
-	fi
-
-	#if [ ! -f $o ];then
-		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
-		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
-		rm $o.back
-	#fi
-
-done
-
-cd $dir
-export NVM_DIR="$HOME/.nvm"
-[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
-nvm use 17
-nvm i squoosh-cli
-#rm og_*
-squoosh-cli --webp '{"quality":100}' -d ./ --resize '{width:825,height:1080}' *.png
-
-#mogrify -resize 1620x2160! *.png 
--- a/scpt/gif.zsh
+++ b/scpt/gif.zsh
@ -1,59 +0,0 @@
-#!/bin/zsh
-d=${0:a:h}
-dd=${0:a:h:h}
-
-url=syui.ai/img
-
-case $OSTYPE in
-	darwin*)
-		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
-	linux*)
-		path_nvm_sh="";;
-esac
-
-dir=$dd/public/card
-static=$dd/static/img
-json=$dd/public/json/card.json
-mkdir -p $dir
-mkdir -p $static
-n=`cat $json|jq "length"`
-n=`expr $n - 1`
-bg=$static/card_bg.png
-br=$static/card_br.png
-
-for ((i=0;i<=$n;i++))
-do
-	p=`cat $json|jq -r ".[$i].p"`
-	sid=`cat $json|jq -r ".[$i].src"`
-	s=$static/${sid}.png
-	id=`cat $json|jq -r ".[$i].id"`
-	gif=$dir/card_$id.gif
-
-	if [ -f $gif ];then
-		continue
-	fi
-
-	nn=`ls $static/card_bgg_*.png|wc -l`
-	nn=$((nn - 1))
-
-	for ((ii=0;ii<=$nn;ii++))
-	do
-		title=$dir/null
-		o=${title}_${ii}.png
-		br=$static/card_bgg_${ii}.png
-		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
-		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
-		rm $o.back
-
-		export NVM_DIR="$HOME/.nvm"
-		[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
-		nvm use 17
-		nvm i squoosh-cli
-		squoosh-cli --webp '{"quality":100}' -d $dir --resize '{width:400,height:524}' $o
-
-	done
-
-	convert -layers optimize -loop 0 -delay 40 $dir/null_*.webp $gif
-	rm -f $dir/null_*
-
-done
--- a/scpt/gif_first.zsh
+++ b/scpt/gif_first.zsh
@ -1,59 +0,0 @@
-#!/bin/zsh
-d=${0:a:h}
-dd=${0:a:h:h}
-
-url=syui.ai/img
-
-case $OSTYPE in
-	darwin*)
-		path_nvm_sh="/opt/homebrew/opt/nvm/nvm.sh";;
-	linux*)
-		path_nvm_sh="";;
-esac
-
-dir=$dd/public/card
-static=$dd/static/img
-json=$dd/public/json/card.json
-mkdir -p $dir
-mkdir -p $static
-n=`cat $json|jq "length"`
-n=`expr $n - 1`
-bg=$static/card_bg.png
-br=$static/card_br.png
-
-for ((i=0;i<=$n;i++))
-do
-	p=`cat $json|jq -r ".[$i].p"`
-	sid=`cat $json|jq -r ".[$i].src"`
-	s=$static/${sid}.png
-	id=`cat $json|jq -r ".[$i].id"`
-	gif=$dir/card_first_$id.gif
-
-	if [ -f $gif ];then
-		continue
-	fi
-
-	nn=`ls $static/card_bgg_first_*.png|wc -l`
-	nn=$((nn - 1))
-
-	for ((ii=0;ii<=$nn;ii++))
-	do
-		title=$dir/null
-		o=${title}_first_${ii}.png
-		br=$static/card_bgg_first_${ii}.png
-		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
-		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
-		rm $o.back
-
-		export NVM_DIR="$HOME/.nvm"
-		[ -s "$path_nvm_sh" ] && \. "$path_nvm_sh"
-		nvm use 17
-		nvm i squoosh-cli
-		squoosh-cli --webp '{"quality":100}' -d $dir --resize '{width:400,height:524}' $o
-
-	done
-
-	convert -layers optimize -loop 0 -delay 40 $dir/null_*.webp $gif
-	rm -f $dir/null_*
-
-done
--- a/scpt/model_gif.zsh
+++ b/scpt/model_gif.zsh
@ -1,38 +0,0 @@
-#!/bin/zsh
-inp=mp4
-for i in *.${inp}
-do
-	ffmpeg -i *.${inp} -r 8 %04d.png
-done
-
-inp=png
-out=jpg
-for i in *.${inp}
-do
-convert ${i%.*}.${inp} -gravity center -crop 825x1080+0+0 ${i%.*}_crop.${inp}
-convert ${i%.*}_crop.${inp} -resize 1620x2160! ${i%.*}.${out}
-done
-
-nn=`ls *.jpg|wc -l`
-static=~/ai/card/static/img
-bg=$static/card_bg.png
-br=$static/card_br.png
-for ((ii=1;ii<=$nn;ii++))
-	do
-		s=`ls *.jpg|awk "NR==$ii"`
-		o=null_${ii}.png
-		echo $o
-		if [ -f $b ];then
-			echo yes
-			else
-				echo no
-		fi
-		composite -gravity north  -geometry +0+160 -compose over $s $bg $o.back
-		composite -gravity north  -geometry +0+0 -compose over $br $o.back $o
-		rm $o.back
-done
-
-gif=`ls *.mp4|cut -d . -f 1`.gif
-convert -layers optimize -loop 0 -delay 40 null_*.png $gif
-rm *.jpg
-rm *.png
--- a/scpt/ogimage.zsh
+++ b/scpt/ogimage.zsh
@ -4,8 +4,8 @@ url=https://card.syui.ai
 d=${0:a:h}
 dd=${0:a:h:h}
 dir=$dd/public/card
-o_dir=$dd/static/img
-static=$dd/static/img
+o_dir=$dd/public/static/img
+static=$dd/public/static/img
 json=$dd/public/json/card.json
 mkdir -p $dir
 mkdir -p $static
@ -25,6 +25,7 @@ do
 	index=$o_dir/$id/index.html

 	if [ ! -f $oo ];then
+		echo $oo
 		convert $o -gravity center -extent 8000x4000 $oo
 	fi

--- a/src/App.vue
+++ b/src/App.vue
@ -1,7 +1,7 @@
 <template>
 	<div id="app">
-		<link rel="stylesheet" href="https://syui.ai/bower_components/icomoon/css/icomoon.css" />
-		<link rel="stylesheet" href="https://syui.ai/bower_components/font-awesome/css/all.min.css" />
+		<link rel="stylesheet" href="https://yui.syui.ai/pkg/icomoon/css/icomoon.css" />
+		<link rel="stylesheet" href="https://yui.syui.ai/pkg/font-awesome/css/all.min.css" />
 		<div class="menu">
 			<a href="/" class="top-icon"><span class="icon-ai"></span></a> 
 			<code v-if="loc === 'te'"><a href="https://bsky.app/profile/yui.syui.ai" target="_blank">@yui.syui.ai</a> /ten</code>
@ -60,59 +60,30 @@
 				</div>

 				<div class="card_kira_center">
-					<button v-on:click="cardoriginstatus" class="card_origin_status"><span class="icon-ai"></span></button> <button v-if="cards.data.filter((v) => v.skill == '3d' && (v.card >= 0 && v.card <= 14 || v.card == 64))[0]" v-on:click="glb_status = !glb_status"><i class="fa-solid fa-star-half-stroke"></i></button> <button v-if="model == true || cards.data.filter((v) => v.skill == 'model').length >= 1" v-on:click="vrmviewer" class="unity"><i class="fa-solid fa-cube" id="vrm_button"></i></button>
+					<button v-on:click="cardoriginstatus" class="card_origin_status"><span class="icon-ai"></span></button> <button v-if="cards.data.filter((v) => v.skill == '3d' && (v.card >= 0 && v.card <= 14 || v.card == 64))[0]" v-on:click="glb_status = !glb_status"  class="unity"><i class="fa-solid fa-cube" id="vrm_button"></i></button> <button v-if="model == true || cards.data.filter((v) => v.skill == 'model').length >= 1" v-on:click="vrmviewer"><i class="fa-solid fa-gamepad"></i></button> <button v-if="game == true" v-on:click="term_status = !term_status"><i class="fa-solid fa-terminal"></i></button>
 				</div>

+				<!--
+				1st first
+				2nd second 
+				3rd third
+				4th fourth
+				5th fifth
+				6th sixth
+				7th seventh
+				8th eighth
+				-->
+
 				<span class="card-fav" v-if="card_origin_status">
 					<span class="card-fav" v-for="k in cards.data">
-						<tr class="card-status-first" v-if="k.status == 'first' && k.card !== null" >
+						<tr class="card-status-first" v-if="k.status == 'first' || k.status == 'second' || k.status == 'second' || k.status == 'third' || k.status == 'fourth' || k.status == 'fifth' || k.status == 'sixth' || k.status == 'yui'" >
 							<span class="card-wrapper">
 								<span class="reflection">
 									<img :src='"/card/card_" + k.card + ".webp"' class="card">
 								</span>
-								<span class="card pattern"></span>
-								<span class="card color"></span>
-								<span class="card highlight"></span>
-							</span>
-						</tr>
-						<tr class="card-status-first" v-else-if="k.status == 'second' && k.card !== null">
-							<span class="card-wrapper">
-								<span class="reflection">
-									<img :src='"/card/card_" + k.card + ".webp"' class="card">
-								</span>
-								<span class="card pattern-s"></span>
-								<span class="card color-s"></span>
-								<span class="card highlight-s"></span>
-							</span>
-						</tr>
-						<tr class="card-status-first" v-else-if="k.status == 'third' && k.card !== null">
-							<span class="card-wrapper">
-								<span class="reflection">
-									<img :src='"/card/card_" + k.card + ".webp"' class="card">
-								</span>
-								<span class="card pattern-t"></span>
-								<span class="card color-t"></span>
-								<span class="card highlight-t"></span>
-							</span>
-						</tr>
-						<tr class="card-status-first" v-else-if="k.status == 'fourth' && k.card !== null">
-							<span class="card-wrapper">
-								<span class="reflection">
-									<img :src='"/card/card_" + k.card + ".webp"' class="card">
-								</span>
-								<span class="card pattern-f"></span>
-								<span class="card color-f"></span>
-								<span class="card highlight-f"></span>
-							</span>
-						</tr>
-						<tr class="card-status-first" v-else-if="k.status == 'yui' && k.card !== null">
-							<span class="card-wrapper">
-								<span class="reflection">
-									<img :src='"/card/card_" + k.card + ".webp"' class="card">
-								</span>
-								<span class="card pattern-yui"></span>
-								<span class="card color-yui"></span>
-								<span class="card highlight-yui"></span>
+								<span :class="'card pattern-' + k.status"></span>
+								<span :class="'card color-' + k.status"></span>
+								<span :class="'card highlight-' + k.status"></span>
 							</span>
 						</tr>
 					</span>
@ -142,13 +113,18 @@
 					<model-viewer v-if="glb_next !== 0" class="ar" :src="'/obj/card_' + glb_next + '.glb'" ar-modes="scene-viewer webxr quick-look" auto-rotate autoplay ar camera-controls></model-viewer>
 					<model-viewer v-else class="ar" :src="'/obj/card_' + cards.data.filter((v) => v.skill == '3d' && (v.card >= 1 && v.card <= 14 || v.card == 64))[0].card + '.glb'" ar-modes="scene-viewer webxr quick-look" auto-rotate autoplay ar camera-controls></model-viewer>
 					<span v-for="(ii, index) in cards.data.filter((v) => v.skill == '3d' && (v.card >= 1 && v.card <= 14 || v.card == 64))" class="glb">
+						<thead>
+							<tr>
 								<img :src='"/card/card_" + ii.card + ".webp"' v-on:click="glb_next = ii.card">
+							</tr>
+							<tr>{{ ii.cp }}</tr>
+						</thead>
 					</span>
 				</div>

-				<!-- 
-				first(ファースト) second(セカンド) third(サード) fourth(フォース) fifth(フィフス) sixth(スィクスス) seventh(セヴンス) eighth(エイトス) ninth(ナインス) tenth(テンス) eleventh(イレヴンス) twelfth(トウェルフス) thirteenth(サーティーンス) fifteenth(フィフティーンス) sixteenth(スィクスティーンス) seventeenth(セヴンティーンス) eighteenth(エイティーンス) nineteenth(ナインティーンス) twentieth(トウィンティイス)
-				-->
+				<div class="term" v-if="term_status == true">
+					<iframe :src="'https://term.syui.ai?user=' + username + '&did=' + did + '&id=' + id" allowfullscreen frameborder="0"></iframe>
+				</div>

 				<span class="menu-right-top" v-if="cards.data.find((v) => v.card == 43)">
 					<button v-on:click="book_user = !book_user">book</button>
@ -174,80 +150,16 @@
 							{{ ii = cards.data.find((v) => v.id == user_fav) }}
 						</span>

-						<thead v-if="ii.status == 'first' && ii.card !== null" class="card-fav">
-							<tr class="card-status-first">
-								<span class="card-wrapper">
-									<span class="reflection">
-										<img :src='"/card/card_" + ii.card + ".webp"' class="card">
-									</span>
-									<span class="card pattern"></span>
-									<span class="card color"></span>
-									<span class="card highlight"></span>
-								</span>
-							</tr>
-						</thead>

-						<thead v-else-if="ii.status == 'second' && ii.card !== null" class="card-fav">
+						<thead v-if="ii.status == 'first' || ii.status == 'second' || ii.status == 'second' || ii.status == 'third' || ii.status == 'fourth' || ii.status == 'fifth' || ii.status == 'sixth' || ii.status == 'yui'" class="card-fav">
 							<tr class="card-status-first">
 								<span class="card-wrapper">
 									<span class="reflection">
 										<img :src='"/card/card_" + ii.card + ".webp"' class="card">
 									</span>
-									<span class="card pattern-s"></span>
-									<span class="card color-s"></span>
-									<span class="card highlight-s"></span>
-								</span>
-							</tr>
-						</thead>
-
-						<thead v-else-if="ii.status == 'third' && ii.card !== null" class="card-fav">
-							<tr class="card-status-first">
-								<span class="card-wrapper">
-									<span class="reflection">
-										<img :src='"/card/card_" + ii.card + ".webp"' class="card">
-									</span>
-									<span class="card pattern-t"></span>
-									<span class="card color-t"></span>
-									<span class="card highlight-t"></span>
-								</span>
-							</tr>
-						</thead>
-
-						<thead v-else-if="ii.status == 'yui' && ii.card !== null" class="card-fav">
-							<tr class="card-status-first">
-								<span class="card-wrapper">
-									<span class="reflection">
-										<img :src='"/card/card_" + ii.card + ".webp"' class="card">
-									</span>
-									<span class="card pattern-yui"></span>
-									<span class="card color-yui"></span>
-									<span class="card highlight-yui"></span>
-								</span>
-							</tr>
-						</thead>
-
-						<thead v-else-if="ii.status == 'fourth' && ii.card !== null" class="card-fav">
-							<tr class="card-status-first">
-								<span class="card-wrapper">
-									<span class="reflection">
-										<img :src='"/card/card_" + ii.card + ".webp"' class="card">
-									</span>
-									<span class="card pattern-f"></span>
-									<span class="card color-f"></span>
-									<span class="card highlight-f"></span>
-								</span>
-							</tr>
-						</thead>
-
-						<thead v-else-if="ii.status == 'fifth' && ii.card !== null" class="card-fav">
-							<tr class="card-status-first">
-								<span class="card-wrapper">
-									<span class="reflection">
-										<img :src='"/card/card_" + ii.card + ".webp"' class="card">
-									</span>
-									<span class="card pattern-fifth"></span>
-									<span class="card color-fifth"></span>
-									<span class="card highlight-fifth"></span>
+									<span :class="'card pattern-' + ii.status"></span>
+									<span :class="'card color-' + ii.status"></span>
+									<span :class="'card highlight-' + ii.status"></span>
 								</span>
 							</tr>
 						</thead>
@ -264,7 +176,7 @@
 							</tr>
 						</thead>
 						<tbody><tr v-if='ii.author'>@{{ ii.author }}</tr></tbody>
-						<tbody><tr><span v-if="ii.skill == 'critical'" class="icon-sandar"></span><span v-if="ii.skill == 'post'" class="icon-moon"></span><span v-if="ii.skill == 'luck'" class="icon-api"></span><span v-if="ii.skill == 'ten'" class="icon-power"></span><span v-if="ii.skill == 'lost'">●</span><span v-if="ii.skill == 'dragon'" class="icon-home"></span><span v-if="ii.skill == 'nyan'">▲</span><span v-if="ii.skill == 'yui'" class="icon-ai"></span><span v-if="ii.skill == '3d'">■</span> {{ ii.cp }}</tr></tbody>
+						<tbody><tr><span v-if="ii.skill == 'critical'" class="icon-sandar"></span><span v-if="ii.skill == 'post'" class="icon-moon"></span><span v-if="ii.skill == 'luck'" class="icon-api"></span><span v-if="ii.skill == 'ten'" class="icon-power"></span><span v-if="ii.skill == 'lost'">●</span><span v-if="ii.skill == 'dragon'" class="icon-home"></span><span v-if="ii.skill == 'nyan'">▲</span><span v-if="ii.skill == 'yui'" class="icon-ai"></span><span v-if="ii.skill == '3d'">■</span><span v-if="ii.skill == 'first'" class="icon-moji_a"></span> {{ ii.cp }}</tr></tbody>
 						<tbody><tr class="card-fav-status">✧ {{ ii.status }}</tr></tbody>
 						<tbody v-if="info == true"><tr>ID {{ ii.card }}</tr>
 							<tr>CID {{ ii.id }}</tr></tbody>
@ -318,7 +230,7 @@
 									<img :src='"/card/card_" + ii.card + ".webp"'>
 								</td>
 							</thead>
-							<tbody><tr><span v-if="ii.skill == 'critical'" class="icon-sandar"></span><span v-if="ii.skill == 'post'" class="icon-moon"></span><span v-if="ii.skill == 'luck'" class="icon-api"></span><span v-if="ii.skill == 'ten'" class="icon-power"></span><span v-if="ii.skill == 'dragon'" class="icon-home"></span><span v-if="ii.skill == 'nyan'">▲</span><span v-if="ii.skill == 'yui'" class="icon-ai"></span><span v-if="ii.skill == '3d'">■</span><span v-if="ii.skill == 'model'"><i class="fa-solid fa-cube"></i></span> {{ ii.cp }}</tr></tbody>
+							<tbody><tr><span v-if="ii.skill == 'critical'" class="icon-sandar"></span><span v-if="ii.skill == 'post'" class="icon-moon"></span><span v-if="ii.skill == 'luck'" class="icon-api"></span><span v-if="ii.skill == 'ten'" class="icon-power"></span><span v-if="ii.skill == 'dragon'" class="icon-home"></span><span v-if="ii.skill == 'nyan'">▲</span><span v-if="ii.skill == 'yui'" class="icon-ai"></span><span v-if="ii.skill == '3d'">■</span><span v-if="ii.skill == 'model'"><i class="fa-solid fa-cube"></i></span><span v-if="ii.skill == 'first'" class="icon-moji_a"></span> {{ ii.cp }}</tr></tbody>
 							<tbody v-if="info == true"><tr>ID {{ ii.card }}</tr>
 								<tr>CID {{ ii.id }}</tr>
 								<tr>{{ ii.skill }}</tr>
@ -360,7 +272,7 @@
 									<!--ちらつき-->
 								</td>
 							</thead>
-							<tbody><tr><span v-if="ii.skill == 'critical'" class="icon-sandar"></span><span v-if="ii.skill == 'post'" class="icon-moon"></span><span v-if="ii.skill == 'luck'" class="icon-api"></span><span v-if="ii.skill == 'ten'" class="icon-power"></span><span v-if="ii.skill == 'dragon'" class="icon-home"></span><span v-if="ii.skill == 'nyan'">▲</span><span v-if="ii.skill == 'yui'" class="icon-ai"></span><span v-if="ii.skill == '3d'">■</span><span v-if="ii.skill == 'model'"><i class="fa-solid fa-cube"></i></span> {{ ii.cp }}</tr></tbody>
+							<tbody><tr><span v-if="ii.skill == 'critical'" class="icon-sandar"></span><span v-if="ii.skill == 'post'" class="icon-moon"></span><span v-if="ii.skill == 'luck'" class="icon-api"></span><span v-if="ii.skill == 'ten'" class="icon-power"></span><span v-if="ii.skill == 'dragon'" class="icon-home"></span><span v-if="ii.skill == 'nyan'">▲</span><span v-if="ii.skill == 'yui'" class="icon-ai"></span><span v-if="ii.skill == '3d'">■</span><span v-if="ii.skill == 'model'"><i class="fa-solid fa-cube"></i></span><span v-if="ii.skill == 'first'" class="icon-moji_a"></span> {{ ii.cp }}</tr></tbody>
 							<tbody v-if="info == true"><tr>ID {{ ii.card }}</tr>
 								<tr>CID {{ ii.id }}</tr>
 								<tr>{{ ii.skill }}</tr>
@ -717,7 +629,6 @@

 		<div v-if="loc === 'owner'"  class="text-content">
 			<div v-for="(ii, index) in rcards.data">
-				<div v-show="ii.id !== 0">
 					<div v-show="ii.id < 15" class="card-owner-one">
 						<button :id="ii.id">card : {{ii.id }} / {{ ii.h }}</button>
 						<p><img :src='"/card/card_" + ii.id + ".webp"'></p>
@ -823,7 +734,6 @@
 					</div>
 				</div>
 		</div>
-		</div>

 		<div v-if="loc === 'te'" class="text-content">
 			<div class="iten-start">
@ -836,7 +746,7 @@
 						<p :id="ii.id">[{{ ii.ten }}] {{ ii.h }} / {{ ii.id }}00</p>
 						<p><img :src='"/card/card_" + ii.id + ".webp"'></p>
 					</div>
-					<div v-show="ii.id == 29 || ii.id == 33 || ii.id == 36 || ii.id == 46 || ii.id == 47 || ii.id == 60 || ii.id == 64 || ii.id == 67 || ii.id == 69 || ii.id == 76 || ii.id == 77 || ii.id == 78|| ii.id == 86|| ii.id == 89 || ii.id == 90 || ii.id == 95||ii.id == 121" class="card-owner-one">
+					<div v-show="ii.id == 29 || ii.id == 33 || ii.id == 36 || ii.id == 46 || ii.id == 47 || ii.id == 60 || ii.id == 64 || ii.id == 67 || ii.id == 69 || ii.id == 76 || ii.id == 77 || ii.id == 78|| ii.id == 86|| ii.id == 89 || ii.id == 90 || ii.id == 95||ii.id == 122||ii.id == 123" class="card-owner-one">
 						<p :id="ii.id"><button>id:{{ ii.id }}</button></p>
 						<p :id="ii.id">[{{ ii.ten }}] {{ ii.h }} / {{ ii.id }}00 <span class="icon-power"></span></p>
 						<p><img :src='"/card/card_" + ii.id + ".webp"'></p>
@ -845,12 +755,32 @@
 			</div>
 		</div>

+		<div v-if="loc === 'c'" class="text-content">
+			<div class="iten-start">
+				<h3><span class="icon-moji_k"></span> ALL</h3>
+			</div>
+			<table id="card-box">
+				<span v-for="(ii, index) in rcards.data">
+					<thead>
+						<td>
+							<img :src='"/card/card_" + ii.id + ".webp"'>
+						</td>
+					</thead>
+					<tbody>
+						<tr>
+							<button>id : {{ ii.id }}</button>
+						</tr>
+						<tr> <button v-if="ii.ten"><span class="icon-power"></span></button> <button v-if="ii.ten_skill == true" ><span class="icon-ai"></span></button> <button v-if="ii.first_skill == true" ><span class="icon-moji_a"></span></button>
+						</tr>
+					</tbody>
+				</span>
+			</table>
+		</div>
+
 		<div v-if="loc === 'te'" class="text-content">
 			<div class="iten-start">
 				<p><code>/ten h</code> : ヘルプ</p>
 				<p><code>/ten start</code> : 7ターンまでに文字をそろえる</p>
-				<p><span class="icon-power"></span> はカードを持ってる人しか出せない</p>
-				<blockquote>ACEHIKMOSTUWYZ</blockquote>
 			</div>
 		</div>

@ -925,6 +855,7 @@ export default {
 			card: null,
 			cards: null,
 			loc: window.location.pathname.split('/').slice(-1)[0],
+			username: null,
 			id: null,
 			model: null,
 			record: null,
@ -956,6 +887,7 @@ export default {
 			model_attack: null,
 			model_critical: null,
 			model_critical_d: null,
+			game: null,
 			game_lv: null,
 			api_url: null,
 			bsky_mode: false,
@ -963,6 +895,7 @@ export default {
 			card_origin_status: false,
 			useragent: window.navigator.userAgent.toLowerCase(),
 			iframe_status: false,
+			term_status: false,
 			sort_key: null,
 		}
 	},
@ -985,7 +918,7 @@ export default {
 			}
 			this.api_url = "https://api.syui.ai/";
 		}
-		if (loc === 'owner' || loc === 'te'){
+		if (loc === 'owner' || loc === 'te' || loc === 'c'){
 			axios
 				.get("/json/card.json")
 				.then(response => (this.rcards = response));
@ -1007,18 +940,20 @@ export default {
 			axios.get(url,{ crossdomain: true })
 				.then(response => { 
 					this.record = response;
+					this.username = this.record.data.find((v) => v.username == loc).username;
 					this.id = this.record.data.find((v) => v.username == loc).id;
 					this.model = this.record.data.find((v) => v.username == loc).model;
 					this.did = this.record.data.find((v) => v.username == loc).did;
 					this.aiten = this.record.data.find((v) => v.username == loc).aiten;
 					this.bsky_mode = this.record.data.find((v) => v.username == loc).bsky;
 					this.user_fav = this.record.data.find((v) => v.username == loc).fav;
+					this.game = this.record.data.find((v) => v.username == loc).game;
 					this.game_lv = this.record.data.find((v) => v.username == loc).game_lv;
 					this.model_attack = this.record.data.find((v) => v.username == loc).model_attack;
 					this.model_critical = this.record.data.find((v) => v.username == loc).model_critical;
 					this.model_critical_d = this.record.data.find((v) => v.username == loc).model_critical_d;
 					this.user_room = this.record.data.find((v) => v.username == loc).room;
-					let url = this.api_url + "users/" + this.id + "/card?itemsPerPage=3000";
+					let url = this.api_url + "users/" + this.id + "/card?itemsPerPage=4000";
 					axios
 					.get("/json/card.json")
 					.then(response => (this.rcards = response));
@ -1343,60 +1278,6 @@ span.card-fav-su {
 	display:none;
 }

-span.pattern-s {
-  background: repeating-radial-gradient(circle at -150% -25%, #000, #777 3px, #000 3px);
-  background-position: 50% 50%;
-  background-size: 120% 120%;
-  mix-blend-mode: color-dodge;
-  opacity: 0.3;
-}
-
-span.color-s {
-  background: linear-gradient(115deg, transparent 20%, #000 30%, transparent 48% 52%, #000 70%, transparent);
-  background-position: 50% 50%;
-  background-size: 200% 200%;
-  mix-blend-mode: overlay;
-}
-
-span.card-wrapper:hover > span.pattern-s {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.color-s {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.highlight-s {
-  background-repeat: no-repeat;
-}
-
-span.pattern-t {
-  background: repeating-radial-gradient(circle at -150% -25%, #c71585, #777 3px, #ffff00 3px);
-  background-position: 50% 50%;
-  background-size: 120% 120%;
-  mix-blend-mode: color-dodge;
-  opacity: 0.3;
-}
-
-span.color-t {
-  background: linear-gradient(115deg, transparent 20%, #c71585 30%, transparent 48% 52%, #c71585 70%, transparent);
-  background-position: 50% 50%;
-  background-size: 200% 200%;
-  mix-blend-mode: overlay;
-}
-
-span.card-wrapper:hover > span.pattern-t {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.color-t {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.highlight-t {
-  background-repeat: no-repeat;
-}
-
 span.pattern-yui {
  background: repeating-radial-gradient(circle at -150% -25%, #ffff00, #000 3px, #ffff00 3px);
  background-position: 50% 50%;
@ -1412,19 +1293,7 @@ span.color-yui {
  mix-blend-mode: overlay;
 }

-span.card-wrapper:hover > span.pattern-yui {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.color-yui {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.highlight-yui {
-  background-repeat: no-repeat;
-}
-
-span.pattern-f {
+span.pattern-first {
  background: repeating-radial-gradient(circle at -150% -25%, #000, #32cd32 3px, #1e90ff 3px);
  background-position: 50% 50%;
  background-size: 120% 120%;
@ -1432,19 +1301,56 @@ span.pattern-f {
  opacity: 0.3;
 }

-span.color-f {
+span.color-first {
  background: linear-gradient(115deg, transparent 20%, #00ffff 30%, transparent 48% 52%, #40e0d0 70%, transparent);
  background-position: 50% 50%;
  background-size: 200% 200%;
  mix-blend-mode: overlay;
 }

-span.card-wrapper:hover > span.pattern-f {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
+span.pattern-second {
+  background: repeating-radial-gradient(circle at -150% -25%, #000, #777 3px, #000 3px);
+  background-position: 50% 50%;
+  background-size: 120% 120%;
+  mix-blend-mode: color-dodge;
+  opacity: 0.3;
 }

-span.card-wrapper:hover > span.color-f {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
+span.color-second {
+  background: linear-gradient(115deg, transparent 20%, #000 30%, transparent 48% 52%, #000 70%, transparent);
+  background-position: 50% 50%;
+  background-size: 200% 200%;
+  mix-blend-mode: overlay;
+}
+
+span.pattern-third {
+  background: repeating-radial-gradient(circle at -150% -25%, #c71585, #777 3px, #ffff00 3px);
+  background-position: 50% 50%;
+  background-size: 120% 120%;
+  mix-blend-mode: color-dodge;
+  opacity: 0.3;
+}
+
+span.color-third {
+  background: linear-gradient(115deg, transparent 20%, #c71585 30%, transparent 48% 52%, #c71585 70%, transparent);
+  background-position: 50% 50%;
+  background-size: 200% 200%;
+  mix-blend-mode: overlay;
+}
+
+span.pattern-fourth {
+  background: repeating-radial-gradient(circle at -150% -25%, #fff, #777 3px, #fff 3px);
+  background-position: 50% 50%;
+  background-size: 120% 120%;
+  mix-blend-mode: color-dodge;
+  opacity: 0.3;
+}
+
+span.color-fourth {
+  background: linear-gradient(115deg, transparent 20%, #40A4BF 30%, transparent 48% 52%, #404FBF 70%, transparent);
+  background-position: 50% 50%;
+  background-size: 200% 200%;
+  mix-blend-mode: overlay;
 }

 span.pattern-fifth {
@ -1462,43 +1368,30 @@ span.color-fifth {
  mix-blend-mode: overlay;
 }

-span.card-wrapper:hover > span.pattern-fifth {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.color-fifth {
-  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
-}
-
-span.card-wrapper:hover > span.highlight-yui {
-  background-repeat: no-repeat;
-}
-
-span.pattern {
-  background: repeating-radial-gradient(circle at -150% -25%, #fff, #777 3px, #fff 3px);
+span.pattern-sixth {
+  background: repeating-radial-gradient(circle at center, #f1f1f1, #313131 3px, #fff700 3px);
  background-position: 50% 50%;
  background-size: 120% 120%;
  mix-blend-mode: color-dodge;
  opacity: 0.3;
 }

-span.color {
-  background: linear-gradient(115deg, transparent 20%, #40A4BF 30%, transparent 48% 52%, #404FBF 70%, transparent);
+span.color-sixth {
+  background: linear-gradient(115deg, transparent 20%, #f1f1f1 30%, transparent 48% 52%, #313131 70%, transparent);
  background-position: 50% 50%;
  background-size: 200% 200%;
  mix-blend-mode: overlay;
 }

-span.card-wrapper:hover > span.pattern {
+span.card-wrapper:hover > span.pattern-yui,span.card-wrapper:hover >  span.pattern-first,span.card-wrapper:hover >  span.pattern-second,span.card-wrapper:hover >  span.pattern-third,span.card-wrapper:hover >  span.pattern-fourth,span.card-wrapper:hover >  span.pattern-fifth,span.card-wrapper:hover >  span.pattern-sixth {
  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
 }

-span.card-wrapper:hover > span.color {
+span.card-wrapper:hover > span.color-yui,span.card-wrapper:hover > span.color-first,span.card-wrapper:hover > span.color-second,span.card-wrapper:hover > span.color-third,span.card-wrapper:hover > span.color-fourth,span.card-wrapper:hover > span.color-fifth,span.card-wrapper:hover > span.color-sixth {
  background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
 }

-span.card-wrapper:hover > span.highlight {
-  background: radial-gradient(circle at calc(var(--ratio-x) * 100%) calc(var(--ratio-y) * 100%), hsl(0 0% 100% / 0.2), transparent 50%);
+span.card-wrapper:hover > span.highlight-yui,span.card-wrapper:hover > span.highlight-first,span.card-wrapper:hover > span.highlight-second,span.card-wrapper:hover > span.highlight-third,span.card-wrapper:hover > span.highlight-fourth,span.card-wrapper:hover > span.highlight-fifth,span.card-wrapper:hover > span.highlight-sixth  {
  background-repeat: no-repeat;
 }

@ -1823,7 +1716,7 @@ span.glb {
 blockquote.did {
 	background-color: #fff;
 	color: #000;
-
 	text-align: left;
 }
+
 </style>
Author	SHA1	Message	Date
syui	26260f6a06	css fav status	2024-04-11 00:48:15 +09:00
syui	3ea1ab0502	update	2024-04-11 00:48:14 +09:00